/* Module pages — the shared design system behind the 17 /products/* bodies
   (Hiring, Onboarding, People, Engagement, Attendance, Leave, Helpdesk,
   Payroll, Loan and Advance, Travel, Expenses, Service Charge, Task, Planning,
   Work Tracking, Performance, Training).

   Every one of those pages is stored in webpages.page_html and uses one
   vocabulary of qmod- classes instead of per-page Tailwind utilities, so the
   whole set is designed from this file alone. Nothing here changes copy,
   links, images or buttons — those live in the markup and are untouched.

   Prefix discipline: every selector is scoped under .qmod-page, so this sheet
   is inert on every other page of the site even though App.razor links it
   globally (see the note there). No bare element selectors.

   ContentPage.razor wraps stored markup in an inline
   style="color:#1a1a1a;line-height:1.8". A descendant rule cannot beat an
   inline style on the ancestor, so .qmod-page restates colour and line-height
   for itself — without that, 1.8 silently inflates every badge, pill, button
   and card heading that sets no line-height of its own.

   HOW THE DESIGN IS ORGANISED
     1  tokens          2  layout + sections     3  type
     4  grids           5  cards                 6  hero
     7  closing band    8  split                 9  gallery
    10  related + FAQ  11  responsive           12  motion + focus          */

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

.qmod-page {
    /* Ink. Headings sit near-black with a blue cast rather than at #000, which
       is what keeps a page of dense cards from looking like a printout. */
    --qmod-ink: #0b1220;
    --qmod-ink-soft: #3f4c60;
    --qmod-ink-mute: #64748b;

    /* Brand — the indigo→violet ramp the site already uses for its heroes,
       buttons and gradients, kept so these pages still read as QHRM. */
    --qmod-brand: #4f46e5;
    --qmod-brand-lit: #6366f1;
    --qmod-brand-strong: #4338ca;
    --qmod-violet: #7c3aed;
    --qmod-brand-soft: #eef1ff;
    --qmod-brand-line: #c9d0fb;
    --qmod-gradient: linear-gradient(135deg, var(--qmod-brand-lit), var(--qmod-violet));

    /* Surfaces. The two tinted bands are deliberately close to white: with
       nine sections stacked, anything stronger reads as stripes rather than
       as rhythm. */
    --qmod-surface: #ffffff;
    --qmod-surface-alt: #f8fafc;
    --qmod-surface-tint: #f6f7ff;
    --qmod-line: rgba(15, 23, 42, .09);
    --qmod-line-soft: rgba(15, 23, 42, .06);

    /* Shape */
    --qmod-radius-sm: 12px;
    --qmod-radius: 18px;
    --qmod-radius-lg: 24px;
    --qmod-radius-xl: 32px;

    /* Elevation. Two layers each: a tight contact shadow that defines the
       edge, and a wide soft one that lifts. The hover state tints the wide
       layer indigo instead of deepening the grey — grey alone just looks
       dirty against the tinted bands. */
    --qmod-shadow-sm:
        0 1px 2px rgba(11, 18, 32, .04),
        0 1px 3px rgba(11, 18, 32, .03);
    --qmod-shadow:
        0 1px 2px rgba(11, 18, 32, .05),
        0 16px 32px -18px rgba(79, 70, 229, .30);
    --qmod-shadow-lg:
        0 1px 3px rgba(11, 18, 32, .06),
        0 32px 60px -28px rgba(79, 70, 229, .38);

    /* Rhythm */
    --qmod-gap: clamp(1rem, 1.6vw, 1.5rem);
    --qmod-card-pad: clamp(1.35rem, 2vw, 1.75rem);
    --qmod-pad-y: clamp(3.5rem, 6.5vw, 6.5rem);
    /* Overridden per breakpoint below to track .boxed-container exactly. */
    --qmod-container: 100%;
    --qmod-container-pad: 1rem;
    /* Body copy is capped by its own measure rather than by the column, so a
       wide screen widens the grids without stretching the sentences. */
    --qmod-measure: 68ch;

    color: var(--qmod-ink-soft);
    line-height: 1.65;
    width: 100%;
    /* The pages sit inside a flex row in ContentPage; without this a wide
       grid could push the column past the viewport. */
    min-width: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* Wrappers the old markup used purely for spacing. They stay in the document
   — dropping them would be a markup edit — but contribute nothing to layout,
   so the grid or flex container above them lays out their children directly. */
.qmod-page .qmod-bare {
    display: contents;
}

/* Decorative overlays from the old hero markup. The hero paints its own
   lighting now, so these are hidden rather than removed. */
.qmod-page .qmod-decor {
    display: none;
}

/* -------------------------------------------- 2. layout and section bands */

.qmod-page .qmod-section {
    position: relative;
    padding-block: var(--qmod-pad-y);
    background: var(--qmod-surface);
}

.qmod-page .qmod-section--alt {
    background: var(--qmod-surface-alt);
}

/* 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. */
.qmod-page .qmod-section--tint {
    background:
        radial-gradient(120% 80% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
        var(--qmod-surface-tint);
}

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

.qmod-page .qmod-section__inner,
.qmod-page .qmod-hero__inner,
.qmod-page .qmod-cta__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qmod-container);
    margin-inline: auto;
    padding-inline: var(--qmod-container-pad);
}

