/* ==========================================================================================
   QuickCart Franchise — franchise.justquickcart.com

   Self-contained stylesheet for the standalone franchise site. Nothing here is shared with the
   Laravel panels: this folder is meant to be lifted onto its own subdomain, and a dependency on
   ../../assets/theme/* would break the moment it moved.

   The palette is the QuickCart storefront's: HeroUI primary #FF4FA6 on white, black ink. The
   typeface is Lexend Deca, the same family the storefront and the marketing site already load.

   Layout is CSS Grid + Flexbox with custom properties — no framework, no build step. Editing this
   file is the whole workflow.
   ========================================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand — matches tailwind.config.ts in the storefront repo. */
    --qc-primary: #ff4fa6;
    --qc-primary-hover: #f0207f;
    --qc-primary-active: #cc1266;
    --qc-primary-50: #fff1f7;
    --qc-primary-100: #ffe4ef;
    --qc-primary-200: #ffc9df;

    /* Neutrals */
    --qc-ink: #0a0a0a;
    --qc-ink-soft: #27272a;
    --qc-muted: #52525b;
    --qc-faint: #71717a;
    --qc-line: #e4e4e7;
    --qc-line-soft: #f4f4f5;
    --qc-surface: #ffffff;
    --qc-surface-alt: #fafafa;
    --qc-surface-dark: #0a0a0a;

    /* Feedback */
    --qc-success: #15803d;
    --qc-success-bg: #f0fdf4;
    --qc-danger: #dc2626;
    --qc-danger-bg: #fef2f2;
    --qc-warning: #b45309;
    --qc-warning-bg: #fffbeb;

    /*
     * Scale.
     *
     * One rule governs colour on this site: PINK FOR INTERACTION, NEUTRAL FOR SURFACES. Brand
     * colour marks the things you can act on — buttons, links, the checked state of an option, the
     * progress bar — and nothing else. Backgrounds, cards, section bands and icon tiles stay
     * greyscale. Tinting the surfaces too is what makes a page look like a template rather than a
     * company's site, and it leaves the buttons nothing to stand out against.
     *
     * Radii are small and shadows are nearly flat for the same reason: structure comes from
     * 1px borders and whitespace, not from depth effects.
     */
    --qc-radius-sm: 4px;
    --qc-radius: 8px;
    --qc-radius-lg: 12px;
    --qc-radius-pill: 999px;
    --qc-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
    --qc-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
    --qc-shadow-lg: 0 6px 24px rgba(10, 10, 10, 0.08);
    --qc-container: 1300px;
    --qc-header-height: 72px;

    --qc-font: "Lexend Deca", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Anchor targets clear the sticky header instead of hiding under it. */
    scroll-padding-top: calc(var(--qc-header-height) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--qc-font);
    font-weight: 350;
    font-size: 16px;
    line-height: 1.65;
    color: var(--qc-ink-soft);
    background: var(--qc-surface);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/*
 * The `hidden` attribute must win over a component's own `display`.
 *
 * The UA stylesheet sets `[hidden] { display: none }` at its own low origin, so ANY author rule
 * that sets `display` beats it — `.qc-btn { display: inline-flex }` and `img { display: block }`
 * both did, which left the step buttons and the empty upload thumbnails visible when the markup
 * had marked them hidden. Declared once, here, rather than special-cased per component.
 */
[hidden] {
    display: none !important;
}

a {
    color: var(--qc-primary-active);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    color: var(--qc-ink);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(1.9rem, 1.4rem + 2.1vw, 2.85rem);
}

h2 {
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
}

h3 {
    font-size: 1.05rem;
}

p {
    margin: 0 0 1rem;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 3px solid var(--qc-primary-200);
    outline-offset: 2px;
    border-radius: var(--qc-radius-sm);
}

/* ── Layout primitives ───────────────────────────────────────────────────────────────────── */

.qc-container {
    width: 100%;
    max-width: var(--qc-container);
    margin-inline: auto;
    padding-inline: 20px;
}

.qc-section {
    padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}

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

/* Neutral, not a pink wash — see the colour rule in the tokens block. */
.qc-section--tint {
    background: var(--qc-surface-alt);
}

