@charset "UTF-8";
/* ############################################################################
   QLYNIC  ·  ahcip-billing.css
   PAGE EXTENSION SHEET   —   ~/public/css/ahcip-billing.css
   ----------------------------------------------------------------------------
   PAGE ......... public/AhcipBilling.aspx
   SYSTEM ....... Qlynic Marketing UI · MERIDIAN v1
                  ~/QlynicDesign/Marketing/qlynic-marketing.css
   PREFIX ....... .qhl- (page-local only)

   ══ WHAT THIS FILE IS ALLOWED TO BE ══════════════════════════════════════
   An EXTENSION, not a second design system. The first draft of this file
   redeclared the entire token set under --qhl-* and shipped a green
   (#34D399) status colour. Both were wrong:

     · The kit is the vocabulary. Duplicating tokens means the day a brand
       value changes, this page silently keeps the old one.
     · "There is NO GREEN anywhere in this system. That is deliberate."
       — qlynic-marketing.css, LAW 2.

   So: this file declares NO colours, NO type scale, NO spacing scale. Every
   value below is var(--qm-*). It exists only for THE CLAIM CLOCK, which is
   a composition the kit does not ship — and even that is assembled from kit
   tokens and kit motion.

   If you find yourself adding a hex code here, stop. Either the value
   belongs in the kit, or the design is fighting the system.

   ══ THE ONE BESPOKE OBJECT — THE CLAIM CLOCK ═════════════════════════════
   Ninety hairline ticks, one per day of the AHCIP submission window. The
   track draws itself left to right on entry, days 76-89 turn warn, day 90
   turns alert, and a mono readout counts with it. It is Signature 1 (the
   telemetry rule) taken literally: a hairline broken by a measured value.

   ACCENT BUDGET (LAW 2 — azure at most three appearances):
     1. the primary button in the hero
     2. the crumbs / rail chrome ...... exempt, wayfinding is not content
     3. nothing else on this section
   Cyan appears once, on the clock's pulsing node, and obeys its own law:
   the clock is the only thing on the page that is genuinely live.

   GLOW BUDGET (LAW 1 — one per viewport):
     Spent on .qm-tex--glow behind the hero. The clock does NOT glow.
   ############################################################################ */


/* ============================================================================
   01 · SECTION SHELL
   The hero owns the page's only glow, so it needs the stacking context the
   kit's .qm-hero already provides. Nothing here changes kit behaviour; it
   only gives the clock somewhere to sit.
   ============================================================================ */
.qhl {
    position: relative;
    background: var(--qm-bg-0);
    color: var(--qm-text);
}

.qhl-clockwrap {
    margin-top: var(--qm-sp-12);
}

@media (min-width: 62rem) {
    .qhl-clockwrap {
        margin-top: var(--qm-sp-14);
    }
}


/* ============================================================================
   02 · ATMOSPHERE — replaces the kit's blueprint grid on this page
   ----------------------------------------------------------------------------
   The grid texture (.qm-tex--grid) was tried here and pulled: at hero scale
   a 56px lattice reads as check cloth, not as a control room. What replaces
   it is quieter and belongs to the subject.

   THE LAND. public/Images/canada-map-alberta-red.svg is used as a MASK, not
   as an image. The file itself is crimson (#DC143C), grey (#404040) and white
   — none of which exist in Meridian — so we take only its SHAPE and paint it
   with the site's own spectrum. A mask ignores source colour entirely, which
   is the only honest way to reuse an Illustrator export inside a design
   system. It sits at 7% opacity, bleeding off the trailing edge, so it reads
   as the ground the clinic stands on rather than as a data graphic.

   THIS IS ATMOSPHERE, NOT AN ACCENT. Like the aurora it is spectrum-tinted
   texture behind content, so it does not spend the LAW 2 accent budget —
   the same reasoning the kit applies to .qm-tex--glow.
   ============================================================================ */
.qhl-tex--land {
    background: var(--qm-spectrum-wide);
    opacity: 0.07;
    -webkit-mask-image: var(--qhl-land);
    mask-image: var(--qhl-land);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 118% 42%;
    mask-position: 118% 42%;
    -webkit-mask-size: auto 132%;
    mask-size: auto 132%;
}

