@charset "UTF-8";
/* ############################################################################
   QLYNIC MARKETING  ·  qlynic-marketing.css
   THE PUBLIC-SITE DESIGN SYSTEM   ("Qlynic Marketing UI")
   ----------------------------------------------------------------------------
   THEME ........ MERIDIAN v1
                  Named for the reference line every clock on earth is set
                  against. Qlynic's product is time — slots, schedules, claim
                  runs at 02:00 — so the site is drawn like the instrument
                  that keeps it: a control room, lit from within.

   FOR .......... Public pages only. Clinic owners and practice managers who
                  have never seen the product, deciding whether we can be
                  trusted with their schedule, their charts and their payouts.

   NOT FOR ...... the dashboard, founder app or patient portal. Those run on
                  qlynic-ui.css and must never load this sheet.

   PREFIX ....... qm-  classes,  --qm-  tokens. Nothing unprefixed.

   LOAD ORDER ... qlynic-marketing.css -> default.master.css -> <page>.css
                  This file is the vocabulary. The master writes the shell.
                  The page writes the sentences. Never the reverse.

   FONTS ........ Requires this Google Fonts request (replaces Instrument
                  Serif — the serif is retired):
                  family=Geist:wght@400;500;600;700
                  family=Geist+Mono:wght@400;500
                  If Geist fails to load, the stack degrades to SF Pro /
                  Segoe UI Variable / Inter and stays coherent — the system
                  is built on the same grotesque skeleton those ship with.

   ============================================================================
   WHY IT LOOKS LIKE THIS
   ============================================================================

   DARK-FIRST, ON PURPOSE.
     Qlynic is infrastructure: schedulers, claim runs, payout ledgers, audit
     trails. Infrastructure is presented in the dark — terminals, network
     operations centres, status pages — because dark ground makes signal
     legible. The light tone still exists in this system, but it is a guest,
     not the host.

   ONE SPECTRUM, AND IT IS NOT ARBITRARY.
     Every colour on the site comes from a single azure -> violet band — the
     spectrum of screens themselves, the colour of the industry Qlynic sits
     in. Cyan sits at the far end of that band and is RESERVED: it may only
     mark things that are live right now (status, focus, the pulse node).
     There is NO GREEN anywhere in this system. That is deliberate.

   CLARITY IS THE LUXURY.
     Type is set the way Apple and Copilot set it: one precise grotesque,
     negative tracking that tightens as size grows, secondary-tone body copy,
     ruthless hierarchy. Nothing decorative sits between the reader and the
     sentence.

   ============================================================================
   THE THREE LAWS
   ============================================================================

   LAW 1 — DARK IS THE GROUND. LIGHT IS THE SIGNAL.
     The ground is deep blue-black, never pure #000. Surfaces are panes of
     glass defined by LIGHT, not shadow: a 1px low-alpha edge, a faint
     top-edge highlight, and — rarely — a glow.
       · NO drop-shadow soup. Depth below a panel is ambient darkness.
       · NO gloss, bevel, emboss, or inner shine beyond the 1px top light.
       · GLOW BUDGET: one glow per viewport. It belongs to the focal object
         (the hero word, the focal plan, the CTA panel). A page where
         everything glows is a page where nothing does.

   LAW 2 — ONE SPECTRUM, THREE APPEARANCES.
     The azure accent may appear AT MOST THREE TIMES on a composed screen:
     a primary button, one status, one rule. Everything else is ink and
     glass. Cyan does not count against the budget but obeys its own law:
     live things only. Hover and focus are transient and exempt. Navigation
     chrome (rails, crumbs, tabs, required marks) never spends the budget —
     wayfinding is not content. If a section feels flat, the fix is contrast
     of MATERIAL (glass against void against ink), never more colour.

   LAW 3 — SANS ASSERTS, MONO MEASURES.
     Geist carries what Qlynic SAYS: headlines, claims, reading matter,
     every interface label.
     Geist Mono carries what is MEASURED: numbers, prices, dates, times,
     versions, statuses, uptime, IDs, code.
     The alternation is information. If a reader sees mono, the value behind
     it is a fact they could check.

   ============================================================================
   THE SIGNATURES  (two, and only two)
   ============================================================================
     1. THE TELEMETRY RULE — a hairline rule broken by an inline mono
        readout with a pulsing node, after a status page or an ECG strip.
        It is Law 3 rendered as an object, and it is how this site
        punctuates.
     2. THE OPS RAIL — a hairline rail with node ticks running down the
        leading edge of major sections, carrying the section index in mono.
        It is the clinic's day rendered as an instrument track. It is layout
        STRUCTURE, not wallpaper: content hangs off it the way appointments
        hang off a schedule.
   If a third effect appears, something has gone wrong.

   COLOUR METHOD — verified numerically on the void ground: ink clears
   15.9:1, secondary clears 9.2:1, azure clears 6.1:1 (safe at body size,
   not merely for headings), cyan clears 11:1. On the light guest, the
   deepened azure clears 4.9:1 on white.
   ############################################################################ */


/* ============================================================================
   1.  GLOBAL TOKENS      (tone-agnostic)
   ============================================================================ */
:root {
    /* ── 1.1  FAMILIES — see LAW 3 ────────────────────────────────────── */
    --qm-font-sans: "Geist", -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Inter", "DM Sans", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --qm-font-display: var(--qm-font-sans);
    --qm-font-body: var(--qm-font-sans);
    --qm-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    /* ── 1.2  SCALE — fluid, no breakpoint jumps ───────────────────────
       One grotesque does every size, so the scale leans on weight and
       tracking. Tracking tightens as size grows (the Apple move); body
       stays 16.5px — this is reading matter, not a terminal. */
    --qm-fs-hero: clamp(3.00rem, 1.75rem + 5.30vw, 5.75rem); /* 48 ->  92 */
    --qm-fs-display: clamp(2.375rem, 1.66rem + 3.05vw, 3.95rem); /* 38 ->  63 */
    --qm-fs-h1: clamp(2.00rem, 1.55rem + 1.95vw, 3.00rem); /* 32 ->  48 */
    --qm-fs-h2: clamp(1.625rem, 1.36rem + 1.15vw, 2.25rem); /* 26 ->  36 */
    --qm-fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* 20 ->  24 */
    --qm-fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 ->  21 */
    --qm-fs-body: 1.03125rem; /* 16.5 */
    --qm-fs-sm: 0.9063rem; /* 14.5 */
    --qm-fs-xs: 0.8125rem; /* 13 */
    --qm-fs-mono: 0.875rem; /* 14 */
    --qm-fs-label: 0.6875rem; /* 11 — eyebrows */

    --qm-track-hero: -0.045em;
    --qm-track-display: -0.038em;
    --qm-track-h1: -0.030em;
    --qm-track-h2: -0.022em;
    --qm-track-h3: -0.014em;
    --qm-track-label: 0.16em;
    --qm-lh-tight: 1.04;
    --qm-lh-head: 1.12;
    --qm-lh-body: 1.65;
    /* ── 1.3  SPACE — 4px base ─────────────────────────────────────────── */
    --qm-sp-1: 0.25rem;
    --qm-sp-2: 0.5rem;
    --qm-sp-3: 0.75rem;
    --qm-sp-4: 1rem;
    --qm-sp-5: 1.25rem;
    --qm-sp-6: 1.5rem;
    --qm-sp-7: 1.75rem;
    --qm-sp-8: 2rem;
    --qm-sp-9: 2.5rem;
    --qm-sp-10: 3rem;
    --qm-sp-12: 4rem;
    --qm-sp-14: 5rem;
    --qm-sp-16: 6rem;
    --qm-sp-20: 8rem;
    /* ── 1.4  GEOMETRY ─────────────────────────────────────────────────── */
    --qm-r-sm: 8px;
    --qm-r-md: 12px;
    --qm-r-lg: 16px;
    --qm-r-xl: 22px;
    --qm-r-pill: 999px;
    --qm-w-container: 74rem;
    --qm-w-wide: 84rem;
    --qm-w-narrow: 46rem;
    --qm-w-prose: 42rem;
    --qm-gutter: clamp(1.25rem, 4vw, 2.5rem);
    /* ── 1.5  MOTION ───────────────────────────────────────────────────── */
    --qm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --qm-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --qm-t-fast: 140ms;
    --qm-t-med: 260ms;
    --qm-t-slow: 600ms;
    --qm-z-nav: 100;
    --qm-z-over: 500;
}

/* ============================================================================
   2.  THEME TOKENS — THE DARK HOST
   ============================================================================ */