.qc-section-head {
    max-width: 640px;
    margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}

.qc-section-head p {
    color: var(--qc-muted);
    margin-bottom: 0;
}

/* A kicker line, not a pill badge. Letter-spacing does the work colour used to. */
.qc-eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--qc-faint);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qc-grid {
    display: grid;
    gap: 1.25rem;
}

.qc-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.qc-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.qc-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

/* ── Buttons ─────────────────────────────────────────────────────────────────────────────── */

/*
 * Rectangular with a small radius, not pills. Pill buttons with a coloured glow are the single
 * strongest "generated landing page" tell; a plain rectangle is what actual product UI uses, and
 * it matches the input fields the form is mostly made of.
 */
.qc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.68rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--qc-radius);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qc-btn:hover {
    text-decoration: none;
}

.qc-btn:disabled,
.qc-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qc-btn--primary {
    background: var(--qc-primary);
    color: #fff;
}

.qc-btn--primary:hover {
    background: var(--qc-primary-hover);
    color: #fff;
}

.qc-btn--ghost {
    background: transparent;
    border-color: var(--qc-line);
    color: var(--qc-ink);
}

.qc-btn--ghost:hover {
    border-color: #d4d4d8;
    background: var(--qc-surface-alt);
    color: var(--qc-ink);
}

/* `.qc-btn--light` (white button for dark backgrounds) was removed — the dark CTA band now uses
   the ordinary primary button, so pink means "the action" everywhere with no second convention. */

/* Outlined button for the dark CTA band — replaces the inline overrides that used to sit in the
   markup, so the two pages that use it cannot drift apart. */
.qc-btn--on-dark {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.qc-btn--on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.qc-btn--block {
    width: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────────────────────── */

.qc-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--qc-line);
}

.qc-header__inner {
    height: var(--qc-header-height);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--qc-ink);
    letter-spacing: -0.02em;
}

.qc-logo:hover {
    text-decoration: none;
}

.qc-logo__mark {
    width: 34px;
    height: 34px;
    flex: none;
}

.qc-logo__sub {
    font-size: 0.68rem;
    font-weight: 450;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qc-primary);
    display: block;
    line-height: 1;
    margin-top: 2px;
}

.qc-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.qc-nav a {
    padding: 0.5rem 0.85rem;
    border-radius: var(--qc-radius-pill);
    color: var(--qc-muted);
    font-size: 0.95rem;
}

.qc-nav a:hover {
    background: var(--qc-primary-50);
    color: var(--qc-primary-active);
    text-decoration: none;
}

.qc-nav a[aria-current="page"] {
    color: var(--qc-ink);
    font-weight: 500;
}

.qc-header__cta {
    margin-left: 0.5rem;
    padding-block: 0.6rem;
}

.qc-nav-toggle {
    display: none;
    margin-left: auto;
    padding: 0.5rem;
    background: none;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-sm);
    cursor: pointer;
    color: var(--qc-ink);
}

@media (max-width: 900px) {
    .qc-nav-toggle {
        display: inline-flex;
    }

    .qc-nav {
        position: absolute;
        inset: var(--qc-header-height) 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem 20px 1.25rem;
        margin-left: 0;
        background: #fff;
        border-bottom: 1px solid var(--qc-line);
        box-shadow: var(--qc-shadow);
        display: none;
    }

    .qc-nav.is-open {
        display: flex;
    }

    .qc-nav a {
        padding: 0.75rem 0.5rem;
        border-radius: var(--qc-radius-sm);
    }

    .qc-header__cta {
        margin: 0.5rem 0 0;
    }
}

/* ── Hero ────────────────────────────────────────────────────────────────────────────────── */

/*
 * Plain white with a hairline bottom border. The two pink radial gradients that used to sit here were
 * pure decoration — they added no information and made every screenshot read as a template.
 */
.qc-hero {
    position: relative;
    overflow: hidden;
    background: var(--qc-surface);
    border-bottom: 1px solid var(--qc-line);
    padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);
}

.qc-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

@media (max-width: 900px) {
    .qc-hero__grid {
        grid-template-columns: 1fr;
    }
}

.qc-hero h1 {
    margin-bottom: 1rem;
}

