/* Solution detail pages — the shared design system behind the nineteen
   /solutions/<axis>/<page> bodies.

     by-industry        Manufacturing, Healthcare, Hotels & Hospitality, Retail,
                        Education, Banking & Microfinance, NGOs, Logistics
     by-business-size   SMEs, Mid-Size Companies, Enterprises
     by-department      HR Teams, Finance Teams, Management & CEOs,
                        Operations Teams
     by-hr-maturity-model
                        Foundational, Structured, Advanced, Strategic

   Every one of those pages is stored in webpages.page_html and rendered by
   ContentPage.razor's /{*Slug} catch-all — there is no component for any of
   these URLs and this redesign does not add one. The bodies are written
   entirely against qsd- classes defined here, instead of the per-page Tailwind
   utilities they carried before, so the whole set is designed from this one
   file. Nothing here changes copy, links, images or buttons: those live in the
   markup, and docs/solutions-child-pages-redesign.sql is where they are.

   WHERE THIS SITS IN THE FAMILY. Three levels of one tree, and they now read
   as one journey:

     /solutions                     css/pages/solutions.css   (.qsol-)
     /solutions/by-industry         css/pages/solutions.css   (.qsol-)
     /solutions/by-industry/retail  this file                 (.qsd-)

   The category pages one level up are the same object as /solutions itself — a
   hero, a numbered list of ways in, Explore More, a closing band — so they
   share its sheet rather than duplicating it. A detail page has six more bands
   of its own and gets this one. Both are cut from the same palette and open on
   the same pale indigo hero, so walking down the tree never feels like
   changing sites.

   PREFIX DISCIPLINE. App.razor links this globally, like every other page
   sheet, so every selector is scoped under .qsd-page and there are no bare
   element selectors. The one @keyframes here is prefixed for the same reason:
   keyframe names are global, and the qh-, qpr-, qmod-, qsol-, qab-, qp-, qct-,
   qco-, qcp-, qps- and qsm- sheets each declare their own.

   WHY THE MARKUP CARRIES NO UTILITY CLASSES. The Tailwind bundle the site
   serves is a prebuilt Next.js artefact, so it contains only the utilities that
   build emitted; a class invented in the Admin Panel textarea does not exist at
   runtime. These rules are unlayered and the bundle's utilities live inside
   @layer, so this sheet wins regardless of specificity. `boxed-container` IS in
   the bundle and is used deliberately — it is the site's own container (max
   width and gutters stepping 1200 → 1400 → 1600px), so these pages line up with
   the header, the footer and the testimonial rail above it.

   PALETTE. The logo ramp the rest of the site already shares — #4f46e5 indigo
   → #7c3aed violet → #a22dea magenta — with the brand's gold #d4af37 as the one
   secondary. The old pages tinted their cards with eight unrelated Tailwind
   hues (green, cyan, pink, amber, red, blue…), a different set in each of the
   four card bands, which is why no two of them looked like the same product.
   Here the accent is one four-stop ramp applied by position, so a grid of six
   cards is one gradient of colour rather than six decisions.

   HOW THE DESIGN IS ORGANISED
     1  tokens            2  page shell + bands      3  type
     4  hero              5  key-points panel        6  the button pair
     7  overview split    8  card grids              9  FAQ
    10  explore more     11  closing band           12  responsive
    13  motion + focus                                                        */

/* ------------------------------------------------------------- 1. tokens */