:root {
    color-scheme: dark;
    /* Grounds */
    --qm-bg-0: #05070D; /* the void — page ground            */
    --qm-bg-1: #080B14; /* alternate band                    */
    --qm-surface-1: #0C1220; /* glass pane at rest                */
    --qm-surface-2: #111A2C; /* pane raised / hover               */
    --qm-surface-3: #16203A; /* pane pressed / active fill        */
    --qm-code-bg: #070A12; /* deeper than any pane              */
    /* Ink */
    --qm-text: #F0F4FB;
    --qm-text-secondary: #A9B4CB;
    --qm-text-muted: #6C7893;
    --qm-text-faint: #49546E;
    --qm-text-invert: #05070D;
    /* Edges — depth is light (LAW 1) */
    --qm-rule: rgba(151, 173, 220, 0.14);
    --qm-rule-faint: rgba(151, 173, 220, 0.08);
    --qm-rule-strong: rgba(151, 173, 220, 0.26);
    --qm-edge-light: rgba(216, 230, 255, 0.09); /* the 1px top highlight    */
    /* The spectrum */
    --qm-azure: #4D8DFF; /* the command colour                */
    --qm-azure-hover: #6FA3FF;
    --qm-azure-down: #3B78EA;
    --qm-violet: #8A7CFF; /* spectrum partner                  */
    --qm-signal: #2BD9EC; /* cyan — LIVE THINGS ONLY           */
    --qm-warn: #F2B94B;
    --qm-alert: #FF5C74;
    --qm-spectrum: linear-gradient(135deg, #4D8DFF 0%, #8A7CFF 100%);
    --qm-spectrum-wide: linear-gradient(100deg, #2BD9EC -12%, #4D8DFF 38%, #8A7CFF 88%);
    /* Tints — for fills that must stay glass */
    --qm-azure-tint: rgba(77, 141, 255, 0.12);
    --qm-violet-tint: rgba(138, 124, 255, 0.12);
    --qm-signal-tint: rgba(43, 217, 236, 0.10);
    --qm-warn-tint: rgba(242, 185, 75, 0.12);
    --qm-alert-tint: rgba(255, 92, 116, 0.12);
    /* Lift — the ONE thing allowed to float (frames) */
    --qm-lift: 0 1px 0 var(--qm-edge-light) inset, 0 24px 60px -24px rgba(2, 4, 10, 0.9), 0 4px 18px -6px rgba(2, 4, 10, 0.7);
    /* Glow — spend per LAW 1 */
    --qm-glow-azure: 0 0 0 1px rgba(77, 141, 255, 0.38), 0 10px 46px -10px rgba(77, 141, 255, 0.55);
    --qm-focus-ring: 0 0 0 2px var(--qm-bg-0), 0 0 0 4px var(--qm-signal);
}

/* ── 2.1  THE LIGHT GUEST ──────────────────────────────────────────────────
   For long-form reading, legal, and the odd testimonial band. One class on
   a section flips the whole vocabulary. The guest is quieter than the host:
   no glow is ever spent inside it. */
.qm-light {
    color-scheme: light;
    --qm-bg-0: #F4F6FB;
    --qm-bg-1: #EDF0F8;
    --qm-surface-1: #FFFFFF;
    --qm-surface-2: #F7F9FD;
    --qm-surface-3: #EEF2FA;
    --qm-code-bg: #0B1020;
    --qm-text: #0B1220;
    --qm-text-secondary: #45516B;
    --qm-text-muted: #6C7893;
    --qm-text-faint: #98A2B8;
    --qm-text-invert: #F4F6FB;
    --qm-rule: rgba(11, 18, 32, 0.13);
    --qm-rule-faint: rgba(11, 18, 32, 0.07);
    --qm-rule-strong: rgba(11, 18, 32, 0.24);
    --qm-edge-light: rgba(255, 255, 255, 0.9);
    --qm-azure: #2E6FE8;
    --qm-azure-hover: #1F5FD6;
    --qm-azure-down: #1A54C2;
    --qm-violet: #6B5AE8;
    --qm-signal: #0891A8;
    --qm-azure-tint: rgba(46, 111, 232, 0.10);
    --qm-violet-tint: rgba(107, 90, 232, 0.10);
    --qm-signal-tint: rgba(8, 145, 168, 0.10);
    --qm-warn-tint: rgba(178, 122, 10, 0.12);
    --qm-alert-tint: rgba(214, 42, 70, 0.10);
    --qm-warn: #B27A0A;
    --qm-alert: #D62A46;
    --qm-lift: 0 1px 0 var(--qm-edge-light) inset, 0 20px 44px -22px rgba(11, 18, 32, 0.28), 0 3px 12px -5px rgba(11, 18, 32, 0.14);
    --qm-glow-azure: 0 0 0 1px rgba(46, 111, 232, 0.35), 0 10px 36px -12px rgba(46, 111, 232, 0.45);
    --qm-focus-ring: 0 0 0 2px var(--qm-bg-0), 0 0 0 4px var(--qm-azure);
    background: var(--qm-bg-0);
    color: var(--qm-text);
}

/* ============================================================================
   3.  BASE
   ============================================================================ */
.qm *, .qm *::before, .qm *::after {
    box-sizing: border-box;
}

html.qm {
    scroll-behavior: smooth;
}

.qm body {
    margin: 0;
    background: var(--qm-bg-0);
    color: var(--qm-text);
    font: 400 var(--qm-fs-body) / var(--qm-lh-body) var(--qm-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01" 1, "cv01" 1;
}

.qm ::selection {
    background: rgba(77, 141, 255, 0.35);
    color: var(--qm-text);
}

.qm :focus-visible {
    outline: none;
    box-shadow: var(--qm-focus-ring);
    border-radius: var(--qm-r-sm);
}

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

.qm button {
    font: inherit;
    color: inherit;
}

/* Scrollbar — part of the chrome, so it obeys the theme */
.qm ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.qm ::-webkit-scrollbar-track {
    background: var(--qm-bg-0);
}

.qm ::-webkit-scrollbar-thumb {
    background: var(--qm-surface-3);
    border-radius: 5px;
    border: 2px solid var(--qm-bg-0);
}

    .qm ::-webkit-scrollbar-thumb:hover {
        background: var(--qm-text-faint);
    }

/* ============================================================================
   4.  ATMOSPHERE  —  .qm-tex  (opt-in, absolutely positioned, aria-hidden)
   The parent needs position:relative. Textures never receive pointer events.
   ============================================================================ */
.qm-tex {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* The blueprint grid — the room the instruments hang in. Barely there. */
.qm-tex--grid {
    background-image: linear-gradient(var(--qm-rule-faint) 1px, transparent 1px), linear-gradient(90deg, var(--qm-rule-faint) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 32%, #000 30%, transparent 82%);
    mask-image: radial-gradient(ellipse 90% 78% at 50% 32%, #000 30%, transparent 82%);
}
/* Back-compat aliases from Theatre v2 markup. */
.qm-tex--day {
    background-image: linear-gradient(var(--qm-rule-faint) 1px, transparent 1px), linear-gradient(90deg, var(--qm-rule-faint) 1px, transparent 1px);
    background-size: var(--qm-slot-w, 56px) var(--qm-slot-h, 56px);
}

.qm-tex--now {
    box-shadow: inset 0 1px 0 var(--qm-rule);
}

/* The aurora — the glow budget, spent. One per viewport (LAW 1). */
.qm-tex--glow {
    background: radial-gradient(38rem 22rem at 50% 8%, rgba(77, 141, 255, 0.16), transparent 68%), radial-gradient(30rem 20rem at 68% 22%, rgba(138, 124, 255, 0.12), transparent 70%);
    filter: saturate(1.15);
}

.qm-tex--glow-low {
    background: radial-gradient(42rem 20rem at 50% 108%, rgba(77, 141, 255, 0.12), transparent 70%);
}

/* Fades — for stitching bands together without a hard seam. */
.qm-tex--fade-t {
    background: linear-gradient(180deg, var(--qm-bg-0), transparent 30%);
}

.qm-tex--fade-b {
    background: linear-gradient(0deg, var(--qm-bg-0), transparent 30%);
}

/* ============================================================================
   5.  TYPOGRAPHY  —  LAW 3
   ============================================================================ */
.qm-hero-title {
    margin: 0;
    font: 600 var(--qm-fs-hero) / var(--qm-lh-tight) var(--qm-font-display);
    letter-spacing: var(--qm-track-hero);
    text-wrap: balance;
    color: var(--qm-text);
}

.qm-display {
    margin: 0;
    font: 600 var(--qm-fs-display) / var(--qm-lh-tight) var(--qm-font-display);
    letter-spacing: var(--qm-track-display);
    text-wrap: balance;
}

.qm-h1 {
    margin: 0;
    font: 600 var(--qm-fs-h1) / var(--qm-lh-head) var(--qm-font-display);
    letter-spacing: var(--qm-track-h1);
    text-wrap: balance;
}

.qm-h2 {
    margin: 0;
    font: 600 var(--qm-fs-h2) / var(--qm-lh-head) var(--qm-font-display);
    letter-spacing: var(--qm-track-h2);
    text-wrap: balance;
}

.qm-h3 {
    margin: 0;
    font: 600 var(--qm-fs-h3) / 1.3 var(--qm-font-display);
    letter-spacing: var(--qm-track-h3);
}

.qm-lead {
    margin: 0;
    font-size: var(--qm-fs-lead);
    line-height: 1.55;
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

.qm-text {
    margin: 0;
    font-size: var(--qm-fs-body);
    color: var(--qm-text-secondary);
}

.qm-text--sm {
    font-size: var(--qm-fs-sm);
}

.qm-text--xs {
    font-size: var(--qm-fs-xs);
}

.qm-text--muted {
    color: var(--qm-text-muted);
}

/* The emphasised word — the spectrum, spent on one word, never a sentence. */
.qm-em {
    background: var(--qm-spectrum-wide);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.qm-accent-text {
    color: var(--qm-azure);
}

/* The eyebrow — mono, tracked, uppercase. Wayfinding, so never the budget. */
.qm-label-line {
    margin: 0;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
    display: flex;
    align-items: center;
    gap: var(--qm-sp-3);
}

    .qm-label-line::before {
        content: "";
        width: 1.25rem;
        height: 1px;
        background: var(--qm-azure);
        flex: none;
    }

.qm-label-line--bare::before {
    content: none;
}

/* Anything measured is mono (LAW 3). */
.qm-val {
    font-family: var(--qm-font-mono);
    font-size: 0.92em;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* The source line — anything not from our own database says where it is from. */
.qm-source {
    font: 400 var(--qm-fs-xs) / 1.6 var(--qm-font-mono);
    color: var(--qm-text-faint);
    letter-spacing: 0.01em;
}

/* Reading matter */
.qm-prose {
    max-width: var(--qm-w-prose);
}

    .qm-prose > * {
        margin: 0 0 1.1em;
    }

        .qm-prose > *:last-child {
            margin-bottom: 0;
        }

    .qm-prose p {
        color: var(--qm-text-secondary);
        text-wrap: pretty;
    }

    .qm-prose h2 {
        font: 600 var(--qm-fs-h2)/var(--qm-lh-head) var(--qm-font-display);
        letter-spacing: var(--qm-track-h2);
        color: var(--qm-text);
        margin-top: 1.6em;
    }

    .qm-prose h3 {
        font: 600 var(--qm-fs-h3)/1.3 var(--qm-font-display);
        letter-spacing: var(--qm-track-h3);
        color: var(--qm-text);
        margin-top: 1.4em;
    }

    .qm-prose a {
        color: var(--qm-azure);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: rgba(77,141,255,.4);
        transition: text-decoration-color var(--qm-t-fast);
    }

        .qm-prose a:hover {
            text-decoration-color: currentColor;
        }

    .qm-prose ul, .qm-prose ol {
        padding-inline-start: 1.25em;
        color: var(--qm-text-secondary);
    }

    .qm-prose li {
        margin-block: 0.35em;
    }

    .qm-prose strong {
        color: var(--qm-text);
        font-weight: 600;
    }

    .qm-prose code {
        font-family: var(--qm-font-mono);
        font-size: 0.88em;
        background: var(--qm-surface-2);
        border: 1px solid var(--qm-rule-faint);
        border-radius: 6px;
        padding: 0.1em 0.4em;
    }

    .qm-prose blockquote {
        margin: 1.4em 0;
        padding-inline-start: var(--qm-sp-5);
        border-inline-start: 2px solid var(--qm-azure);
        color: var(--qm-text);
    }

/* Colour utilities */
.qm-c-text {
    color: var(--qm-text);
}

.qm-c-secondary {
    color: var(--qm-text-secondary);
}

.qm-c-muted {
    color: var(--qm-text-muted);
}

.qm-c-faint {
    color: var(--qm-text-faint);
}

.qm-c-accent {
    color: var(--qm-azure);
}

.qm-c-signal {
    color: var(--qm-signal);
}

/* ============================================================================
   6.  SIGNATURE 1 — THE TELEMETRY RULE   .qm-mrule
   A hairline broken by a mono readout with a pulsing node. Cyan node = the
   value is live; omit the node (or use --static) for archival values.
   ============================================================================ */
.qm-mrule {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-4);
    width: 100%;
}

    .qm-mrule::before, .qm-mrule::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg, transparent, var(--qm-rule) 18%, var(--qm-rule) 82%, transparent);
    }

.qm-mrule--start::before {
    flex: 0 0 var(--qm-sp-6);
}

.qm-mrule--end::after {
    flex: 0 0 var(--qm-sp-6);
}

.qm-mrule__readout {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
    white-space: nowrap;
}

    .qm-mrule__readout b, .qm-mrule__readout strong {
        font-weight: 500;
        color: var(--qm-text);
    }

.qm-mrule__node {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qm-signal);
    box-shadow: 0 0 0 0 rgba(43, 217, 236, 0.5);
    animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
    flex: none;
}

.qm-mrule--static .qm-mrule__node {
    background: var(--qm-text-faint);
    animation: none;
    box-shadow: none;
}

/* ============================================================================
   7.  SIGNATURE 2 — THE OPS RAIL   .qm-day
   Section structure: a ticked hairline down the leading edge, index in mono.
   (Class name kept from Theatre for continuity of markup.)
   ============================================================================ */
.qm-day {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: var(--qm-sp-6);
}

.qm-day__rail {
    position: relative;
    background-image: repeating-linear-gradient( 180deg, var(--qm-rule-strong) 0 1px, transparent 1px 14px );
    background-size: 9px 100%;
    background-position: right top;
    background-repeat: no-repeat;
    border-inline-end: 1px solid var(--qm-rule);
}

.qm-day__index {
    position: sticky;
    top: var(--qm-sp-6);
    display: inline-block;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    color: var(--qm-azure);
    writing-mode: vertical-rl;
    padding-block: var(--qm-sp-2);
}

.qm-day__label {
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qm-day__body {
    min-width: 0;
}

@media (max-width: 47.9rem) {
    .qm-day {
        grid-template-columns: 1fr;
    }

    .qm-day__rail {
        display: none;
    }
}

/* ============================================================================
   8.  LAYOUT
   ============================================================================ */
.qm-container {
    width: 100%;
    max-width: var(--qm-w-container);
    margin-inline: auto;
    padding-inline: var(--qm-gutter);
}

.qm-container--wide {
    max-width: var(--qm-w-wide);
}

.qm-container--narrow {
    max-width: var(--qm-w-narrow);
}

.qm-container--prose {
    max-width: var(--qm-w-prose);
}

.qm-container--full {
    max-width: none;
}

.qm-container--bleed {
    padding-inline: 0;
}

.qm-section {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 7rem);
}

.qm-section--sm {
    padding-block: clamp(2.25rem, 6vw, 4rem);
}

.qm-section--lg {
    padding-block: clamp(5rem, 12vw, 9.5rem);
}

.qm-section--deep {
    background: var(--qm-bg-1);
}

.qm-section--ruled {
    border-block-start: 1px solid var(--qm-rule-faint);
}

.qm-section--flush {
    padding-block: 0;
}

.qm-section--flush-top {
    padding-block-start: 0;
}

.qm-section--flush-bottom {
    padding-block-end: 0;
}
/* The light guest as a band. */
.qm-section--paper {
    background: var(--qm-bg-0);
}

.qm-section-head {
    display: grid;
    gap: var(--qm-sp-4);
    max-width: var(--qm-w-narrow);
    margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.qm-section-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.qm-section-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--qm-sp-8);
}

@media (max-width: 59.9rem) {
    .qm-section-head--split {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

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

.qm-split--top {
    align-items: start;
}

@media (max-width: 59.9rem) {
    .qm-split {
        grid-template-columns: 1fr;
    }
}

.qm-grid {
    display: grid;
    gap: var(--qm-sp-5);
}

.qm-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.qm-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.qm-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.qm-grid--fixed-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (max-width: 59.9rem) {
    .qm-grid--fixed-2, .qm-grid--fixed-3 {
        grid-template-columns: 1fr;
    }
}

.qm-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qm-sp-3);
}

.qm-cluster--2 {
    gap: var(--qm-sp-2);
}

.qm-cluster--4 {
    gap: var(--qm-sp-4);
}

.qm-cluster--6 {
    gap: var(--qm-sp-6);
}

.qm-cluster--center {
    justify-content: center;
}

.qm-cluster--between {
    justify-content: space-between;
}

.qm-cluster--end {
    justify-content: flex-end;
}

.qm-cluster--top {
    align-items: flex-start;
}

.qm-cluster--baseline {
    align-items: baseline;
}

.qm-stack {
    display: grid;
    gap: var(--qm-sp-5);
}

.qm-stack--1 {
    gap: var(--qm-sp-1);
}

.qm-stack--2 {
    gap: var(--qm-sp-2);
}

.qm-stack--3 {
    gap: var(--qm-sp-3);
}

.qm-stack--4 {
    gap: var(--qm-sp-4);
}

.qm-stack--6 {
    gap: var(--qm-sp-6);
}

.qm-stack--7 {
    gap: var(--qm-sp-7);
}

.qm-stack--9 {
    gap: var(--qm-sp-9);
}

.qm-divider {
    border: 0;
    height: 1px;
    background: var(--qm-rule);
    margin: 0;
}

.qm-divider--faint {
    background: var(--qm-rule-faint);
}

.qm-divider--accent {
    background: var(--qm-spectrum);
    height: 1px;
    opacity: 0.8;
}

.qm-divider--v {
    width: 1px;
    height: auto;
    align-self: stretch;
}

.qm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qm-sp-3);
}

.qm-actions--center {
    justify-content: center;
}

/* ============================================================================
   9.  BUTTONS
   The primary is the ONLY filled-spectrum object on a screen. Everything
   else is glass or ink.
   ============================================================================ */
.qm-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qm-sp-2);
    padding: 0.72rem 1.35rem;
    border-radius: var(--qm-r-md);
    border: 1px solid transparent;
    font: 500 var(--qm-fs-sm) / 1 var(--qm-font-sans);
    letter-spacing: 0.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--qm-t-fast) var(--qm-ease), border-color var(--qm-t-fast) var(--qm-ease), color var(--qm-t-fast) var(--qm-ease), box-shadow var(--qm-t-med) var(--qm-ease), transform var(--qm-t-fast) var(--qm-ease);
}

    .qm-btn:active {
        transform: translateY(1px);
    }