.qc-hero h1 em {
    font-style: normal;
    color: var(--qc-primary);
}

.qc-hero__lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    color: var(--qc-muted);
    max-width: 34rem;
}

.qc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.qc-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--qc-line);
}

.qc-hero__stat strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--qc-ink);
    line-height: 1.1;
}

.qc-hero__stat span {
    font-size: 0.88rem;
    color: var(--qc-faint);
}

/* Hero panel — a stylised store card rather than a stock photo, so the folder ships with no
   binary assets to lose track of when it moves hosts. */
.qc-hero__panel {
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-lg);
    box-shadow: var(--qc-shadow);
    padding: 1.35rem;
}

.qc-hero__panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qc-line-soft);
}

.qc-hero__panel-head strong {
    display: block;
    color: var(--qc-ink);
    font-weight: 550;
}

.qc-hero__panel-head span {
    font-size: 0.85rem;
    color: var(--qc-faint);
}

.qc-hero__panel-rows {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.qc-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--qc-radius);
    background: var(--qc-surface-alt);
    font-size: 0.92rem;
}

.qc-panel-row span:first-child {
    color: var(--qc-muted);
}

.qc-panel-row strong {
    color: var(--qc-ink);
    font-weight: 550;
}

.qc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--qc-radius-pill);
    font-size: 0.76rem;
    font-weight: 500;
}

.qc-chip--success {
    background: var(--qc-success-bg);
    color: var(--qc-success);
}

.qc-chip--warning {
    background: var(--qc-warning-bg);
    color: var(--qc-warning);
}

.qc-chip--brand {
    background: var(--qc-primary-100);
    color: var(--qc-primary-active);
}

/* ── Cards ───────────────────────────────────────────────────────────────────────────────── */

.qc-card {
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    padding: 1.5rem;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Border darkens on hover. No lift, no shadow — a card is not a physical object. */
.qc-card--hover:hover {
    border-color: #d4d4d8;
}

.qc-card h3 {
    margin-bottom: 0.35rem;
}

.qc-card p:last-child {
    margin-bottom: 0;
    color: var(--qc-muted);
}

/* Neutral tile, ink glyph. A grid of pink squares reads as decoration, not as information. */
.qc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 0.85rem;
    border-radius: var(--qc-radius-sm);
    background: var(--qc-line-soft);
    color: var(--qc-ink);
}

.qc-icon svg {
    width: 22px;
    height: 22px;
}

/* Feature list — the "Why Choose QuickCart" grid. Denser than a card grid because there are
   twelve of them and they are one line each. */
.qc-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    background: #fff;
    font-size: 0.95rem;
}

.qc-feature svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    /* Ink, not pink — these glyphs decorate a statement, they are not something you can click. */
    color: var(--qc-ink);
}

.qc-feature strong {
    display: block;
    color: var(--qc-ink);
    font-weight: 500;
}

.qc-feature span {
    color: var(--qc-faint);
    font-size: 0.86rem;
}

/* Franchise model cards */
.qc-model {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-lg);
    padding: 1.6rem;
    height: 100%;
}

/* A darker border is enough to single one card out; the pink halo was shouting. */
.qc-model--featured {
    border-color: var(--qc-ink);
}

.qc-model__tag {
    position: absolute;
    top: -0.65rem;
    left: 1.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--qc-radius-sm);
    background: var(--qc-ink);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qc-model h3 {
    margin-bottom: 0.25rem;
}

.qc-model__meta {
    font-size: 0.85rem;
    color: var(--qc-primary-active);
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.qc-model ul {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    color: var(--qc-muted);
}

.qc-model ul li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.qc-model ul svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--qc-ink);
}

.qc-model .qc-btn {
    margin-top: auto;
}

/* ── Village offer ───────────────────────────────────────────────────────────────────────── */

/*
 * A promotional panel, held to the same colour rule as everything else: the ink border and the
 * white card carry the prominence, and pink is spent only on the button and the two figures.
 *
 * The figures live in their own column rather than inline in the copy so the price survives a
 * skim — this section exists to answer "how cheap is the cheapest option" in one glance.
 */
.qc-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--qc-ink);
    border-radius: var(--qc-radius-lg);
}