.qsd-page {
    /* Ink. Headings sit near-black with a blue cast rather than at #000 —
       what keeps a page of this many cards from looking like a printout. */
    --qsd-ink: #14103a;
    --qsd-ink-soft: #4a4566;
    --qsd-ink-mute: #6f6a8a;
    --qsd-ink-invert: #f4f2ff;

    /* Brand */
    --qsd-brand: #4f46e5;
    --qsd-brand-lit: #6366f1;
    --qsd-violet: #7c3aed;
    --qsd-magenta: #a22dea;
    --qsd-gold: #c19b1f;
    --qsd-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);

    /* Surfaces. The tinted band is deliberately close to white: with eight
       bands stacked, anything stronger reads as stripes rather than rhythm. */
    --qsd-surface: #ffffff;
    --qsd-surface-tint: #f8f7fe;
    --qsd-line: #e9e7f7;
    --qsd-line-soft: #f0eefa;

    /* Shape */
    --qsd-radius-sm: 12px;
    --qsd-radius: 18px;
    --qsd-radius-lg: 24px;

    /* Elevation. Two layers each — a tight contact shadow that draws the edge
       and a wide soft one that lifts. Hover tints the wide layer indigo rather
       than deepening the grey, which on a tinted band only looks dirty. */
    --qsd-shadow-sm: 0 1px 2px rgba(20, 16, 58, .04), 0 12px 24px -18px rgba(20, 16, 58, .40);
    --qsd-shadow: 0 1px 3px rgba(20, 16, 58, .05), 0 22px 44px -26px rgba(79, 70, 229, .40);
    --qsd-shadow-lg: 0 2px 6px rgba(20, 16, 58, .07), 0 34px 70px -40px rgba(79, 70, 229, .55);

    /* Rhythm */
    --qsd-band: clamp(3.25rem, 6vw, 5.75rem);
    --qsd-gap: clamp(1rem, 1.5vw, 1.5rem);
    --qsd-card-pad: clamp(1.3rem, 1.9vw, 1.75rem);
    /* Body copy is capped by its own measure rather than by the column, so a
       wide screen widens the grids without stretching the sentences. */
    --qsd-measure: 68ch;

    /* ContentPage.razor wraps every stored body in a div carrying
       style="color:#1a1a1a;line-height:1.8" inline. A descendant rule cannot
       beat an inline style on the ancestor, so both are restated here for the
       page root — without them 1.8 silently inflates every badge, pill, button
       and card heading that sets no line-height of its own. Do not remove. */
    color: var(--qsd-ink-soft);
    line-height: 1.65;

    width: 100%;
    /* The body sits inside a flex row in ContentPage; without this a wide grid
       could push the column past the viewport. */
    min-width: 0;
    background: var(--qsd-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.qsd-page ::selection {
    background: #ddd9ff;
    color: var(--qsd-ink);
}

/* The JSON-LD block renders as nothing, but a stray `display` from elsewhere
   would give it a box. */
.qsd-page > script {
    display: none;
}

/* ---------------------------------------------- 2. page shell and bands */

.qsd-page .qsd-section {
    position: relative;
    padding-block: var(--qsd-band);
    background: var(--qsd-surface);
}

/* A wash rather than a flat fill: the band is lightest where the cards sit and
   settles towards its edges, so the seam with the white section above it is a
   gradient rather than a line. */
.qsd-page .qsd-section--tint {
    background:
        radial-gradient(120% 80% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
        var(--qsd-surface-tint);
}

/* Hairline only where two bands of the same weight meet — the one place the
   wash cannot separate them on its own. */
.qsd-page .qsd-section--tint + .qsd-section--tint {
    border-top: 1px solid var(--qsd-line-soft);
}

.qsd-page .qsd-section > .boxed-container,
.qsd-page .qsd-hero > .boxed-container,
.qsd-page .qsd-cta > .boxed-container {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------- 3. type */

.qsd-page .qsd-head {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 3.4vw, 3rem);
    text-align: center;
}

.qsd-page .qsd-title {
    margin: 0;
    color: var(--qsd-ink);
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.026em;
}

/* A short brand rule under the section heading, in place of the eight
   different heading colours the old pages used to tell their bands apart. */
.qsd-page .qsd-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--qsd-brand), var(--qsd-magenta));
}

/* The Overview heading sits beside its illustration rather than over a grid,
   so it is left-aligned and its rule starts at the text. */
.qsd-page .qsd-title--left {
    text-align: left;
}

.qsd-page .qsd-title--left::after {
    margin-inline: 0;
}

.qsd-page .qsd-prose {
    margin: 0 0 1.05em;
    max-width: var(--qsd-measure);
    font-size: clamp(1rem, .97rem + .12vw, 1.0625rem);
    line-height: 1.75;
    color: var(--qsd-ink-soft);
}

.qsd-page .qsd-prose:last-child {
    margin-bottom: 0;
}