@media (max-width: 61.9rem) {
    .qhl-tex--land {
        opacity: 0.05;
        -webkit-mask-position: 150% 38%;
        mask-position: 150% 38%;
        -webkit-mask-size: auto 100%;
        mask-size: auto 100%;
    }
}

/* THE HORIZON. A single soft band low in the section, so the hero sits on
   something instead of ending. Cheap, GPU-friendly, no filter. */
.qhl-tex--horizon {
    background: radial-gradient( 60rem 26rem at 22% 116%, var(--qm-violet-tint), transparent 68% );
}

@media (prefers-reduced-motion: reduce) {
    .qm-tex.qm-drift {
        animation: none;
    }
}


/* ============================================================================
   03 · THE CLAIM CLOCK
   ============================================================================ */
.qhl-clock {
    position: relative;
    display: grid;
    gap: var(--qm-sp-5);
}

/* ── 2.1 · readout — Law 3: mono measures ─────────────────────────────── */
.qhl-clock__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-6);
}

.qhl-clock__title {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-3);
    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);
}

/* the single cyan on the section — the clock is the live thing */
.qhl-clock__node {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qm-signal);
    animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
    flex: none;
}

.qhl-clock__count {
    font: 500 var(--qm-fs-mono) / 1 var(--qm-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--qm-text);
    white-space: nowrap;
}

    .qhl-clock__count b {
        font-weight: 500;
        color: var(--qm-text-faint);
    }

/* ── 2.2 · the track ───────────────────────────────────────────────────── */
.qhl-clock__track {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 3.25rem;
    padding-inline: 1px;
}

@media (max-width: 47.9rem) {
    .qhl-clock__track {
        height: 2.5rem;
        gap: 1px;
    }
}

.qhl-clock__tick {
    flex: 1 1 0;
    min-width: 1px;
    height: 42%;
    border-radius: 1px;
    background: var(--qm-rule);
    transform-origin: bottom center;
    transform: scaleY(0);
    opacity: 0;
}

/* the draw — ticks post upward in sequence, they never slide sideways */
.qhl-in .qhl-clock__tick {
    animation: qhl-post 460ms var(--qm-ease) both;
    animation-delay: calc(var(--qhl-i, 0) * 9ms);
}

@keyframes qhl-post {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* every tenth day stands taller — a ruler needs its majors */
.qhl-clock__tick--major {
    height: 66%;
    background: var(--qm-rule-strong);
}

/* the warning shoulder, days 76-89 */
.qhl-clock__tick--warn {
    height: 78%;
    background: var(--qm-warn);
    opacity: 0.55;
}

/* day 90 — the last payable day */
.qhl-clock__tick--edge {
    height: 100%;
    background: var(--qm-alert);
    box-shadow: 0 0 0 1px var(--qm-alert-tint);
}

/* ── 2.3 · scale legend under the track ────────────────────────────────── */
.qhl-clock__scale {
    display: flex;
    justify-content: space-between;
    padding-top: var(--qm-sp-3);
    border-top: 1px solid var(--qm-rule-faint);
    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);
}

    .qhl-clock__scale span:nth-child(2) {
        color: var(--qm-warn);
    }

    .qhl-clock__scale span:nth-child(3) {
        color: var(--qm-alert);
    }

@media (max-width: 35rem) {
    .qhl-clock__scale span:nth-child(2) {
        display: none;
    }
}

/* ── 2.4 · the statute, quoted ─────────────────────────────────────────── */
.qhl-statute {
    max-width: var(--qm-w-prose);
    margin: var(--qm-sp-8) 0 0;
    padding-inline-start: var(--qm-sp-5);
    border-inline-start: 2px solid var(--qm-rule-strong);
}

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

.qhl-statute__c {
    display: block;
    margin-top: var(--qm-sp-3);
    font: 400 var(--qm-fs-xs) / 1.5 var(--qm-font-mono);
    font-style: normal;
    color: var(--qm-text-faint);
}