@media (max-width: 800px) {
    .qc-offer {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* Shrinkable, so a long heading wraps instead of widening the copy column. */
.qc-offer__body {
    min-width: 0;
}

.qc-offer__tag {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--qc-radius-sm);
    background: var(--qc-ink);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qc-offer__title {
    margin-bottom: 0.6rem;
}

.qc-offer__points {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
    font-size: 0.95rem;
}

.qc-offer__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--qc-muted);
}

.qc-offer__points svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--qc-ink);
}

/* Small print, and it must read as small print — this is a time-limited commercial claim. */
.qc-offer__terms {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    color: var(--qc-faint);
}

.qc-offer__figures {
    display: grid;
    gap: 0.75rem;
    padding-left: clamp(0rem, -2rem + 4vw, 3rem);
    border-left: 1px solid var(--qc-line);
}

@media (max-width: 800px) {
    /* Side by side once the panel stacks — two tall rows would push the button off the fold. */
    .qc-offer__figures {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 1.25rem 0 0;
        border-left: none;
        border-top: 1px solid var(--qc-line);
    }
}

.qc-offer__figure strong {
    display: block;
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--qc-primary);
    white-space: nowrap;
}

.qc-offer__figure span {
    font-size: 0.82rem;
    color: var(--qc-faint);
}

/* Steps — "How It Works" */
.qc-steps {
    counter-reset: qc-step;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.qc-step {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    background: #fff;
}

.qc-step::before {
    counter-increment: qc-step;
    content: counter(qc-step);
    position: absolute;
    top: -0.9rem;
    left: 1.25rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* Ink, not pink: a step number is a label, not something you click. */
    background: var(--qc-ink);
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
}

.qc-step h3 {
    margin-top: 0.5rem;
    font-size: 1.05rem;
}

.qc-step p {
    margin-bottom: 0;
    color: var(--qc-muted);
    font-size: 0.93rem;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────── */

.qc-faq {
    max-width: 780px;
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
}

.qc-faq details {
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    background: #fff;
    overflow: hidden;
}

.qc-faq details[open] {
    border-color: var(--qc-primary-200);
}

.qc-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--qc-ink);
    list-style: none;
}

.qc-faq summary::-webkit-details-marker {
    display: none;
}

.qc-faq summary::after {
    content: "+";
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: none;
    color: var(--qc-faint);
    font-size: 1.15rem;
    line-height: 1;
}

.qc-faq details[open] summary::after {
    content: "\2013";
}

.qc-faq details > div {
    padding: 0 1.25rem 1.15rem;
    color: var(--qc-muted);
    font-size: 0.95rem;
}

/* ── CTA band ────────────────────────────────────────────────────────────────────────────── */

/*
 * Solid ink, not a pink gradient. The band's job is to be the one dark block on the page so the
 * eye lands on it; a gradient in the brand colour competed with the button inside it and left the
 * call to action with nothing to contrast against.
 */
.qc-cta {
    background: var(--qc-ink);
    color: #d4d4d8;
    border-radius: var(--qc-radius-lg);
    padding: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    text-align: center;
}

.qc-cta h2 {
    color: #fff;
}

.qc-cta p {
    color: #a1a1aa;
    max-width: 40rem;
    margin-inline: auto;
}

.qc-cta .qc-eyebrow {
    color: #71717a;
}