/* Emphasis the old bodies set with font-medium, and in two places with an
   indigo of its own. Kept as weight rather than colour: inside a paragraph a
   second colour reads as a link that does not click. */
.qsd-page .qsd-em {
    font-weight: 650;
    color: var(--qsd-ink);
}

/* Inline links in prose. The old markup underlined them in #2563eb, a blue
   that appears nowhere else on the site. */
.qsd-page .qsd-a {
    color: var(--qsd-brand);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: color .2s ease, background-size .2s ease;
}

.qsd-page .qsd-a:hover,
.qsd-page .qsd-a:focus-visible {
    color: var(--qsd-magenta);
    background-size: 100% 2px;
    text-decoration: none;
}

/* ---------------------------------------------------------------- 4. hero */

.qsd-page .qsd-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.25rem, 6vw, 5.5rem) clamp(3.5rem, 6.5vw, 6rem);
    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 —
   the same seam /solutions draws, so the two heroes end the same way. */
.qsd-page .qsd-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. */
.qsd-page .qsd-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
}

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

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

.qsd-page .qsd-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

/* A grid child's default min-width: auto refuses to shrink below its content,
   so one long unbroken string in the copy — a URL an editor pastes in — would
   push the panel off the side of the band rather than wrapping. */
.qsd-page .qsd-hero__copy {
    min-width: 0;
}

.qsd-page .qsd-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: .8125rem;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--qsd-brand);
}

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

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

.qsd-page .qsd-hero__title {
    margin: 1.25rem 0 0;
    color: var(--qsd-ink);
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.028em;
}

.qsd-page .qsd-hero__lede {
    margin: 1.25rem 0 0;
    max-width: 34em;
    font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    line-height: 1.7;
    color: var(--qsd-ink-mute);
}

/* ------------------------------------------------ 5. key-points panel */

/* The list opposite the hero copy — "Key for Retail", "Key for Finance
   Teams" — six numbered rows on every page. A raised white card on the tinted
   band, so the first screen has a focal point instead of two flat halves; the
   old one was a grey box with a grey border on a pale gradient. */
.qsd-page .qsd-panel {
    position: relative;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    border-radius: var(--qsd-radius-lg);
    background: #fff;
    border: 1px solid #eceafb;
    box-shadow:
        0 2px 6px -2px rgba(20, 16, 58, .07),
        0 40px 76px -46px rgba(28, 20, 84, .70);
}

/* The ramp as a top edge, so the card belongs to the brand without being
   tinted by it. */
.qsd-page .qsd-panel::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);
}

.qsd-page .qsd-panel__label {
    margin: 0 0 1.15rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--qsd-line-soft);
    color: var(--qsd-brand);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.qsd-page .qsd-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qsd-page .qsd-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 10px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
}

.qsd-page .qsd-point + .qsd-point {
    margin-top: 2px;
}

.qsd-page .qsd-point:hover {
    background: #f6f4ff;
    border-color: #ece8fd;
}

/* The number tile. Four stops of the ramp, cycled by position, so six rows
   read as one sequence rather than six copies of one row — the old panel gave
   every row the same indigo chip. */
.qsd-page .qsd-point__num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #fff;
    font-size: .8125rem;
    font-weight: 750;
    line-height: 1;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 10px 20px -12px rgba(79, 70, 229, .9);
}

.qsd-page .qsd-point:nth-child(4n + 2) .qsd-point__num {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    box-shadow: 0 10px 20px -12px rgba(124, 58, 237, .9);
}