/* ============================================================================
   04 · SECTION 02 — THE ROUTE
   ----------------------------------------------------------------------------
   Built on the kit's own components, not on new ones:
     .qm-day   — SIGNATURE 2, the ops rail
     .qm-steps — the five stages, with the kit's dashed connector

   Everything below is a MOTION and STATE layer over those. No new geometry,
   no new colour. The kit ships .qm-step__marker in azure; markers only reach
   that colour once their stage has been passed, so an unread section stays
   ink and glass and the eye is pulled down the rail rather than scattered.

   ACCENT BUDGET FOR THIS VIEWPORT (LAW 2):
     · the rail and the step markers are STRUCTURE — the kit states that
       wayfinding chrome does not spend the budget
     · cyan appears once, on the claim descending the rail, and obeys its own
       law: a claim in transit is the only live thing here
     · no glow at all. The page's single glow was spent on the hero.
   ============================================================================ */

/* ── 4.1 · the seam into the band ─────────────────────────────────────── */
.qhl-seam {
    background: linear-gradient(180deg, var(--qm-bg-0), transparent 42%);
}

/* ── 4.2 · the ops rail draws downward ────────────────────────────────── */
.qhl-rail {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1100ms var(--qm-ease-io) 120ms;
}

.qhl-in .qhl-rail {
    clip-path: inset(0 0 0 0);
}

/* THE CLAIM IN FLIGHT. One cyan node descending the rail, forever, because
   at any moment of any day there is a claim somewhere in this pipeline.
   Slow and small on purpose — it should be noticed second, after the words. */
.qhl-rail {
    position: relative;
}

.qhl-claim {
    position: absolute;
    inset-inline-end: -3px;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qm-signal);
    box-shadow: 0 0 12px 1px rgba(43, 217, 236, 0.45);
    opacity: 0;
}

.qhl-in .qhl-claim {
    animation: qhl-descend 7s var(--qm-ease-io) 900ms infinite;
}

@keyframes qhl-descend {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* ── 4.3 · the stages post in ─────────────────────────────────────────── */
.qhl-step {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--qm-t-slow) var(--qm-ease), transform var(--qm-t-slow) var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 110ms);
}

.qhl-in .qhl-step {
    opacity: 1;
    transform: none;
}

/* the marker only earns its azure once the stage has arrived */
.qhl-step .qm-step__marker {
    color: var(--qm-text-faint);
    background: var(--qm-surface-1);
    transition: color var(--qm-t-med) var(--qm-ease), background var(--qm-t-med) var(--qm-ease), border-color var(--qm-t-med) var(--qm-ease), box-shadow var(--qm-t-med) var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 110ms + 260ms);
}

.qhl-in .qhl-step .qm-step__marker {
    color: var(--qm-azure);
    background: var(--qm-surface-2);
    border-color: var(--qm-rule-strong);
}

/* the kit's dashed connector, drawn rather than simply present */
.qhl-step .qm-step__marker::after {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 620ms var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 110ms + 340ms);
}

.qhl-in .qhl-step .qm-step__marker::after {
    transform: scaleY(1);
}

/* ── 4.4 · the clock line — mono, and it repeats on purpose ───────────── */
.qhl-step__clock {
    margin: 0 0 var(--qm-sp-1);
    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);
}

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

.qhl-step__clock--stop {
    color: var(--qm-alert);
}

/* ── 4.5 · where it stops ─────────────────────────────────────────────── */
.qhl-step__stall {
    margin: var(--qm-sp-3) 0 0;
    padding-inline-start: var(--qm-sp-4);
    border-inline-start: 2px solid var(--qm-warn);
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-muted);
    text-wrap: pretty;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--qm-t-slow) var(--qm-ease), transform var(--qm-t-slow) var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 110ms + 420ms);
}

.qhl-in .qhl-step__stall {
    opacity: 1;
    transform: none;
}

    .qhl-step__stall b {
        font-weight: 500;
        color: var(--qm-text-secondary);
    }