.qc-cta .qc-hero__actions {
    justify-content: center;
    margin-top: 1.5rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────── */

/*
 * Compact by design. A footer is wayfinding, not a section — it should read as a quiet band under
 * the page, so everything here is a step down from the body scale: smaller type, tighter leading,
 * less vertical padding.
 */
.qc-footer {
    background: var(--qc-surface-dark);
    color: #a1a1aa;
    padding-block: 2.25rem 1.25rem;
    margin-top: 0;
    font-size: 0.875rem;
    line-height: 1.55;
}

.qc-footer h4 {
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.qc-footer a {
    color: #a1a1aa;
    font-size: 0.875rem;
}

.qc-footer a:hover {
    color: #fff;
}

/*
 * Flex, not grid. The previous `grid-template-columns: 1.5fr repeat(auto-fit, minmax(160px, 1fr))`
 * was invalid — an auto-repeat track list requires every other track to be definite, and `1.5fr`
 * is not — so the browser dropped the declaration entirely and stacked the footer into one column.
 *
 * Flex also suits the content better: the four blocks are different natural widths, so letting the
 * brand blurb take the slack and the link lists size to themselves beats forcing equal columns.
 */
.qc-footer__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.75rem 2.5rem;
}

/* Link columns: never narrower than their longest label, never stretched to fill. */
.qc-footer__grid > * {
    flex: 0 1 auto;
    min-width: 130px;
}

/* The brand block absorbs the remaining width and is the first to wrap. */
.qc-footer__grid > .qc-footer__brand {
    flex: 1 1 260px;
    max-width: 330px;
}

/* Two columns before one: four stacked blocks make a very tall footer on a phone. */
@media (max-width: 720px) {
    .qc-footer__grid {
        gap: 1.5rem 2rem;
    }

    .qc-footer__grid > * {
        flex: 1 1 40%;
    }

    .qc-footer__grid > .qc-footer__brand {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .qc-footer__grid > * {
        flex: 1 1 100%;
    }
}

.qc-footer__brand .qc-logo,
.qc-footer__brand .qc-logo:hover {
    color: #fff;
}

.qc-footer__links {
    display: grid;
    gap: 0.4rem;
}

/* The brand blurb is supporting text, not a paragraph anyone reads twice. */
.qc-footer__brand p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.qc-footer__brand .qc-logo {
    font-size: 1rem;
}

.qc-footer__brand .qc-logo__mark {
    width: 28px;
    height: 28px;
}

.qc-footer__bottom {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #27272a;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    font-size: 0.8rem;
}

.qc-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.qc-zones--centered {
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1rem;
}

/*
 * Light by default — the zone list also appears inside a white card on the Contact page, where the
 * old hard-coded dark chip was invisible. The footer overrides it for its own dark band.
 */
.qc-zones span {
    padding: 0.15rem 0.55rem;
    border-radius: var(--qc-radius-sm);
    background: var(--qc-surface-alt);
    border: 1px solid var(--qc-line);
    color: var(--qc-muted);
    font-size: 0.78rem;
}

.qc-zones--centered span {
    padding: 0.45rem 1.1rem;
    border-radius: var(--qc-radius-pill);
    background: var(--qc-surface);
    border: 1px solid var(--qc-line);
    color: var(--qc-ink);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.qc-footer .qc-zones span {
    background: #18181b;
    border-color: #27272a;
    color: #a1a1aa;
}

.qc-footer__presence {
    flex: 1 1 310px;
    max-width: 360px;
}

/* ── Follow Us & Download App Connect Widget ────────────────────────────────────────────── */
.qc-footer-connect-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.95rem 1.15rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    color: #111827;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.qc-footer-connect-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.qc-footer-connect-col:first-child {
    padding-right: 1.15rem;
    border-right: 1px solid #e4e4e7;
}

.qc-connect-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.qc-social-grid {
    display: grid;
    grid-template-columns: repeat(2, 34px);
    gap: 0.45rem;
}

.qc-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8e8e93;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none !important;
}

.qc-social-btn:hover {
    background: #111827;
    transform: translateY(-2px);
    color: #ffffff !important;
    text-decoration: none !important;
}

.qc-social-btn svg {
    display: block;
}

.qc-app-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.qc-footer .qc-app-btn,
.qc-footer .qc-app-btn:hover,
.qc-footer .qc-app-btn:focus,
.qc-footer .qc-app-btn:active,
.qc-footer .qc-app-btn *,
.qc-footer .qc-social-btn,
.qc-footer .qc-social-btn:hover,
.qc-footer .qc-social-btn:focus,
.qc-footer .qc-social-btn:active,
.qc-footer .qc-social-btn * {
    text-decoration: none !important;
}

.qc-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #000000 !important;
    color: #ffffff !important;
    padding: 0.35rem 0.75rem;
    border-radius: 7px;
    text-decoration: none !important;
    min-width: 135px;
    box-sizing: border-box;
}

.qc-app-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.qc-app-icon {
    flex-shrink: 0;
}

.qc-app-btn-content {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    text-decoration: none !important;
}

