/* Home page design layer.
 *
 * The presentation layer for Components/Pages/Home.razor. Global CSS, linked
 * from App.razor — it was Blazor-scoped until the stylesheets were consolidated
 * under wwwroot/css. Two consequences worth knowing before editing:
 *
 * 1. Nothing confines these rules to the home page any more, so every selector
 *    is qh- prefixed or a descendant of one.
 * 2. @keyframes names are global too. Hence the qh- prefix on every one of
 *    them, so they cannot collide with the compiled Tailwind bundle.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. Keep every selector class-based and
 * prefixed; a bare element selector here would leak into the rest of the page
 * the same way the deleted css/site.css did.
 *
 * The hero is light — dark copy on white — and the dark surfaces are the console
 * on the right and the logo bar underneath it, which is pulled up over the
 * hero's lower edge so the three read as a single banner.
 *
 * Below the hero the same rhythm continues: light sections carrying white cards,
 * with two dark surfaces — the plans band and the closing call to action — spaced
 * far enough apart to punctuate rather than compete. One accent ramp throughout,
 * #4f46e5 → #7c3aed, the same one the hero's buttons and badge use. Section
 * chrome (.qh-sec, .qh-eyebrow, .qh-h2, .qh-lede, .qh-grid) is shared so every
 * band lines up on the same vertical scale.
 *
 * A few classes on this page's markup still come from the compiled Tailwind
 * bundle — the per-feature chip colours, the per-module gradient pair, and the
 * .startFreeTrial/.bookADemo buttons. The rules here deliberately leave those
 * properties alone and only handle geometry, since unlayered CSS would otherwise
 * beat the utilities and flatten every card to one colour.
 */

.qh-page {
    position: relative;
    min-height: 100vh;
    background: #fff;
}

.qh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 46%, #f4f2fe 100%);
    color: #0f172a;
    padding: 76px 0 96px;
}

/* ── ambient background ─────────────────────────────────────────────── */
.qh-hero__aurora,
.qh-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

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

.qh-hero__aurora i:nth-child(1) {
    width: 760px;
    height: 760px;
    top: -420px;
    right: -240px;
    background: radial-gradient(circle, rgba(129, 140, 248, .26), transparent 62%);
}

.qh-hero__aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -320px;
    left: -220px;
    animation-delay: -8s;
    background: radial-gradient(circle, rgba(167, 139, 250, .24), transparent 62%);
}

.qh-hero__aurora i:nth-child(3) {
    width: 480px;
    height: 480px;
    top: 30%;
    left: 46%;
    animation-delay: -15s;
    background: radial-gradient(circle, rgba(244, 114, 182, .10), transparent 62%);
}

/* The violet sweep that curves out of the bottom-left corner: an oversized
   ellipse clipped by the section's overflow, so only its upper-right arc shows.
   Kept low and wide so the curve stays in the corner instead of washing the
   whole panel. */
.qh-hero__wave {
    position: absolute;
    left: -6%;
    bottom: -184px;      /* px, not %, so the arc keeps its height whatever the
                            hero's own height turns out to be — a flat sweep of
                            about 90px, well clear of the reassurance tiles */
    width: min(58%, 700px);
    aspect-ratio: 2.55;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(124, 58, 237, .34), rgba(99, 102, 241, .24) 58%, rgba(129, 140, 248, .16));
    filter: blur(1px);
}

@keyframes qh-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-50px, 40px) scale(1.09); }
    66%      { transform: translate(40px, -30px) scale(.94); }
}

/* Fine dot field rather than the old grid — quieter against a light surface. */
.qh-hero__grid {
    opacity: .55;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .26) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 26% 22% at 7% 74%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 26% 22% at 7% 74%, #000, transparent 70%);
}

.qh-hero__inner {
    position: relative;
    z-index: 5;
}

.qh-hero__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
    gap: 56px;
    align-items: center;
}

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

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

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

/* Sized so "Smarter Decisions." holds one line in the left column at the
   container's widest — the two-line headline is the whole shape of the hero. */
.qh-hero__title {
    font-size: clamp(34px, 3.9vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 22px;
}

.qh-hero__accent {
    display: block;
    background: linear-gradient(96deg, #4f46e5 0%, #7c3aed 45%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qh-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.6;
    color: #64748b;
    max-width: 420px;
    margin: 0;
}

.qh-hero__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.qh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 30px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 650;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 20px 40px -16px rgba(79, 70, 229, .85);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}

.qh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 28px 54px -16px rgba(79, 70, 229, .95);
}

.qh-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: qh-sheen 5s ease-in-out infinite;
}

@keyframes qh-sheen {
    0%, 72%   { transform: translateX(-120%); }
    88%, 100% { transform: translateX(120%); }
}

/* Secondary action is a white pill on the light hero, not a bare text link. */
.qh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px 15px 15px;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 650;
    color: #1e293b;
    background: #fff;
    border: 1px solid #e6e6f2;
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, .5);
    transition: color .2s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}

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

.qh-btn-ghost__circ {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .9);
    transition: transform .25s;
}

.qh-btn-ghost:hover .qh-btn-ghost__circ { transform: scale(1.06); }

/* ── reassurance tiles ──────────────────────────────────────────────── */
.qh-hero__micro {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.qh-micro {
    display: flex;
    align-items: center;
    gap: 11px;
}

.qh-micro__ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #4f46e5;
    background: #eeecfd;
    border: 1px solid rgba(79, 70, 229, .14);
}