/* The same ladder .boxed-container uses in the compiled bundle, breakpoint for
   breakpoint. The header, footer and testimonial rail on these pages are all
   boxed-container; if this column were narrower they would visibly disagree
   about where the page's left edge is. */
@media (min-width: 640px) {
    .qmod-page {
        --qmod-container-pad: 1.5rem;
    }
}

@media (min-width: 768px) {
    .qmod-page {
        --qmod-container-pad: 2rem;
    }
}

@media (min-width: 1024px) {
    .qmod-page {
        --qmod-container: 1200px;
        --qmod-container-pad: 2.5rem;
    }
}

@media (min-width: 1280px) {
    .qmod-page {
        --qmod-container: 1400px;
        --qmod-container-pad: 3rem;
    }
}

@media (min-width: 1536px) {
    .qmod-page {
        --qmod-container: 1600px;
        --qmod-container-pad: 4rem;
    }
}

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

.qmod-page .qmod-section__title {
    margin: 0 0 clamp(2rem, 3.2vw, 3rem);
    max-width: 36ch;
    margin-inline: auto;
    color: var(--qmod-ink);
    font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.028em;
    text-align: center;
    text-wrap: balance;
}

/* A short gradient rule instead of a full-width divider — it marks the
   heading without drawing a line across the page. */
.qmod-page .qmod-section__title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: var(--qmod-gradient);
}

.qmod-page .qmod-prose {
    max-width: var(--qmod-measure);
    margin: 0 auto 1.05rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--qmod-ink-soft);
}

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

/* A lone paragraph is a section lead rather than body copy. */
.qmod-page .qmod-prose:only-of-type {
    text-align: center;
}