/* ── 4.6 · hover — the row leans toward the reader, nothing more ──────── */
@media (hover: hover) {
    .qhl-step {
        border-radius: var(--qm-r-md);
        transition: opacity var(--qm-t-slow) var(--qm-ease), transform var(--qm-t-slow) var(--qm-ease), background var(--qm-t-fast) var(--qm-ease);
    }

        .qhl-step:hover {
            background: linear-gradient(90deg, var(--qm-surface-1), transparent 62%);
        }

            .qhl-step:hover .qm-step__marker {
                box-shadow: var(--qm-glow-azure);
            }
}

@media (prefers-reduced-motion: reduce) {
    .qhl-rail {
        clip-path: none;
        transition: none;
    }

    .qhl-claim {
        display: none;
    }

    .qhl-step,
    .qhl-step__stall {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .qhl-step .qm-step__marker::after {
        transform: scaleY(1);
    }
}


/* ============================================================================
   05 · SECTION 03 — THE BYPASS
   ----------------------------------------------------------------------------
   The commercial argument of the whole page, drawn rather than asserted:
   two routes to the same destination, one with a toll booth on it.

   THE LOOK — CYBER THIEF. Not neon, a PLAN. Hairlines, checkpoints, a route
   being run, mono callouts, ONE THING MOVING while everything else holds
   still. Nothing glitches; a heist that stutters is a heist that failed.

   Two packets run, and only one of them is cyan. The gateway route's packet
   is muted ink and is visibly TAXED at the toll — it stops, a fee chip
   fires, and it goes on late. The direct route's packet is the live one and
   arrives while the other is still paying. That is the entire pitch, and no
   sentence has to make it.

   BUDGET: no glow (the hero holds the page's one). Cyan once, on the direct
   packet. Azure only on the kit's own callout edge, which is chrome.
   ============================================================================ */

/* ── 5.1 · the board ──────────────────────────────────────────────────── */
.qhl-wire {
    display: grid;
    gap: clamp(2.25rem, 5vw, 3.25rem);
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: var(--qm-bg-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

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

.qhl-route__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-4);
    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);
}

.qhl-route__verdict--toll {
    color: var(--qm-warn);
}

.qhl-route__verdict--direct {
    color: var(--qm-signal);
}

/* ── 5.2 · the wire ───────────────────────────────────────────────────── */
.qhl-track {
    position: relative;
    height: 1px;
    margin-block: var(--qm-sp-6) var(--qm-sp-8);
    background: var(--qm-rule);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--qm-ease-io);
}

.qhl-in .qhl-track {
    transform: scaleX(1);
}

/* the taxed route is drawn fainter than the direct one — the wire itself
   carries the verdict, so the eye picks the winner before it reads a word */
.qhl-route--toll .qhl-track {
    background: var(--qm-rule-faint);
}

.qhl-route--direct .qhl-track {
    transition-delay: 220ms;
    background: linear-gradient(90deg, var(--qm-rule), var(--qm-rule-strong));
}

/* the checkpoints */
.qhl-pin {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--qm-bg-1);
    border: 1px solid var(--qm-rule-strong);
}

.qhl-pin--start {
    inset-inline-start: 0;
}

.qhl-pin--toll {
    inset-inline-start: 46%;
    border-color: var(--qm-warn);
}

.qhl-pin--end {
    inset-inline-end: 0;
}

/* checkpoint labels — mono, and they never collide because the outer two
   are edge-anchored rather than centred */
.qhl-tag {
    position: absolute;
    top: var(--qm-sp-4);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qm-text-muted);
    white-space: nowrap;
}

.qhl-tag--start {
    inset-inline-start: 0;
}

.qhl-tag--end {
    inset-inline-end: 0;
    text-align: end;
}

.qhl-tag--toll {
    inset-inline-start: 46%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--qm-warn);
}

.qhl-tag small {
    display: block;
    margin-top: 2px;
    font-size: var(--qm-fs-label);
    color: var(--qm-text-faint);
    letter-spacing: 0.06em;
}