.qsd-page .qsd-point:nth-child(4n + 3) .qsd-point__num {
    background: linear-gradient(135deg, #a22dea, #b44df0);
    box-shadow: 0 10px 20px -12px rgba(162, 45, 234, .9);
}

.qsd-page .qsd-point:nth-child(4n + 4) .qsd-point__num {
    background: linear-gradient(135deg, #c19b1f, #d4af37);
    box-shadow: 0 10px 20px -12px rgba(196, 155, 31, .9);
}

.qsd-page .qsd-point__body {
    min-width: 0;
}

.qsd-page .qsd-point__title {
    margin: 0;
    color: var(--qsd-ink);
    font-size: .96875rem;
    font-weight: 700;
    line-height: 1.35;
}

.qsd-page .qsd-point__desc {
    margin: 4px 0 0;
    font-size: .84375rem;
    line-height: 1.55;
    color: var(--qsd-ink-mute);
}

/* ------------------------------------------------- 6. the button pair */

/* Both bands carry the same two calls to action, authored as <ActionButton>
   and turned into anchors by CmsHtml — .startFreeTrial and .bookADemo come
   from the site's compiled bundle. .qsd-actions is the hook rather than the
   hero and the closing band separately, because it appears in exactly those
   two places and nowhere else, so the pair is restyled together by
   construction and cannot drift apart. Everything under .qsd-page is invisible
   to the rest of the site, where these two classes keep the bundle's own
   appearance. !important appears only where the bundle used it first and
   specificity alone cannot win.

   THE NGOs PAGE STORES ITS FOUR BUTTONS AS PLAIN ANCHORS rather than as
   <ActionButton>, and they stay plain anchors: .startFreeTrial is what the
   site's conversion tracking selects on, so promoting an untracked link into
   it would start counting clicks that were never counted before — a behaviour
   change, and the brief for this work was the design. They carry
   .qsd-btn--primary and .qsd-btn--ghost instead, which nothing outside this
   sheet reads, and every rule below names them beside the bundle's pair so
   the two spellings are the same two buttons. */
.qsd-page .qsd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1.75rem;
    /* Undo the CMS wrapper's inherited 1.8, which would otherwise make both
       buttons a third taller than their labels need. */
    line-height: 1.2;
}

.qsd-page .qsd-actions > a {
    flex: 0 1 auto;
    justify-content: center;
    gap: .6rem;
    min-width: 11.5rem;
    padding: .95rem 1.6rem;
    border-radius: 12px;
    font-size: .96875rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease,
                background-color .2s ease, border-color .2s ease;
}

.qsd-page .qsd-actions > a.startFreeTrial,
.qsd-page .qsd-actions > a.qsd-btn--primary {
    background: var(--qsd-gradient);
    border-color: rgba(255, 255, 255, .40);
    color: #ffffff !important;
    box-shadow:
        0 2px 4px rgba(20, 16, 58, .16),
        0 18px 32px -16px rgba(79, 70, 229, .70);
}

.qsd-page .qsd-actions > a.startFreeTrial:hover,
.qsd-page .qsd-actions > a.qsd-btn--primary:hover {
    background: linear-gradient(135deg, #4429d6 0%, #5f1fd0 55%, #7016c4 100%) !important;
    transform: translateY(-2px);
    box-shadow:
        0 3px 6px rgba(20, 16, 58, .18),
        0 24px 40px -18px rgba(79, 70, 229, .78);
}

.qsd-page .qsd-actions > a.bookADemo,
.qsd-page .qsd-actions > a.qsd-btn--ghost {
    background: #ffffff !important;
    color: var(--qsd-ink) !important;
    box-shadow:
        0 2px 4px rgba(20, 16, 58, .08),
        0 14px 26px -16px rgba(20, 16, 58, .45);
}

.qsd-page .qsd-actions > a.bookADemo:hover,
.qsd-page .qsd-actions > a.qsd-btn--ghost:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
    box-shadow:
        0 3px 6px rgba(20, 16, 58, .10),
        0 20px 34px -18px rgba(20, 16, 58, .55);
}

/* On the pale hero the white pill needs an edge to be a button at all; on the
   dark closing band its own fill is the contrast and a border only fringes
   it. */
.qsd-page .qsd-hero .qsd-actions > a.bookADemo,
.qsd-page .qsd-hero .qsd-actions > a.qsd-btn--ghost {
    border-color: #d9d3f7;
}

.qsd-page .qsd-cta .qsd-actions > a.bookADemo,
.qsd-page .qsd-cta .qsd-actions > a.qsd-btn--ghost {
    border-color: #ffffff;
}

/* The badge on the ghost button. The bundle masks a hollow tick-in-a-circle in
   here and paints it with currentColor, which on a white pill is a grey
   outline glyph; this swaps the mask for a solid disc with a play triangle
   knocked out of it — one path, fill-rule evenodd — and paints the disc
   indigo, so the triangle is the white of the button showing through.
   order:-1 moves it in front of the label; it is a flex item like any other,
   the button being inline-flex. Only mask-image, colour, size and order are
   set: position, repeat and contain sizing already come from the bundle. */
.qsd-page .qsd-actions > a.bookADemo::after,
.qsd-page .qsd-actions > a.qsd-btn--ghost::after {
    order: -1;
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--qsd-brand);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 6.2v7.6L16 12Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 6.2v7.6L16 12Z'/%3E%3C/svg%3E");
}