.qh-micro__tx {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #64748b;
    max-width: 124px;
}

.qh-micro__tx strong {
    display: block;
    font-weight: 650;
    color: #334155;
}

/* ── console ────────────────────────────────────────────────────────── */
.qh-console {
    position: relative;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(167, 139, 250, .85), rgba(79, 70, 229, .35) 38%, rgba(148, 163, 184, .18) 72%);
    box-shadow: 0 46px 110px -34px rgba(79, 70, 229, .6), 0 8px 24px -14px rgba(15, 23, 42, .3);
}

.qh-console__in {
    border-radius: 25px;
    background: linear-gradient(180deg, #14142b, #0a0a18);
    overflow: hidden;
}

.qh-console__bar {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.qh-console__dot {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 6px 16px -8px rgba(124, 58, 237, .95);
}

.qh-console__title {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.qh-console__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, .3);
    background: rgba(16, 185, 129, .1);
    padding: 5px 11px;
    border-radius: 99px;
}

.qh-console__live i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: #34d399;
    animation: qh-blip 2.2s ease-in-out infinite;
}

@keyframes qh-blip { 50% { opacity: .25; } }

/* Every scene is in the served HTML. Without scripting the first one shows,
   fully written out — the panel is never blank and the copy is always in the
   markup a crawler sees. home-hero.js marks the console .is-enhanced, and only
   then does the one-at-a-time cycling take over.

   Hide the SECOND scene onward rather than "all but :first-of-type" — the first
   div inside .qh-console__in is the title bar, so :first-of-type never matched a
   scene and the panel came up empty whenever the script had not run. */
.qh-scene ~ .qh-scene { display: none; }
.qh-console.is-enhanced .qh-scene { display: none; }
.qh-console.is-enhanced .qh-scene.is-active { display: block; }

.qh-ask {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(90deg, rgba(79, 70, 229, .16), transparent);
}

.qh-ask__spark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    box-shadow: 0 6px 18px -6px rgba(91, 91, 245, .9);
}

.qh-ask__q {
    font-size: 16.5px;
    font-weight: 500;
    color: #e2e8f0;
    min-height: 22px;
}

.qh-caret {
    display: none;
    width: 2px;
    height: 19px;
    background: #a5b4fc;
    margin-left: 2px;
    vertical-align: -3px;
    animation: qh-blink 1.05s steps(1) infinite;
}

/* the caret only makes sense while JS is doing the typing */
.qh-console.is-enhanced .qh-caret { display: inline-block; }

@keyframes qh-blink { 50% { opacity: 0; } }

.qh-answer {
    padding: 20px 20px 8px;
    display: grid;
    gap: 10px;
    min-height: 244px;
    align-content: start;
}

.qh-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
}

.qh-console.is-enhanced .qh-scene.is-active .qh-row,
.qh-console.is-enhanced .qh-scene.is-active .qh-summary {
    opacity: 0;
    transform: translateY(10px);
    animation: qh-rise .5s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes qh-rise { to { opacity: 1; transform: none; } }

.qh-row:nth-child(1) { animation-delay: 90ms; }
.qh-row:nth-child(2) { animation-delay: 220ms; }
.qh-row:nth-child(3) { animation-delay: 350ms; }
.qh-summary         { animation-delay: 520ms; }

.qh-row__av {
    width: 36px;
    height: 36px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}

.qh-row__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #e8edf6;
}

.qh-row__meta {
    display: block;
    font-size: 12px;
    color: #7c8aa5;
    margin-top: 2px;
}

.qh-row__tail {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 99px;
    white-space: nowrap;
}

.qh-row__tail.is-ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(16, 185, 129, .24);
}

.qh-row__tail.is-warn {
    color: #fcd34d;
    background: rgba(245, 158, 11, .13);
    border: 1px solid rgba(245, 158, 11, .24);
}

.qh-row__tail.is-info {
    color: #93c5fd;
    background: rgba(59, 130, 246, .13);
    border: 1px solid rgba(59, 130, 246, .24);
}

.qh-summary {
    display: flex;
    gap: 11px;
    padding: 15px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #c7d2fe;
    background: linear-gradient(100deg, rgba(79, 70, 229, .2), rgba(139, 92, 246, .09));
    border: 1px solid rgba(139, 92, 246, .26);
}

.qh-console__chips {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    flex-wrap: wrap;
}

.qh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    padding: 6px 10px;
    border-radius: 99px;
}

/* ── trusted-by bar ─────────────────────────────────────────────────── */
.qh-trustbar-wrap {
    position: relative;
    z-index: 6;
    margin-top: -46px;      /* rides up over the hero's lower edge; the hero's own
                               bottom padding stands on its own if this section is
                               switched off or has no logos */
    padding: 56px 0 60px;
    /* Open band, no card: the wash carries the hero's violet down and lets go of
       it before the next section, so the logos sit on air rather than in a box. */
    background: radial-gradient(90% 120% at 50% 0%, #efeafe, #fbfbfe 58%, #fff);
}

.qh-trustbar {
    position: relative;
}

.qh-trustbar__label {
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748b;
}

.qh-trustbar__label em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7c3aed;
}

.qh-trustbar__label strong {
    display: block;
    margin: 14px 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #0f172a;
}

.qh-trustbar__label > span {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}