.qmod-page .qmod-link {
    color: var(--qmod-brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--qmod-brand-line);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.qmod-page .qmod-link:hover {
    color: var(--qmod-brand-strong);
    text-decoration-color: currentColor;
}

.qmod-page .qmod-strong {
    color: var(--qmod-ink);
    font-weight: 600;
}

/* ------------------------------------------------------------- 4. grids */

/* auto-fit rather than fixed column counts: the same rule serves a 3-card and
   a 12-card grid, and min(100%, …) stops a card overflowing a phone. */
.qmod-page .qmod-grid {
    display: grid;
    gap: var(--qmod-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.5rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.qmod-page .qmod-grid--two {
    grid-template-columns: minmax(0, 1fr);
    /* Two columns of a 1400px container would be 650px each, and a paragraph
       that wide is roughly ninety characters a line. The cap is the measure,
       not the container. */
    max-width: 66rem;
    margin-inline: auto;
}

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

.qmod-page .qmod-grid--links {
    gap: clamp(.75rem, 1.2vw, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.qmod-page .qmod-grid--gallery {
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.qmod-page .qmod-list {
    display: grid;
    gap: var(--qmod-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ------------------------------------------------------------- 5. cards */

.qmod-page .qmod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: var(--qmod-card-pad);
    background: var(--qmod-surface);
    border: 1px solid var(--qmod-line);
    border-radius: var(--qmod-radius);
    box-shadow: var(--qmod-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.qmod-page .qmod-card:hover {
    transform: translateY(-3px);
    border-color: var(--qmod-brand-line);
    box-shadow: var(--qmod-shadow);
}

/* The old markup gave cards a coloured left rule in a dozen different hues.
   One accent, applied the same way everywhere, is what makes 17 pages look
   like one product. Inset top and bottom so it reads as a mark rather than a
   border, and it grows to the full height on hover. */
.qmod-page .qmod-card--accent {
    padding-left: calc(var(--qmod-card-pad) + 4px);
}

.qmod-page .qmod-card--accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 3px;
    border-radius: 999px;
    background: var(--qmod-gradient);
    transition: top .22s ease, bottom .22s ease;
}

.qmod-page .qmod-card--accent:hover::before {
    top: .75rem;
    bottom: .75rem;
}

/* On a tinted band the border is doing nothing the background is not already
   doing, so the cards drop it and float on their shadow instead. It gives the
   "why" and "related" bands a different texture from the white sections
   without introducing a second card design. */
.qmod-page .qmod-section--tint .qmod-card,
.qmod-page .qmod-section--tint .qmod-linkcard {
    border-color: transparent;
    box-shadow: var(--qmod-shadow);
}

.qmod-page .qmod-section--tint .qmod-card:hover,
.qmod-page .qmod-section--tint .qmod-linkcard:hover {
    border-color: var(--qmod-brand-line);
    box-shadow: var(--qmod-shadow-lg);
}

.qmod-page .qmod-card__title {
    margin: 0;
    color: var(--qmod-ink);
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.012em;
    text-wrap: balance;
}

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

/* Cards whose title and body were wrapped in their own div — the wrapper
   carries the stack so the icon can sit beside it. */
.qmod-page .qmod-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

/* Cards that carry a glyph. The stored markup is inconsistent about how deep
   it nests: some are [icon, body-div], others put [icon, h3, p] side by side
   as direct children. A flex row would lay those three out in three columns,
   which is how "Southeast Asia & India Localisation" ended up wrapping four
   words deep in a column of its own. A two-column grid pins the icon to the
   first cell and stacks everything else in the second, so both shapes land in
   the same layout. */
.qmod-page .qmod-card:has(> .qmod-card__icon) {
    padding-left: calc(var(--qmod-card-pad) + 2.6rem + 1rem);
}

/* Taken out of flow rather than made a flex or grid track. As a track it sets
   the height of the row it lands in, and a 2.6rem glyph beside a 1.4rem title
   pushes the body copy half a line further down than it sits in every card
   without an icon. Out of flow, the text stacks to exactly the same rhythm. */
.qmod-page .qmod-card > .qmod-card__icon {
    position: absolute;
    left: var(--qmod-card-pad);
    top: var(--qmod-card-pad);
}

.qmod-page .qmod-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: var(--qmod-brand-soft);
    box-shadow: inset 0 0 0 1px var(--qmod-brand-line);
    color: var(--qmod-brand);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
}

.qmod-page .qmod-icon__svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* -------------------------------------------------------------- 6. hero */

/* One band, painted once, used at the top and the bottom of every page. The
   hero and the closing call to action are the same surface doing the same job
   at two ends of the page, so they share every layer below — gradient,
   lighting, texture and edge — and differ only in what sits on them. */
.qmod-page .qmod-hero,
.qmod-page .qmod-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #4338ca 0%, #5b4de0 38%, #7c3aed 72%, #9333ea 100%);
    /* A hairline of light along the top edge, where the band meets the white
       section above it. Without it the two just butt together. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
    color: #fff;
}

/* Two off-centre highlights. The old hero animated a tiled dot pattern behind
   its text; this is quieter to read against and costs nothing to paint. */
.qmod-page .qmod-hero::before,
.qmod-page .qmod-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 60% at 12% -10%, rgba(255, 255, 255, .30), transparent 68%),
        radial-gradient(42% 55% at 92% 8%, rgba(167, 139, 250, .40), transparent 70%),
        radial-gradient(60% 70% at 78% 110%, rgba(49, 46, 129, .55), transparent 72%);
}

/* A hairline grid, masked so it only shows through the middle of the band.
   It gives the flat gradient something to catch the eye at large sizes. */
.qmod-page .qmod-hero::after,
.qmod-page .qmod-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
}

.qmod-page .qmod-hero {
    padding-block: clamp(3rem, 5.5vw, 5rem);
}

.qmod-page .qmod-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.qmod-page .qmod-hero__copy {
    min-width: 0;
}

.qmod-page .qmod-badge {
    display: inline-block;
    margin: 0 0 1.15rem;
    padding: .42rem .95rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .012em;
    backdrop-filter: blur(8px);
}

.qmod-page .qmod-hero__title {
    margin: 0 0 1.05rem;
    color: #fff;
    font-size: clamp(2.15rem, 1.35rem + 3.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.qmod-page .qmod-hero__lead {
    margin: 0 0 1.9rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, .90);
    font-size: clamp(1rem, .94rem + .38vw, 1.1875rem);
    line-height: 1.65;
}

.qmod-page .qmod-hero__note {
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .875rem;
    line-height: 1.6;
}

.qmod-page .qmod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.qmod-page .qmod-actions--center {
    justify-content: center;
}

/* THE BUTTON PAIR, ON BOTH COLOURED BANDS.
 *
 * A filled indigo→violet primary with its arrow, and a white pill whose label
 * is led by a solid indigo play badge. One pair, identical in the hero and in
 * the closing band, on all 17 pages.
 *
 * .startFreeTrial and .bookADemo come from the site's compiled bundle. Left
 * alone they do not survive this backdrop: the bundle fills the primary with
 * the same indigo→violet gradient these two bands are painted in, so where the
 * band is indigo the button reads as solid and a few hundred pixels along,
 * where the gradient has turned violet, the identical button reads as a hollow
 * outline. The fill below is pitched deeper than the band at both ends and
 * carries a light hairline edge and a real drop shadow, so it sits on the band
 * as an object rather than dissolving into whichever hue is behind it.
 *
 * .qmod-actions is the hook rather than .qmod-hero and .qmod-cta because it
 * appears in exactly those two places and nowhere else — one row in the hero,
 * one in the closing band, on every page — so the pair is restyled together
 * by construction and cannot drift apart. Everything under .qmod-page is
 * invisible to the rest of the site, where these same two classes keep the
 * bundle's own appearance. !important appears only where the bundle used it
 * first and specificity alone cannot win. */
.qmod-page .qmod-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;
}

.qmod-page .qmod-actions > a.startFreeTrial {
    background: linear-gradient(135deg, #4c35e0 0%, #6d28d9 55%, #7e22ce 100%);
    border-color: rgba(255, 255, 255, .40);
    color: #ffffff !important;
    box-shadow:
        0 2px 4px rgba(2, 6, 23, .28),
        0 16px 30px -14px rgba(2, 6, 23, .62);
}

.qmod-page .qmod-actions > a.startFreeTrial:hover {
    background: linear-gradient(135deg, #4429d6 0%, #5f1fd0 55%, #7016c4 100%) !important;
    border-color: rgba(255, 255, 255, .65);
    transform: translateY(-2px);
    box-shadow:
        0 3px 6px rgba(2, 6, 23, .30),
        0 22px 38px -16px rgba(2, 6, 23, .68);
}

.qmod-page .qmod-actions > a.bookADemo {
    background: #ffffff !important;
    border-color: #ffffff;
    color: var(--qmod-ink) !important;
    box-shadow:
        0 2px 4px rgba(2, 6, 23, .20),
        0 14px 26px -14px rgba(2, 6, 23, .48);
}

.qmod-page .qmod-actions > a.bookADemo:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
    box-shadow:
        0 3px 6px rgba(2, 6, 23, .22),
        0 20px 34px -16px rgba(2, 6, 23, .55);
}

/* The badge. 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 the play triangle knocked out of it — one
   path, fill-rule evenodd — and paints that 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's own rule. */
.qmod-page .qmod-actions > a.bookADemo::after {
    order: -1;
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--qmod-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");
}

/* "What's Inside" panel ---------------------------------------------------- */

.qmod-page .qmod-hero__panel {
    position: relative;
    padding: clamp(1.5rem, 2.4vw, 2.15rem);
    border-radius: var(--qmod-radius-lg);
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .55),
        0 2px 6px rgba(2, 6, 23, .10),
        0 44px 80px -44px rgba(2, 6, 23, .75);
}

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

.qmod-page .qmod-steps {
    display: grid;
    gap: 1.05rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qmod-page .qmod-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.qmod-page .qmod-step + .qmod-step {
    padding-top: 1.05rem;
    border-top: 1px solid var(--qmod-line-soft);
}

.qmod-page .qmod-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: .08rem;
    border-radius: 9px;
    background: var(--qmod-gradient);
    box-shadow: 0 3px 8px -2px rgba(99, 102, 241, .55);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
}

.qmod-page .qmod-step__body {
    min-width: 0;
}

.qmod-page .qmod-step__title {
    margin: 0 0 .18rem;
    color: var(--qmod-ink);
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.4;
}

.qmod-page .qmod-step__text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--qmod-ink-mute);
}

/* ------------------------------------------------------ 7. closing band */

.qmod-page .qmod-cta {
    padding-block: clamp(3.75rem, 6.5vw, 6rem);
    text-align: center;
}

.qmod-page .qmod-cta__title {
    max-width: 26ch;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.7rem);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* The same mark every section heading on the page carries, in white. It is
   what ties the closing band to the eight sections above it rather than
   leaving it looking like a strip from somewhere else. */
.qmod-page .qmod-cta__title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin: 1.15rem auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}

.qmod-page .qmod-cta__text {
    max-width: 42rem;
    margin: 1.35rem auto 2.25rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, .95rem + .32vw, 1.125rem);
    line-height: 1.65;
    text-wrap: pretty;
}

