/* QHRM Connect registration page design layer.
 *
 * The presentation layer for Components/Pages/RegisterConnectPage.razor. Global
 * CSS, linked from App.razor, so the same three rules pages/talk-to-sales.css
 * sets out apply here:
 *
 * 1. Nothing confines these rules to this page, so every selector is qrc-
 *    prefixed or a descendant of one.
 * 2. @keyframes names are global too — hence qrc- on them, so they cannot
 *    collide with the compiled Tailwind bundle, Home's qh- animations or the
 *    sales page's qts- ones.
 * 3. These rules are unlayered and Tailwind v4's utilities live inside @layer,
 *    so they win regardless of specificity. Every selector stays class-based and
 *    prefixed — a bare element selector at the top level here would leak.
 *
 * WHY HAND-WRITTEN CSS AND NOT UTILITIES. The Tailwind bundle in wwwroot is a
 * Next.js build artefact containing only the utilities that build emitted, so a
 * class this page invents does not exist at runtime and an arbitrary value like
 * grid-cols-[1fr_372px] renders as nothing. The previous version of this page
 * was five utility-styled elements — a hero band and a bare form in a
 * max-w-2xl — which is why it had no identity of its own.
 *
 * FAMILY, NOT CLONE. /talk-to-sales and /book-qhrm-demo are the other
 * conversion pages and this one is built from the same parts — violet field,
 * form card overlapping it, aside beside it — but the texture and the accent
 * differ, because this page is an invitation rather than a sales conversation:
 * a node lattice instead of a diagonal weave, and a ticket stub where the sales
 * page has a question checklist.
 *
 * WHAT THIS FILE DOES NOT STYLE. <LeadForm /> renders on five other routes, so
 * every rule that reaches into it is a descendant of .qrc-form and touches
 * nothing on those routes.
 *
 * Colour. Both ends of the logo, and nothing else. The mark runs magenta-violet
 * through to a cornflower blue, so the page runs the site's violet ramp —
 * #4f46e5 → #7c3aed → #a22dea over the dark field #221049 → #140f33 — for its
 * structure, and the logo's blue — #1d4ed8 → #2563eb → #60a5fa, lightening to
 * #93c5fd where it has to read on the dark field — as the one accent. The
 * accent means one thing throughout: the event itself. It marks the badge, the
 * title's own name, the ticket stub and the checklist, and appears nowhere that
 * is merely chrome. Emerald appears once, on the confirmation panel, where it
 * means what it means everywhere on the site.
 */

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

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

.qrc-glow,
.qrc-nodes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qrc-glow i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(112px);
    opacity: .82;
    animation: qrc-drift 36s ease-in-out infinite;
}

.qrc-glow i:nth-child(1) {
    width: 660px;
    height: 660px;
    top: -320px;
    left: -200px;
    background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 62%);
}

.qrc-glow i:nth-child(2) {
    width: 580px;
    height: 580px;
    bottom: -320px;
    right: -140px;
    animation-delay: -14s;
    background: radial-gradient(circle, rgba(162, 45, 234, .44), transparent 62%);
}

/* The blue end of the logo, sitting behind the eyebrow and the title so the
   accent thread starts before the ticket stub introduces it. Brighter than the
   two violet lights either side of it: blue on violet is a small step in hue
   and would otherwise read as a dim patch rather than as a second colour. */
.qrc-glow i:nth-child(3) {
    width: 400px;
    height: 400px;
    top: 12%;
    right: 26%;
    animation-delay: -24s;
    background: radial-gradient(circle, rgba(37, 99, 235, .46), transparent 64%);
}

@keyframes qrc-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    34%      { transform: translate(-34px, 28px) scale(1.06); }
    70%      { transform: translate(32px, -26px) scale(.95); }
}

/* A lattice of dots on a hairline grid — people joined by lines, which is what
   the event is called. Two layers so the dots sit ON the intersections rather
   than floating between them: the grid is 44px and so is the dot field. */
.qrc-nodes {
    opacity: .55;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .32) 1.4px, transparent 1.6px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px);
    background-size: 44px 44px, auto, auto;
    -webkit-mask-image: radial-gradient(ellipse 76% 72% at 78% 14%, #000, transparent 74%);
    mask-image: radial-gradient(ellipse 76% 72% at 78% 14%, #000, transparent 74%);
}

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

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.qrc-crumbs {
    margin: 0 0 22px;
}

.qrc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.qrc-crumbs a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .18s;
}

.qrc-crumbs a:hover { color: #fff; }

.qrc-crumbs li[aria-current="page"] { color: rgba(255, 255, 255, .5); }

/* ── eyebrow ────────────────────────────────────────────────────────── */
/* Named, not described: "QHRM Connect" is the thing being registered for, so it
   is a badge above the sentence rather than a word inside it. */
.qrc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 15px 6px 6px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #bfdbfe;
    background: rgba(37, 99, 235, .2);
    border: 1px solid rgba(96, 165, 250, .38);
}