/* Fades the marquee into the band's edges instead of cutting it dead. */
.qh-rail {
    position: relative;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* The track carries the rail twice, so -50% lands on an identical frame whatever
   the logo count is. Hovering anywhere on the row parks it. */
@keyframes qh-rail-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.qh-rail__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: qh-rail-scroll 72s linear infinite; /* overridden inline per count */
}

.qh-rail:hover .qh-rail__track {
    animation-play-state: paused;
}

/* Hairline between logos, and a fixed row height they all centre on: the source
   images vary wildly in aspect ratio, and a shared baseline is what stops the
   row reading as a jumble. Colours are left untouched. */
.qh-rail__item {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 56px;
    padding: 0 34px;
    border-right: 1px solid rgba(15, 23, 42, .09);
}

.qh-rail__item img {
    max-height: 36px;
    max-width: 150px;
    object-fit: contain;
    transition: transform .25s ease;
}

.qh-rail__item:hover img {
    transform: scale(1.08);
}

.qh-trustbar__proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.qh-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 6px 14px -12px rgba(15, 23, 42, .5);
    font-size: 12.5px;
    color: #334155;
}

.qh-pill b {
    color: #4338ca;
}

/* ── award strip ────────────────────────────────────────────────────── */
/* Sits between the trust bar and the devices band, and dresses exactly as the
   award dialog does — the same barely-tinted card, the same struck medal,
   confetti, type and CTA — just laid out as a band, and folding back into the
   dialog's own column on small screens. */
.qh-awardstrip {
    padding: 26px 0 10px;
}

.qh-award {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 28px 44px;
    border-radius: 26px;
    /* The card wears a hairline in the award's two colours — gold into violet —
       drawn as a border-box gradient under a transparent border, with the
       dialog's tinted card painted over the padding box. */
    border: 1.5px solid transparent;
    background:
        radial-gradient(120% 90% at 50% 0%, #f6f2ff, #fdfcff 62%, #fff) padding-box,
        linear-gradient(135deg, rgba(232, 184, 75, .75), rgba(168, 85, 247, .55) 45%, rgba(88, 96, 224, .75)) border-box;
    /* The dialog's drop plus a violet halo, so the band glows against the two
       white sections that sandwich it. */
    box-shadow:
        0 44px 100px -30px rgba(11, 16, 32, .35),
        0 0 70px -6px rgba(168, 85, 247, .38);
}

/* The dialog's confetti layer, same scraps and same mask: thin out before the
   band's lower edge so no scrap lands on the citation or the button. */
.qh-award__confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, .35) 62%, transparent 76%);
    mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, .35) 62%, transparent 76%);
}

.qh-award__confetti i {
    position: absolute;
    display: block;
    width: 7px;
    height: 11px;
    border-radius: 1.5px;
    opacity: .85;
}

.qh-award__confetti i:nth-child(odd)  { background: #e8b84b; }
.qh-award__confetti i:nth-child(even) { background: #a855f7; }

.qh-award__confetti i:nth-child(3n) {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.qh-award__confetti i:nth-child(1)  { top: 9%;  left: 12%; transform: rotate(28deg); }
.qh-award__confetti i:nth-child(2)  { top: 6%;  left: 30%; transform: rotate(-42deg); }
.qh-award__confetti i:nth-child(3)  { top: 15%; left: 72%; }
.qh-award__confetti i:nth-child(4)  { top: 8%;  left: 85%; transform: rotate(18deg); }
.qh-award__confetti i:nth-child(5)  { top: 24%; left: 6%;  transform: rotate(-14deg); }
.qh-award__confetti i:nth-child(6)  { top: 21%; left: 91%; transform: rotate(52deg); }
/* Scrap 7 sits higher than its dialog twin: the band is short, so the dialog's
   position put it on the headline's first word. */
.qh-award__confetti i:nth-child(7)  { top: 10%; left: 50%; }
.qh-award__confetti i:nth-child(8)  { top: 31%; left: 80%; transform: rotate(-36deg); }
.qh-award__confetti i:nth-child(9)  { top: 44%; left: 8%;  transform: rotate(64deg); }
.qh-award__confetti i:nth-child(10) { top: 41%; left: 89%; transform: rotate(-22deg); }
.qh-award__confetti i:nth-child(11) { top: 53%; left: 5%; }
.qh-award__confetti i:nth-child(12) { top: 50%; left: 76%; transform: rotate(40deg); }
.qh-award__confetti i:nth-child(13) { top: 63%; left: 11%; transform: rotate(-50deg); }
.qh-award__confetti i:nth-child(14) { top: 60%; left: 87%; transform: rotate(16deg); }

/* The medal, at the dialog's own size and shadow. */
.qh-award__medal {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 132px;
    height: auto;
    filter: drop-shadow(0 16px 26px rgba(88, 96, 224, .38));
}

.qh-award__medaltx {
    fill: #f3d585;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.qh-award__medalyr {
    fill: #f7dc95;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.qh-award__laurel {
    fill: #e8b84b;
    stroke: #e8b84b;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.qh-award__laurel path { fill: none; }

.qh-award__laurel use { stroke: none; }

/* The uploaded badge takes the medal's slot, contained rather than cropped. */
.qh-award__badge {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    max-width: 150px;
    max-height: 120px;
    object-fit: contain;
}

.qh-award__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
}

/* The dialog's eyebrow chip, rules and all. */
.qh-award__eyebrow {
    position: relative;
    margin-bottom: 12px;
}

.qh-award__eyebrow::before,
.qh-award__eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .55));
}