/* The bundle gives .startFreeTrial and .bookADemo their display, border box
   and the empty ::after the badge above is masked into. The plain-anchor pair
   is styled from nothing, so it states them here. */
.qsd-page .qsd-actions > a.qsd-btn--primary,
.qsd-page .qsd-actions > a.qsd-btn--ghost {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}

.qsd-page .qsd-actions > a.qsd-btn--ghost::after,
.qsd-page .qsd-actions > a.qsd-btn--primary::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* And the arrow the bundle puts after its own primary, so the plain-anchor
   pair is the same pair of buttons to look at. */
.qsd-page .qsd-actions > a.qsd-btn--primary::after {
    width: 1.0625rem;
    height: 1.0625rem;
    background-color: #ffffff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7l5 5-5 5M18 12H6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7l5 5-5 5M18 12H6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- 7. overview split */

.qsd-page .qsd-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 3.6vw, 3.25rem);
    align-items: center;
}

.qsd-page .qsd-split__copy {
    min-width: 0;
}

/* The illustration. The old markup dropped a PNG into a flat indigo box that
   was taller than the picture, so every one of these pages opened its Overview
   with a band of empty blue. Here the frame is the picture's own size, with a
   soft brand wash behind it and the same card edge the rest of the page uses.
   NGOs has no illustration and simply has no media column — the grid falls
   back to one column on its own. */
.qsd-page .qsd-split__media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(1.25rem, 2.4vw, 2.25rem);
    border-radius: var(--qsd-radius-lg);
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(99, 102, 241, .16), transparent 60%),
        radial-gradient(120% 120% at 80% 100%, rgba(162, 45, 234, .13), transparent 58%),
        #f4f2ff;
    border: 1px solid #eae7fa;
}

.qsd-page .qsd-split__img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: var(--qsd-radius);
    box-shadow: 0 24px 50px -30px rgba(28, 20, 84, .55);
}

/* ----------------------------------------------------- 8. card grids */

.qsd-page .qsd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qsd-gap);
}

/* The card. One object for all three of the card bands — Key Features, Why
   Choose QHRM and Ideal For — separated by which edge carries the accent
   rather than by three different card designs, which is what the old pages
   had: a left border here, a bottom border there, a top border in the third,
   each in its own palette. */
.qsd-page .qsd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--qsd-card-pad);
    border-radius: var(--qsd-radius);
    background: #fff;
    border: 1px solid var(--qsd-line);
    box-shadow: var(--qsd-shadow-sm);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s ease, border-color .25s ease;
}

.qsd-page .qsd-card:hover {
    transform: translateY(-3px);
    border-color: #d7d1f8;
    box-shadow: var(--qsd-shadow);
}

/* The accent. `--qsd-accent` is set by position below and read by every
   variant, so the ramp is declared once and each band chooses only where to
   put it. */
.qsd-page .qsd-card {
    --qsd-accent: var(--qsd-brand);
    --qsd-accent-soft: #eef1ff;
}

.qsd-page .qsd-grid > .qsd-card:nth-child(4n + 2) {
    --qsd-accent: var(--qsd-violet);
    --qsd-accent-soft: #f4eeff;
}

.qsd-page .qsd-grid > .qsd-card:nth-child(4n + 3) {
    --qsd-accent: var(--qsd-magenta);
    --qsd-accent-soft: #faeeff;
}

.qsd-page .qsd-grid > .qsd-card:nth-child(4n + 4) {
    --qsd-accent: var(--qsd-gold);
    --qsd-accent-soft: #fdf6e6;
}

