/* Free-plan signup design layer.
 *
 * The presentation layer for Components/Pages/FreeSignupPage.razor — the
 * conversion step of the /free-hr-software campaign. Global CSS linked from
 * App.razor, so the three rules pages/free-trial.css sets out apply here too:
 *
 * 1. Nothing confines these rules to this page, so every selector is qfs-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global as well, hence the prefix on those — they must
 *    not collide with the compiled Tailwind bundle, Home's qh- animations or
 *    the trial page's qft- ones.
 * 3. These rules are unlayered and Tailwind v4's utilities live inside @layer,
 *    so they win regardless of specificity.
 *
 * WHY HAND-WRITTEN CSS AND NOT UTILITIES. The Tailwind bundle in wwwroot is a
 * Next.js build artefact holding only the utilities that build emitted, so a
 * class this page invents has no rule at runtime — the trap the previous
 * version of this page carried in two places: an arbitrary grid track that
 * collapsed to one column, and tracking-[0.5em] on the verification code box
 * that never spaced a single digit. Owning the CSS removes the constraint.
 *
 * WHY THIS PAGE OWNS ITS FIELDS AND /free-qhrm-trial DOES NOT. That page wraps
 * <SignupFlow />, which renders on six other routes and must therefore style
 * itself. This page renders its own form inline and is the only caller of it,
 * so the fields, the step rail, the code box and the outcome panels are all
 * dressed from here.
 *
 * Colour. The campaign ramp the landing page uses — #a22dea → #7b5ee5 →
 * #5b5de2 over the dark violet field #221049 → #140f33 — because a visitor
 * arrives here straight off /free-hr-software and the two must read as one
 * surface. Emerald (#10b981) is the single hue from outside it and carries one
 * meaning throughout: verified, or included in the free plan. Rose is reserved
 * for the two things that are genuinely wrong — a failed step and a required
 * field — and appears nowhere decorative.
 */

.qfs-page {
    position: relative;
    background: #fff;
}

/* ── hero ───────────────────────────────────────────────────────────── */
/* The deep lower padding is structural, not decorative: .qfs-main pulls itself
   up into it so the form card overlaps the dark field. */
.qfs-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 156px;
    background:
        radial-gradient(ellipse 92% 62% at 12% 0%, #3b1d7a 0%, transparent 58%),
        linear-gradient(150deg, #221049 0%, #1a1240 46%, #140f33 100%);
}

.qfs-aurora,
.qfs-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qfs-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(98px);
    opacity: .85;
    animation: qfs-drift 30s ease-in-out infinite;
}

.qfs-aurora i:nth-child(1) {
    width: 720px;
    height: 720px;
    top: -360px;
    left: -190px;
    background: radial-gradient(circle, rgba(162, 45, 234, .52), transparent 62%);
}

.qfs-aurora i:nth-child(2) {
    width: 600px;
    height: 600px;
    bottom: -340px;
    right: -120px;
    animation-delay: -11s;
    background: radial-gradient(circle, rgba(91, 93, 226, .5), transparent 62%);
}

.qfs-aurora i:nth-child(3) {
    width: 420px;
    height: 420px;
    top: 26%;
    left: 52%;
    animation-delay: -19s;
    background: radial-gradient(circle, rgba(16, 185, 129, .2), transparent 64%);
}

@keyframes qfs-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-44px, 36px) scale(1.08); }
    66%      { transform: translate(36px, -30px) scale(.93); }
}

.qfs-dots {
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1.1px, transparent 0);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 26% 12%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 62% at 26% 12%, #000, transparent 72%);
}

.qfs-hero__in {
    position: relative;
    z-index: 5;
}

.qfs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 8px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e9e7fb;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(167, 139, 250, .38);
}

.qfs-eyebrow span {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 99px;
    display: grid;
    place-items: center;
    color: #04241b;
    background: linear-gradient(135deg, #6ee7b7, #34d399);
}

.qfs-eyebrow svg { width: 12px; height: 12px; }

.qfs-hero__title {
    font-size: clamp(30px, 3.9vw, 50px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    max-width: 700px;
}

.qfs-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.72;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 28px;
    max-width: 640px;
}

.qfs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qfs-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px 9px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 650;
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
}