.qh-award__eyebrow::before { right: calc(100% + 12px); }

.qh-award__eyebrow::after {
    left: calc(100% + 12px);
    transform: scaleX(-1);
}

.qh-award__title {
    margin: 0;
    font-size: clamp(19px, 1.8vw, 24px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #0b1020;
    text-wrap: balance;
}

.qh-award__note {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
}

/* The dialog's CTA, sized to the band rather than full width. */
.qh-award__link {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 99px;
    font-size: 14.5px;
    font-weight: 650;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #b028f0, #5860e0);
    box-shadow: 0 18px 34px -16px rgba(88, 96, 224, .95);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}

.qh-award__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 46px -16px rgba(88, 96, 224, 1);
}

/* Until someone types the real award name, the strip says so out loud rather
   than passing its stand-in text off as the citation. */
.qh-awardstrip.is-unset .qh-award {
    background: repeating-linear-gradient(135deg, #b45309, #b45309 14px, #92400e 14px, #92400e 28px);
    box-shadow: 0 32px 70px -34px rgba(180, 83, 9, .9);
}

.qh-awardstrip.is-unset .qh-award__confetti { display: none; }
.qh-awardstrip.is-unset .qh-award__eyebrow { color: #fef3c7; background: rgba(255, 255, 255, .12); }
.qh-awardstrip.is-unset .qh-award__title { color: #fff; }
.qh-awardstrip.is-unset .qh-award__note { color: #fef3c7; }

@media (prefers-reduced-motion: reduce) {
    .qh-award__link:hover { transform: none; }
}

/* Below the band's width the layout folds into the dialog's own column:
   medal on top, centred text, full-width CTA. */
@media (max-width: 860px) {
    .qh-award {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 28px 24px;
    }

    .qh-award__medal { width: 118px; }
    .qh-award__eyebrow { margin-bottom: 10px; }
    .qh-award__link { width: 100%; }
}

/* The rail is decoration, not content — hold it still for anyone who asked the
   OS to cut motion. */
@media (prefers-reduced-motion: reduce) {
    .qh-rail__track { animation: none; }
    .qh-rail__item:hover img { transform: none; }
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr floors the track at the console's
       min-content width, which is wider than a phone and pushed the whole hero
       into a horizontal scroll. */
    .qh-hero__cols { grid-template-columns: minmax(0, 1fr); gap: 52px; }
    .qh-hero__lede { max-width: none; }
}

@media (max-width: 860px) {
    .qh-trustbar-wrap { padding: 42px 0 46px; }
    .qh-trustbar__label { margin-bottom: 26px; }
    .qh-rail__item { height: 46px; padding: 0 22px; }
    .qh-rail__item img { max-height: 30px; max-width: 118px; }
    .qh-trustbar__proof { margin-top: 26px; }
}

@media (max-width: 760px) {
    .qh-hero { padding: 56px 0 76px; }
    .qh-hero__title { font-size: clamp(30px, 7.6vw, 42px); }
    .qh-ask__q { font-size: 15px; }
    .qh-hero__micro { gap: 14px 22px; }
    .qh-hero__wave { bottom: -150px; width: 96%; }
    .qh-answer { min-height: 0; }
    .qh-trustbar-wrap { margin-top: -34px; padding: 36px 0 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SECTIONS — everything below the hero and its logo bar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── section shell ──────────────────────────────────────────────────── */
.qh-sec {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
}

/* Soft colour wash. Two blurred discs rather than a flat gradient, so the
   light sections have somewhere for the eye to rest without a hard edge. */
.qh-sec__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-sec__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
}

.qh-sec__aura i:nth-child(1) {
    width: min(70vw, 560px);
    height: min(60vw, 480px);
    top: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(129, 140, 248, .20), transparent 64%);
}

.qh-sec__aura i:nth-child(2) {
    width: min(60vw, 440px);
    height: min(52vw, 400px);
    bottom: -200px;
    left: -160px;
    background: radial-gradient(circle, rgba(167, 139, 250, .16), transparent 64%);
}

/* Same dot field as the hero, faded out at the edges so it never meets a
   section boundary as a visible rectangle. */
.qh-sec__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .22) 1.1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000, transparent 72%);
}

.qh-sec .boxed-container {
    position: relative;
    z-index: 2;
}

.qh-sec__head {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.qh-sec__head--flush { margin-bottom: 0; }

/* ── shared type ────────────────────────────────────────────────────── */
.qh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #5b21b6;
    background: rgba(124, 58, 237, .07);
    border: 1px solid rgba(124, 58, 237, .16);
}

.qh-eyebrow--sky {
    color: #0369a1;
    background: rgba(14, 165, 233, .08);
    border-color: rgba(14, 165, 233, .2);
}

.qh-eyebrow--dark {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
    border-color: rgba(139, 92, 246, .3);
}

.qh-h2 {
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 18px;
}

.qh-h2--dark { color: #fff; }

.qh-lede {
    font-size: clamp(15.5px, 1.15vw, 17.5px);
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

.qh-lede--dark { color: #94a3b8; }

.qh-h2--left,
.qh-lede--left { text-align: left; }

.qh-lede--left { max-width: 560px; }

/* ── shared card grid ───────────────────────────────────────────────── */
.qh-grid {
    display: grid;
    gap: 24px;
}

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

/* One white card, used by the trust badges. The top hairline is the accent
   ramp, revealed on hover so a grid at rest stays quiet. */
.qh-card {
    position: relative;
    padding: 30px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -32px rgba(15, 23, 42, .5);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 55%, #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.qh-card:hover {
    transform: translateY(-4px);
    border-color: #ddd9f7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 34px 60px -34px rgba(79, 70, 229, .45);
}

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

/* The badge icons are emoji from the content document, so this is a type
   size rather than a coloured tile. */
.qh-card__glyph {
    display: block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 18px;
}

.qh-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #0b1020;
    margin: 0 0 9px;
    letter-spacing: -.01em;
}

.qh-card__body {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ── the award dialog ───────────────────────────────────────────────── */
/* Opened by js/home-awards.js a couple of seconds after the front page settles.
 * The markup ships with the `hidden` attribute on, so everything here describes a
 * panel that only exists once a script has decided it should.
 *
 * Two shells: a dark navy frame carrying the gradient edge, and the light card
 * inside it. The frame is what makes the panel read as a presentation case rather
 * than as another white modal, and it is the only dark surface on the page that
 * is not a band.
 */
.qh-apop {
    position: fixed;
    inset: 0;
    z-index: 9990;      /* over the header, under the nav drawer's own layer */
    display: grid;
    place-items: center;
    padding: 24px;
}

.qh-apop[hidden] { display: none; }

.qh-apop__veil {
    position: absolute;
    inset: 0;
    background: rgba(11, 16, 32, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s ease;
}

.qh-apop.is-open .qh-apop__veil { opacity: 1; }

/* No frame: the card is the panel. It carries no border and no outer shell, so
   the only thing separating it from the veil is its own shadow — which is why
   that shadow is deep rather than decorative. Radius is set here as well as on
   the card because this is the element that scrolls, and an overflow container
   clips to its own corners. */
.qh-apop__dialog {
    position: relative;
    width: min(100%, 452px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 26px;
    box-shadow: 0 44px 100px -30px rgba(11, 16, 32, .6);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}

.qh-apop.is-open .qh-apop__dialog {
    opacity: 1;
    transform: none;
}

.qh-apop__card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    /* Barely tinted rather than flat white: the confetti and the medal's shadow
       both need something to sit on. */
    background: radial-gradient(120% 90% at 50% 0%, #f6f2ff, #fdfcff 62%, #fff);
}

.qh-apop__x {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #e7e2f7;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.qh-apop__x:hover {
    background: #f5f3ff;
    border-color: #ddd9f7;
    color: #4338ca;
}

/* The dialog puts focus here the moment it opens, so this ring is the first
   thing a keyboard user sees. In the panel's own violet rather than the
   browser's black, which on this card reads as a heavy second border. */
.qh-apop__x:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* ── confetti ───────────────────────────────────────────────────────── */
/* Fourteen scraps in the two award colours, placed by hand. Decoration and
   nothing else — the layer is aria-hidden and takes no pointer events, so it
   cannot swallow a click meant for the card. */
.qh-apop__confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    /* Thinned out over the lower half rather than repositioned scrap by scrap:
       the citation and the button live down there, and a gold rectangle landing
       on the last word of the headline reads as a rendering fault. */
    -webkit-mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, .35) 62%, transparent 76%);
    mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, .35) 62%, transparent 76%);
}

.qh-apop__confetti i {
    position: absolute;
    display: block;
    width: 7px;
    height: 11px;
    border-radius: 1.5px;
    opacity: .85;
}

.qh-apop__confetti i:nth-child(odd)  { background: #e8b84b; }
.qh-apop__confetti i:nth-child(even) { background: #a855f7; }

/* Every third scrap is a disc rather than a rectangle, which is what keeps the
   scatter from reading as a grid of identical ticks. */
.qh-apop__confetti i:nth-child(3n) {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.qh-apop__confetti i:nth-child(1)  { top: 9%;  left: 12%; transform: rotate(28deg); }
.qh-apop__confetti i:nth-child(2)  { top: 6%;  left: 30%; transform: rotate(-42deg); }
.qh-apop__confetti i:nth-child(3)  { top: 15%; left: 72%; }
.qh-apop__confetti i:nth-child(4)  { top: 8%;  left: 85%; transform: rotate(18deg); }
.qh-apop__confetti i:nth-child(5)  { top: 24%; left: 6%;  transform: rotate(-14deg); }
.qh-apop__confetti i:nth-child(6)  { top: 21%; left: 91%; transform: rotate(52deg); }
.qh-apop__confetti i:nth-child(7)  { top: 34%; left: 17%; }
.qh-apop__confetti i:nth-child(8)  { top: 31%; left: 80%; transform: rotate(-36deg); }
.qh-apop__confetti i:nth-child(9)  { top: 44%; left: 8%;  transform: rotate(64deg); }
.qh-apop__confetti i:nth-child(10) { top: 41%; left: 89%; transform: rotate(-22deg); }
.qh-apop__confetti i:nth-child(11) { top: 53%; left: 21%; }
.qh-apop__confetti i:nth-child(12) { top: 50%; left: 76%; transform: rotate(40deg); }
.qh-apop__confetti i:nth-child(13) { top: 63%; left: 11%; transform: rotate(-50deg); }
.qh-apop__confetti i:nth-child(14) { top: 60%; left: 87%; transform: rotate(16deg); }

/* Contained rather than cropped, for the same reason the footer's badge is. */
.qh-apop__img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    padding: 24px 24px 0;
}

.qh-apop__body {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding: 26px 30px 22px;
}

/* Two short rules flanking the eyebrow, the way a certificate rules off its
   own heading. */
.qh-apop__eyebrow {
    position: relative;
}

.qh-apop__eyebrow::before,
.qh-apop__eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .55));
}