.qm-btn--primary {
    background: var(--qm-spectrum);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

    .qm-btn--primary:hover {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), var(--qm-glow-azure);
    }

.qm-btn--secondary {
    background: rgba(151, 173, 220, 0.07);
    border-color: var(--qm-rule);
    color: var(--qm-text);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

    .qm-btn--secondary:hover {
        border-color: var(--qm-rule-strong);
        background: rgba(151, 173, 220, 0.12);
    }

.qm-btn--ghost {
    background: transparent;
    color: var(--qm-text-secondary);
}

    .qm-btn--ghost:hover {
        color: var(--qm-text);
        background: rgba(151, 173, 220, 0.07);
    }

.qm-btn--quiet {
    background: transparent;
    color: var(--qm-text-muted);
    padding-inline: 0.6rem;
}

    .qm-btn--quiet:hover {
        color: var(--qm-text);
    }

/* Ink = solid light on the dark host. The Apple white button. */
.qm-btn--ink {
    background: var(--qm-text);
    color: var(--qm-text-invert);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

    .qm-btn--ink:hover {
        background: #FFFFFF;
    }

.qm-light .qm-btn--ink {
    box-shadow: none;
}

.qm-btn--sm {
    padding: 0.45rem 0.85rem;
    font-size: var(--qm-fs-xs);
    border-radius: var(--qm-r-sm);
}

.qm-btn--lg {
    padding: 0.9rem 1.7rem;
    font-size: var(--qm-fs-body);
    border-radius: 14px;
}

.qm-btn--xl {
    padding: 1.05rem 2rem;
    font-size: var(--qm-fs-lead);
    border-radius: var(--qm-r-lg);
}

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

.qm-btn--icon {
    padding: 0.72rem;
}

    .qm-btn--icon.qm-btn--sm {
        padding: 0.45rem;
    }

.qm-btn[disabled], .qm-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.qm-btn-group {
    display: inline-flex;
}

    .qm-btn-group .qm-btn {
        border-radius: 0;
    }

        .qm-btn-group .qm-btn:first-child {
            border-start-start-radius: var(--qm-r-md);
            border-end-start-radius: var(--qm-r-md);
        }

        .qm-btn-group .qm-btn:last-child {
            border-start-end-radius: var(--qm-r-md);
            border-end-end-radius: var(--qm-r-md);
        }

        .qm-btn-group .qm-btn + .qm-btn {
            margin-inline-start: -1px;
        }

/* Segmented control */
.qm-toggle-group {
    display: inline-flex;
    padding: 3px;
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-md);
    gap: 2px;
}

    .qm-toggle-group > button {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--qm-text-muted);
        font: 500 var(--qm-fs-xs) / 1 var(--qm-font-sans);
        padding: 0.5rem 0.9rem;
        border-radius: calc(var(--qm-r-md) - 4px);
        cursor: pointer;
        transition: background var(--qm-t-fast), color var(--qm-t-fast);
    }

        .qm-toggle-group > button:hover {
            color: var(--qm-text-secondary);
        }

        .qm-toggle-group > button.is-active {
            background: var(--qm-surface-3);
            color: var(--qm-text);
            box-shadow: inset 0 1px 0 var(--qm-edge-light);
        }