.qfs-chip__ic {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    border-radius: 99px;
    display: grid;
    place-items: center;
    color: #05261c;
    background: linear-gradient(135deg, #6ee7b7, #34d399);
}

.qfs-chip__ic svg { width: 12px; height: 12px; }

/* ── layout ─────────────────────────────────────────────────────────── */
/* Rides up over the hero's lower edge so the form reads as the point of the
   page rather than as the section after it. No background of its own: a
   fade-to-white here is keyed to this element's height, which is as tall as the
   form, so it would smear violet hundreds of pixels down the white page. */
.qfs-main {
    position: relative;
    z-index: 6;
    margin-top: -102px;
    padding-bottom: 92px;
}

.qfs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 32px;
    align-items: start;
}

/* ── form card ──────────────────────────────────────────────────────── */
/* A gradient hairline rather than a border: the card's top half sits on the
   dark violet field, where a flat 1px slate line disappears. */
.qfs-formcard {
    position: relative;
    padding: 1.5px;
    border-radius: 28px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .62), rgba(162, 45, 234, .48) 46%, rgba(91, 93, 226, .42));
    box-shadow: 0 54px 108px -48px rgba(0, 0, 0, .8), 0 12px 32px -20px rgba(15, 23, 42, .45);
}

.qfs-formcard__in {
    position: relative;
    overflow: hidden;
    padding: 32px 34px 30px;
    border-radius: 26.5px;
    background: linear-gradient(170deg, #fff 0%, #fdfcff 56%, #f9f6ff 100%);
}

.qfs-formcard__in::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -240px;
    right: -130px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .13), transparent 66%);
}

/* Lifts the content above ::before — a positioned pseudo-element paints over
   non-positioned siblings in the same stacking context, so without this the
   corner glow tints the rail and the first two fields. */
.qfs-rail,
.qfs-alert,
.qfs-form,
.qfs-panel { position: relative; z-index: 1; }

/* ── step rail ──────────────────────────────────────────────────────── */
/* Four fixed steps, so the rail doubles as an expectation-setter: both
   verifications are visible before anything is typed. The connectors carry the
   state — a filled one behind the visitor, a hairline in front — which is what
   makes it read as progress rather than as a list of four labels. */
.qfs-rail {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 28px;
    padding: 0 0 26px;
    border-bottom: 1px solid #f0eef9;
    list-style: none;
}

.qfs-rail__step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The connector eats the leftover width, so the rail spans the card whatever
   the labels measure and the last node lands flush right. */
.qfs-rail__step::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    min-width: 16px;
    margin: 0 12px;
    border-radius: 99px;
    background: #e8e6f4;
}

.qfs-rail__step:last-child { flex: 0 0 auto; }
.qfs-rail__step:last-child::after { display: none; }

/* A step is "done" only once the visitor is past it, so its outgoing connector
   is the one that fills — the line into the current step. */