.qh-apop__eyebrow::before { right: calc(100% + 12px); }

.qh-apop__eyebrow::after {
    left: calc(100% + 12px);
    transform: scaleX(-1);
}

/* ── the medal ──────────────────────────────────────────────────────── */
.qh-apop__medal {
    width: 150px;
    height: auto;
    margin: 12px 0 2px;
    filter: drop-shadow(0 16px 26px rgba(88, 96, 224, .38));
}

/* The word arched over the field. Set here rather than on the element so the
   two medal texts share one type scale. */
.qh-apop__medaltx {
    fill: #f3d585;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.qh-apop__medalyr {
    fill: #f7dc95;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* The wreath: stems stroked, leaves filled, both in the same gold. */
.qh-apop__laurel {
    fill: #e8b84b;
    stroke: #e8b84b;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.qh-apop__laurel path { fill: none; }

.qh-apop__laurel use { stroke: none; }

.qh-apop__badge {
    position: relative;
    z-index: 2;
    max-width: 180px;
    max-height: 130px;
    object-fit: contain;
    margin: 18px 0 10px;
}

/* ── the citation ───────────────────────────────────────────────────── */
.qh-apop__title {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #0b1020;
}

/* Ruled off on both sides, as the eyebrow is — it is the award's provenance,
   not a subtitle. */
.qh-apop__pub {
    position: relative;
    margin: 13px 0 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #a830e8;
}

.qh-apop__pub::before,
.qh-apop__pub::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 1px;
    background: rgba(168, 48, 232, .4);
}

.qh-apop__pub::before { right: calc(100% + 10px); }
.qh-apop__pub::after  { left: calc(100% + 10px); }

.qh-apop__line {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
}

/* The one action in the panel, so it is filled and full width rather than
   outlined: nothing here competes with it. */
.qh-apop__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
    padding: 15px 26px;
    border-radius: 99px;
    font-size: 14.5px;
    font-weight: 650;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #b028f0, #5860e0);
    box-shadow: 0 18px 34px -16px rgba(88, 96, 224, .95);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}