.qrc-eyebrow__pip {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .95);
}

.qrc-eyebrow__pip svg { width: 13px; height: 13px; }

.qrc-hero__title {
    font-size: clamp(32px, 4.1vw, 54px);
    line-height: 1.05;
    letter-spacing: -.036em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    max-width: 720px;
}

/* Only the event's own name takes the accent, and it takes it as the logo's
   own sweep. The verb stays white so the line still reads as an instruction
   rather than as a wordmark. Light blues, not the #2563eb the badge and the
   ticket use: on the dark field that mid blue is barely brighter than the
   violet behind it, and a 54px heading is the one thing on the page that must
   never be a near-miss on contrast. */
.qrc-accent {
    background: linear-gradient(100deg, #dbeafe, #93c5fd 46%, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

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

/* The leading mark is a pseudo-element, not an icon: these three chips state
   three unrelated facts, so any glyph specific enough to be meaningful would be
   wrong on two of them. */
.qrc-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 650;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
}

.qrc-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: linear-gradient(135deg, #93c5fd, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .26);
}

/* ── 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. Deliberately no background of its
   own — a fade-to-white gradient here would be keyed to this element's height,
   which is the form's height, and would smear violet down the white page. */
.qrc-main {
    position: relative;
    z-index: 6;
    margin-top: -108px;
    padding-bottom: 88px;
}

.qrc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    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. */
.qrc-formcard {
    position: relative;
    padding: 1.5px;
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(124, 58, 237, .5) 46%, rgba(79, 70, 229, .42));
    box-shadow: 0 54px 108px -48px rgba(0, 0, 0, .8), 0 12px 32px -20px rgba(15, 23, 42, .45);
}

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

.qrc-formcard__in::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: -230px;
    right: -120px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(124, 58, 237, .15), transparent 66%);
}

.qrc-formcard__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f0edfa;
}

.qrc-formcard__ic {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .95);
}

.qrc-formcard__ic svg { width: 20px; height: 20px; }

.qrc-formcard__title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0b1020;
    margin: 0 0 5px;
}

.qrc-formcard__sub {
    font-size: 13px;
    line-height: 1.6;
    color: #6f6d88;
    margin: 0;
}

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

/* ── the form itself ────────────────────────────────────────────────── */
/* <LeadForm /> renders on six routes and owns its own markup, so every rule
   below is a descendant of .qrc-form and reaches nothing on the other five.
 *
 * Two consequences of styling another component's DOM from outside, both
 * deliberate:
 *
 * 1. Selectors lean on structure (label.block > span:first-child) and on stable
 *    semantics (role="alert", type="checkbox", maxlength) rather than on the
 *    form's utility class strings, which are an implementation detail. The
 *    exceptions are commented where they occur.
 * 2. These rules are unlayered and Tailwind's utilities are layered, so they win
 *    without !important — which also means a utility the form relies on can be
 *    overridden by accident. The dial-code input is reset back explicitly below
 *    for exactly that reason. */

/* Fields. One shape for every control: the grid mixes inputs, a select and a
   textarea, and they have to read as one column. */
.qrc-form input:not([type="checkbox"]),
.qrc-form select,
.qrc-form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 13px;
    border: 1px solid #e6e3f5;
    background: #fbfaff;
    color: #0b1020;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.qrc-form textarea { min-height: 116px; resize: vertical; }

.qrc-form input::placeholder,
.qrc-form textarea::placeholder { color: #a3a0bb; }

.qrc-form input:not([type="checkbox"]):hover,
.qrc-form select:hover,
.qrc-form textarea:hover { border-color: #d6d0f0; }

/* Beats the form's focus:ring-2 utility on specificity, so the ring is this
   page's violet rather than the stock indigo. */
.qrc-form input:not([type="checkbox"]):focus,
.qrc-form select:focus,
.qrc-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .14), 0 1px 2px rgba(15, 23, 42, .05);
}

/* Blazor stamps .invalid on a field that failed validation — the border says so
   before the message underneath is read. */
.qrc-form input.invalid:not([type="checkbox"]),
.qrc-form select.invalid,
.qrc-form textarea.invalid {
    border-color: #fda4af;
    background: #fff7f8;
}

.qrc-form input.invalid:focus,
.qrc-form select.invalid:focus,
.qrc-form textarea.invalid:focus {
    border-color: #f43f5e;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, .14);
}

/* Field labels. Qualified on .block, which is what separates a field label from
   the consent row's — that one is a flex label owned by <ConsentCheck /> and
   must keep its own layout. */