/* ============================================================================
   10.  LINKS
   ============================================================================ */
.qm-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-sm) / 1 var(--qm-font-sans);
    color: var(--qm-azure);
    text-decoration: none;
    transition: color var(--qm-t-fast), gap var(--qm-t-fast) var(--qm-ease);
}

    .qm-arrow-link::after {
        content: "→";
        font-family: var(--qm-font-mono);
        transition: transform var(--qm-t-fast) var(--qm-ease);
    }

    .qm-arrow-link:hover {
        color: var(--qm-azure-hover);
    }

        .qm-arrow-link:hover::after {
            transform: translateX(3px);
        }

.qm-arrow-link--back::after {
    content: none;
}

.qm-arrow-link--back::before {
    content: "←";
    font-family: var(--qm-font-mono);
    transition: transform var(--qm-t-fast) var(--qm-ease);
}

.qm-arrow-link--back:hover::before {
    transform: translateX(-3px);
}

.qm-arrow-link--muted {
    color: var(--qm-text-muted);
}

    .qm-arrow-link--muted:hover {
        color: var(--qm-text);
    }

/* ============================================================================
   11.  FORM CONTROLS
   Glass wells on the dark ground. Focus is cyan — the system is attending.
   ============================================================================ */
.qm-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.qm-field-group {
    display: grid;
    gap: var(--qm-sp-2);
}

    .qm-field-group > label,
    .qm-field-label {
        font: 500 var(--qm-fs-xs) / 1.2 var(--qm-font-sans);
        color: var(--qm-text-secondary);
    }

        .qm-field-label abbr, .qm-field-group > label abbr {
            color: var(--qm-azure);
            text-decoration: none;
            margin-inline-start: 2px;
        }

.qm-field, .qm-select, .qm-textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-md);
    color: var(--qm-text);
    font: 400 var(--qm-fs-sm) / 1.4 var(--qm-font-sans);
    padding: 0.7rem 0.9rem;
    transition: border-color var(--qm-t-fast), box-shadow var(--qm-t-fast), background var(--qm-t-fast);
}

    .qm-field::placeholder, .qm-textarea::placeholder {
        color: var(--qm-text-faint);
    }

    .qm-field:hover, .qm-select:hover, .qm-textarea:hover {
        border-color: var(--qm-rule-strong);
    }

    .qm-field:focus-visible, .qm-select:focus-visible, .qm-textarea:focus-visible {
        box-shadow: var(--qm-focus-ring);
        border-color: transparent;
    }

.qm-textarea {
    min-height: 7rem;
    resize: vertical;
}