/* the toll booth fires as the packet is held at it */
.qhl-toll {
    position: absolute;
    inset-inline-start: 46%;
    top: -2.15rem;
    transform: translateX(-50%);
    padding: 0.2rem 0.5rem;
    border-radius: var(--qm-r-pill);
    background: var(--qm-warn-tint);
    color: var(--qm-warn);
    font: 500 var(--qm-fs-label) / 1.5 var(--qm-font-mono);
    letter-spacing: 0.08em;
    white-space: nowrap;
    opacity: 0;
}

.qhl-in .qhl-toll {
    animation: qhl-toll 5200ms var(--qm-ease-io) 1000ms infinite;
}

@keyframes qhl-toll {
    0%, 30% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    36%, 52% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    60%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── 5.3 · the packets — ONE THING MOVING, twice, and only one is live ── */
.qhl-pkt {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    opacity: 0;
    will-change: left;
}

.qhl-pkt--slow {
    background: var(--qm-text-muted);
}

.qhl-pkt--live {
    background: var(--qm-signal);
    box-shadow: 0 0 12px 1px rgba(43, 217, 236, 0.45);
}

.qhl-in .qhl-pkt--slow {
    animation: qhl-run-toll 5200ms var(--qm-ease-io) 1000ms infinite;
}

.qhl-in .qhl-pkt--live {
    animation: qhl-run-direct 5200ms var(--qm-ease-io) 1000ms infinite;
}

/* held at the toll between 34% and 52% — it pays, then goes on late */
@keyframes qhl-run-toll {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    34%, 52% {
        left: 46%;
        opacity: 1;
    }

    94% {
        left: calc(100% - 7px);
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        opacity: 0;
    }
}

/* straight through, arriving while the other one is still paying */
@keyframes qhl-run-direct {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    46% {
        left: calc(100% - 7px);
        opacity: 1;
    }

    62% {
        left: calc(100% - 7px);
        opacity: 1;
    }

    72%, 100% {
        left: calc(100% - 7px);
        opacity: 0;
    }
}

/* ── 5.4 · the three facts ────────────────────────────────────────────── */
.qhl-facts {
    margin-top: clamp(2rem, 5vw, 3rem);
}

.qhl-fact {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--qm-t-slow) var(--qm-ease), transform var(--qm-t-slow) var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 110ms);
}

.qhl-in .qhl-fact {
    opacity: 1;
    transform: none;
}

.qhl-fact__k {
    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);
}

.qhl-fact__k--warn {
    color: var(--qm-warn);
}

.qhl-fact__k--alert {
    color: var(--qm-alert);
}

.qhl-fact__t {
    margin: 0 0 var(--qm-sp-2);
    font: 600 var(--qm-fs-h3) / 1.25 var(--qm-font-sans);
    letter-spacing: var(--qm-track-h3);
    color: var(--qm-text);
}