/* ------------------------------------------------ 8. the "What is …" split */

.qmod-page .qmod-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.qmod-page .qmod-split__body {
    min-width: 0;
}

/* The heading belongs to the column here, not to the page, so it drops the
   centred treatment the standalone section titles carry. */
.qmod-page .qmod-split__body .qmod-section__title {
    max-width: 20ch;
    margin: 0 0 1.35rem;
    text-align: left;
}

.qmod-page .qmod-split__body .qmod-section__title::after {
    margin-inline: 0;
}

.qmod-page .qmod-split__body .qmod-prose {
    max-width: 60ch;
    margin-inline: 0;
    font-size: 1rem;
    text-align: left;
}

/* The opening paragraph carries the definition; it gets to be the largest
   thing in the column after the heading. */
.qmod-page .qmod-split__body .qmod-prose:first-of-type {
    font-size: 1.09rem;
    color: var(--qmod-ink-soft);
}

.qmod-page .qmod-split__media {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* A brand-coloured bloom behind the screenshot so it sits on the page rather
   than being pasted onto it. */
.qmod-page .qmod-split__media::before {
    content: "";
    position: absolute;
    inset: 6% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .30), transparent);
    filter: blur(46px);
}

.qmod-page .qmod-split__media .qmod-img {
    position: relative;
    width: 100%;
    height: auto;
    border: 1px solid var(--qmod-line);
    border-radius: var(--qmod-radius-lg);
    background: var(--qmod-surface);
    box-shadow: var(--qmod-shadow-lg);
}