.qh-apop__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 46px -16px rgba(88, 96, 224, 1);
}

/* The flourish that closes the panel. */
.qh-apop__stars {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #c4a2f5;
}

.qh-apop__stars svg:nth-child(2) { color: #e8b84b; }

@media (max-width: 480px) {
    .qh-apop { padding: 14px; }
    .qh-apop__dialog,
    .qh-apop__card { border-radius: 22px; }
    .qh-apop__body { padding: 24px 20px 22px; }
    .qh-apop__medal { width: 138px; }
    .qh-apop__title { font-size: 19.5px; }
}

/* ── devices ────────────────────────────────────────────────────────── */
.qh-devices {
    background: linear-gradient(180deg, #fff, #fbfaff 55%, #fff);
}

.qh-devices__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
}

.qh-featlist {
    display: grid;
    gap: 10px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* Each reason is its own hoverable row rather than a bullet — same idea as
   the hero's reassurance tiles, one step denser. */
.qh-feat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid transparent;
    transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.qh-feat:hover {
    transform: translateX(3px);
    background: #fff;
    border-color: #ecebf5;
}

/* Geometry only — the background and text colour arrive on the same element
   from the feature's own chip classes. */
.qh-feat__ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.qh-feat:hover .qh-feat__ic { transform: scale(1.06); }

.qh-feat__tx {
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
    padding-top: 2px;
}

.qh-feat__tx strong {
    font-weight: 700;
    color: #0f172a;
}

/* Browser frame around the video poster. */
.qh-window {
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(167, 139, 250, .7), rgba(79, 70, 229, .28) 40%, rgba(148, 163, 184, .16) 76%);
    box-shadow: 0 44px 96px -40px rgba(79, 70, 229, .55), 0 8px 22px -14px rgba(15, 23, 42, .28);
}

.qh-window__in {
    border-radius: 23px;
    background: #fff;
    overflow: hidden;
}

.qh-window__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f5;
    background: #fafbfd;
}

.qh-window__tl {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    flex: 0 0 auto;
}