.qm-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--qm-text-muted) 50%), linear-gradient(135deg, var(--qm-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 2.4rem;
}

.qm-field-wrap {
    position: relative;
    display: grid;
}

    .qm-field-wrap .qm-affix {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0.9rem;
        display: flex;
        align-items: center;
        color: var(--qm-text-faint);
        font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
        pointer-events: none;
    }

        .qm-field-wrap .qm-affix ~ .qm-field {
            padding-inline-start: 2.4rem;
        }

    .qm-field-wrap .qm-field-action {
        position: absolute;
        inset-block: 4px;
        inset-inline-end: 4px;
    }

.qm-hint {
    font-size: var(--qm-fs-xs);
    color: var(--qm-text-muted);
}

.qm-error {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-xs) / 1.3 var(--qm-font-sans);
    color: var(--qm-alert);
}

.qm-field[aria-invalid="true"], .qm-field.is-invalid {
    border-color: var(--qm-alert);
}

/* Checkbox / radio */
.qm-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--qm-sp-3);
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    cursor: pointer;
}

    .qm-check input {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        flex: none;
        border: 1px solid var(--qm-rule-strong);
        border-radius: 5px;
        background: var(--qm-surface-1);
        display: grid;
        place-content: center;
        cursor: pointer;
        transition: background var(--qm-t-fast), border-color var(--qm-t-fast);
    }

        .qm-check input[type="radio"] {
            border-radius: 50%;
        }

        .qm-check input::before {
            content: "";
            width: 9px;
            height: 9px;
            transform: scale(0);
            transition: transform var(--qm-t-fast) var(--qm-ease);
            background: #FFFFFF;
            clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
        }

        .qm-check input[type="radio"]::before {
            clip-path: none;
            border-radius: 50%;
            width: 8px;
            height: 8px;
        }

        .qm-check input:checked {
            background: var(--qm-azure);
            border-color: var(--qm-azure);
        }

            .qm-check input:checked::before {
                transform: scale(1);
            }

.qm-check--row {
    align-items: center;
}

/* Switch */
.qm-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-3);
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    cursor: pointer;
}

    .qm-switch input {
        -webkit-appearance: none;
        appearance: none;
        width: 40px;
        height: 22px;
        flex: none;
        border-radius: var(--qm-r-pill);
        background: var(--qm-surface-3);
        border: 1px solid var(--qm-rule);
        position: relative;
        cursor: pointer;
        transition: background var(--qm-t-med) var(--qm-ease), border-color var(--qm-t-med);
    }

        .qm-switch input::before {
            content: "";
            position: absolute;
            top: 2px;
            inset-inline-start: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--qm-text-secondary);
            transition: transform var(--qm-t-med) var(--qm-ease), background var(--qm-t-med);
        }

        .qm-switch input:checked {
            background: var(--qm-azure);
            border-color: var(--qm-azure);
        }

            .qm-switch input:checked::before {
                transform: translateX(18px);
                background: #FFFFFF;
            }

/* Chip — selectable token */
.qm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    padding: 0.4rem 0.8rem;
    border-radius: var(--qm-r-pill);
    border: 1px solid var(--qm-rule);
    background: transparent;
    color: var(--qm-text-secondary);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-sans);
    cursor: pointer;
    transition: border-color var(--qm-t-fast), color var(--qm-t-fast), background var(--qm-t-fast);
}

    .qm-chip:hover {
        border-color: var(--qm-rule-strong);
        color: var(--qm-text);
    }

    .qm-chip.is-active, .qm-chip[aria-pressed="true"] {
        border-color: var(--qm-azure);
        color: var(--qm-text);
        background: var(--qm-azure-tint);
    }

.qm-chip--static {
    cursor: default;
}

    .qm-chip--static:hover {
        border-color: var(--qm-rule);
        color: var(--qm-text-secondary);
    }

/* ============================================================================
   12.  SURFACES — glass on the void (LAW 1)
   card ..... interactive-grade pane (link targets, features, plans)
   panel .... compositional pane (groups, wells of content)
   well ..... sunken area inside a pane
   plate .... tiny pane for icons/marks
   ============================================================================ */
.qm-card, .qm-panel {
    position: relative;
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

.qm-card {
    padding: var(--qm-sp-6);
}

.qm-panel {
    padding: var(--qm-sp-8);
}

.qm-card--tight {
    padding: var(--qm-sp-4);
}

.qm-card--roomy {
    padding: var(--qm-sp-8);
}

.qm-panel--tight {
    padding: var(--qm-sp-5);
}

.qm-panel--roomy {
    padding: clamp(2rem, 5vw, 3.5rem);
}

.qm-panel--flush {
    padding: 0;
    overflow: hidden;
}

.qm-card--bare {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.qm-card--stone, .qm-panel--stone {
    background: var(--qm-bg-1);
}

.qm-card--tint, .qm-panel--tint {
    background: linear-gradient(180deg, var(--qm-azure-tint), transparent 60%), var(--qm-surface-1);
}

.qm-panel--sunk {
    background: var(--qm-bg-1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    border-color: var(--qm-rule-faint);
}

/* The focal pane — spectrum edge. One per composition. */
.qm-panel--focal, .qm-plan--focal {
    border-color: transparent;
    background: linear-gradient(var(--qm-surface-1), var(--qm-surface-1)) padding-box, var(--qm-spectrum) border-box;
}

/* Interactive card */
.qm-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--qm-t-fast), background var(--qm-t-fast), transform var(--qm-t-med) var(--qm-ease);
}

    .qm-card--link:hover {
        border-color: var(--qm-rule-strong);
        background: var(--qm-surface-2);
        transform: translateY(-2px);
    }

.qm-card__hit {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.qm-well {
    background: var(--qm-bg-1);
    border: 1px solid var(--qm-rule-faint);
    border-radius: var(--qm-r-md);
    padding: var(--qm-sp-5);
}

.qm-plate {
    display: inline-grid;
    place-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-2);
    border: 1px solid var(--qm-rule);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    color: var(--qm-azure);
}

    .qm-plate svg {
        width: 20px;
        height: 20px;
    }

/* ============================================================================
   13.  BADGES, STATUS, ANNOUNCE
   Badges are mono — they are metadata, therefore measured (LAW 3).
   ============================================================================ */
.qm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.65rem;
    border-radius: var(--qm-r-pill);
    border: 1px solid var(--qm-rule);
    background: var(--qm-surface-1);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--qm-text-secondary);
    white-space: nowrap;
}

.qm-badge--live {
    color: var(--qm-signal);
    border-color: rgba(43, 217, 236, 0.35);
    background: var(--qm-signal-tint);
}

    .qm-badge--live::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
    }

.qm-badge--soon {
    color: var(--qm-violet);
    border-color: rgba(138, 124, 255, 0.35);
    background: var(--qm-violet-tint);
}

.qm-badge--warn {
    color: var(--qm-warn);
    border-color: rgba(242, 185, 75, 0.35);
    background: var(--qm-warn-tint);
}

.qm-badge--alert {
    color: var(--qm-alert);
    border-color: rgba(255, 92, 116, 0.35);
    background: var(--qm-alert-tint);
}

.qm-badge--ink {
    background: var(--qm-text);
    border-color: var(--qm-text);
    color: var(--qm-text-invert);
}

.qm-badge--solid {
    background: var(--qm-spectrum);
    border-color: transparent;
    color: #FFFFFF;
}

/* Status readout — a fact with a lamp. */
.qm-status {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    letter-spacing: 0.04em;
    color: var(--qm-text-secondary);
}

    .qm-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--qm-text-faint);
        flex: none;
    }

.qm-status--live::before {
    background: var(--qm-signal);
}

.qm-status--pulse::before {
    animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
}

.qm-status--warn::before {
    background: var(--qm-warn);
}

.qm-status--down::before {
    background: var(--qm-alert);
}

.qm-status--soon::before {
    background: var(--qm-violet);
}

/* Announcement pill above heroes */
.qm-announce {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-3);
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border-radius: var(--qm-r-pill);
    border: 1px solid var(--qm-rule);
    background: rgba(151, 173, 220, 0.05);
    color: var(--qm-text-secondary);
    font-size: var(--qm-fs-sm);
    text-decoration: none;
    transition: border-color var(--qm-t-fast), color var(--qm-t-fast), background var(--qm-t-fast);
}

    .qm-announce:hover {
        border-color: var(--qm-rule-strong);
        color: var(--qm-text);
        background: rgba(151, 173, 220, 0.09);
    }

/* ============================================================================
   14.  NAVIGATION FRAGMENTS — crumbs, tabs, anchor rails
   Wayfinding never spends the accent budget (LAW 2) — but the current
   location may be marked.
   ============================================================================ */