.qrc-form label.block > span:first-child {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
    color: #334155;
}

/* The closing footnote under the button. */
.qrc-form form > p {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.65;
    color: #7c7a93;
}

.qrc-form .validation-message {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #e11d48;
}

/* Dial code + number. The wrapper is the only span sitting where a field would
   be, so the pair is addressed by position rather than by its utility classes.
   It exists only once a recognised country has been typed. */
.qrc-form label.block > span:nth-child(2) {
    display: flex;
    align-items: stretch;
    gap: 9px;
}

/* The code is read, not typed — LeadForm derives it from the country field —
   so it is a static prefix plate beside the input rather than a field of its
   own, matched to the input's height by stretch rather than by padding. */
.qrc-form label.block > span:nth-child(2) > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 84px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid #e6e3f5;
    background: #f4f1fd;
    color: #0b1020;
    font-size: 14.5px;
    font-weight: 700;
}

/* Verification code. maxlength="6" is what distinguishes it from every other
   input on the page. */
.qrc-form input[maxlength="6"] {
    padding: 15px 12px;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .42em;
    text-indent: .42em;
    color: #1e1b4b;
    background: #fff;
}

/* Consent. Boxed so the one thing being agreed to is not a loose line of small
   print between the message box and the submit button. */
.qrc-form form > div.pt-1 {
    padding: 13px 15px;
    border-radius: 15px;
    border: 1px solid #eceaf7;
    background: #fcfcfe;
}

.qrc-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #7c3aed;
    cursor: pointer;
}

/* Status panels — the submit failure notice and the two verification banners.
   Keyed on the ARIA roles the form already sets, so nothing here depends on its
   colour classes. */
.qrc-form div[role="alert"],
.qrc-form div[role="status"] {
    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.6;
}

/* ── the two later stages ───────────────────────────────────────────── */
/* Verify and Done replace the form inside a card that already has padding, a
   background and a radius, so their own p-8 rounded-2xl bg-white shell would be
   a second card drawn inside the first. Unwrapped here; the confirmation panel
   below keeps its shell, because there it is the whole content. */
.qrc-form > div[class*="bg-white"] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.qrc-form h2 {
    font-size: 19px;
    letter-spacing: -.025em;
    color: #0b1020;
}

/* Registered. Emerald, as success is everywhere else on the site, with the
   accent rule down the left tying it back to the event. */
.qrc-form > div[class*="bg-emerald-50"] {
    position: relative;
    overflow: hidden;
    padding: 26px 28px 26px 30px;
    border-radius: 18px;
    border: 1px solid #bbf7e0;
    background: linear-gradient(140deg, #f0fdf7, #ecfdf5);
}

.qrc-form > div[class*="bg-emerald-50"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #7c3aed, #3b82f6);
}

/* Buttons. The site's .startFreeTrial gradient and .bookADemo fill are left
   alone — only geometry, shadow and the pressed states change, so a column of
   full-width fields does not end in a shrink-to-fit control. */
.qrc-form button.startFreeTrial,
.qrc-form button.bookADemo {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.qrc-form button.startFreeTrial {
    box-shadow: 0 16px 34px -14px rgba(79, 70, 229, .75), 0 2px 6px -2px rgba(79, 70, 229, .3);
}

.qrc-form button.startFreeTrial:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px -14px rgba(79, 70, 229, .85), 0 3px 8px -2px rgba(79, 70, 229, .35);
}

.qrc-form button.startFreeTrial:active:not(:disabled) { transform: translateY(0); }

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

.qrc-form button.bookADemo:hover:not(:disabled) { border-color: #cfc6f0; }

/* The "skip this" escape hatch under the code field. */
.qrc-form button.underline {
    font-size: 12.5px;
    color: #6d6a86;
    text-underline-offset: 3px;
}

.qrc-form button.underline:hover { color: #4f46e5; }

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

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

.qrc-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, .12), transparent 66%);
}

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

.qrc-card__ic {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .95);
}

.qrc-card__ic svg { width: 18px; height: 18px; }

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

/* ── ticket stub ────────────────────────────────────────────────────── */
/* The one card that is not white, because it is not commentary: it is what a
   registration gets you. Drawn as a stub — dark field, logo rule, a perforated
   edge — so the four facts read as a thing you are being handed rather than as
   another list. Two of those facts are "we will tell you later", which is the
   truth and is better said on a ticket than buried in a paragraph. */
.qrc-ticket {
    position: relative;
    overflow: hidden;
    padding: 24px 24px 8px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 60% at 88% 0%, rgba(37, 99, 235, .46), transparent 62%),
        linear-gradient(158deg, #241452 0%, #1b1140 52%, #140f33 100%);
    box-shadow: 0 34px 70px -40px rgba(20, 15, 51, .9);
}