.qhl-fact__b {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

@media (max-width: 47.9rem) {
    .qhl-tag {
        font-size: 0.625rem;
    }

    .qhl-tag--toll small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qhl-track {
        transform: scaleX(1);
        transition: none;
    }

    .qhl-pkt,
    .qhl-toll {
        animation: none !important;
        opacity: 0;
    }

    .qhl-fact {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ============================================================================
   06 · SECTION 04 — THE DEDUCTION LEDGER
   ----------------------------------------------------------------------------
   WHY THE PREVIOUS DEVICE WAS THROWN AWAY. It was a horizontal track with
   pins on it, and it failed twice:

     1. Day 80 and day 90 are nine percent apart. Two ~90px labels cannot
        both live there. They collided, and no amount of edge-anchoring
        fixes a collision caused by the data itself.
     2. Sections 01, 02 and 03 already move left-to-right — ticks draw,
        stall lines slide, packets run. A fourth horizontal sweep made the
        page feel like one gesture repeated rather than four ideas.

   SO THE GESTURE CHANGED, NOT JUST THE LAYOUT. Nothing here translates
   sideways. Rows PRINT downward like a till receipt, and a balance COUNTS
   DOWN beside them. Depletion and posting — the two motions a ledger
   actually makes. It is the only section on the page with no horizontal
   movement at all, which is exactly why it reads as a different idea.

   THIS IS THE THIEF'S ACCOUNTING. Ninety days is an opening balance. Every
   stage of the claim is a withdrawal. The reader watches the number fall
   and arrives at ten without being told that ten is small.

   BUDGET: no glow, no cyan. Nothing here is live; it is a post-mortem.
   ============================================================================ */

/* ── 6.1 · the sheet ──────────────────────────────────────────────────── */
.qhl-led {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .qhl-led {
        grid-template-columns: 1.35fr 0.65fr;
        gap: clamp(2.5rem, 5vw, 4rem);
    }
}

.qhl-led__cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    padding-block-end: var(--qm-sp-4);
    border-block-end: 1px solid var(--qm-rule);
    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);
}

/* ── 6.2 · the rows PRINT, top to bottom. Nothing slides. ─────────────── */
.qhl-led__row {
    display: grid;
    grid-template-columns: 4.75rem 1fr auto;
    gap: var(--qm-sp-4);
    align-items: baseline;
    padding-block: var(--qm-sp-4);
    border-block-end: 1px solid var(--qm-rule-faint);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 380ms var(--qm-ease-io);
    transition-delay: var(--qhl-p, 0ms);
}

.qhl-in .qhl-led__row {
    clip-path: inset(0 0 0 0);
}

.qhl-led__row--open {
    border-block-end-color: var(--qm-rule-strong);
}

.qhl-led__row--close {
    border-block-end: 0;
    padding-block-end: 0;
}

.qhl-led__day {
    font: 500 var(--qm-fs-xs) / 1.5 var(--qm-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qhl-led__what {
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

    .qhl-led__what b {
        display: block;
        font-weight: 500;
        color: var(--qm-text);
    }

.qhl-led__amt {
    font: 500 var(--qm-fs-mono) / 1.4 var(--qm-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--qm-text-muted);
    white-space: nowrap;
}

.qhl-led__amt--open {
    color: var(--qm-text);
}

.qhl-led__amt--out {
    color: var(--qm-warn);
}

.qhl-led__amt--zero {
    color: var(--qm-alert);
}

.qhl-led__row--refused .qhl-led__day {
    color: var(--qm-alert);
}

/* ── 6.3 · the balance. It falls; it does not travel. ─────────────────── */
.qhl-bal {
    position: sticky;
    top: var(--qm-sp-10);
    display: grid;
    justify-items: center;
    gap: var(--qm-sp-2);
    padding: clamp(1.5rem, 4vw, 2.25rem) var(--qm-sp-5);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: var(--qm-bg-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    text-align: center;
}

.qhl-bal__k {
    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);
}

.qhl-bal__n {
    font: 500 clamp(4rem, 3rem + 6vw, 7rem) / 0.9 var(--qm-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: var(--qm-text);
    transition: color var(--qm-t-med) var(--qm-ease);
}

/* it only turns warn once it has finished falling */
.qhl-bal--spent .qhl-bal__n {
    color: var(--qm-warn);
}

.qhl-bal__u {
    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);
}

.qhl-bal__sub {
    margin: var(--qm-sp-3) 0 0;
    max-width: 22ch;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

/* the wall, stated rather than drawn */
.qhl-bal__wall {
    margin-top: var(--qm-sp-4);
    padding-top: var(--qm-sp-4);
    border-top: 1px solid var(--qm-rule-faint);
    font: 500 var(--qm-fs-label) / 1.5 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-alert);
}

/* ── 6.4 · the specs ──────────────────────────────────────────────────── */
.qhl-rules {
    margin-top: clamp(2rem, 5vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
    .qhl-led__row {
        clip-path: none;
        transition: none;
    }
}


/* ============================================================================
   07 · SECTION 05 — THE CHECKLIST   ·   gesture: THE FOCUS PULL
   ----------------------------------------------------------------------------
   Five gestures now exist on this page and no two are the same:
     01 ticks scale up in sequence      (vertical growth)
     02 rail wipes down, rows stagger   (downward reveal)
     03 packets travel the wire         (horizontal travel)
     04 rows print, balance counts down (printing + depletion)
     05 cards pull into focus           (blur clearing)   <-- THIS

   A focus pull is the camera move for casing a target, which is exactly what
   this section is: six questions to put to any vendor before signing. It
   costs one filter on six elements, only while they arrive, and it is
   removed the moment they land — a permanent blur filter on a card would
   pin it to its own compositor layer for the life of the page.
   ============================================================================ */
/* the grid that carries the six. Also the observer's hook: the focus pull is
   a descendant rule, so .qhl-in has to land here and not on each card. */
.qhl-asks {
    margin-top: clamp(0.5rem, 2vw, 1rem);
}

.qhl-ask {
    opacity: 0;
    filter: blur(9px);
    transform: scale(0.975);
    transition: opacity 620ms var(--qm-ease), filter 620ms var(--qm-ease), transform 620ms var(--qm-ease);
    transition-delay: calc(var(--qhl-i, 0) * 90ms);
}

.qhl-in .qhl-ask {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

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

.qhl-ask__q {
    margin: 0 0 var(--qm-sp-3);
    font: 600 var(--qm-fs-h3) / 1.25 var(--qm-font-sans);
    letter-spacing: var(--qm-track-h3);
    color: var(--qm-text);
    text-wrap: pretty;
}

.qhl-ask__a {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

    .qhl-ask__a b {
        font-weight: 500;
        color: var(--qm-text);
    }

/* the honest note that closes the section */
.qhl-ask__own {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}


/* ============================================================================
   08 · SECTION 06 — FAQ   ·   gesture: THE READER'S OWN
   ----------------------------------------------------------------------------
   No entrance animation at all, deliberately. Five sections have moved by
   now and the page needs to stop performing before it asks for anything.
   The only motion here is the disclosure the reader triggers — the kit's own
   <details> behaviour, untouched.

   The visible answers are WORD FOR WORD the FAQPage JSON-LD in the head. If
   you edit one, edit the other; mismatched answers are a structured-data
   violation, not a style choice.
   ============================================================================ */
.qhl-faq {
    max-width: var(--qm-w-narrow);
}

.qhl-sources {
    max-width: var(--qm-w-narrow);
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-top: var(--qm-sp-6);
    border-top: 1px solid var(--qm-rule-faint);
    font-size: var(--qm-fs-xs);
    color: var(--qm-text-muted);
}

    .qhl-sources p {
        margin: 0 0 var(--qm-sp-3);
    }

    .qhl-sources p:last-child {
        margin-bottom: 0;
    }

    .qhl-sources a {
        color: var(--qm-text-secondary);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--qm-rule-strong);
    }

        .qhl-sources a:hover {
            text-decoration-color: var(--qm-azure);
        }


/* ============================================================================
   09 · SECTION 07 — THE CLOSE
   ----------------------------------------------------------------------------
   .qm-cta--boxed ships its own spectrum edge and glow. That is legal: LAW 1
   budgets ONE glow PER VIEWPORT, and by the time the reader is here the
   hero's glow is four screens behind them. It is the second and last of the
   page, and it belongs to the only thing being asked for.
   ============================================================================ */
.qhl-close__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qm-sp-2) var(--qm-sp-5);
    margin: 0;
    font: 500 var(--qm-fs-xs) / 1.6 var(--qm-font-mono);
    letter-spacing: 0.03em;
    color: var(--qm-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .qhl-ask {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}


/* ============================================================================
   10 · ENTRANCE
   The kit ships .qm-reveal / .qm-stagger as pure CSS animations that fire on
   load. This section is below the fold on most screens, so it waits for the
   viewport instead — same easing, same duration tokens, just gated.
   ============================================================================ */
.qhl-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--qm-t-slow) var(--qm-ease) var(--qhl-d, 0ms), transform var(--qm-t-slow) var(--qm-ease) var(--qhl-d, 0ms);
}

.qhl-in .qhl-rise,
.qhl-rise.qhl-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .qhl-rise {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .qhl-in .qhl-clock__tick,
    .qhl-clock__tick {
        animation: none;
        transform: scaleY(1);
        opacity: 1;
    }
}