.qc-app-btn-small {
    font-size: 0.55rem;
    font-weight: 500;
    color: #9ca3af !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.qc-app-btn-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
}

@media (max-width: 520px) {
    .qc-footer-connect-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .qc-footer-connect-col:first-child {
        padding-right: 0;
        padding-bottom: 0.85rem;
        border-right: none;
        border-bottom: 1px solid #e4e4e7;
    }
    .qc-social-grid {
        grid-template-columns: repeat(4, 34px);
    }
}

/* ── Forms ───────────────────────────────────────────────────────────────────────────────── */

.qc-field {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

.qc-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--qc-ink);
}

.qc-label .qc-req {
    color: var(--qc-danger);
    margin-left: 2px;
}

.qc-hint {
    font-size: 0.82rem;
    color: var(--qc-faint);
}

.qc-input,
.qc-select,
.qc-textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--qc-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qc-textarea {
    min-height: 110px;
    resize: vertical;
}

.qc-input:focus,
.qc-select:focus,
.qc-textarea:focus {
    outline: none;
    border-color: var(--qc-primary);
    box-shadow: 0 0 0 3px var(--qc-primary-100);
}

.qc-input[aria-invalid="true"],
.qc-select[aria-invalid="true"],
.qc-textarea[aria-invalid="true"] {
    border-color: var(--qc-danger);
}

.input-group,
.qc-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}

.input-group > .qc-input,
.qc-input-group > .qc-input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .qc-input:focus,
.qc-input-group > .qc-input:focus {
    z-index: 2;
}

.input-group-text,
.qc-input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 0.9rem;
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--qc-muted);
    text-align: center;
    white-space: nowrap;
    background-color: var(--qc-surface-2);
    border: 1px solid var(--qc-line);
    border-left: 0;
    border-top-right-radius: var(--qc-radius-sm);
    border-bottom-right-radius: var(--qc-radius-sm);
}

.input-group > .qc-input[aria-invalid="true"] + .input-group-text,
.qc-input-group > .qc-input[aria-invalid="true"] + .qc-input-group-text {
    border-color: var(--qc-danger);
}

.qc-error {
    font-size: 0.83rem;
    color: var(--qc-danger);
    min-height: 0;
}

.qc-error:empty {
    display: none;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.qc-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Radio / checkbox groups rendered as selectable tiles. Bigger hit targets than a bare input,
   which matters when most of these applications arrive on a phone. */
.qc-options {
    display: grid;
    gap: 0.6rem;
}

.qc-options--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.qc-options--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.qc-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 0.94rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qc-option:hover {
    border-color: var(--qc-primary-200);
    background: var(--qc-primary-50);
}

.qc-option input {
    flex: none;
    margin: 3px 0 0;
    accent-color: var(--qc-primary);
    width: 17px;
    height: 17px;
}

.qc-option:has(input:checked) {
    border-color: var(--qc-primary);
    background: var(--qc-primary-50);
}

.qc-option strong {
    display: block;
    font-weight: 500;
    color: var(--qc-ink);
}

.qc-option span {
    color: var(--qc-faint);
    font-size: 0.85rem;
}

/* Agreement clauses read as prose, so they get a looser tile than the option grid. */
.qc-clause {
    align-items: flex-start;
    padding: 0.9rem 1rem;
    line-height: 1.55;
}

/* ── Upload slots ────────────────────────────────────────────────────────────────────────── */

/*
 * `min-width: 0` on the slot AND its children is what keeps a long filename inside the card.
 *
 * Grid and flex items default to `min-width: auto`, meaning they refuse to shrink below their
 * content — so an upload named `4476307a-d4bc-49ef-8a2f-7032604c96de.png` widened the whole slot
 * and spilled past its column. Every text node in here is therefore explicitly shrinkable.
 */
.qc-upload {
    position: relative;
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.9rem;
    border: 1.5px dashed var(--qc-line);
    border-radius: var(--qc-radius);
    background: var(--qc-surface-alt);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qc-upload > * {
    min-width: 0;
}

.qc-upload:hover,
.qc-upload.is-dragover {
    border-color: var(--qc-primary);
    background: var(--qc-primary-50);
}

.qc-upload.is-filled {
    border-style: solid;
    border-color: var(--qc-success);
    background: var(--qc-success-bg);
}

.qc-upload.is-invalid {
    border-style: solid;
    border-color: var(--qc-danger);
    background: var(--qc-danger-bg);
}

.qc-upload__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--qc-ink);
    overflow-wrap: anywhere;
}