/* ----------------------------------------------------------- 9. gallery */

.qmod-page .qmod-shot {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 0;
    height: 100%;
}

/* The screenshots are not all the same aspect ratio, so the frames are given
   the row's height and the image floats in the middle of whatever is left.
   Frames of two different heights side by side is the thing that makes a
   gallery look unconsidered. */
.qmod-page .qmod-shot__frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .9rem;
    padding: clamp(.85rem, 1.6vw, 1.25rem);
    border: 1px solid var(--qmod-line);
    border-radius: var(--qmod-radius-lg);
    background: linear-gradient(160deg, #ffffff 0%, #f4f6ff 100%);
    box-shadow: var(--qmod-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.qmod-page .qmod-shot__frame:hover {
    transform: translateY(-4px);
    border-color: var(--qmod-brand-line);
    box-shadow: var(--qmod-shadow-lg);
}

.qmod-page .qmod-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--qmod-radius-sm);
}

.qmod-page .qmod-shot__frame > .qmod-img {
    margin-block: auto;
}

.qmod-page .qmod-shot__caption,
.qmod-page .qmod-shot__title {
    margin: 0;
    color: var(--qmod-ink-mute);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.qmod-page .qmod-shot__caption p {
    margin: 0;
}

/* A label sitting over the corner of a screenshot in the stored markup. */
.qmod-page .qmod-shot__tag {
    position: absolute;
    top: 1.35rem;
    left: 1.35rem;
    z-index: 1;
    padding: .32rem .7rem;
    border-radius: 8px;
    background: rgba(11, 18, 32, .82);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}

/* -------------------------------------------- 10. related products + FAQ */

.qmod-page .qmod-linkcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    background: var(--qmod-surface);
    border: 1px solid var(--qmod-line);
    border-radius: var(--qmod-radius);
    box-shadow: var(--qmod-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* A rail that draws itself on hover — the same accent the feature cards use,
   so the two card families read as one family. */
.qmod-page .qmod-linkcard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--qmod-gradient);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform .22s ease;
}