/* Key Features & Benefits — the accent is a bar down the leading edge, which
   is where the old markup put its border-l-4. */
.qsd-page .qsd-card--feature {
    padding-left: calc(var(--qsd-card-pad) + 6px);
}

.qsd-page .qsd-card--feature::before {
    content: "";
    position: absolute;
    top: var(--qsd-card-pad);
    bottom: var(--qsd-card-pad);
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--qsd-accent);
}

/* Why Choose QHRM — four claims about the product rather than four features,
   so they get the tinted face and a headline in the accent, the emphasis the
   old page was reaching for with its gradient card backgrounds. */
.qsd-page .qsd-card--reason {
    background: linear-gradient(160deg, var(--qsd-accent-soft), #ffffff 62%);
}

.qsd-page .qsd-card--reason .qsd-card__title {
    color: var(--qsd-accent);
}

/* Ideal For — a rule across the top, matching the old border-t-4. */
.qsd-page .qsd-card--audience {
    padding-top: calc(var(--qsd-card-pad) + 4px);
}

.qsd-page .qsd-card--audience::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--qsd-card-pad);
    right: var(--qsd-card-pad);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--qsd-accent);
}

/* The card headings are h3 on most bands and h4 on Why Choose QHRM — the level
   each page already used, kept as it was because heading level is document
   structure, not design. Both are styled here so the two read the same. */
.qsd-page .qsd-card__title {
    margin: 0 0 .5rem;
    color: var(--qsd-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
}

.qsd-page .qsd-card__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--qsd-ink-soft);
}

/* --------------------------------------------------------------- 9. FAQ */

.qsd-page .qsd-faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qsd-gap);
}

.qsd-page .qsd-faq__item {
    position: relative;
    padding: var(--qsd-card-pad) var(--qsd-card-pad) var(--qsd-card-pad)
             calc(var(--qsd-card-pad) + 2.4rem);
    border-radius: var(--qsd-radius);
    background: #fff;
    border: 1px solid var(--qsd-line);
    box-shadow: var(--qsd-shadow-sm);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.qsd-page .qsd-faq__item:hover {
    border-color: #d7d1f8;
    box-shadow: var(--qsd-shadow);
}

/* A question mark in the gutter, drawn from the font rather than an icon file.
   The old FAQ was six white boxes on a white band with no mark of any kind,
   which is why the section did not read as questions until you read one. */
.qsd-page .qsd-faq__item::before {
    content: "?";
    position: absolute;
    top: var(--qsd-card-pad);
    left: var(--qsd-card-pad);
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 9px;
    background: #eef1ff;
    color: var(--qsd-brand);
    font-size: .875rem;
    font-weight: 800;
    line-height: 1;
}

.qsd-page .qsd-faq__q {
    margin: 0 0 .45rem;
    color: var(--qsd-ink);
    font-size: 1.0313rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.012em;
}

.qsd-page .qsd-faq__a {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--qsd-ink-soft);
}

/* ------------------------------------------------------ 10. explore more */

.qsd-page .qsd-explore {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qsd-gap);
}

/* Two shapes reach this grid and both are drawn as the same card. Eighteen
   pages store a card whose "Learn More →" anchor sits under the name, so the
   anchor is the click target and the card is only its surface; the NGOs page
   stores the whole card as one anchor, with an icon. Neither click target is
   changed here — growing or shrinking one would be a behaviour change, and the
   brief for this work was the design. */
.qsd-page .qsd-linkcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: var(--qsd-card-pad);
    border-radius: var(--qsd-radius);
    background: #fff;
    border: 1px solid var(--qsd-line);
    box-shadow: var(--qsd-shadow-sm);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s ease, border-color .25s ease;
}

.qsd-page .qsd-linkcard:hover {
    transform: translateY(-3px);
    border-color: #cfc9f7;
    box-shadow: var(--qsd-shadow);
    text-decoration: none;
}

/* The icon tile, on the one page whose cards carry an icon. */
.qsd-page .qsd-linkcard__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .5rem;
    border-radius: 13px;
    color: var(--qsd-brand);
    background: #f1effe;
    transition: color .25s ease, background .25s ease;
}