.qc-upload__meta {
    font-size: 0.8rem;
    color: var(--qc-faint);
}

/*
 * The native control is replaced by a label button.
 *
 * A bare `<input type="file">` sizes itself to the chosen filename and cannot be truncated, so it
 * was the thing breaking the card open. It also printed the filename a second time, directly above
 * the preview row that already shows it. Hiding the input and driving it from a styled label fixes
 * the overflow and removes the duplication, and the label keeps the control fully keyboard- and
 * screen-reader-accessible because the input is still its labelled child.
 */
.qc-upload__pick {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius-sm);
    background: #fff;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--qc-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qc-upload__pick:hover {
    border-color: #d4d4d8;
    background: var(--qc-surface-alt);
}

/* Swapped between "Choose file" and "Replace file" by apply.js. */
.qc-upload__pick-text {
    white-space: nowrap;
}

/* Visually hidden, not display:none — a display:none input is unfocusable and drops out of the
   tab order, which would make the whole upload keyboard-inaccessible. */
.qc-upload__pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus lives on the input, so the ring has to be drawn on the label standing in for it. */
.qc-upload__pick:has(input:focus-visible) {
    outline: 3px solid var(--qc-primary-200);
    outline-offset: 2px;
}

.qc-upload__preview {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.qc-upload.is-filled .qc-upload__preview {
    display: flex;
}

/* Written by apply.js as "photo.jpg · 412 KB". Truncated: a camera filename can be very long and
   would otherwise push the slot wider than its grid column. */
.qc-upload__name {
    font-size: 0.8rem;
    color: var(--qc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.qc-upload__thumb {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--qc-radius-sm);
    object-fit: cover;
    border: 1px solid var(--qc-line);
    background: #fff;
}

.qc-upload__warning {
    font-size: 0.82rem;
    color: var(--qc-warning);
}

.qc-upload__warning:empty {
    display: none;
}

/* ── Multi-step form shell ───────────────────────────────────────────────────────────────── */

.qc-form-shell {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .qc-form-shell {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.qc-stepper {
    position: sticky;
    top: calc(var(--qc-header-height) + 20px);
    display: grid;
    gap: 0.15rem;
    padding: 1rem;
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    background: #fff;
}

@media (max-width: 900px) {
    .qc-stepper {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        gap: 0.4rem;
        padding: 0.6rem;
    }
}

.qc-stepper__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--qc-radius-sm);
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--qc-faint);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
}

.qc-stepper__item:hover {
    background: var(--qc-surface-alt);
}

.qc-stepper__item[aria-current="step"] {
    background: var(--qc-primary-50);
    color: var(--qc-primary-active);
    font-weight: 500;
}

.qc-stepper__num {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--qc-line);
    background: #fff;
    font-size: 0.78rem;
}

.qc-stepper__item[aria-current="step"] .qc-stepper__num {
    background: var(--qc-primary);
    border-color: var(--qc-primary);
    color: #fff;
}

.qc-stepper__item.is-complete .qc-stepper__num {
    background: var(--qc-success);
    border-color: var(--qc-success);
    color: #fff;
}

.qc-progress {
    height: 6px;
    border-radius: var(--qc-radius-pill);
    background: var(--qc-line-soft);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.qc-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--qc-primary);
    transition: width 0.25s ease;
}

.qc-step-panel {
    display: none;
}

.qc-step-panel.is-active {
    display: block;
}

.qc-step-panel > h2 {
    font-size: 1.5rem;
}

.qc-step-panel__intro {
    color: var(--qc-muted);
    margin-bottom: 1.75rem;
}

.qc-fieldset {
    border: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.qc-fieldset > legend {
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 550;
    color: var(--qc-ink);
}

.qc-subhead {
    margin: 1.75rem 0 0.85rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--qc-line-soft);
    font-size: 0.82rem;
    font-weight: 550;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qc-faint);
}