.qmod-page .qmod-linkcard:hover {
    transform: translateY(-2px);
    border-color: var(--qmod-brand-line);
    box-shadow: var(--qmod-shadow);
}

.qmod-page .qmod-linkcard:hover::before {
    transform: scaleY(1);
}

.qmod-page .qmod-linkcard__title {
    margin: 0;
    color: var(--qmod-ink);
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.4;
    transition: color .18s ease;
}

.qmod-page a.qmod-linkcard__title {
    text-decoration: none;
}

.qmod-page .qmod-linkcard:hover .qmod-linkcard__title {
    color: var(--qmod-brand);
}

.qmod-page .qmod-linkcard__title p {
    margin: 0;
}

.qmod-page .qmod-linkcard__text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--qmod-ink-mute);
}

.qmod-page .qmod-linkcard__more {
    margin-top: auto;
    padding-top: .7rem;
    color: var(--qmod-brand);
    font-size: .8125rem;
    font-weight: 650;
    text-decoration: none;
}

.qmod-page .qmod-linkcard__more::after {
    content: "→";
    display: inline-block;
    margin-left: .35em;
    transition: transform .2s ease;
}

.qmod-page .qmod-linkcard:hover .qmod-linkcard__more::after {
    transform: translateX(4px);
}

.qmod-page .qmod-linkcard__more:hover {
    color: var(--qmod-brand-strong);
}

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

/* One panel divided by hairlines, not eight floating boxes.
 *
 * Every answer stays open and in the markup — these pages have no JavaScript
 * of their own and an accordion would hide the copy a search engine came for —
 * so the work the design has to do is make eight open answers scannable. A
 * grid of bordered cards fights that: eight card edges compete with the eight
 * questions for the same attention. Ruling one panel puts every question on a
 * shared left edge, and the eye runs down the column instead of around boxes.
 *
 * The panel is selected through :has() rather than a class of its own,
 * because the FAQ grid carries the same qmod-grid--two the "why" and "who"
 * rows use and nothing in the stored markup distinguishes it. */
.qmod-page .qmod-grid:has(> .qmod-faq__item) {
    gap: 0;
    overflow: hidden;
    background: var(--qmod-surface);
    border: 1px solid var(--qmod-line);
    border-radius: var(--qmod-radius-lg);
    box-shadow: var(--qmod-shadow-sm);
    counter-reset: qmod-faq;
}