.qfs-rail__step--done { flex: 1 1 auto; }
.qfs-rail__step--done::after { background: linear-gradient(90deg, #34d399, #a7f3d0); }

.qfs-rail__step--current { flex: 1 1 auto; }
.qfs-rail__step--current::after { background: linear-gradient(90deg, #ddd6fe, #eceafb); }

.qfs-rail__step--todo { flex: 1 1 auto; }

.qfs-rail__node {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    transition: background .3s, box-shadow .3s, color .3s;
}

.qfs-rail__step--done .qfs-rail__node {
    color: #fff;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 10px 22px -14px rgba(5, 150, 105, .95);
}

.qfs-rail__step--current .qfs-rail__node {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 12px 24px -12px rgba(140, 40, 220, .95), 0 0 0 4px rgba(124, 58, 237, .13);
}

.qfs-rail__step--todo .qfs-rail__node {
    color: #a1a0b8;
    background: #f2f1fa;
    box-shadow: inset 0 0 0 1px #e8e6f4;
}

.qfs-rail__node svg { width: 14px; height: 14px; }

.qfs-rail__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: #0b1020;
}

.qfs-rail__step--todo .qfs-rail__label { font-weight: 600; color: #a1a0b8; }

/* Replaces the rail's labels on narrow screens — see the media query. */
.qfs-rail__caption {
    display: none;
    font-size: 12.5px;
    font-weight: 650;
    color: #64748b;
    margin: 12px 0 0;
}

.qfs-rail__caption strong { color: #0b1020; }

/* ── alerts ─────────────────────────────────────────────────────────── */
.qfs-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 550;
}

.qfs-alert__ic {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    color: #fff;
}

.qfs-alert__ic svg { width: 13px; height: 13px; }

.qfs-alert--error {
    color: #9f1239;
    background: #fff1f4;
    border: 1px solid #fecdd8;
}

.qfs-alert--error .qfs-alert__ic { background: linear-gradient(135deg, #f43f5e, #e11d48); }

.qfs-alert--ok {
    color: #065f46;
    background: #f0fdf7;
    border: 1px solid #bbf7e0;
}

.qfs-alert--ok .qfs-alert__ic { background: linear-gradient(135deg, #10b981, #059669); }

/* ── fields ─────────────────────────────────────────────────────────── */
.qfs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.qfs-field {
    display: block;
    min-width: 0;
}

.qfs-field--wide { grid-column: 1 / -1; }

.qfs-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
    color: #3f3d56;
    margin-bottom: 7px;
}

.qfs-req { color: #f43f5e; }

.qfs-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 13px;
    border: 1px solid #e3e1f1;
    background: #fff;
    color: #0b1020;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.qfs-input::placeholder {
    color: #a3a2b8;
    font-weight: 450;
}

.qfs-input:hover { border-color: #cfcbe8; }

.qfs-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .13);
}

/* Blazor stamps valid/invalid on every field it binds, so the box turns rose at
   the same moment its message appears rather than leaving the message to point
   at a field that still looks fine. */
.qfs-input.invalid {
    border-color: #fb7185;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, .1);
}

/* A native select inside a styled shell keeps the platform arrow and its own
   metrics, so it has to be stripped back and given ours. */
.qfs-input--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6a86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

/* ── password: input + reveal ───────────────────────────────────────── */
/* The eye is laid over the input's right edge rather than placed beside it, so
   the password boxes keep the same width and baseline as every other field in
   the grid. --pass reserves the track it sits in. */
.qfs-pass {
    position: relative;
    display: block;
}

.qfs-input--pass { padding-right: 46px; }

.qfs-pass__eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    color: #8b8aa3;
    transition: color .2s, background .2s;
}

.qfs-pass__eye svg { width: 18px; height: 18px; }

.qfs-pass__eye:hover {
    color: #5b21b6;
    background: #f4f1fe;
}

.qfs-pass__eye:focus-visible {
    outline: none;
    color: #5b21b6;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .3);
}

/* Revealed is a state the visitor should be able to see at a glance — this is
   the one control on the form whose position gives away nothing about whether
   it is on. */
.qfs-pass__eye[aria-pressed="true"] { color: #7c3aed; }

.qfs-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: #7b7a92;
    margin-top: 7px;
}

.qfs-err {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #e11d48;
    margin-top: 7px;
}

/* ── phone: dial code + number as one control ───────────────────────── */
/* Two inputs, one shell. The dial code is a prefix of the number, not a second
   field, and the focus ring lights the whole control so it reads that way. */
.qfs-phone {
    display: flex;
    align-items: stretch;
    border-radius: 13px;
    border: 1px solid #e3e1f1;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.qfs-phone:hover { border-color: #cfcbe8; }

.qfs-phone:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .13);
}

.qfs-phone__dial {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    width: 82px;
    padding-left: 14px;
    background: #faf9fe;
    border-right: 1px solid #ece9f8;
}

.qfs-phone__plus {
    font-size: 14.5px;
    font-weight: 600;
    color: #8b8aa3;
    user-select: none;
}

/* The two inner inputs drop their own chrome — the shell above is the control. */
.qfs-phone__code,
.qfs-phone__num {
    min-width: 0;
    border: 0;
    background: transparent;
    color: #0b1020;
    font-size: 14.5px;
    line-height: 1.45;
    padding: 12px 0;
}

.qfs-phone__code:focus,
.qfs-phone__num:focus { outline: none; }

.qfs-phone__code {
    width: 100%;
    padding-right: 8px;
    font-weight: 700;
}

.qfs-phone__num {
    flex: 1 1 auto;
    padding: 12px 15px;
    font-weight: 500;
}

/* ── consent + submit ───────────────────────────────────────────────── */
.qfs-legal {
    font-size: 11.5px;
    line-height: 1.7;
    color: #7b7a92;
    margin: 20px 0 0;
}

.qfs-consent {
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    background: #faf9fe;
    border: 1px solid #ece9f8;
}

/* The shared component's own padding would sit on top of the box's. */
.qfs-consent.qfs-consent { padding-top: 13px; }

/* Buttons keep the site's .startFreeTrial gradient and .bookADemo fill — only
   the geometry changes here, so a column of full-width fields does not end in a
   shrink-to-fit control. Anchored on button so the success panel's <a> is left
   alone. */
.qfs-form button.qfs-submit {
    width: 100%;
    margin-top: 20px;
    padding: 15px 26px;
    border-radius: 14px;
    font-weight: 700;
}

.qfs-form button.startFreeTrial:disabled,
.qfs-form button.bookADemo:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.qfs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.qfs-actions button {
    flex: 1 1 180px;
    justify-content: center;
}

/* A text-weight control for the two "go back and change it" escapes — a third
   filled button beside Verify would compete with it. */
.qfs-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6a86;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}

.qfs-textlink:hover { color: #5b21b6; }

/* ── verification step ──────────────────────────────────────────────── */
.qfs-panel { max-width: 460px; }

.qfs-panel__ic {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 16px 32px -16px rgba(140, 40, 220, .95);
}

.qfs-panel__ic svg { width: 22px; height: 22px; }

.qfs-panel__t {
    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0b1020;
    margin: 0 0 10px;
}

.qfs-panel__d {
    font-size: 14px;
    line-height: 1.7;
    color: #5d5c74;
    margin: 0 0 24px;
}

.qfs-panel__d strong { color: #0b1020; font-weight: 700; }

/* The code box. Wide letter-spacing is the whole point of it — six digits read
   as six slots — and it is the reason this page could not stay on utilities:
   tracking-[0.5em] is not in the prebuilt bundle. */
.qfs-otp {
    width: 100%;
    max-width: 320px;
    padding: 15px 12px;
    border-radius: 15px;
    border: 1px solid #e3e1f1;
    background: #fff;
    color: #0b1020;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-indent: .42em;
    letter-spacing: .42em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s, box-shadow .2s;
}

.qfs-otp::placeholder {
    color: #cfcde0;
    font-weight: 700;
}

.qfs-otp:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .13);
}

.qfs-otp-field { margin-bottom: 22px; }

/* ── provisioning ───────────────────────────────────────────────────── */
.qfs-spinner {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 99px;
    border: 3px solid #ece9f8;
    border-top-color: #7c3aed;
    animation: qfs-spin .9s linear infinite;
}

@keyframes qfs-spin {
    to { transform: rotate(360deg); }
}

/* ── outcome panels ─────────────────────────────────────────────────── */
/* Success and hand-off share one shell so the page ends on the same shape
   either way; only the medallion and the tint say which happened. */
.qfs-result {
    position: relative;
    overflow: hidden;
    max-width: 560px;
    padding: 30px 30px 28px;
    border-radius: 22px;
}

.qfs-result--ok {
    background: linear-gradient(165deg, #f0fdf7, #ecfdf5);
    border: 1px solid #bbf7e0;
}

.qfs-result--warn {
    background: linear-gradient(165deg, #fffbeb, #fef8e7);
    border: 1px solid #fde68a;
}

.qfs-result__ic {
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
}

.qfs-result__ic svg { width: 25px; height: 25px; }

.qfs-result--ok .qfs-result__ic {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 16px 32px -16px rgba(5, 150, 105, .95);
}

.qfs-result--warn .qfs-result__ic {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 16px 32px -16px rgba(217, 119, 6, .95);
}

.qfs-result__t {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.028em;
    margin: 0 0 12px;
}

.qfs-result--ok .qfs-result__t { color: #064e3b; }
.qfs-result--warn .qfs-result__t { color: #78350f; }

.qfs-result__d {
    font-size: 14.5px;
    line-height: 1.72;
    margin: 0 0 22px;
}

.qfs-result--ok .qfs-result__d { color: #06614a; }
.qfs-result--warn .qfs-result__d { color: #854d0e; }

.qfs-result__d strong { font-weight: 700; }

.qfs-result__foot {
    font-size: 12.5px;
    line-height: 1.7;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.qfs-result--ok .qfs-result__foot { color: #06614a; }
.qfs-result--warn .qfs-result__foot { color: #854d0e; margin-top: 0; padding-top: 0; border-top: 0; }

.qfs-result a:not(.startFreeTrial):not(.bookADemo) {
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: inherit;
}

/* ── aside ──────────────────────────────────────────────────────────── */
.qfs-aside {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 20px;
    min-width: 0;
}

.qfs-card {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 28px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 30px 66px -44px rgba(79, 70, 229, .55);
}

.qfs-card::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    top: -200px;
    right: -110px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .13), transparent 66%);
}

.qfs-card__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.qfs-card__ic {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 14px 28px -14px rgba(5, 150, 105, .95);
}

.qfs-card__ic svg { width: 19px; height: 19px; }

.qfs-card__title {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0b1020;
    margin: 0;
}

.qfs-checks {
    position: relative;
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qfs-checks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

.qfs-checks li span:first-child {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #bbf7e0;
}

.qfs-checks li svg { width: 12px; height: 12px; }

.qfs-note {
    position: relative;
    font-size: 12.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid #f1f0fa;
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qfs-layout { grid-template-columns: minmax(0, 1fr) 322px; gap: 26px; }
    .qfs-rail__label { font-size: 12.5px; }
    .qfs-rail__step::after { margin: 0 9px; min-width: 12px; }
}

@media (max-width: 1024px) {
    /* The aside drops below the form, so it stops being sticky — a panel that
       tracks the viewport once it is full-width covers the content behind it. */
    .qfs-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .qfs-aside { position: static; }
}

@media (max-width: 760px) {
    .qfs-hero { padding: 42px 0 132px; }
    .qfs-hero__title { max-width: none; }
    .qfs-chip { font-size: 12.5px; }

    .qfs-main { margin-top: -88px; padding-bottom: 60px; }
    .qfs-formcard__in { padding: 24px 20px 22px; }

    .qfs-grid { grid-template-columns: minmax(0, 1fr); }
    .qfs-result { padding: 24px 20px 22px; }
    .qfs-card { padding: 22px 20px 24px; }
}

@media (max-width: 620px) {
    /* Four labels cannot fit, and wrapping them turns the rail into a paragraph
       that pushes the first field off the screen. The nodes alone still carry
       the shape of the flow; the caption below names where the visitor is. */
    .qfs-rail {
        padding-bottom: 18px;
        margin-bottom: 12px;
        flex-wrap: nowrap;
    }

    .qfs-rail__caption { margin: 0 0 22px; }

    .qfs-rail__label { display: none; }
    .qfs-rail__step { gap: 0; }
    .qfs-rail__step::after { margin: 0 6px; min-width: 10px; }
    .qfs-rail__caption { display: block; }

    .qfs-actions button { flex: 1 1 100%; }
    .qfs-otp { max-width: none; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .qfs-aurora i { animation: none !important; }
    .qfs-spinner { animation-duration: 2.4s; }
}