.qm-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    letter-spacing: 0.03em;
}

    .qm-crumbs a {
        color: var(--qm-text-muted);
        text-decoration: none;
        transition: color var(--qm-t-fast);
    }

        .qm-crumbs a:hover {
            color: var(--qm-text);
        }

        .qm-crumbs a:not(:last-child)::after, .qm-crumbs span:not(:last-child)::after {
            content: "/";
            margin-inline-start: var(--qm-sp-2);
            color: var(--qm-text-faint);
        }

    .qm-crumbs [aria-current="page"] {
        color: var(--qm-text-secondary);
    }

.qm-tabs {
    display: flex;
    gap: var(--qm-sp-1);
    border-block-end: 1px solid var(--qm-rule);
    overflow-x: auto;
    scrollbar-width: none;
}

.qm-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    padding: 0.7rem 0.9rem;
    font: 500 var(--qm-fs-sm) / 1 var(--qm-font-sans);
    color: var(--qm-text-muted);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--qm-t-fast), border-color var(--qm-t-fast);
}

    .qm-tab:hover {
        color: var(--qm-text-secondary);
    }

    .qm-tab.is-active, .qm-tab[aria-selected="true"] {
        color: var(--qm-text);
        border-color: var(--qm-azure);
    }

.qm-anchor-nav {
    display: grid;
    gap: 2px;
}

.qm-anchor-nav__title {
    margin: 0 0 var(--qm-sp-3);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qm-anchor-nav a {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-3);
    padding: 0.4rem 0.6rem;
    font: 400 var(--qm-fs-xs) / 1.3 var(--qm-font-mono);
    color: var(--qm-text-muted);
    text-decoration: none;
    border-inline-start: 1px solid var(--qm-rule-faint);
    border-radius: 0 var(--qm-r-sm) var(--qm-r-sm) 0;
    transition: color var(--qm-t-fast), border-color var(--qm-t-fast), background var(--qm-t-fast);
}

    .qm-anchor-nav a:hover {
        color: var(--qm-text-secondary);
        background: rgba(151, 173, 220, 0.05);
    }

    .qm-anchor-nav a.is-active {
        color: var(--qm-text);
        border-inline-start-color: var(--qm-azure);
    }

/* ============================================================================
   15.  HERO
   The thesis. The page's single glow lives here (LAW 1). One primary action.
   ============================================================================ */
.qm-hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(4.5rem, 12vw, 9rem) clamp(3.5rem, 9vw, 7rem);
}

.qm-hero__inner {
    position: relative;
    z-index: 1;
}

.qm-hero__body {
    display: grid;
    gap: var(--qm-sp-6);
    max-width: 54rem;
}

.qm-hero--center .qm-hero__body {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.qm-hero--compact {
    padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}

.qm-hero__title {
    max-width: 16em;
}

.qm-hero__lead {
    max-width: 38em;
}

.qm-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qm-sp-2) var(--qm-sp-5);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    letter-spacing: 0.03em;
    color: var(--qm-text-muted);
}

    .qm-hero__meta > span {
        display: inline-flex;
        align-items: center;
        gap: var(--qm-sp-2);
    }

        .qm-hero__meta > span::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--qm-azure);
            opacity: 0.7;
        }

/* ============================================================================
   16.  FEATURES
   ============================================================================ */
.qm-feature {
    display: grid;
    gap: var(--qm-sp-4);
    align-content: start;
}

.qm-feature--card {
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    padding: var(--qm-sp-6);
}

.qm-feature--link {
    text-decoration: none;
    color: inherit;
    transition: border-color var(--qm-t-fast), background var(--qm-t-fast), transform var(--qm-t-med) var(--qm-ease);
}

    .qm-feature--link:hover {
        border-color: var(--qm-rule-strong);
        background: var(--qm-surface-2);
        transform: translateY(-2px);
    }

.qm-feature--rule-accent {
    border-block-start: 2px solid;
    border-image: var(--qm-spectrum) 1;
    padding-block-start: var(--qm-sp-5);
}

.qm-feature__icon {
    display: inline-grid;
    place-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-2);
    border: 1px solid var(--qm-rule);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    color: var(--qm-azure);
}

    .qm-feature__icon svg {
        width: 20px;
        height: 20px;
    }

.qm-feature__index {
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    color: var(--qm-text-faint);
}

.qm-feature__title {
    margin: 0;
    font: 600 var(--qm-fs-h3) / 1.3 var(--qm-font-display);
    letter-spacing: var(--qm-track-h3);
}

.qm-feature__text {
    margin: 0;
    color: var(--qm-text-secondary);
    font-size: var(--qm-fs-sm);
    line-height: 1.6;
}

.qm-feature__foot {
    margin-block-start: auto;
    padding-block-start: var(--qm-sp-2);
}

/* ============================================================================
   17.  STATS
   Numerals are mono — they are measurements, not advertising (LAW 3).
   ============================================================================ */
.qm-stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--qm-sp-6) var(--qm-sp-8);
}

.qm-stat {
    display: grid;
    gap: var(--qm-sp-2);
    align-content: start;
    padding-inline-start: var(--qm-sp-5);
    border-inline-start: 1px solid var(--qm-rule);
}

.qm-stat--center {
    text-align: center;
    padding-inline-start: 0;
    border: 0;
    justify-items: center;
}

.qm-stat__value {
    font: 500 clamp(2rem, 1.5rem + 2vw, 3rem) / 1 var(--qm-font-mono);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--qm-text);
}

.qm-stat__unit {
    font-size: 0.55em;
    color: var(--qm-text-muted);
    margin-inline-start: 2px;
}

.qm-stat__label {
    font: 500 var(--qm-fs-sm) / 1.35 var(--qm-font-sans);
    color: var(--qm-text-secondary);
}

.qm-stat__note {
    font: 400 var(--qm-fs-xs) / 1.4 var(--qm-font-mono);
    color: var(--qm-text-faint);
}

/* ============================================================================
   18.  STEPS & TIMELINE
   ============================================================================ */
.qm-steps {
    display: grid;
    gap: var(--qm-sp-6);
    counter-reset: qm-step;
}

.qm-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--qm-sp-4);
    counter-increment: qm-step;
}

.qm-step__marker {
    display: grid;
    place-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--qm-r-sm);
    background: var(--qm-surface-2);
    border: 1px solid var(--qm-rule);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    color: var(--qm-azure);
}

    .qm-step__marker:empty::before {
        content: counter(qm-step, decimal-leading-zero);
    }

.qm-step:not(:last-child) .qm-step__marker::after {
    content: "";
    position: absolute;
    inset-inline-start: 17px;
    top: 40px;
    bottom: calc(-1 * var(--qm-sp-6) + 6px);
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--qm-rule-strong) 0 1px, transparent 1px 7px);
}

.qm-step__body {
    display: grid;
    gap: var(--qm-sp-1);
    padding-block: 4px;
}

.qm-step__title {
    margin: 0;
    font: 600 var(--qm-fs-body) / 1.35 var(--qm-font-sans);
    letter-spacing: -0.01em;
    color: var(--qm-text);
}

.qm-step__text {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
}

.qm-timeline {
    display: grid;
    gap: var(--qm-sp-6);
    position: relative;
    padding-inline-start: var(--qm-sp-6);
}

    .qm-timeline::before {
        content: "";
        position: absolute;
        inset-block: 6px;
        inset-inline-start: 3px;
        width: 1px;
        background: var(--qm-rule);
    }

.qm-timeline__item {
    position: relative;
    display: grid;
    gap: var(--qm-sp-1);
}

.qm-timeline__dot {
    position: absolute;
    inset-inline-start: calc(-1 * var(--qm-sp-6) + 0px);
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qm-text-faint);
}

.qm-timeline__item--now .qm-timeline__dot {
    background: var(--qm-signal);
    animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
}

.qm-timeline__item--soon .qm-timeline__dot {
    background: var(--qm-violet);
}

.qm-timeline__date {
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    letter-spacing: 0.05em;
    color: var(--qm-text-muted);
    text-transform: uppercase;
}

.qm-timeline__title {
    margin: 0;
    font: 600 var(--qm-fs-body) / 1.35 var(--qm-font-sans);
    color: var(--qm-text);
}

.qm-timeline__body {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
}

/* ============================================================================
   19.  TABLES & SPECS
   ============================================================================ */
.qm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: var(--qm-surface-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

.qm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--qm-fs-sm);
}

    .qm-table th {
        text-align: start;
        font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
        letter-spacing: var(--qm-track-label);
        text-transform: uppercase;
        color: var(--qm-text-muted);
        background: var(--qm-bg-1);
        padding: 0.8rem 1rem;
        border-block-end: 1px solid var(--qm-rule);
        white-space: nowrap;
    }

    .qm-table td {
        padding: 0.85rem 1rem;
        border-block-end: 1px solid var(--qm-rule-faint);
        color: var(--qm-text-secondary);
        vertical-align: top;
    }

    .qm-table tbody tr:last-child td {
        border-block-end: 0;
    }

    .qm-table tbody tr {
        transition: background var(--qm-t-fast);
    }

        .qm-table tbody tr:hover {
            background: var(--qm-surface-2);
        }

    .qm-table td:first-child {
        color: var(--qm-text);
    }