.qmod-page .qmod-faq__item {
    counter-increment: qmod-faq;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: clamp(1.4rem, 2.2vw, 2rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: background-color .2s ease;
}

/* Faint enough to read as "this row", not as "this row is a button". */
.qmod-page .qmod-faq__item:hover {
    background-color: #fafbff;
}

/* The rules are drawn by the cells rather than by a gap over a coloured
   backdrop: a list with an odd number of questions leaves one cell empty, and
   the gap technique would paint that whole empty cell in the line colour. */
@media (min-width: 720px) {
    .qmod-page .qmod-faq__item:nth-child(n + 3) {
        border-top: 1px solid var(--qmod-line-soft);
    }

    .qmod-page .qmod-faq__item:nth-child(even) {
        border-left: 1px solid var(--qmod-line-soft);
    }
}

@media (max-width: 719.98px) {
    .qmod-page .qmod-faq__item + .qmod-faq__item {
        border-top: 1px solid var(--qmod-line-soft);
    }
}

.qmod-page .qmod-faq__q {
    position: relative;
    margin: 0;
    padding-left: 2.6rem;
    color: var(--qmod-ink);
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -.014em;
    text-wrap: pretty;
}

/* A hanging index rather than a filled chip. The panel already supplies the
   structure a chip would be adding, and eight gradient squares down a ruled
   column is more colour than the section can carry. */
.qmod-page .qmod-faq__q::before {
    content: counter(qmod-faq, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .32em;
    color: var(--qmod-brand);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: .06em;
}

/* The answer hangs off the same left edge as the question, so the numeral
   sits alone in the margin and the two lines of type share one axis. */
.qmod-page .qmod-faq__item .qmod-faq__a {
    max-width: none;
    margin: 0;
    padding-left: 2.6rem;
    font-size: .9375rem;
    line-height: 1.7;
    text-align: left;
    color: var(--qmod-ink-soft);
}

/* People opens its FAQ with a line of copy above the panel. It is a section
   lead rather than an answer, and the role the markup gave it does not say so
   — the rule above wins inside a cell, this one dresses the stray. */
.qmod-page .qmod-faq__a {
    max-width: var(--qmod-measure);
    margin: -1.25rem auto 2.25rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--qmod-ink-mute);
    text-align: center;
}

/* -------------------------------------------------------- 11. responsive */

@media (max-width: 1023px) {
    .qmod-page .qmod-hero__grid,
    .qmod-page .qmod-split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The image led the "What is …" row on some pages and followed it on
       others. Stacked, the prose always comes first. */
    .qmod-page .qmod-split__body {
        order: 1;
    }

    .qmod-page .qmod-split__media {
        order: 2;
    }

    .qmod-page .qmod-hero__lead {
        max-width: none;
    }

    .qmod-page .qmod-split__body .qmod-section__title,
    .qmod-page .qmod-split__body .qmod-prose {
        max-width: none;
    }

    .qmod-page .qmod-split__media .qmod-img {
        max-width: 40rem;
    }
}

@media (max-width: 640px) {
    .qmod-page {
        --qmod-gap: 1rem;
        --qmod-pad-y: 3rem;
    }

    .qmod-page .qmod-section__title {
        max-width: none;
        margin-bottom: 1.75rem;
    }

    /* Full-width buttons read as tap targets on a phone; side by side at
       360px they would each be too narrow for their label. */
    .qmod-page .qmod-actions > a {
        flex: 1 1 100%;
    }

    .qmod-page .qmod-card:has(> .qmod-card__icon) {
        gap: .9rem;
    }

    .qmod-page .qmod-shot__tag {
        top: 1rem;
        left: 1rem;
    }

    /* The grid texture is sized for a wide band and reads as stripes on a
       narrow one. */
    .qmod-page .qmod-hero::after,
    .qmod-page .qmod-cta::after {
        display: none;
    }
}

/* -------------------------------------------------- 12. motion and focus */

/* The bundle's buttons carry no visible focus ring of their own, and the
   cards' links sit on white — both need one that survives a keyboard. */
.qmod-page a:focus-visible {
    outline: 2px solid var(--qmod-brand);
    outline-offset: 3px;
    border-radius: 6px;
}

.qmod-page .qmod-hero a:focus-visible,
.qmod-page .qmod-cta a:focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .qmod-page .qmod-card,
    .qmod-page .qmod-card--accent::before,
    .qmod-page .qmod-linkcard,
    .qmod-page .qmod-linkcard::before,
    .qmod-page .qmod-linkcard__more::after,
    .qmod-page .qmod-faq__item,
    .qmod-page .qmod-shot__frame {
        transition: none;
    }

    .qmod-page .qmod-card:hover,
    .qmod-page .qmod-linkcard:hover,
    .qmod-page .qmod-shot__frame:hover {
        transform: none;
    }
}