.qh-window__tl.is-r { background: #fb7185; }
.qh-window__tl.is-a { background: #fbbf24; }
.qh-window__tl.is-g { background: #34d399; }

.qh-window__url {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.qh-window__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.qh-play {
    position: absolute;
    inset: 0;
    display: block;
}

.qh-play__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.qh-play:hover .qh-play__poster { transform: scale(1.04); }

.qh-play__veil {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(9, 9, 20, .3), rgba(9, 9, 20, .48));
    transition: background .25s;
}

.qh-play:hover .qh-play__veil { background: linear-gradient(180deg, rgba(9, 9, 20, .22), rgba(9, 9, 20, .4)); }

.qh-play__btn {
    width: 66px;
    height: 66px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    padding-left: 4px;       /* optical centring of the triangle */
    color: #4f46e5;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 40px -16px rgba(9, 9, 20, .8);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .2s;
}

.qh-play:hover .qh-play__btn {
    transform: scale(1.08);
    background: #fff;
}

/* ── security / trust badges ────────────────────────────────────────── */
.qh-security { background: #fff; }

/* ── plans (dark band) ──────────────────────────────────────────────── */
.qh-plans {
    background: linear-gradient(180deg, #0b0b14, #0e0e1c 50%, #0b0b14);
}

.qh-plans__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-plans__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(110px);
}

.qh-plans__aura i:nth-child(1) {
    width: min(80vw, 680px);
    height: min(60vw, 480px);
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99, 102, 241, .34), transparent 64%);
}

.qh-plans__aura i:nth-child(2) {
    width: min(64vw, 520px);
    height: min(54vw, 420px);
    bottom: -240px;
    right: -120px;
    background: radial-gradient(circle, rgba(168, 85, 247, .2), transparent 66%);
}

.qh-plans__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 74%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 74%);
}

.qh-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 30px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(6px);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}

.qh-plan:hover {
    transform: translateY(-5px);
    border-color: rgba(167, 139, 250, .42);
    box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .9);
}

.qh-plan__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.qh-plan.is-featured {
    background: linear-gradient(180deg, rgba(91, 91, 245, .17), rgba(139, 92, 246, .045));
    border-color: rgba(139, 92, 246, .5);
    box-shadow: 0 34px 84px -36px rgba(91, 91, 245, .9);
}

.qh-plan__glyph {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.qh-plan.is-featured .qh-plan__glyph {
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 10px 24px -10px rgba(91, 91, 245, .95);
}

/* The four cells stand for "how many modules are switched on" — one lit for
   Free, all four for QHRM and for Outsourced HR, which runs the same complete
   platform on the customer's behalf. The count comes from the document's
   modulesLit. */
.qh-plan__cell { fill: rgba(255, 255, 255, .16); }
.qh-plan__cell.is-on { fill: #a5b4fc; }
.qh-plan.is-featured .qh-plan__cell { fill: rgba(255, 255, 255, .34); }
.qh-plan.is-featured .qh-plan__cell.is-on { fill: #fff; }

.qh-plan__badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ddd6fe;
    background: rgba(124, 58, 237, .24);
    border: 1px solid rgba(167, 139, 250, .36);
}

.qh-plan.is-featured .qh-plan__badge {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 10px 26px -10px rgba(91, 91, 245, .95);
}

.qh-plan__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 5px;
}

.qh-plan__segment {
    font-size: 13.5px;
    font-weight: 600;
    color: #a5b4fc;
    margin: 0 0 4px;
}

.qh-plan__range {
    font-size: 13px;
    color: #7c8aa5;
    margin: 0 0 14px;
}

.qh-plan__desc {
    font-size: 14px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ── the part that was not clickable ────────────────────────────────── */
/* The feature list used to sit between the description and this, carrying
   flex-grow and pushing the button to the bottom of the card. The cards show
   only the plan's head now, so the footer does that job itself — margin-top:auto
   keeps the three buttons on one line however long the descriptions run. The
   description's own bottom border is the card's single divider; a border here
   too would draw a second rule across an otherwise empty gap. */
.qh-plan__foot {
    margin-top: auto;
    padding-top: 4px;
}

.qh-plan__price {
    margin: 0 0 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.qh-plan__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 18px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 650;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s, border-color .22s, box-shadow .22s, color .22s;
}

.qh-plan__cta:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .3);
}

.qh-plan__cta:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

.qh-plan.is-featured .qh-plan__cta {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 18px 40px -16px rgba(91, 91, 245, .9);
}

.qh-plan.is-featured .qh-plan__cta:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 26px 50px -16px rgba(91, 91, 245, 1);
}