.qm-table__num {
    text-align: end;
    font-family: var(--qm-font-mono);
    font-variant-numeric: tabular-nums;
}

.qm-table--sticky th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.qm-specs {
    display: grid;
}

.qm-specs__row {
    display: grid;
    grid-template-columns: minmax(9rem, 0.9fr) 2fr;
    gap: var(--qm-sp-4);
    padding-block: 0.8rem;
    border-block-end: 1px solid var(--qm-rule-faint);
}

    .qm-specs__row:last-child {
        border-block-end: 0;
    }

.qm-specs__key {
    font: 500 var(--qm-fs-xs) / 1.5 var(--qm-font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

.qm-specs__val {
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
}

    .qm-specs__val strong {
        color: var(--qm-text);
        font-weight: 500;
    }

/* ============================================================================
   20.  PRICING
   One recommended plan per set. The focal plan takes the spectrum edge and
   the section's glow — nothing else on the screen may glow with it.
   Prices are measured, so they are mono (LAW 3).
   ============================================================================ */
.qm-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    gap: var(--qm-sp-5);
    align-items: stretch;
}

.qm-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--qm-sp-4);
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-xl);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    padding: var(--qm-sp-8) var(--qm-sp-6) var(--qm-sp-6);
}

.qm-plan--focal {
    box-shadow: inset 0 1px 0 var(--qm-edge-light), var(--qm-glow-azure);
}

.qm-plan__flag {
    position: absolute;
    top: 0;
    inset-inline-start: var(--qm-sp-6);
    transform: translateY(-50%);
    padding: 0.32rem 0.75rem;
    border-radius: var(--qm-r-pill);
    background: var(--qm-spectrum);
    color: #FFFFFF;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.qm-plan__name {
    margin: 0;
    font: 600 var(--qm-fs-h3) / 1.2 var(--qm-font-display);
    letter-spacing: var(--qm-track-h3);
}

.qm-plan__blurb {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-muted);
}

.qm-plan__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--qm-sp-2);
}

.qm-plan__amount {
    font: 500 2.6rem / 1 var(--qm-font-mono);
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--qm-text);
}

.qm-plan__period {
    font: 400 var(--qm-fs-sm) / 1 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-plan__note {
    margin: 0;
    font-size: var(--qm-fs-xs);
    color: var(--qm-text-secondary);
    font-family: var(--qm-font-mono);
}

.qm-plan__list {
    list-style: none;
    margin: 0;
    padding: var(--qm-sp-4) 0 0;
    border-block-start: 1px solid var(--qm-rule-faint);
    display: grid;
    gap: 0.6rem;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
}

    .qm-plan__list li {
        display: flex;
        gap: var(--qm-sp-3);
        align-items: flex-start;
    }

        .qm-plan__list li::before {
            content: "";
            flex: none;
            width: 14px;
            height: 14px;
            margin-top: 3px;
            background: var(--qm-azure);
            clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
        }

        .qm-plan__list li.is-off {
            color: var(--qm-text-faint);
        }

            .qm-plan__list li.is-off::before {
                background: var(--qm-text-faint);
                clip-path: polygon(0 42%, 100% 42%, 100% 58%, 0 58%);
            }

.qm-plan__foot {
    margin-block-start: auto;
    padding-block-start: var(--qm-sp-4);
}

/* ============================================================================
   21.  FAQ
   ============================================================================ */
.qm-faq {
    display: grid;
}

.qm-faq__item {
    border-block-end: 1px solid var(--qm-rule-faint);
}

    .qm-faq__item:first-child {
        border-block-start: 1px solid var(--qm-rule-faint);
    }

.qm-faq__q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qm-sp-5);
    padding: 1.15rem 0.25rem;
    font: 500 var(--qm-fs-body) / 1.4 var(--qm-font-sans);
    letter-spacing: -0.01em;
    color: var(--qm-text);
    cursor: pointer;
    transition: color var(--qm-t-fast);
}

    .qm-faq__q::-webkit-details-marker {
        display: none;
    }

    .qm-faq__q::after {
        content: "+";
        font: 400 1.15rem / 1 var(--qm-font-mono);
        color: var(--qm-text-muted);
        transition: transform var(--qm-t-med) var(--qm-ease), color var(--qm-t-fast);
        flex: none;
    }

.qm-faq__item[open] .qm-faq__q::after {
    transform: rotate(45deg);
    color: var(--qm-azure);
}

.qm-faq__q:hover::after {
    color: var(--qm-text);
}

.qm-faq__a {
    padding: 0 0.25rem 1.25rem;
    max-width: 60ch;
    color: var(--qm-text-secondary);
    font-size: var(--qm-fs-sm);
    line-height: 1.65;
}

/* ============================================================================
   22.  QUOTES & PEOPLE
   ============================================================================ */
.qm-quote {
    margin: 0;
    display: grid;
    gap: var(--qm-sp-5);
    max-width: 46rem;
}

.qm-quote__text {
    margin: 0;
    font: 500 clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem) / 1.45 var(--qm-font-display);
    letter-spacing: -0.015em;
    color: var(--qm-text);
    text-wrap: pretty;
}

    .qm-quote__text::before {
        content: "“";
        color: var(--qm-azure);
    }

    .qm-quote__text::after {
        content: "”";
        color: var(--qm-azure);
    }

.qm-quote__by {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-3);
}

.qm-quote__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--qm-surface-3);
    border: 1px solid var(--qm-rule);
    overflow: hidden;
    display: grid;
    place-content: center;
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-quote__name {
    font: 500 var(--qm-fs-sm) / 1.2 var(--qm-font-sans);
    color: var(--qm-text);
}

.qm-quote__role {
    font: 400 var(--qm-fs-xs) / 1.2 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-quote--card {
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    padding: var(--qm-sp-6);
    max-width: none;
}

    .qm-quote--card .qm-quote__text {
        font-size: var(--qm-fs-body);
        line-height: 1.55;
    }

.qm-quote-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--qm-sp-5);
    align-items: start;
}

.qm-person {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-3);
}

.qm-person__photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--qm-surface-3);
    border: 1px solid var(--qm-rule);
    overflow: hidden;
    flex: none;
    display: grid;
    place-content: center;
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-person__name {
    font: 500 var(--qm-fs-sm) / 1.25 var(--qm-font-sans);
    color: var(--qm-text);
}

.qm-person__role {
    font: 400 var(--qm-fs-xs) / 1.3 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

/* ============================================================================
   23.  TILES & LOGOS
   Third-party marks arrive monochrome and stay monochrome.
   ============================================================================ */
.qm-tile {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-4);
    padding: var(--qm-sp-4) var(--qm-sp-5);
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-md);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--qm-t-fast), background var(--qm-t-fast);
}

a.qm-tile:hover {
    border-color: var(--qm-rule-strong);
    background: var(--qm-surface-2);
}

.qm-tile__mark {
    width: 36px;
    height: 36px;
    border-radius: var(--qm-r-sm);
    background: var(--qm-surface-3);
    border: 1px solid var(--qm-rule);
    display: grid;
    place-content: center;
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    color: var(--qm-text-secondary);
    flex: none;
}

.qm-tile__body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.qm-tile__name {
    font: 500 var(--qm-fs-sm) / 1.25 var(--qm-font-sans);
    color: var(--qm-text);
}

.qm-tile__meta {
    font: 400 var(--qm-fs-xs) / 1.3 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-tile__end {
    margin-inline-start: auto;
}

.qm-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qm-sp-6) var(--qm-sp-9);
    filter: grayscale(1);
    opacity: 0.55;
}

    .qm-logo-row > * {
        font: 600 var(--qm-fs-body) / 1 var(--qm-font-sans);
        letter-spacing: -0.01em;
        color: var(--qm-text-secondary);
    }

/* ============================================================================
   24.  CALLOUTS
   A 2px accent spine. The spine colour is the message.
   ============================================================================ */
.qm-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--qm-sp-4);
    padding: var(--qm-sp-5);
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-inline-start: 2px solid var(--qm-azure);
    border-radius: var(--qm-r-md);
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
}