/* The stored SVGs carried `class="w-6 h-6"` and nothing else sized them. They
   are sized here so the CMS body holds no utility classes. */
.qsd-page .qsd-linkcard__icon svg {
    width: 21px;
    height: 21px;
}

.qsd-page .qsd-linkcard:hover .qsd-linkcard__icon {
    color: #fff;
    background: var(--qsd-gradient);
}

.qsd-page .qsd-linkcard__name {
    display: block;
    color: var(--qsd-ink);
    font-size: 1.0313rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    transition: color .2s ease;
}

.qsd-page .qsd-linkcard:hover .qsd-linkcard__name {
    color: var(--qsd-brand);
}

.qsd-page .qsd-linkcard__desc {
    display: block;
    margin: 0;
    font-size: .90625rem;
    line-height: 1.6;
    color: var(--qsd-ink-mute);
}

/* "Learn More →" — the arrow is a character in the stored copy, so it is not
   drawn here; only the link is. margin-top:auto keeps it on the bottom edge of
   every card in a row whatever the description above it does. */
.qsd-page .qsd-linkcard__more {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: .9rem;
    color: var(--qsd-brand);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.qsd-page .qsd-linkcard__more:hover {
    color: var(--qsd-magenta);
    transform: translateX(2px);
    text-decoration: none;
}

/* ------------------------------------------------------ 11. closing band */

/* The page's one dark surface, and its last. The old one was a flat
   indigo-to-purple gradient the eye slid straight off; this one is deepened
   and lit from two corners so the buttons have something to sit on. */
.qsd-page .qsd-cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.75rem, 6.5vw, 6rem);
    color: var(--qsd-ink-invert);
    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);
}

.qsd-page .qsd-cta .qsd-orb {
    filter: blur(80px);
}

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

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

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

.qsd-page .qsd-cta__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.024em;
}

.qsd-page .qsd-cta__lede {
    margin: 1rem 0 0;
    font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
    line-height: 1.7;
    color: #cac4e8;
}

.qsd-page .qsd-cta .qsd-actions {
    justify-content: center;
}

/* --------------------------------------------------------- 12. responsive */

/* Mobile first: every grid above is one column and each step adds columns.
   Ordered narrow to wide so the later rule wins. */
@media (min-width: 640px) {
    .qsd-page .qsd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .qsd-page .qsd-actions > a {
        min-width: 12.5rem;
    }
}

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

    .qsd-page .qsd-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 960px) {
    .qsd-page .qsd-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

/* Four across only above 1180px, not at 1024. Why Choose QHRM and Ideal For
   hold a sentence each, and at 1024 a quarter column is about 22 characters
   wide — six and seven lines of ragged text per card. Two roomy columns read
   better than four narrow ones, so a landscape tablet gets two. */
@media (min-width: 1180px) {
    .qsd-page .qsd-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Explore More stops at three columns, not four, because it holds nine cards
   on every page: three rows of three, where a fourth column would leave the
   last row with one card in it and three empty cells. Three is also what the
   same nine links get on /solutions and on the four category pages. */

/* ---------------------------------------------------- 13. motion + focus */

/* None of the transforms above is load-bearing, so they all go when the
   visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .qsd-page .qsd-badge__dot {
        animation: none;
    }

    .qsd-page .qsd-point,
    .qsd-page .qsd-card,
    .qsd-page .qsd-faq__item,
    .qsd-page .qsd-linkcard,
    .qsd-page .qsd-linkcard__more,
    .qsd-page .qsd-actions > a {
        transition: none;
    }

    .qsd-page .qsd-card:hover,
    .qsd-page .qsd-linkcard:hover,
    .qsd-page .qsd-actions > a:hover {
        transform: none;
    }

    .qsd-page .qsd-linkcard__more:hover {
        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. */
.qsd-page a:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .45);
    outline-offset: 3px;
    border-radius: 8px;
}

/* On the dark band the indigo ring disappears into the background. */
.qsd-page .qsd-cta a:focus-visible {
    outline-color: rgba(255, 255, 255, .75);
}