.qh-plan__arrow { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.qh-plan__cta:hover .qh-plan__arrow { transform: translateX(3px); }

.qh-plans__note {
    margin: 44px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: #7c8aa5;
}

/* ── modules ────────────────────────────────────────────────────────── */
.qh-modules {
    background: linear-gradient(180deg, #fbfaff, #fff 46%, #fbfaff);
    border-bottom: 1px solid #eeecf8;
}

.qh-mod {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -32px rgba(15, 23, 42, .5);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-mod:hover {
    transform: translateY(-5px);
    border-color: #d9d4f6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 36px 64px -34px rgba(79, 70, 229, .5);
}

/* Geometry only — the gradient pair is supplied per module by the utilities
   already on this element. */
.qh-mod__ic {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 20px;
    box-shadow: 0 14px 26px -16px rgba(15, 23, 42, .6);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.qh-mod:hover .qh-mod__ic { transform: scale(1.06) rotate(-3deg); }

.qh-mod__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d28d9;
    margin: 0 0 8px;
}

.qh-mod__title {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #0b1020;
    margin: 0 0 10px;
    transition: color .2s;
}

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

.qh-mod__body {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
    flex-grow: 1;
}

.qh-mod__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 13.5px;
    font-weight: 650;
    color: #4f46e5;
}

.qh-mod__cta svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

.qh-mod:hover .qh-mod__cta svg { transform: translateX(4px); }

/* ── how it works ───────────────────────────────────────────────────── */
.qh-how { background: #fff; }

.qh-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* The rule that ties the three steps together. It is drawn behind the cards
   and stops short of both outer edges, so it reads as a track rather than a
   border; the one-column layout switches it off. */
.qh-steps::before {
    content: "";
    position: absolute;
    top: 62px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(124, 58, 237, .3) 0 7px, transparent 7px 15px);
}

.qh-step {
    position: relative;
    padding: 32px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 44px -34px rgba(15, 23, 42, .5);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-step:hover {
    transform: translateY(-4px);
    border-color: #ddd9f7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 34px 60px -34px rgba(79, 70, 229, .45);
}

.qh-step__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.qh-step__num {
    width: 46px;
    height: 46px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .95), 0 0 0 6px #fff;
}

.qh-step__glyph {
    font-size: 28px;
    line-height: 1;
}

.qh-step__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #0b1020;
    margin: 0 0 10px;
}

.qh-step__body {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ── custom sections ────────────────────────────────────────────────── */
.qh-custom { background: #fff; }

.qh-custom__img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 44px;
    border-radius: 22px;
    border: 1px solid #ecebf5;
    box-shadow: 0 40px 80px -44px rgba(15, 23, 42, .55);
}

/* ── closing call to action ─────────────────────────────────────────── */
.qh-cta {
    background: linear-gradient(180deg, #fff, #fbfaff);
}

.qh-cta__panel {
    position: relative;
    overflow: hidden;
    padding: 76px 40px;
    border-radius: 30px;
    background: linear-gradient(140deg, #14142b, #0d0d1c 56%, #171733);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 60px 120px -50px rgba(15, 23, 42, .8);
}

.qh-cta__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-cta__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(100px);
}

.qh-cta__aura i:nth-child(1) {
    width: min(70vw, 520px);
    height: min(50vw, 380px);
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99, 102, 241, .42), transparent 64%);
}

.qh-cta__aura i:nth-child(2) {
    width: min(56vw, 420px);
    height: min(46vw, 340px);
    bottom: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(168, 85, 247, .26), transparent 66%);
}

.qh-cta__in {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.qh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
}

.qh-cta__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.qh-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}

.qh-cta__badge em {
    font-style: normal;
    color: #34d399;
}

/* ── responsive: sections ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .qh-devices__cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .qh-lede--left { max-width: none; }
}

@media (max-width: 900px) {
    .qh-sec { padding: 80px 0; }
    .qh-sec__head { margin-bottom: 44px; }
    .qh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qh-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .qh-steps::before { display: none; }
    .qh-cta__panel { padding: 56px 28px; }
}

@media (max-width: 640px) {
    .qh-sec { padding: 64px 0; }
    .qh-grid { gap: 18px; }
    .qh-grid--3,
    .qh-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .qh-plan { padding: 26px 22px; }
    .qh-cta__panel { padding: 46px 20px; border-radius: 24px; }
    .qh-cta__actions { flex-direction: column; }
    .qh-cta__actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .qh-hero__aurora i,
    .qh-badge__pip,
    .qh-console__live i,
    .qh-btn::after,
    .qh-caret,
    .qh-row,
    .qh-summary {
        animation: none !important;
    }

    .qh-console.is-enhanced .qh-scene.is-active .qh-row,
    .qh-console.is-enhanced .qh-scene.is-active .qh-summary {
        opacity: 1;
        transform: none;
    }

    /* Hover lifts and the poster zoom are motion too — leave the colour and
       shadow changes, drop the movement. */
    /* The dialog still opens — it is information, not decoration — it simply
       arrives without the rise-and-fade. */
    .qh-apop__veil,
    .qh-apop__dialog {
        transition: none;
    }

    .qh-apop__dialog {
        opacity: 1;
        transform: none;
    }

    .qh-card,
    .qh-apop__cta,
    .qh-feat,
    .qh-feat__ic,
    .qh-play__poster,
    .qh-play__btn,
    .qh-plan,
    .qh-plan__cta,
    .qh-plan__arrow,
    .qh-mod,
    .qh-mod__ic,
    .qh-mod__cta svg,
    .qh-step {
        transition-property: box-shadow, border-color, background, color;
    }

    .qh-card:hover,
    .qh-apop__cta:hover,
    .qh-feat:hover,
    .qh-plan:hover,
    .qh-mod:hover,
    .qh-step:hover,
    .qh-feat:hover .qh-feat__ic,
    .qh-mod:hover .qh-mod__ic,
    .qh-play:hover .qh-play__poster,
    .qh-play:hover .qh-play__btn,
    .qh-mod:hover .qh-mod__cta svg {
        transform: none;
    }
}


.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.video-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    background: #000;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.video-thumbnail img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.25);
    transition: .3s;
}

.video-thumbnail:hover .play-overlay {
    background: rgba(0,0,0,.4);
}

.play-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #000;
    transition: .3s;
}

.video-thumbnail:hover .play-button {
    transform: scale(1.08);
}






.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:24px;
}

.video-card{
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    background:#000;
}

.thumbnail{
    position:relative;
    width:100%;
}

.thumbnail img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}

.play-btn{
    position:absolute;
    top:18px;
    left:18px;

    width:78px;
    height:78px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    transition:.3s;
}

.play-btn:hover{
    transform:scale(1.08);
    background:#fff;
}

.play-btn svg{
    width:34px;
    height:34px;
    fill:#000;
    margin-left:5px;
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.video-wrapper iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}