/*
 * Three zones — back / progress / forward — rather than a bare space-between row.
 *
 * With space-between, hiding the Back button on step 1 slid the primary action to the left and it
 * jumped right again on step 2. Giving the outer zones equal flex keeps "Continue" pinned to the
 * same pixel on every step, which is what makes a wizard feel steady rather than twitchy.
 */
.qc-form-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--qc-line);
}

.qc-form-nav__start,
.qc-form-nav__end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 0;
    min-width: 0;
}

.qc-form-nav__end {
    justify-content: flex-end;
}

/* "Step 3 of 8" — the reassurance a long form owes the person filling it in. */
.qc-form-nav__meta {
    flex: none;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: var(--qc-faint);
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* Stack: the counter moves above a full-width pair of buttons, so neither is ever cramped. */
    .qc-form-nav {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .qc-form-nav__meta {
        order: -1;
        width: 100%;
        text-align: center;
    }

    /* On step 1 the Back button is hidden, so its zone collapses and Continue takes the row. */
    .qc-form-nav__start:not(:has(.qc-btn:not([hidden]))) {
        display: none;
    }

    .qc-form-nav__start .qc-btn,
    .qc-form-nav__end .qc-btn {
        flex: 1 1 auto;
    }
}

/* Conditional blocks — driven by the shop question and revealed by JS. */
[data-when] {
    display: none;
}

[data-when].is-visible {
    display: block;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────────────────── */

.qc-alert {
    display: flex;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--qc-radius);
    border: 1px solid;
    font-size: 0.93rem;
    margin-bottom: 1.25rem;
}

.qc-alert--error {
    background: var(--qc-danger-bg);
    border-color: #fecaca;
    color: #991b1b;
}

.qc-alert--success {
    background: var(--qc-success-bg);
    border-color: #bbf7d0;
    color: #166534;
}

.qc-alert--info {
    background: var(--qc-primary-50);
    border-color: var(--qc-primary-200);
    color: var(--qc-primary-active);
}

.qc-alert ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

/* `.qc-alert[hidden]` used to live here — the global `[hidden]` rule in the reset covers it now. */

/* ── Contact / info blocks ───────────────────────────────────────────────────────────────── */

.qc-info-card {
    background: var(--qc-surface-alt);
    border: 1px solid var(--qc-line);
    border-radius: var(--qc-radius);
    padding: 1.5rem;
}

.qc-info-card h3 {
    font-size: 1rem;
}

.qc-info-card address {
    font-style: normal;
    color: var(--qc-muted);
    font-size: 0.95rem;
}

.qc-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.qc-contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.qc-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--qc-radius);
    background: var(--qc-surface);
    border: 1px solid var(--qc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qc-primary);
    flex-shrink: 0;
}

.qc-contact-label {
    font-size: 0.74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qc-faint);
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

.qc-contact-val {
    color: var(--qc-ink);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    word-break: break-all;
}

.qc-contact-val:hover {
    color: var(--qc-primary);
    text-decoration: underline;
}

/* ── Thank-you page ──────────────────────────────────────────────────────────────────────── */

.qc-receipt {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

.qc-receipt__mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--qc-success-bg);
    color: var(--qc-success);
}

.qc-receipt__ref {
    display: inline-block;
    margin: 1rem 0 1.5rem;
    padding: 0.7rem 1.4rem;
    border: 1px dashed var(--qc-primary);
    border-radius: var(--qc-radius);
    background: var(--qc-primary-50);
    font-size: 1.25rem;
    font-weight: 550;
    letter-spacing: 0.04em;
    color: var(--qc-primary-active);
}

/* ── Utilities ───────────────────────────────────────────────────────────────────────────── */

.qc-text-center {
    text-align: center;
}

.qc-mt-0 {
    margin-top: 0;
}

.qc-mb-0 {
    margin-bottom: 0;
}

.qc-muted {
    color: var(--qc-muted);
}

.qc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qc-skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--qc-primary);
    color: #fff;
    border-radius: 0 0 var(--qc-radius) 0;
}

.qc-skip-link:focus {
    left: 0;
    top: 0;
}

.qc-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qc-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}