/* The logo's sweep, stood on end: violet at the top of the stub, blue at the
   bottom, in the order the mark itself runs. */
.qrc-ticket::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #a22dea, #4f46e5 46%, #3b82f6);
}

.qrc-ticket__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 16px;
    margin-bottom: 4px;
}

.qrc-ticket__ic {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 12px 26px -12px rgba(37, 99, 235, .95);
}

.qrc-ticket__ic svg { width: 17px; height: 17px; }

.qrc-ticket__title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
}

.qrc-ticket__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A dashed rule between rows, not a solid one — the only place on the site
   where a border says "tear here". */
.qrc-ticket__rows li {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-top: 1px dashed rgba(255, 255, 255, .16);
}

.qrc-ticket__k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #93c5fd;
    padding-top: 2px;
}

.qrc-ticket__v {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .84);
}

/* The perforation. Two notches cut out of the sides on the last rule, which is
   what makes the shape read as a stub rather than as a dark card. */
.qrc-ticket__perf {
    position: relative;
    display: block;
    height: 22px;
    margin: 0 -24px;
}

.qrc-ticket__perf::before,
.qrc-ticket__perf::after {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
}

.qrc-ticket__perf::before { left: -11px; }
.qrc-ticket__perf::after { right: -11px; }

/* ── checklist ──────────────────────────────────────────────────────── */
.qrc-checks {
    position: relative;
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.qrc-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: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

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

/* ── what happens next ──────────────────────────────────────────────── */
/* A numbered rail rather than more ticks: these four are a sequence in time and
   the checklist above is not, so they must not look the same. Held on the
   violet end of the logo for the same reason — the blue ticks above are facts
   about the day, these are what happens to you afterwards. */
.qrc-steps {
    position: relative;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: qrc-step;
}

.qrc-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

.qrc-steps li::before {
    counter-increment: qrc-step;
    content: counter(qrc-step);
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 800;
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

/* The thread joining the steps. Drawn from the marker down to the next one and
   suppressed on the last, so the rail ends where the sequence does. */
.qrc-steps li::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 27px;
    bottom: -16px;
    width: 1px;
    background: linear-gradient(180deg, #ddd6fe, rgba(221, 214, 254, .25));
}

.qrc-steps li:last-child::after { display: none; }

/* ── alternative routes ─────────────────────────────────────────────── */
/* Full width under the two columns rather than a fourth card in the aside: a
   visitor who is not going to register should be offered the way out after the
   form, not beside it. */
.qrc-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 26px;
    padding: 16px 22px;
    border-radius: 18px;
    border: 1px solid #eceaf7;
    background: linear-gradient(135deg, #faf9ff, #f6f3fe);
}

.qrc-alt__label {
    font-size: 13px;
    font-weight: 700;
    color: #3f3d56;
    margin-right: 2px;
}

.qrc-alt__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    color: #4f46e5;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e6e2f8;
    transition: color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.qrc-alt__link:hover {
    color: #6d28d9;
    border-color: #ddd6fe;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -16px rgba(79, 70, 229, .9);
}

.qrc-alt__link svg { width: 14px; height: 14px; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qrc-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; }
}

@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.
       Its cards go two-up rather than stacking into a long tail, and the ticket
       spans both because its rows are a two-column grid already. */
    .qrc-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .qrc-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .qrc-ticket { grid-column: 1 / -1; }
    .qrc-ticket__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
}

@media (max-width: 760px) {
    .qrc-hero { padding: 34px 0 138px; }
    .qrc-hero__title { max-width: none; }
    .qrc-chips { gap: 8px; }
    .qrc-chip { font-size: 12.5px; padding: 8px 15px; }

    .qrc-main { margin-top: -92px; padding-bottom: 58px; }
    .qrc-formcard__in { padding: 24px 20px 22px; }
    .qrc-formcard__head { padding-bottom: 17px; margin-bottom: 20px; }

    .qrc-form label.block > span:nth-child(2) > span:first-child { width: 84px; }
    .qrc-form input[maxlength="6"] { font-size: 22px; letter-spacing: .3em; text-indent: .3em; }

    .qrc-aside { grid-template-columns: minmax(0, 1fr); }
    .qrc-card { padding: 21px 19px 23px; }
    .qrc-ticket { padding: 21px 19px 6px; }
    .qrc-ticket__perf { margin: 0 -19px; }
    .qrc-ticket__rows { grid-template-columns: minmax(0, 1fr); }
    .qrc-ticket__rows li { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }

    .qrc-alt { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .qrc-glow i { animation: none !important; }
    .qrc-alt__link:hover,
    .qrc-form button.startFreeTrial:hover:not(:disabled) { transform: none; }
}