.qm-callout__icon {
    color: var(--qm-azure);
    display: grid;
    place-content: start;
    padding-top: 2px;
}

    .qm-callout__icon svg {
        width: 18px;
        height: 18px;
    }

.qm-callout__title {
    display: block;
    font: 600 var(--qm-fs-sm) / 1.35 var(--qm-font-sans);
    color: var(--qm-text);
    margin-block-end: 4px;
}

.qm-callout--accent {
    border-inline-start-color: var(--qm-azure);
    background: linear-gradient(90deg, var(--qm-azure-tint), var(--qm-surface-1) 45%);
}

.qm-callout--warn {
    border-inline-start-color: var(--qm-warn);
}

    .qm-callout--warn .qm-callout__icon {
        color: var(--qm-warn);
    }

.qm-callout--alert {
    border-inline-start-color: var(--qm-alert);
}

    .qm-callout--alert .qm-callout__icon {
        color: var(--qm-alert);
    }

.qm-callout--quiet {
    border-inline-start-color: var(--qm-rule-strong);
    background: transparent;
}

    .qm-callout--quiet .qm-callout__icon {
        color: var(--qm-text-muted);
    }

/* ============================================================================
   25.  ROWS
   ============================================================================ */
.qm-rows {
    display: grid;
}

.qm-row {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-4);
    padding: 0.9rem 0.5rem;
    border-block-end: 1px solid var(--qm-rule-faint);
    color: inherit;
    text-decoration: none;
    border-radius: var(--qm-r-sm);
    transition: background var(--qm-t-fast);
}

.qm-rows .qm-row:last-child {
    border-block-end: 0;
}

a.qm-row:hover {
    background: var(--qm-surface-1);
}

.qm-row__title {
    font: 500 var(--qm-fs-sm) / 1.35 var(--qm-font-sans);
    color: var(--qm-text);
}

.qm-row__meta {
    font: 400 var(--qm-fs-xs) / 1.3 var(--qm-font-mono);
    color: var(--qm-text-muted);
}

.qm-row__end {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-3);
}

/* ============================================================================
   26.  CODE & DEVICE FRAMES
   The frame is the ONE object that genuinely floats — it carries the lift.
   ============================================================================ */
.qm-code {
    background: var(--qm-code-bg);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(216, 230, 255, 0.05);
}

.qm-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qm-sp-4);
    padding: 0.6rem 1rem;
    border-block-end: 1px solid var(--qm-rule-faint);
    font: 500 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    letter-spacing: 0.04em;
    color: var(--qm-text-muted);
}

.qm-code__body {
    margin: 0;
    padding: 1.1rem 1.2rem;
    font: 400 var(--qm-fs-mono) / 1.7 var(--qm-font-mono);
    color: var(--qm-text-secondary);
    overflow-x: auto;
    tab-size: 4;
}

.qm-code__copy {
    color: var(--qm-text-muted);
}

.qm-tok-com {
    color: var(--qm-text-faint);
    font-style: italic;
}

.qm-tok-key {
    color: var(--qm-azure);
}

.qm-tok-str {
    color: var(--qm-signal);
}

.qm-tok-num {
    color: var(--qm-violet);
}

.qm-frame {
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    overflow: hidden;
    box-shadow: var(--qm-lift);
}

.qm-frame__chrome {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-4);
    padding: 0.55rem 0.9rem;
    background: var(--qm-bg-1);
    border-block-end: 1px solid var(--qm-rule-faint);
}

.qm-frame__dots {
    display: inline-flex;
    gap: 6px;
}

    .qm-frame__dots i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--qm-surface-3);
        border: 1px solid var(--qm-rule);
    }

.qm-frame__url {
    flex: 1;
    text-align: center;
    font: 400 var(--qm-fs-xs) / 1 var(--qm-font-mono);
    color: var(--qm-text-muted);
    background: var(--qm-surface-1);
    border: 1px solid var(--qm-rule-faint);
    border-radius: var(--qm-r-pill);
    padding: 0.32rem 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-frame__body {
    position: relative;
    background: var(--qm-bg-0);
}

/* ============================================================================
   27.  CTA BAND
   The closing argument. Boxed variant carries the spectrum edge and — if
   the page has not spent it — the glow.
   ============================================================================ */
.qm-cta {
    position: relative;
    text-align: center;
}

.qm-cta__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--qm-sp-6);
    z-index: 1;
}

.qm-cta--boxed .qm-cta__inner {
    border-radius: var(--qm-r-xl);
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--qm-surface-2), var(--qm-surface-1)) padding-box, linear-gradient(135deg, rgba(77,141,255,.65), rgba(138,124,255,.65)) border-box;
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    overflow: clip;
    box-shadow: var(--qm-glow-azure);
}

/* ============================================================================
   28.  MOTION
   One orchestrated entrance; everything else is micro. Reduced motion wins.
   ============================================================================ */
@keyframes qm-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(43, 217, 236, 0.45);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(43, 217, 236, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(43, 217, 236, 0);
    }
}

@keyframes qm-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes qm-drift {
    from {
        transform: translate3d(-2%, 0, 0);
    }

    to {
        transform: translate3d(2%, -1.5%, 0);
    }
}

.qm-reveal {
    animation: qm-fade-up var(--qm-t-slow) var(--qm-ease) both;
}

.qm-stagger > * {
    animation: qm-fade-up var(--qm-t-slow) var(--qm-ease) both;
}

    .qm-stagger > *:nth-child(1) {
        animation-delay: 0.05s;
    }

    .qm-stagger > *:nth-child(2) {
        animation-delay: 0.12s;
    }

    .qm-stagger > *:nth-child(3) {
        animation-delay: 0.19s;
    }

    .qm-stagger > *:nth-child(4) {
        animation-delay: 0.26s;
    }

    .qm-stagger > *:nth-child(5) {
        animation-delay: 0.33s;
    }

    .qm-stagger > *:nth-child(6) {
        animation-delay: 0.40s;
    }

.qm-tex--glow.qm-drift {
    animation: qm-drift 14s var(--qm-ease-io) alternate infinite;
}

.qm-draw {
    transform-origin: left center;
    animation: qm-fade-up var(--qm-t-slow) var(--qm-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .qm *, .qm *::before, .qm *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    html.qm {
        scroll-behavior: auto;
    }
}

/* ============================================================================
   29.  UTILITIES
   ============================================================================ */
.qm-center {
    display: grid;
    place-items: center;
}

.qm-relative {
    position: relative;
}

.qm-clip {
    overflow: clip;
}

.qm-fill {
    position: absolute;
    inset: 0;
}

.qm-flex-1 {
    flex: 1;
}

.qm-push {
    margin-inline-start: auto;
}

.qm-w-full {
    width: 100%;
}

.qm-w-lead {
    max-width: 38em;
}

.qm-w-prose {
    max-width: var(--qm-w-prose);
}

.qm-w-narrow {
    max-width: var(--qm-w-narrow);
}

.qm-text-center, .qm-text--center {
    text-align: center;
}

.qm-text-left {
    text-align: start;
}

.qm-text-right {
    text-align: end;
}

.qm-text--full {
    max-width: none;
}

.qm-mt-2 {
    margin-block-start: var(--qm-sp-2);
}

.qm-mt-3 {
    margin-block-start: var(--qm-sp-3);
}

.qm-mt-4 {
    margin-block-start: var(--qm-sp-4);
}

.qm-mt-6 {
    margin-block-start: var(--qm-sp-6);
}

.qm-mt-8 {
    margin-block-start: var(--qm-sp-8);
}

.qm-mt-10 {
    margin-block-start: var(--qm-sp-10);
}

.qm-mb-2 {
    margin-block-end: var(--qm-sp-2);
}

.qm-mb-3 {
    margin-block-end: var(--qm-sp-3);
}

.qm-mb-4 {
    margin-block-end: var(--qm-sp-4);
}

.qm-mb-6 {
    margin-block-end: var(--qm-sp-6);
}

.qm-mb-8 {
    margin-block-end: var(--qm-sp-8);
}

.qm-mb-10 {
    margin-block-end: var(--qm-sp-10);
}

.qm-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.qm-ratio-4x5 {
    aspect-ratio: 4 / 5;
}

.qm-ratio-1x1 {
    aspect-ratio: 1 / 1;
}

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

.qm-sr-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ── container query hook kept from Theatre markup ── */
.qm-cq {
    container-type: inline-size;
}

/* ############################################################################
   END — MERIDIAN v1
   When editing: re-read the three laws first. If your change adds a second
   glow, a third accent, or a colour outside the spectrum, it is wrong before
   it is rendered.
   ############################################################################ */