@charset "UTF-8";
/* ############################################################################
   QLYNIC  ·  AlbertaClinic.css
   PUBLIC PAGE STYLESHEET   —   ~/public/css/AlbertaClinic.css
   ----------------------------------------------------------------------------
   PAGE ......... AlbertaClinic.aspx
                  "Built in Calgary, for the clinic you actually run"
   THEME ........ MERIDIAN v1  (per QlynicDesign/Marketing/Marketing-Kit.html)
   PREFIX ....... .qab-  classes,  --qab-  tokens.   qab = Qlynic ALBERTA.
                  Nothing unprefixed. Nothing collides with the master
                  (.qh- / .qf-), the dashboard shell (.qsh-), or the
                  homepage (.s2p- / .s7vs- / .s10pr- / .qpr2-).

   SECTION INDEX  (append new sections at the bottom, never in the middle)
     00   TOKENS ................... theme variables, page root
     01   PRIMITIVES ............... container, type, buttons, rules, reveal
     S01  HERO ..................... the Mountain Time instrument
     S02  DECODER .................. the AHCIP code console + claim flags

   REVEAL SYSTEM  v2 — FAIL-OPEN  (defined once here, reused by every later
   section AND every other public page we rebuild)
     data-qab-reveal="load"    → animates immediately after page load  (S01 only)
     data-qab-reveal           → animates when scrolled into view      (S02+)
     data-qab-reveal="draw"    → hairline draws instead of wiping
     style="--qab-rvd:120ms"   → per-element stagger delay
   Nothing is hidden until the paint guard proves JavaScript can un-hide it
   again — see the .qab-js gate in 01.8. Every failure path ends with the
   content visible, never blank.
   ############################################################################ */


/* ============================================================================
   00 · TOKENS
   Scoped to .qab rather than :root so the page can never leak into — or be
   clobbered by — default.master.css. Everything inherits from here.
   ============================================================================ */
.qab {
    /* ── Families ───────────────────────────────────────────────────────── */
    --qab-font-sans: "Geist", -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Plus Jakarta Sans", system-ui, Roboto, Arial, sans-serif;
    --qab-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    /* ── Type scale — fluid, tracking tightens as size grows ─────────────── */
    --qab-fs-hero: clamp(2.35rem, 1.30rem + 3.95vw, 4.15rem);
    --qab-fs-display: clamp(2.00rem, 1.45rem + 2.35vw, 3.20rem);
    --qab-fs-h2: clamp(1.55rem, 1.32rem + 1.05vw, 2.20rem);
    --qab-fs-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --qab-fs-lead: clamp(1.0625rem, 1.00rem + 0.32vw, 1.25rem);
    --qab-fs-body: 1.03125rem;
    --qab-fs-sm: 0.9063rem;
    --qab-fs-xs: 0.8125rem;
    --qab-fs-label: 0.6875rem;
    --qab-track-hero: -0.042em;
    --qab-track-display: -0.036em;
    --qab-track-h2: -0.022em;
    --qab-track-label: 0.16em;
    /* ── Space ──────────────────────────────────────────────────────────── */
    --qab-sp-1: 0.25rem;
    --qab-sp-2: 0.5rem;
    --qab-sp-3: 0.75rem;
    --qab-sp-4: 1rem;
    --qab-sp-5: 1.25rem;
    --qab-sp-6: 1.5rem;
    --qab-sp-7: 1.75rem;
    --qab-sp-8: 2rem;
    --qab-sp-9: 2.5rem;
    --qab-sp-10: 3rem;
    --qab-sp-12: 4rem;
    --qab-sp-14: 5rem;
    --qab-sp-16: 6rem;
    /* ── Geometry ───────────────────────────────────────────────────────── */
    --qab-r-sm: 8px;
    --qab-r-md: 12px;
    --qab-r-lg: 16px;
    --qab-r-xl: 22px;
    --qab-r-pill: 999px;
    --qab-w: 74rem;
    --qab-w-wide: 84rem;
    --qab-w-narrow: 46rem;
    --qab-gutter: clamp(1.25rem, 4vw, 2.5rem);
    /* ── Grounds ────────────────────────────────────────────────────────── */
    --qab-bg-0: #05070D;
    --qab-bg-1: #080B14;
    --qab-surface-1: #0C1220;
    --qab-surface-2: #111A2C;
    --qab-surface-3: #16203A;
    /* ── Ink ────────────────────────────────────────────────────────────── */
    --qab-text: #F0F4FB;
    --qab-text-secondary: #A9B4CB;
    --qab-text-muted: #6C7893;
    --qab-text-faint: #49546E;
    --qab-text-invert: #05070D;
    /* ── Edges — depth is light, never shadow ───────────────────────────── */
    --qab-rule: rgba(151, 173, 220, 0.14);
    --qab-rule-faint: rgba(151, 173, 220, 0.08);
    --qab-rule-strong: rgba(151, 173, 220, 0.26);
    --qab-edge-light: rgba(216, 230, 255, 0.09);
    /* ── The spectrum ───────────────────────────────────────────────────── */
    --qab-azure: #4D8DFF;
    --qab-azure-hover: #6FA3FF;
    --qab-violet: #8A7CFF;
    --qab-signal: #2BD9EC; /* cyan — LIVE THINGS ONLY */
    --qab-warn: #F2B94B;
    --qab-alert: #FF5C74;
    --qab-spectrum: linear-gradient(135deg, #4D8DFF 0%, #8A7CFF 100%);
    --qab-spectrum-wide: linear-gradient(100deg, #2BD9EC -12%, #4D8DFF 38%, #8A7CFF 88%);
    --qab-azure-tint: rgba(77, 141, 255, 0.12);
    --qab-signal-tint: rgba(43, 217, 236, 0.10);
    /* ── Lift & glow — one glow per viewport ────────────────────────────── */
    --qab-lift: 0 1px 0 var(--qab-edge-light) inset, 0 24px 60px -24px rgba(2, 4, 10, 0.9), 0 4px 18px -6px rgba(2, 4, 10, 0.7);
    --qab-glow: 0 0 0 1px rgba(77, 141, 255, 0.38), 0 10px 46px -10px rgba(77, 141, 255, 0.55);
    --qab-focus: 0 0 0 2px var(--qab-bg-0), 0 0 0 4px var(--qab-signal);
    /* ── Motion ─────────────────────────────────────────────────────────── */
    --qab-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --qab-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --qab-t-fast: 140ms;
    --qab-t-med: 260ms;
    --qab-t-slow: 720ms;
    /* Page root paint */
    position: relative;
    background: var(--qab-bg-0);
    color: var(--qab-text);
    font: 400 var(--qab-fs-body)/1.65 var(--qab-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

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

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

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


    /* ============================================================================
   01 · PRIMITIVES   (shared vocabulary — every section below uses these)
   ============================================================================ */

    /* ── 01.1  Layout ───────────────────────────────────────────────────────── */
    .qab .qab-container {
        width: 100%;
        max-width: var(--qab-w);
        margin-inline: auto;
        padding-inline: var(--qab-gutter);
    }

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

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

    /* ── 01.2  Atmosphere — absolutely positioned, never interactive ────────── */
    .qab .qab-tex {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    .qab .qab-tex--grid {
        background-image: linear-gradient(var(--qab-rule-faint) 1px, transparent 1px), linear-gradient(90deg, var(--qab-rule-faint) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(ellipse 92% 76% at 50% 28%, #000 28%, transparent 82%);
        mask-image: radial-gradient(ellipse 92% 76% at 50% 28%, #000 28%, transparent 82%);
    }

    .qab .qab-tex--glow {
        background: radial-gradient(38rem 22rem at 22% 6%, rgba(77, 141, 255, 0.17), transparent 68%), radial-gradient(32rem 20rem at 78% 26%, rgba(138, 124, 255, 0.12), transparent 70%);
    }

    /* ── 01.3  Type ─────────────────────────────────────────────────────────── */
    .qab .qab-hero-title {
        margin: 0;
        font: 600 var(--qab-fs-hero)/1.05 var(--qab-font-sans);
        letter-spacing: var(--qab-track-hero);
        text-wrap: balance;
        color: var(--qab-text);
    }

    .qab .qab-display {
        margin: 0;
        font: 600 var(--qab-fs-display)/1.08 var(--qab-font-sans);
        letter-spacing: var(--qab-track-display);
        text-wrap: balance;
    }

    .qab .qab-h2 {
        margin: 0;
        font: 600 var(--qab-fs-h2)/1.14 var(--qab-font-sans);
        letter-spacing: var(--qab-track-h2);
        text-wrap: balance;
    }

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

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

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

    /* The gradient word — one per page, hero only. */
    .qab .qab-em {
        background: var(--qab-spectrum-wide);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

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

    /* Eyebrow — wayfinding, so it never spends the accent budget. */
    .qab .qab-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--qab-sp-3);
        margin: 0;
        font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
        letter-spacing: var(--qab-track-label);
        text-transform: uppercase;
        color: var(--qab-text-muted);
    }

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

    /* ── 01.4  Buttons ──────────────────────────────────────────────────────── */
    .qab .qab-btn {
        -webkit-appearance: none;
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--qab-sp-2);
        padding: 0.82rem 1.5rem;
        border-radius: 14px;
        border: 1px solid transparent;
        font: 500 var(--qab-fs-sm)/1 var(--qab-font-sans);
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--qab-t-fast) var(--qab-ease), border-color var(--qab-t-fast) var(--qab-ease), color var(--qab-t-fast) var(--qab-ease), box-shadow var(--qab-t-med) var(--qab-ease), transform var(--qab-t-fast) var(--qab-ease);
    }

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

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

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

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

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

    .qab .qab-btn__ico {
        width: 16px;
        height: 16px;
        flex: none;
        transition: transform var(--qab-t-fast) var(--qab-ease);
    }

    .qab .qab-btn:hover .qab-btn__ico {
        transform: translateX(3px);
    }

    /* ── 01.5  Status lamp — cyan means LIVE, nothing else ──────────────────── */
    .qab .qab-status {
        display: inline-flex;
        align-items: center;
        gap: var(--qab-sp-2);
        font: 500 var(--qab-fs-xs)/1 var(--qab-font-mono);
        letter-spacing: 0.04em;
        color: var(--qab-text-secondary);
    }

        .qab .qab-status::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--qab-signal);
            flex: none;
            animation: qab-pulse 2.6s var(--qab-ease-io) infinite;
        }

    /* ── 01.6  The telemetry rule — how this site punctuates ────────────────── */
    .qab .qab-mrule {
        display: flex;
        align-items: center;
        gap: var(--qab-sp-4);
        width: 100%;
    }

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

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

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

    .qab .qab-mrule__node {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--qab-signal);
        flex: none;
        animation: qab-pulse 2.6s var(--qab-ease-io) infinite;
    }

    /* ── 01.7  Accessibility ────────────────────────────────────────────────── */
    .qab .qab-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

/* ── 01.8  THE REVEAL SYSTEM  ("the plot") ──────────────────────────────────
   Content is plotted onto the page the way an instrument lays down a trace:
   it wipes in from the leading edge while rising a few pixels. This is the
   page-wide appearing animation — S01 fires on load, S02+ fire on scroll.
   Both paths land on the same .is-in class, so the motion is identical.
   ------------------------------------------------------------------------ */
.qab-js [data-qab-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    clip-path: inset(0 100% 0 0);
    will-change: opacity, transform, clip-path;
    transition: opacity var(--qab-t-slow) var(--qab-ease) var(--qab-rvd, 0ms), transform var(--qab-t-slow) var(--qab-ease) var(--qab-rvd, 0ms), clip-path calc(var(--qab-t-slow) + 160ms) var(--qab-ease) var(--qab-rvd, 0ms);
}

    .qab-js [data-qab-reveal].is-in {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
    }
    /* Once a reveal has finished, drop the hint so long pages stay cheap. */
    .qab-js [data-qab-reveal].is-done {
        will-change: auto;
        clip-path: none;
    }

/* Hairlines draw rather than wipe. */
.qab-js [data-qab-reveal="draw"],
.qab-js [data-qab-reveal="load-draw"] {
    clip-path: none;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--qab-t-slow) var(--qab-ease) var(--qab-rvd, 0ms);
}

    .qab-js [data-qab-reveal="draw"].is-in,
    .qab-js [data-qab-reveal="load-draw"].is-in {
        transform: scaleX(1);
    }

@keyframes qab-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);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qab [data-qab-reveal],
    .qab [data-qab-reveal].is-in {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }

    .qab *,
    .qab *::before,
    .qab *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
}


/* ############################################################################
   SECTION 01 · HERO — "The Mountain Time instrument"
   ----------------------------------------------------------------------------
   Left  : the claim, in words.
   Right : the same claim, as an instrument — a live Alberta clinic day that
           knows what time it actually is in Edmonton/Calgary, marks where the
           day currently sits, and shows a claim leaving the encounter.
   The page's single glow lives here and nowhere else.
   ############################################################################ */
.qab .qab-s1 {
    position: relative;
    overflow: clip;
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
    border-block-end: 1px solid var(--qab-rule-faint);
}

.qab .qab-s1__inner {
    position: relative;
    z-index: 1;
}

.qab .qab-s1__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: center;
}

/* ── S01.1  Copy column ─────────────────────────────────────────────────── */
.qab .qab-s1__copy {
    display: grid;
    gap: var(--qab-sp-6);
    align-content: start;
    max-width: 34rem;
}

/* Coordinates eyebrow — the page's opening fact. */
.qab .qab-s1__coords {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--qab-sp-2) var(--qab-sp-3);
    margin: 0;
    font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    color: var(--qab-text-muted);
}

.qab .qab-s1__coords-mark {
    width: 1.25rem;
    height: 1px;
    background: var(--qab-azure);
    flex: none;
}

.qab .qab-s1__coords-geo {
    color: var(--qab-text-faint);
}

.qab .qab-s1__title {
    max-width: 15em;
}

.qab .qab-s1__lead {
    max-width: 33em;
}

.qab .qab-s1__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qab-sp-3);
    margin-block-start: var(--qab-sp-1);
}

/* Proof strip under the buttons. */
.qab .qab-s1__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qab-sp-3) var(--qab-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 500 var(--qab-fs-xs)/1.4 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-muted);
}

    .qab .qab-s1__meta li {
        display: inline-flex;
        align-items: center;
        gap: var(--qab-sp-2);
    }

        .qab .qab-s1__meta li::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--qab-azure);
            opacity: 0.75;
            flex: none;
        }

/* ── S01.2  The instrument ──────────────────────────────────────────────── */
.qab .qab-s1__panel {
    position: relative;
    border-radius: var(--qab-r-xl);
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--qab-surface-2), var(--qab-surface-1)) padding-box, linear-gradient(150deg, rgba(77, 141, 255, 0.55), rgba(138, 124, 255, 0.30) 55%, var(--qab-rule) 100%) border-box;
    box-shadow: var(--qab-lift);
    overflow: hidden;
}

.qab .qab-s1__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qab-sp-4);
    padding: var(--qab-sp-4) var(--qab-sp-5);
    border-block-end: 1px solid var(--qab-rule-faint);
    background: rgba(5, 7, 13, 0.35);
}

.qab .qab-s1__panel-label {
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    color: var(--qab-text-muted);
}

/* Live Mountain Time readout — the reason the section exists. */
.qab .qab-s1__clock {
    display: inline-flex;
    align-items: baseline;
    gap: var(--qab-sp-2);
    font-family: var(--qab-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qab .qab-s1__clock-time {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--qab-text);
}

.qab .qab-s1__clock-zone {
    font-size: var(--qab-fs-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--qab-signal);
    font-style: normal;
}

/* The day rail. */
.qab .qab-s1__day {
    position: relative;
    margin: 0;
    padding: var(--qab-sp-6) var(--qab-sp-5) var(--qab-sp-5);
    list-style: none;
}
    /* The spine the steps hang off. */
    .qab .qab-s1__day::before {
        content: "";
        position: absolute;
        inset-block: calc(var(--qab-sp-6) + 11px) calc(var(--qab-sp-5) + 22px);
        inset-inline-start: calc(var(--qab-sp-5) + 3.9rem);
        width: 1px;
        background: repeating-linear-gradient(180deg, var(--qab-rule-strong) 0 1px, transparent 1px 7px);
    }

.qab .qab-s1__step {
    display: grid;
    grid-template-columns: 3.4rem 1rem minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--qab-sp-3);
    padding-block: 0.62rem;
}

.qab .qab-s1__step-time {
    font: 500 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--qab-text-faint);
    text-align: end;
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s1__step-node {
    position: relative;
    width: 9px;
    height: 9px;
    margin-top: 0.42rem;
    margin-inline-start: 3px;
    border-radius: 50%;
    background: var(--qab-surface-3);
    border: 1px solid var(--qab-rule-strong);
    flex: none;
    transition: background var(--qab-t-med) var(--qab-ease), border-color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s1__step-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qab .qab-s1__step-title {
    font: 500 var(--qab-fs-sm)/1.45 var(--qab-font-sans);
    letter-spacing: -0.006em;
    color: var(--qab-text-secondary);
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s1__step-note {
    font-size: var(--qab-fs-xs);
    line-height: 1.5;
    color: var(--qab-text-faint);
    text-wrap: pretty;
}

/* Already happened today. */
.qab .qab-s1__step.is-done .qab-s1__step-node {
    background: var(--qab-azure);
    border-color: var(--qab-azure);
}

/* Where the clinic day actually is, right now. Cyan = live. */
.qab .qab-s1__step.is-now .qab-s1__step-time {
    color: var(--qab-signal);
}

.qab .qab-s1__step.is-now .qab-s1__step-title {
    color: var(--qab-text);
    font-weight: 600;
}

.qab .qab-s1__step.is-now .qab-s1__step-node {
    background: var(--qab-signal);
    border-color: var(--qab-signal);
    animation: qab-pulse 2.6s var(--qab-ease-io) infinite;
}

.qab .qab-s1__panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qab-sp-4);
    padding: var(--qab-sp-4) var(--qab-sp-5);
    border-block-start: 1px solid var(--qab-rule-faint);
    background: rgba(5, 7, 13, 0.35);
    font: 400 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    color: var(--qab-text-faint);
    letter-spacing: 0.02em;
}

    .qab .qab-s1__panel-foot b {
        font-weight: 500;
        color: var(--qab-text-secondary);
    }

/* ── S01.3  Closing rule ────────────────────────────────────────────────── */
.qab .qab-s1__rule {
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
}


/* ============================================================================
   S01 · RESPONSIVE
   Three real breakpoints, not guesses:
     ≤ 68rem (1088px) — instrument drops under the copy, both go full width
     ≤ 40rem (640px)  — phone: tighter rhythm, full-bleed buttons, compact rail
     ≤ 22.5rem (360px)— small phone: the time column narrows, nothing wraps
   ============================================================================ */
@media (max-width: 68rem) {
    .qab .qab-s1__grid {
        grid-template-columns: 1fr;
        gap: clamp(2.25rem, 6vw, 3rem);
        align-items: start;
    }

    .qab .qab-s1__copy {
        max-width: 40rem;
    }

    .qab .qab-s1__title {
        max-width: 18em;
    }
}

@media (max-width: 40rem) {
    .qab .qab-s1 {
        padding-block: clamp(2.5rem, 9vw, 3.5rem) clamp(2.25rem, 8vw, 3rem);
    }

    .qab .qab-s1__copy {
        gap: var(--qab-sp-5);
    }

    .qab .qab-s1__actions {
        gap: var(--qab-sp-3);
    }

        .qab .qab-s1__actions .qab-btn {
            flex: 1 1 100%;
        }

    .qab .qab-s1__meta {
        gap: var(--qab-sp-2) var(--qab-sp-4);
    }

    .qab .qab-s1__panel-head,
    .qab .qab-s1__panel-foot {
        padding-inline: var(--qab-sp-4);
    }

    .qab .qab-s1__panel-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--qab-sp-2);
    }

    .qab .qab-s1__day {
        padding: var(--qab-sp-5) var(--qab-sp-4) var(--qab-sp-4);
    }

        .qab .qab-s1__day::before {
            inset-inline-start: calc(var(--qab-sp-4) + 3.15rem);
        }

    .qab .qab-s1__step {
        grid-template-columns: 2.75rem 1rem minmax(0, 1fr);
        gap: 0 var(--qab-sp-2);
    }
}

@media (max-width: 22.5rem) {
    .qab .qab-s1__day::before {
        inset-inline-start: calc(var(--qab-sp-4) + 2.75rem);
    }

    .qab .qab-s1__step {
        grid-template-columns: 2.35rem 0.9rem minmax(0, 1fr);
    }

    .qab .qab-s1__clock-time {
        font-size: 0.95rem;
    }
}

/* Coarse pointers get real hit targets. */
@media (pointer: coarse) {
    .qab .qab-btn {
        padding-block: 0.9rem;
    }
}

/* ############################################################################
   END OF SECTION 01
   ############################################################################ */


/* ############################################################################
   SECTION 02 · THE DECODER — "A rejection should arrive as a sentence"
   ----------------------------------------------------------------------------
   Append to ~/public/css/AlbertaClinic.css, directly under SECTION 01.
   Uses only tokens and primitives already declared in Section 01 — nothing
   global is added or redefined here.

   MATERIALS — deliberately none of them reused from Section 01, so the page
   never repeats a composition:
     · the console  — outlined board with a spectrum hairline along its top
     · the readout  — SUNKEN ground, the one recessed surface on the page
     · the flags    — bare, rule-topped, no box at all
   Section 01 spends its boldness on the live clock; Section 02 spends its on
   the decode. Everything else here stays quiet on purpose.

   ACCENT BUDGET (Law 2 — three azure appearances on a composed screen)
     1. the console's top rule        2. the active chip
     Cyan is reserved for live things, and it appears for exactly as long as a
     code is resolving — which is the one genuinely live moment in the section.
   ############################################################################ */

.qab .qab-s2 {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    border-block-end: 1px solid var(--qab-rule-faint);
}

.qab .qab-s2__inner {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   S02.1 · HEAD — split, so it doesn't echo Section 01's stacked column
   ============================================================================ */
.qab .qab-s2__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--qab-sp-4) clamp(2rem, 5vw, 4rem);
    align-items: end;
    margin-block-end: clamp(2.25rem, 5vw, 3.5rem);
}

.qab .qab-s2__eyebrow {
    grid-column: 1 / -1;
}

.qab .qab-s2__title {
    max-width: 13em;
}

.qab .qab-s2__sub {
    max-width: 40em;
    padding-block-end: 0.2rem;
}


/* ============================================================================
   S02.2 · THE CONSOLE
   ============================================================================ */
.qab .qab-s2__console {
    position: relative;
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-xl);
    background: var(--qab-surface-1);
    box-shadow: inset 0 1px 0 var(--qab-edge-light);
    overflow: hidden;
}

/* Accent 1 of 2 — the spectrum hairline along the top edge. */
.qab .qab-s2__console-edge {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: var(--qab-spectrum-wide);
    opacity: 0.85;
}

.qab .qab-s2__console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qab-sp-4);
    padding: var(--qab-sp-4) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    border-block-end: 1px solid var(--qab-rule-faint);
}

.qab .qab-s2__console-label,
.qab .qab-s2__console-count {
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
}

.qab .qab-s2__console-label {
    color: var(--qab-text-secondary);
}

.qab .qab-s2__console-count {
    color: var(--qab-text-faint);
    text-align: end;
}

.qab .qab-s2__count-n {
    font-weight: 500;
    color: var(--qab-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── The board ──────────────────────────────────────────────────────────── */
.qab .qab-s2__wall {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qab-sp-2);
    padding: clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    padding-block-end: 0;
}

.qab .qab-s2__chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.9rem;
    padding: 0.46rem 0.75rem;
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-sm);
    background: transparent;
    color: var(--qab-text-muted);
    font: 500 var(--qab-fs-xs)/1 var(--qab-font-mono);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--qab-t-fast) var(--qab-ease), border-color var(--qab-t-fast) var(--qab-ease), background var(--qab-t-fast) var(--qab-ease);
}

    .qab .qab-s2__chip:hover {
        color: var(--qab-text);
        border-color: var(--qab-rule-strong);
        background: rgba(151, 173, 220, 0.06);
    }
    /* Accent 2 of 2 — the selected code. */
    .qab .qab-s2__chip.is-active {
        color: var(--qab-text);
        border-color: var(--qab-azure);
        background: var(--qab-azure-tint);
    }

/* ── The display — the page's only sunken surface ───────────────────────── */
.qab .qab-s2__readout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--qab-sp-5), 3vw, var(--qab-sp-8));
    margin: clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    padding: clamp(var(--qab-sp-5), 3vw, var(--qab-sp-7));
    border: 1px solid var(--qab-rule-faint);
    border-radius: var(--qab-r-lg);
    background: var(--qab-bg-0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42);
}

.qab .qab-s2__readout-code {
    min-width: 0;
}

.qab .qab-s2__code {
    display: block;
    font: 500 clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem)/0.95 var(--qab-font-mono);
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--qab-text);
    white-space: nowrap;
    transition: color var(--qab-t-med) var(--qab-ease);
}
    /* The one live moment in the section — cyan, only while it resolves. */
    .qab .qab-s2__code.is-decoding {
        color: var(--qab-signal);
    }

/* Fixed floor so swapping a short sentence for a long one never shifts the page. */
.qab .qab-s2__readout-body {
    display: grid;
    align-items: start;
}

/* Every slip occupies the same cell — the box takes the height of the longest
   sentence, so switching codes can never shift the page by a pixel. */
.qab .qab-s2__slip {
    grid-area: 1 / 1;
    display: grid;
    gap: var(--qab-sp-3);
    align-content: start;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 6px, 0);
    transition: opacity var(--qab-t-med) var(--qab-ease), transform var(--qab-t-med) var(--qab-ease), visibility 0s linear var(--qab-t-med);
}

    .qab .qab-s2__slip.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 90ms, 90ms, 0s;
    }

.qab .qab-s2__family {
    justify-self: start;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-pill);
    font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--qab-text-muted);
    white-space: nowrap;
}

.qab .qab-s2__sentence {
    margin: 0;
    font-size: var(--qab-fs-lead);
    line-height: 1.5;
    letter-spacing: -0.008em;
    color: var(--qab-text);
    text-wrap: pretty;
    max-width: 34em;
}

.qab .qab-s2__console-foot {
    padding: 0 clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6)) clamp(var(--qab-sp-5), 3vw, var(--qab-sp-6));
    max-width: 62em;
    font-size: var(--qab-fs-sm);
    line-height: 1.6;
    color: var(--qab-text-muted);
    text-wrap: pretty;
}


/* ============================================================================
   S02.3 · THE THREE FLAGS — bare and rule-topped, no box
   ============================================================================ */
.qab .qab-s2__flags-head {
    display: grid;
    gap: var(--qab-sp-3);
    max-width: 44rem;
    margin-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.5rem);
}

.qab .qab-s2__flags-title {
    margin: 0;
    font: 600 var(--qab-fs-h3)/1.25 var(--qab-font-sans);
    letter-spacing: -0.014em;
    color: var(--qab-text);
}

.qab .qab-s2__flags-sub {
    max-width: 42em;
}

.qab .qab-s2__flags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qab .qab-s2__flag {
    display: grid;
    gap: var(--qab-sp-3);
    align-content: start;
    padding-block-start: var(--qab-sp-5);
    border-block-start: 1px solid var(--qab-rule-strong);
}

.qab .qab-s2__flag-code {
    justify-self: start;
    padding: 0.26rem 0.6rem;
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-sm);
    background: var(--qab-surface-1);
    font: 500 var(--qab-fs-xs)/1 var(--qab-font-mono);
    letter-spacing: 0.08em;
    color: var(--qab-text-secondary);
}

.qab .qab-s2__flag-title {
    margin: 0;
    font: 600 var(--qab-fs-body)/1.3 var(--qab-font-sans);
    letter-spacing: -0.012em;
    color: var(--qab-text);
}

.qab .qab-s2__flag-text {
    margin: 0;
    font-size: var(--qab-fs-sm);
    line-height: 1.6;
    color: var(--qab-text-secondary);
    text-wrap: pretty;
}


/* ============================================================================
   S02 · RESPONSIVE — same breakpoints as Section 01
   ============================================================================ */
@media (max-width: 68rem) {
    .qab .qab-s2__head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--qab-sp-4);
    }

    .qab .qab-s2__title {
        max-width: 18em;
    }

    .qab .qab-s2__flags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 56rem) {
    /* The numeral moves above the sentence — a wide code column starves the text. */
    .qab .qab-s2__readout {
        grid-template-columns: 1fr;
        gap: var(--qab-sp-4);
    }

    .qab .qab-s2__flags {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .qab .qab-s2__flag {
        padding-block: var(--qab-sp-5);
    }

        .qab .qab-s2__flag + .qab-s2__flag {
            border-block-start-color: var(--qab-rule);
        }
}

@media (max-width: 40rem) {
    .qab .qab-s2 {
        padding-block: clamp(2.75rem, 9vw, 3.75rem);
    }

    .qab .qab-s2__console-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--qab-sp-1);
    }

    .qab .qab-s2__console-count {
        text-align: start;
    }

    /* The board scrolls sideways instead of stacking into five ragged rows. */
    .qab .qab-s2__wall {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding-inline: var(--qab-sp-4);
        padding-block-end: var(--qab-sp-1);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent 100%);
    }

        .qab .qab-s2__wall::-webkit-scrollbar {
            display: none;
        }

    .qab .qab-s2__chip {
        flex: none;
        scroll-snap-align: start;
    }

    .qab .qab-s2__sentence {
        font-size: var(--qab-fs-body);
    }
}

@media (max-width: 22.5rem) {
    .qab .qab-s2__chip {
        min-width: 3.4rem;
        padding-inline: 0.6rem;
    }
}

/* Reduced motion: the swap is instant and the numeral never scrambles. */
@media (prefers-reduced-motion: reduce) {
    .qab .qab-s2__slip {
        transition: none;
    }

    .qab .qab-s2__code {
        transition: none;
    }
}

/* ############################################################################
   END OF SECTION 02 — append SECTION 03 below this line.
   ############################################################################ */










































/* ############################################################################
   SECTION 03 · THE WIRE — "Nobody is standing between you and the province"
   ----------------------------------------------------------------------------
   Append to ~/public/css/AlbertaClinic.css, directly under SECTION 02.
   Uses only tokens and primitives already declared in Section 01.

   MATERIALS — a third distinct set, so the page still hasn't repeated itself:
     · the wire panel — a wide schematic board, edge-lit, no inner boxes at all
     · the traces     — hairline rails with node dots; one live, one inert
     · the log        — a terminal strip, left-ruled rows, monospace throughout

   THE TIMELINE  (one 5s cycle, shared by everything that moves)
     0.00s   packet leaves the first node
     3.20s   packet arrives at Alberta Health          (64% of the cycle)
     3.20s   → 5.00s  the wire rests, then repeats
     node i lights at (i / 3) × 3.20s  — delays 0 / 1.067 / 2.133 / 3.200s
   Every moving part is a transform or an opacity, driven by animation-delay off
   that single clock. There is NO JavaScript in this section, so there is nothing
   here that can fail; under prefers-reduced-motion the packet is removed and the
   trace parks with every node lit.

   ACCENT BUDGET (Law 2)
     1. the live rail's spectrum gradient    2. the lit node state
     Cyan is the packet and the "on the wire" lamp — a thing genuinely in flight.
     Amber is the toll node and the failed log row — semantic, not decorative.
   ############################################################################ */

.qab .qab-s3 {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    border-block-end: 1px solid var(--qab-rule-faint);
}

.qab .qab-s3__inner {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   S03.1 · HEAD — centred (S01 stacks left, S02 splits, S03 centres)
   ============================================================================ */
.qab .qab-s3__head {
    display: grid;
    justify-items: center;
    gap: var(--qab-sp-4);
    max-width: 48rem;
    margin-inline: auto;
    margin-block-end: clamp(2.5rem, 5vw, 3.75rem);
    text-align: center;
}

.qab .qab-s3__title {
    max-width: 16em;
}

.qab .qab-s3__sub {
    max-width: 44em;
}


/* ============================================================================
   S03.2 · THE WIRE PANEL
   ============================================================================ */
.qab .qab-s3__wire {
    position: relative;
    padding: clamp(var(--qab-sp-5), 3vw, var(--qab-sp-8));
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-xl);
    background: radial-gradient(60rem 20rem at 50% -10%, rgba(77, 141, 255, 0.07), transparent 70%), var(--qab-surface-1);
    box-shadow: inset 0 1px 0 var(--qab-edge-light);
}

.qab .qab-s3__wire-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--qab-sp-2) var(--qab-sp-4);
    margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

.qab .qab-s3__wire-label {
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    color: var(--qab-text-secondary);
}

.qab .qab-s3__wire-head--ghost .qab-s3__wire-label {
    color: var(--qab-text-faint);
}

.qab .qab-s3__wire-note {
    font: 400 var(--qab-fs-xs)/1.4 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-faint);
}

/* ── The trace ──────────────────────────────────────────────────────────── */
.qab .qab-s3__trace {
    position: relative;
}

/* The rail spans dot-centre to dot-centre. With N equal columns those sit at
   50/N % and 100 − 50/N %, hence the per-trace inset below. */
.qab .qab-s3__rail {
    position: absolute;
    inset-block-start: 5px;
    height: 1px;
    pointer-events: none;
}

.qab .qab-s3__trace--live .qab-s3__rail {
    inset-inline: 12.5%; /* 4 nodes */
    background: linear-gradient(90deg, rgba(77, 141, 255, 0.20), var(--qab-azure) 22%, var(--qab-violet) 78%, rgba(138, 124, 255, 0.20));
}

.qab .qab-s3__trace--ghost .qab-s3__rail {
    inset-inline: 10%; /* 5 nodes */
    background: var(--qab-rule);
}

/* The packet. The runner is exactly the rail's width, so translateX(100%)
   walks its leading edge from one end to the other — transform only. */
.qab .qab-s3__runner {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 100%;
    animation: qab-s3-run-x 5s var(--qab-ease-io) infinite;
}

.qab .qab-s3__packet {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--qab-signal);
    box-shadow: 0 0 0 3px rgba(43, 217, 236, 0.18), 0 0 16px 2px rgba(43, 217, 236, 0.55);
}
    /* The trail — a short comet tail behind the head of the packet. */
    .qab .qab-s3__packet::before {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 5px;
        width: 60px;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(270deg, var(--qab-signal), transparent);
        opacity: 0.75;
    }

/* ── The nodes ──────────────────────────────────────────────────────────── */
.qab .qab-s3__nodes {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--qab-sp-4);
}

.qab .qab-s3__trace--live .qab-s3__nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qab .qab-s3__trace--ghost .qab-s3__nodes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.qab .qab-s3__node {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--qab-sp-3);
    text-align: center;
    padding-inline: var(--qab-sp-1);
}

.qab .qab-s3__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--qab-surface-3);
    border: 1px solid var(--qab-rule-strong);
    box-shadow: 0 0 0 4px var(--qab-surface-1); /* punches the rail behind it */
    transition: background var(--qab-t-med) var(--qab-ease), border-color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s3__node-name {
    font: 500 var(--qab-fs-sm)/1.35 var(--qab-font-sans);
    letter-spacing: -0.008em;
    color: var(--qab-text-secondary);
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s3__node-sub {
    font-size: var(--qab-fs-xs);
    line-height: 1.5;
    color: var(--qab-text-faint);
    text-wrap: pretty;
    max-width: 22ch;
}

/* The live trace lights in sequence, off the one shared clock. */
.qab .qab-s3__trace--live .qab-s3__node .qab-s3__dot {
    animation: qab-s3-hit-dot 5s var(--qab-ease-io) infinite;
}

.qab .qab-s3__trace--live .qab-s3__node .qab-s3__node-name {
    animation: qab-s3-hit-txt 5s var(--qab-ease-io) infinite;
}

.qab .qab-s3__trace--live .qab-s3__node:nth-child(1) .qab-s3__dot,
.qab .qab-s3__trace--live .qab-s3__node:nth-child(1) .qab-s3__node-name {
    animation-delay: 0s;
}

.qab .qab-s3__trace--live .qab-s3__node:nth-child(2) .qab-s3__dot,
.qab .qab-s3__trace--live .qab-s3__node:nth-child(2) .qab-s3__node-name {
    animation-delay: 1.067s;
}

.qab .qab-s3__trace--live .qab-s3__node:nth-child(3) .qab-s3__dot,
.qab .qab-s3__trace--live .qab-s3__node:nth-child(3) .qab-s3__node-name {
    animation-delay: 2.133s;
}

.qab .qab-s3__trace--live .qab-s3__node:nth-child(4) .qab-s3__dot,
.qab .qab-s3__trace--live .qab-s3__node:nth-child(4) .qab-s3__node-name {
    animation-delay: 3.2s;
}

/* The ghost trace is inert by design — it is the thing you are leaving. */
.qab .qab-s3__trace--ghost .qab-s3__node-name {
    color: var(--qab-text-muted);
}

.qab .qab-s3__trace--ghost .qab-s3__dot {
    box-shadow: 0 0 0 4px var(--qab-surface-1);
    opacity: 0.7;
}

.qab .qab-s3__node--toll .qab-s3__dot {
    background: var(--qab-warn);
    border-color: var(--qab-warn);
    opacity: 1;
    transform: rotate(45deg);
    border-radius: 2px; /* a toll gate, not a station */
}

.qab .qab-s3__node--toll .qab-s3__node-name {
    color: var(--qab-warn);
}

.qab .qab-s3__node--toll .qab-s3__node-sub {
    color: var(--qab-text-muted);
}

.qab .qab-s3__aside {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    text-align: center;
    font: 400 var(--qab-fs-xs)/1.6 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-faint);
}

.qab .qab-s3__split {
    border: 0;
    height: 1px;
    background: var(--qab-rule-faint);
    margin-block: clamp(2rem, 5vw, 3rem);
}


/* ============================================================================
   S03.3 · THE OUTAGE
   ============================================================================ */
.qab .qab-s3__dark {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.qab .qab-s3__dark-copy {
    display: grid;
    gap: var(--qab-sp-4);
    align-content: start;
}

.qab .qab-s3__dark-title {
    margin: 0;
    font: 600 var(--qab-fs-h3)/1.25 var(--qab-font-sans);
    letter-spacing: -0.014em;
    color: var(--qab-text);
}

.qab .qab-s3__dark-text {
    max-width: 40em;
    font-size: var(--qab-fs-sm);
    line-height: 1.65;
}

.qab .qab-s3__dark-list {
    display: grid;
    gap: var(--qab-sp-2);
    margin: var(--qab-sp-1) 0 0;
    padding: 0;
    list-style: none;
    font: 400 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-muted);
}

    .qab .qab-s3__dark-list li {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: var(--qab-sp-3);
        align-items: start;
    }

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

/* ── The log — a terminal strip, not another panel ──────────────────────── */
.qab .qab-s3__log {
    border: 1px solid var(--qab-rule-faint);
    border-radius: var(--qab-r-lg);
    background: var(--qab-bg-0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.qab .qab-s3__log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qab-sp-4);
    padding: var(--qab-sp-3) var(--qab-sp-5);
    border-block-end: 1px solid var(--qab-rule-faint);
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
}

.qab .qab-s3__log-title {
    color: var(--qab-text-secondary);
}

.qab .qab-s3__log-env {
    color: var(--qab-text-faint);
}

.qab .qab-s3__log-rows {
    margin: 0;
    padding: var(--qab-sp-3) 0;
    list-style: none;
}

.qab .qab-s3__log-row {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, auto) minmax(0, 1fr);
    gap: var(--qab-sp-3);
    align-items: baseline;
    padding: 0.45rem var(--qab-sp-5) 0.45rem calc(var(--qab-sp-5) - 2px);
    border-inline-start: 2px solid transparent;
    font: 400 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    letter-spacing: 0.01em;
}

.qab .qab-s3__log-time {
    color: var(--qab-text-faint);
    font-variant-numeric: tabular-nums;
}

.qab .qab-s3__log-evt {
    color: var(--qab-text-secondary);
    white-space: nowrap;
}

.qab .qab-s3__log-msg {
    color: var(--qab-text-muted);
    min-width: 0;
}

/* warn tone at 10% — kept literal because Section 03 declares no new tokens. */
.qab .qab-s3__log-row.is-fail {
    border-inline-start-color: var(--qab-warn);
    background: rgba(242, 185, 75, 0.10);
}

    .qab .qab-s3__log-row.is-fail .qab-s3__log-evt,
    .qab .qab-s3__log-row.is-fail .qab-s3__log-msg {
        color: var(--qab-warn);
    }

.qab .qab-s3__log-row.is-heal {
    border-inline-start-color: var(--qab-signal);
    background: var(--qab-signal-tint);
}

    .qab .qab-s3__log-row.is-heal .qab-s3__log-evt {
        color: var(--qab-signal);
    }

    .qab .qab-s3__log-row.is-heal .qab-s3__log-msg {
        color: var(--qab-text-secondary);
    }

.qab .qab-s3__log-foot {
    display: grid;
    gap: var(--qab-sp-2);
    margin: 0;
    padding: var(--qab-sp-4) var(--qab-sp-5) var(--qab-sp-5);
    border-block-start: 1px solid var(--qab-rule-faint);
}

.qab .qab-s3__log-quote {
    font: 400 var(--qab-fs-sm)/1.6 var(--qab-font-sans);
    color: var(--qab-text);
    text-wrap: pretty;
}

.qab .qab-s3__log-attr {
    font: 400 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    color: var(--qab-text-faint);
}

.qab .qab-s3__rule {
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
}


/* ============================================================================
   S03 · THE CLOCK — every moving part in this section runs off these
   ============================================================================ */
@keyframes qab-s3-run-x {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    64% {
        transform: translate3d(100%, 0, 0);
        opacity: 1;
    }

    71% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}

@keyframes qab-s3-hit-dot {
    0% {
        background: var(--qab-surface-3);
        border-color: var(--qab-rule-strong);
    }

    3% {
        background: var(--qab-azure);
        border-color: var(--qab-azure);
    }

    24% {
        background: var(--qab-azure);
        border-color: var(--qab-azure);
    }

    48% {
        background: var(--qab-surface-3);
        border-color: var(--qab-rule-strong);
    }

    100% {
        background: var(--qab-surface-3);
        border-color: var(--qab-rule-strong);
    }
}

@keyframes qab-s3-hit-txt {
    0% {
        color: var(--qab-text-secondary);
    }

    3% {
        color: var(--qab-text);
    }

    24% {
        color: var(--qab-text);
    }

    48% {
        color: var(--qab-text-secondary);
    }

    100% {
        color: var(--qab-text-secondary);
    }
}


/* ============================================================================
   S03 · RESPONSIVE
     ≤ 68rem — the outage row stacks
     ≤ 48rem — both traces rotate to vertical rails; the packet is retired and
               the sequence is carried by the node lights alone
     ≤ 40rem — phone rhythm
   ============================================================================ */
@media (max-width: 68rem) {
    .qab .qab-s3__dark {
        grid-template-columns: 1fr;
    }

    .qab .qab-s3__node-sub {
        max-width: 26ch;
    }
}

@media (max-width: 48rem) {
    /* One rail per node, drawn from the node above — reliable at any row height,
       unlike a single spanning rail over variable content. */
    .qab .qab-s3__rail,
    .qab .qab-s3__runner {
        display: none;
    }

    .qab .qab-s3__trace--live .qab-s3__nodes,
    .qab .qab-s3__trace--ghost .qab-s3__nodes {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .qab .qab-s3__node {
        position: relative;
        grid-template-columns: 11px minmax(0, 1fr);
        justify-items: start;
        align-items: start;
        text-align: start;
        gap: 2px var(--qab-sp-4);
        padding-inline: 0;
        padding-block: 0 var(--qab-sp-5);
    }

        .qab .qab-s3__node:last-child {
            padding-block-end: 0;
        }

    .qab .qab-s3__dot {
        grid-row: 1 / 3;
        margin-top: 5px;
        box-shadow: none;
    }

    .qab .qab-s3__node-name {
        grid-column: 2;
    }

    .qab .qab-s3__node-sub {
        grid-column: 2;
        max-width: none;
    }

    /* the connector, drawn downward from each dot except the last */
    .qab .qab-s3__node:not(:last-child)::before {
        content: "";
        position: absolute;
        inset-inline-start: 5px;
        inset-block: 21px 4px;
        width: 1px;
        background: var(--qab-rule);
    }

    .qab .qab-s3__trace--live .qab-s3__node:not(:last-child)::before {
        background: linear-gradient(180deg, var(--qab-azure), rgba(138, 124, 255, 0.35));
        opacity: 0.55;
    }

    .qab .qab-s3__node--toll .qab-s3__dot {
        margin-top: 6px;
    }

    .qab .qab-s3__aside {
        text-align: start;
    }
}

@media (max-width: 40rem) {
    .qab .qab-s3 {
        padding-block: clamp(2.75rem, 9vw, 3.75rem);
    }

    .qab .qab-s3__head {
        text-align: start;
        justify-items: start;
    }

    .qab .qab-s3__title {
        max-width: 18em;
    }

    .qab .qab-s3__wire-head {
        margin-block-end: var(--qab-sp-5);
    }

    .qab .qab-s3__log-head,
    .qab .qab-s3__log-foot {
        padding-inline: var(--qab-sp-4);
    }

    .qab .qab-s3__log-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding-inline: var(--qab-sp-4) var(--qab-sp-4);
        padding-block: var(--qab-sp-3);
    }

    .qab .qab-s3__log-evt {
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 22.5rem) {
    .qab .qab-s3__node {
        gap: 2px var(--qab-sp-3);
    }
}

/* Reduced motion: no packet, no cycling — the wire parks fully lit. */
@media (prefers-reduced-motion: reduce) {
    .qab .qab-s3__runner {
        display: none;
    }

    .qab .qab-s3__trace--live .qab-s3__node .qab-s3__dot,
    .qab .qab-s3__trace--live .qab-s3__node .qab-s3__node-name {
        animation: none;
    }

    .qab .qab-s3__trace--live .qab-s3__dot {
        background: var(--qab-azure);
        border-color: var(--qab-azure);
    }

    .qab .qab-s3__trace--live .qab-s3__node-name {
        color: var(--qab-text);
    }
}

/* ############################################################################
   END OF SECTION 03 — append SECTION 04 below this line.
   ############################################################################ */
































/* ############################################################################
   SECTION 04 · THE LIGHT BOX — "One light behind all of it"
   ----------------------------------------------------------------------------
   Append to ~/public/css/AlbertaClinic.css, directly under SECTION 03.
   Uses only tokens and primitives already declared in Section 01.

   THE MECHANIC — why the films are translucent
     A radiology view box lights film from BEHIND. So the modules here are not
     opaque cards sitting on a surface; they are panes of smoked glass over a
     dark room, and a single lamp glides underneath them. The lit film simply
     lets more light through — its background alpha drops, so the lamp reads
     straight through the pane exactly as it would through an X-ray. That is
     the whole effect: no glow bolted onto a card, an actual light source and
     six things of varying transparency in front of it.

   MATERIALS — a fourth distinct set; the page still has not repeated itself:
     S01 an edge-lit instrument · S02 an outlined console over a sunken display
     S03 a wide open schematic  · S04 a dark room containing translucent panes
   The box also steps out to the WIDE container while the head stays in the
   normal one, so the section has a spatial rhythm none of the others use.

   ACCENT BUDGET (Law 2)
     1. the lamp's azure→violet wash      2. the lit film's border
     No cyan anywhere in this section — nothing here is live, and the reserved
     colour stays reserved.
   ############################################################################ */

.qab .qab-s4 {
    position: relative;
    overflow: clip;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    background: var(--qab-bg-1);
    border-block-end: 1px solid var(--qab-rule-faint);
}

/* Ambient room light — one slow, almost subliminal drift. The lamp inside the
   box is the section's real effect; this only keeps the air from being flat. */
.qab .qab-s4__tex {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(46rem 26rem at 28% 12%, rgba(77, 141, 255, 0.10), transparent 68%), radial-gradient(38rem 24rem at 76% 88%, rgba(138, 124, 255, 0.08), transparent 70%);
    animation: qab-s4-drift 26s var(--qab-ease-io) alternate infinite;
}

.qab .qab-s4__head,
.qab .qab-s4__box-wrap {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   S04.1 · HEAD
   ============================================================================ */
.qab .qab-s4__head {
    display: grid;
    gap: var(--qab-sp-4);
    justify-items: start;
    margin-block-end: clamp(2.25rem, 5vw, 3.25rem);
}

.qab .qab-s4__title {
    max-width: 14em;
}

.qab .qab-s4__sub {
    max-width: 42em;
}


/* ============================================================================
   S04.2 · THE BOX
   ============================================================================ */
.qab .qab-s4__box {
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-xl);
    background: var(--qab-surface-1);
    box-shadow: inset 0 1px 0 var(--qab-edge-light);
    overflow: hidden;
}

.qab .qab-s4__box-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--qab-sp-2) var(--qab-sp-4);
    padding: var(--qab-sp-4) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    border-block-end: 1px solid var(--qab-rule-faint);
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
}

.qab .qab-s4__box-label {
    color: var(--qab-text-secondary);
}

.qab .qab-s4__box-note {
    color: var(--qab-text-faint);
}

/* ── The dark room ──────────────────────────────────────────────────────── */
.qab .qab-s4__stage {
    position: relative;
    padding: clamp(var(--qab-sp-3), 2vw, var(--qab-sp-5));
    background: #03050A; /* deeper than any page ground */
    overflow: hidden;
    isolation: isolate;
}

/* ── The lamp ───────────────────────────────────────────────────────────────
   Positioned at the stage origin and moved by transform only, so the travel is
   composited. Hidden until the script has measured a real film, which means a
   page with no JavaScript simply never shows a light — and loses nothing. */
.qab .qab-s4__lamp {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 34rem;
    height: 23rem;
    margin: -11.5rem 0 0 -17rem;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(closest-side, rgba(77, 141, 255, 0.50), rgba(77, 141, 255, 0.16) 46%, transparent 72%), radial-gradient(closest-side, rgba(138, 124, 255, 0.30), transparent 68%);
    filter: blur(14px);
    transform: translate3d(var(--qab-s4-x, 0px), var(--qab-s4-y, 0px), 0);
    transition: transform 900ms var(--qab-ease), opacity 600ms var(--qab-ease);
}

.qab .qab-s4__stage.is-ready .qab-s4__lamp {
    opacity: 1;
}

/* ── The films ──────────────────────────────────────────────────────────── */
.qab .qab-s4__films {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--qab-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Smoked glass. The alpha is the whole trick — see the note at the top. */
.qab .qab-s4__film {
    display: grid;
    align-content: start;
    gap: var(--qab-sp-3);
    padding: clamp(var(--qab-sp-5), 2.2vw, var(--qab-sp-6));
    border: 1px solid var(--qab-rule-faint);
    border-radius: var(--qab-r-md);
    background: rgba(6, 9, 17, 0.86);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background var(--qab-t-med) var(--qab-ease), border-color var(--qab-t-med) var(--qab-ease);
}

    /* Lit: the pane clears, so more of the lamp comes through it. */
    .qab .qab-s4__film.is-lit {
        background: rgba(6, 9, 17, 0.42);
        border-color: rgba(77, 141, 255, 0.45);
    }

.qab .qab-s4__film-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qab-sp-3);
}

.qab .qab-s4__film-ico {
    display: inline-grid;
    place-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--qab-r-sm);
    border: 1px solid var(--qab-rule);
    background: rgba(151, 173, 220, 0.05);
    color: var(--qab-text-muted);
    transition: color var(--qab-t-med) var(--qab-ease), border-color var(--qab-t-med) var(--qab-ease);
}

    .qab .qab-s4__film-ico svg {
        width: 17px;
        height: 17px;
    }

.qab .qab-s4__film.is-lit .qab-s4__film-ico {
    color: var(--qab-azure);
    border-color: rgba(77, 141, 255, 0.35);
}

.qab .qab-s4__film-no {
    font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    color: var(--qab-text-faint);
    font-variant-numeric: tabular-nums;
}

.qab .qab-s4__film-name {
    margin: 0;
    font: 500 var(--qab-fs-xs)/1 var(--qab-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qab-text-muted);
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s4__film.is-lit .qab-s4__film-name {
    color: var(--qab-azure);
}

/* The claim. This is the line the reader actually takes away. */
.qab .qab-s4__film-line {
    margin: 0;
    font: 600 var(--qab-fs-h3)/1.28 var(--qab-font-sans);
    letter-spacing: -0.016em;
    color: var(--qab-text-secondary);
    text-wrap: pretty;
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s4__film.is-lit .qab-s4__film-line {
    color: var(--qab-text);
}

.qab .qab-s4__film-text {
    margin: 0;
    font-size: var(--qab-fs-sm);
    line-height: 1.6;
    color: var(--qab-text-muted);
    text-wrap: pretty;
    transition: color var(--qab-t-med) var(--qab-ease);
}

.qab .qab-s4__film.is-lit .qab-s4__film-text {
    color: var(--qab-text-secondary);
}

.qab .qab-s4__payoff {
    margin: 0;
    padding: clamp(var(--qab-sp-4), 3vw, var(--qab-sp-5)) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    border-block-start: 1px solid var(--qab-rule-faint);
    max-width: 58em;
    font-size: var(--qab-fs-sm);
    line-height: 1.6;
    color: var(--qab-text-muted);
    text-wrap: pretty;
}


/* ============================================================================
   S04 · MOTION
   ============================================================================ */
@keyframes qab-s4-drift {
    from {
        transform: translate3d(-1.5%, 0, 0) scale(1);
    }

    to {
        transform: translate3d(1.5%, -1%, 0) scale(1.06);
    }
}


/* ============================================================================
   S04 · RESPONSIVE
     ≤ 68rem — two films per row
     ≤ 48rem — one per row; the lamp becomes a vertical sweep down the stack
     ≤ 40rem — phone rhythm
   ============================================================================ */
@media (max-width: 68rem) {
    .qab .qab-s4__films {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qab .qab-s4__lamp {
        width: 28rem;
        height: 20rem;
        margin: -10rem 0 0 -14rem;
    }
}

@media (max-width: 48rem) {
    .qab .qab-s4__films {
        grid-template-columns: minmax(0, 1fr);
    }

    .qab .qab-s4__lamp {
        width: 22rem;
        height: 16rem;
        margin: -8rem 0 0 -11rem;
    }

    .qab .qab-s4__title {
        max-width: 18em;
    }
}

@media (max-width: 40rem) {
    .qab .qab-s4 {
        padding-block: clamp(2.75rem, 9vw, 3.75rem);
    }

    .qab .qab-s4__box-head {
        padding-inline: var(--qab-sp-4);
    }

    .qab .qab-s4__stage {
        padding: var(--qab-sp-3);
    }

    .qab .qab-s4__film {
        padding: var(--qab-sp-5) var(--qab-sp-4);
    }

    .qab .qab-s4__payoff {
        padding-inline: var(--qab-sp-4);
    }
}

/* Reduced motion: no drift, no lamp, no travel. The films sit at a readable
   mid-brightness and the section loses nothing but the theatre. */
@media (prefers-reduced-motion: reduce) {
    .qab .qab-s4__tex {
        animation: none;
    }

    .qab .qab-s4__lamp {
        display: none;
    }

    .qab .qab-s4__film,
    .qab .qab-s4__film.is-lit {
        background: rgba(6, 9, 17, 0.62);
        border-color: var(--qab-rule);
        transition: none;
    }

    .qab .qab-s4__film-line {
        color: var(--qab-text);
    }

    .qab .qab-s4__film-text {
        color: var(--qab-text-secondary);
    }

    .qab .qab-s4__film-ico {
        color: var(--qab-text-secondary);
    }
}

/* ############################################################################
   END OF SECTION 04 — append SECTION 05 below this line.
   ############################################################################ */


































/* ############################################################################
   SECTION 05 · THE LEDGER — "Your bill is one multiplication"
   ----------------------------------------------------------------------------
   Append to ~/public/css/AlbertaClinic.css, directly under SECTION 04.
   Uses only tokens and primitives already declared in Section 01.

   THE MECHANIC — an effect made of SUBTRACTION
     Nothing here travels, pulses or glows. Ten rules draw themselves through
     ten charges that don't exist, in sequence, and one line is left standing.
     That is the entire animation, and it is choreographed off a single custom
     property (--n) set inline per row — so this section ships NO JavaScript and
     has nothing that can fail. If the reveal never fires, the rows simply stay
     un-struck and every word still reads.

     Fill modes carry the safety:
       strikes  → forwards   (start invisible, stay drawn once drawn)
       the sum  → backwards  (hidden only while its delay runs, so a page whose
                              reveal never fires shows it immediately)

   COMPOSITION — the width itself is the idea
     S01 split · S02 full-width console · S03 wide schematic · S04 84rem box.
     S05 collapses to a 46rem column. After four wide sections the page pulls
     abruptly in, which is what an invoice should feel like: narrow, final,
     nothing decorative left in the frame.

   ACCENT BUDGET (Law 2)
     The struck rows are muted — they are things being REMOVED, so they get no
     colour at all. Azure belongs only to what survives: the multiplication sign
     and the surviving line's edge. No cyan anywhere; nothing here is live.
   ############################################################################ */

.qab .qab-s5 {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    border-block-end: 1px solid var(--qab-rule-faint);
}

.qab .qab-s5__inner {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   S05.1 · HEAD
   ============================================================================ */
.qab .qab-s5__head {
    display: grid;
    gap: var(--qab-sp-4);
    justify-items: start;
    margin-block-end: clamp(2.25rem, 5vw, 3rem);
}

.qab .qab-s5__title {
    max-width: 14em;
}

.qab .qab-s5__sub {
    max-width: 40em;
}


/* ============================================================================
   S05.2 · THE STATEMENT
   ============================================================================ */
.qab .qab-s5__ledger {
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-xl);
    background: var(--qab-surface-1);
    box-shadow: inset 0 1px 0 var(--qab-edge-light);
    overflow: hidden;
}

.qab .qab-s5__ledger-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qab-sp-4);
    padding: var(--qab-sp-4) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    border-block-end: 1px solid var(--qab-rule-faint);
    font: 500 var(--qab-fs-label)/1.35 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
}

.qab .qab-s5__ledger-title {
    color: var(--qab-text-secondary);
}

.qab .qab-s5__ledger-note {
    color: var(--qab-text-faint);
    white-space: nowrap;
}

/* ── The rows ───────────────────────────────────────────────────────────── */
.qab .qab-s5__rows {
    margin: 0;
    padding: var(--qab-sp-3) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    list-style: none;
}

.qab .qab-s5__row {
    display: grid;
    grid-template-columns: auto minmax(1.5rem, 1fr) auto;
    align-items: baseline;
    gap: var(--qab-sp-3);
    padding-block: 0.6rem;
}

.qab .qab-s5__label {
    position: relative;
    font-size: var(--qab-fs-sm);
    line-height: 1.5;
    color: var(--qab-text-secondary);
}

/* The rule that draws through a charge that isn't there. */
.qab .qab-s5__strike {
    position: absolute;
    inset-inline: -0.1em;
    inset-block-start: 52%;
    height: 1px;
    background: var(--qab-text-faint);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Dotted leader — the one piece of genuine ledger typography on the page. */
.qab .qab-s5__leader {
    align-self: center;
    height: 1px;
    border-block-end: 1px dotted var(--qab-rule-strong);
    opacity: 0.7;
}

.qab .qab-s5__tag {
    font: 400 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-muted);
    white-space: nowrap;
}

/* ── What is left standing ──────────────────────────────────────────────── */
.qab .qab-s5__total {
    position: relative;
    display: grid;
    gap: var(--qab-sp-3);
    padding: clamp(var(--qab-sp-5), 3vw, var(--qab-sp-7)) clamp(var(--qab-sp-4), 3vw, var(--qab-sp-6));
    border-block-start: 1px solid var(--qab-rule);
    background: linear-gradient(180deg, rgba(77, 141, 255, 0.06), transparent 70%), var(--qab-surface-2);
}
    /* The surviving line gets the section's only accent edge. */
    .qab .qab-s5__total::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline: 0;
        height: 1px;
        background: var(--qab-spectrum);
    }

.qab .qab-s5__total-label {
    font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    color: var(--qab-text-muted);
}

.qab .qab-s5__sum {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--qab-sp-3);
    margin: 0;
}

.qab .qab-s5__amount {
    font: 500 clamp(2.75rem, 1.9rem + 3.4vw, 4rem)/0.95 var(--qab-font-mono);
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--qab-text);
}

.qab .qab-s5__op {
    font: 400 clamp(1.5rem, 1.2rem + 1.1vw, 2rem)/1 var(--qab-font-mono);
    color: var(--qab-azure);
}

.qab .qab-s5__operand {
    font: 500 clamp(1.1rem, 1rem + 0.5vw, 1.4rem)/1.2 var(--qab-font-sans);
    letter-spacing: -0.02em;
    color: var(--qab-text-secondary);
}

.qab .qab-s5__total-sub {
    margin: 0;
    max-width: 40em;
    font-size: var(--qab-fs-sm);
    line-height: 1.6;
    color: var(--qab-text-muted);
    text-wrap: pretty;
}

    .qab .qab-s5__total-sub b {
        font-weight: 500;
        font-family: var(--qab-font-mono);
        font-size: 0.95em;
        color: var(--qab-text-secondary);
    }

.qab .qab-s5__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qab-sp-2) var(--qab-sp-6);
    margin: var(--qab-sp-1) 0 0;
    padding: var(--qab-sp-4) 0 0;
    border-block-start: 1px solid var(--qab-rule-faint);
    list-style: none;
    font: 400 var(--qab-fs-xs)/1.4 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-faint);
}

    .qab .qab-s5__stats b {
        font-weight: 500;
        color: var(--qab-text-secondary);
        margin-inline-end: 3px;
    }


/* ============================================================================
   S05.3 · THE ADD-ONS — named in full, because burying them would undo the
   point the rest of the section just made
   ============================================================================ */
.qab .qab-s5__addons {
    margin-block-start: clamp(2rem, 4vw, 2.75rem);
    display: grid;
    gap: var(--qab-sp-4);
}

.qab .qab-s5__addons-lead {
    margin: 0;
    font-size: var(--qab-fs-sm);
    color: var(--qab-text-secondary);
}

.qab .qab-s5__addon-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .qab .qab-s5__addon-list li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 2px var(--qab-sp-4);
        padding-block: var(--qab-sp-3);
        border-block-end: 1px solid var(--qab-rule-faint);
    }

        .qab .qab-s5__addon-list li:first-child {
            border-block-start: 1px solid var(--qab-rule-faint);
        }

.qab .qab-s5__addon-name {
    font: 500 var(--qab-fs-sm)/1.4 var(--qab-font-sans);
    color: var(--qab-text);
}

.qab .qab-s5__addon-price {
    font: 500 var(--qab-fs-sm)/1.4 var(--qab-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--qab-text-secondary);
    white-space: nowrap;
    text-align: end;
}

.qab .qab-s5__addon-note {
    grid-column: 1 / -1;
    font: 400 var(--qab-fs-xs)/1.5 var(--qab-font-mono);
    color: var(--qab-text-faint);
}

.qab .qab-s5__addons-foot {
    margin: 0;
    max-width: 42em;
    font-size: var(--qab-fs-xs);
    line-height: 1.6;
    color: var(--qab-text-muted);
    text-wrap: pretty;
}

.qab .qab-s5__cta {
    margin-block-start: clamp(1.75rem, 4vw, 2.5rem);
}


/* ============================================================================
   S05 · THE CHOREOGRAPHY
   Ten strikes at 110ms apart, then the surviving line lands.
   Last strike starts at 9 × 110ms = 990ms and runs 520ms → done at 1510ms.
   The sum lands at 1700ms, just after the page settles.
   ============================================================================ */
@keyframes qab-s5-strike {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes qab-s5-spend {
    to {
        color: var(--qab-text-faint);
    }
}

@keyframes qab-s5-land {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }

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

.qab .qab-s5__ledger.is-in .qab-s5__strike {
    animation: qab-s5-strike 520ms var(--qab-ease) calc(var(--n, 0) * 110ms) forwards;
}

.qab .qab-s5__ledger.is-in .qab-s5__label {
    animation: qab-s5-spend 520ms var(--qab-ease) calc(var(--n, 0) * 110ms) forwards;
}

.qab .qab-s5__ledger.is-in .qab-s5__total {
    animation: qab-s5-land 700ms var(--qab-ease) 1700ms backwards;
}


/* ============================================================================
   S05 · RESPONSIVE
   ============================================================================ */
@media (max-width: 40rem) {
    .qab .qab-s5 {
        padding-block: clamp(2.75rem, 9vw, 3.75rem);
    }

    .qab .qab-s5__ledger-head {
        padding-inline: var(--qab-sp-4);
    }

    .qab .qab-s5__rows {
        padding-inline: var(--qab-sp-4);
    }

    /* The leader is a luxury the phone can't afford — the tag drops under the
       label instead, which keeps long labels from being crushed to two words. */
    .qab .qab-s5__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding-block: var(--qab-sp-3);
    }

    .qab .qab-s5__leader {
        display: none;
    }

    .qab .qab-s5__label {
        justify-self: start;
    }

    .qab .qab-s5__tag {
        text-align: start;
    }

    .qab .qab-s5__total {
        padding-inline: var(--qab-sp-4);
    }

    .qab .qab-s5__stats {
        gap: var(--qab-sp-2) var(--qab-sp-4);
    }

    .qab .qab-s5__addon-list li {
        grid-template-columns: minmax(0, 1fr);
    }

    .qab .qab-s5__addon-price {
        text-align: start;
    }

    .qab .qab-s5__cta .qab-btn {
        width: 100%;
    }
}

@media (max-width: 22.5rem) {
    .qab .qab-s5__stats {
        gap: var(--qab-sp-2) var(--qab-sp-3);
    }
}

/* Reduced motion: the statement is simply already settled — every charge struck,
   the surviving line in place, no drawing and no landing. */
@media (prefers-reduced-motion: reduce) {
    .qab .qab-s5__strike {
        transform: scaleX(1);
    }

    .qab .qab-s5__label {
        color: var(--qab-text-faint);
    }

    .qab .qab-s5__ledger.is-in .qab-s5__strike,
    .qab .qab-s5__ledger.is-in .qab-s5__label,
    .qab .qab-s5__ledger.is-in .qab-s5__total {
        animation: none;
    }
}

/* ############################################################################
   END OF SECTION 05 — append SECTION 06 below this line.
   ############################################################################ */






































/* ############################################################################
   SECTION 06 · THE CLOSE — "It's 4:55 here too"
   ----------------------------------------------------------------------------
   Append to ~/public/css/AlbertaClinic.css, directly under SECTION 05.
   Uses only tokens and primitives already declared in Section 01 — and finally
   spends .qab-display, which has been reserved since Section 01 for exactly one
   moment: the last thing the page says.

   COMPOSITION — emptiness, on purpose
     S01 split · S02 console · S03 schematic · S04 light box · S05 46rem ledger.
     S06 has no panel at all. One centred column, a hairline strip, two buttons,
     and a great deal of air. Every bold move has already been made; a close that
     tries to be clever competes with the ask.

   THE LAST LIGHT
     Law 1 allows one glow per viewport. The page's first glow was behind the
     hero; this is its last, low on the horizon rather than overhead, so the
     page reads as having travelled from morning to evening. The hairline across
     it is the prairie horizon, which is the one piece of scenery Alberta needs.

   ACCENT BUDGET (Law 2)
     1. the primary button    2. the horizon glow    3. the closing rule's node
     No fourth. Nothing else in this section is coloured at all.
   ############################################################################ */

.qab .qab-s6 {
    position: relative;
    overflow: clip;
    padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 10vw, 7.5rem);
    /* no border-block-end — this section hands off to the master footer */
}

/* The last light, low and wide. */
.qab .qab-s6__glow {
    position: absolute;
    inset-inline: -12%;
    inset-block-end: -34%;
    height: 78%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(58% 100% at 50% 100%, rgba(77, 141, 255, 0.20), transparent 70%), radial-gradient(78% 100% at 50% 100%, rgba(138, 124, 255, 0.10), transparent 74%);
}

/* The horizon. One hairline, faded at both ends. */
.qab .qab-s6__horizon {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 26%;
    height: 1px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, transparent, var(--qab-rule) 22%, var(--qab-rule) 78%, transparent);
}

.qab .qab-s6__inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--qab-sp-5);
    text-align: center;
}

.qab .qab-s6__title {
    max-width: 17em;
    color: var(--qab-text);
}

.qab .qab-s6__sub {
    max-width: 40em;
    margin-block-start: var(--qab-sp-1);
}


/* ============================================================================
   S06.1 · ONE CLOCK
   Two labels, one reading. The number in the middle belongs to both of you,
   which is the entire argument of the section rendered as an object.
   ============================================================================ */
.qab .qab-s6__zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(1.5rem, 3.5rem) auto minmax(1.5rem, 3.5rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--qab-sp-4);
    width: 100%;
    max-width: 38rem;
    margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

.qab .qab-s6__side {
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: end;
    min-width: 0;
}

.qab .qab-s6__side--end {
    justify-items: start;
    text-align: start;
}

.qab .qab-s6__side b {
    font: 500 var(--qab-fs-sm)/1.25 var(--qab-font-sans);
    letter-spacing: -0.008em;
    color: var(--qab-text-secondary);
}

.qab .qab-s6__side em {
    font: 400 var(--qab-fs-label)/1 var(--qab-font-mono);
    letter-spacing: var(--qab-track-label);
    text-transform: uppercase;
    font-style: normal;
    color: var(--qab-text-faint);
}

.qab .qab-s6__rule {
    height: 1px;
    background: var(--qab-rule);
}

.qab .qab-s6__clock {
    display: inline-flex;
    align-items: baseline;
    gap: var(--qab-sp-2);
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--qab-rule);
    border-radius: var(--qab-r-md);
    background: var(--qab-surface-1);
    box-shadow: inset 0 1px 0 var(--qab-edge-light);
    white-space: nowrap;
}

    .qab .qab-s6__clock b {
        font: 500 1.25rem/1 var(--qab-font-mono);
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        color: var(--qab-text);
    }

    .qab .qab-s6__clock i {
        font: 500 var(--qab-fs-label)/1 var(--qab-font-mono);
        letter-spacing: 0.12em;
        font-style: normal;
        color: var(--qab-text-muted);
    }

.qab .qab-s6__zone-note {
    margin: 0;
    font: 400 var(--qab-fs-xs)/1.6 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-faint);
}


/* ============================================================================
   S06.2 · THE ASK
   ============================================================================ */
/* The close earns a bigger target than the rest of the page. Scoped here rather
   than added to the shared button, which Section 01 owns. */
.qab .qab-s6__actions .qab-btn {
    padding: 0.95rem 1.75rem;
    font-size: var(--qab-fs-body);
    border-radius: var(--qab-r-lg);
}

.qab .qab-s6__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qab-sp-3);
    margin-block-start: clamp(1.25rem, 3vw, 2rem);
}

.qab .qab-s6__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qab-sp-2) var(--qab-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 var(--qab-fs-xs)/1.4 var(--qab-font-mono);
    letter-spacing: 0.02em;
    color: var(--qab-text-muted);
}

    .qab .qab-s6__trust li {
        display: inline-flex;
        align-items: center;
        gap: var(--qab-sp-2);
    }

        .qab .qab-s6__trust li::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--qab-text-faint);
            flex: none;
        }

.qab .qab-s6__rule-out {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
}


/* ============================================================================
   S06 · RESPONSIVE
     ≤ 48rem — the clock strip stacks: labels above and below the reading, with
               the connecting rules dropped. Squeezing five columns onto a phone
               would shrink "Your clinic" to two crushed lines for no gain.
   ============================================================================ */
@media (max-width: 48rem) {
    .qab .qab-s6__zone {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        justify-items: center;
        gap: var(--qab-sp-4);
        max-width: 24rem;
    }

    .qab .qab-s6__rule {
        display: none;
    }

    .qab .qab-s6__clock {
        grid-column: 1 / -1;
        order: -1;
        justify-self: center;
    }

    .qab .qab-s6__side {
        justify-items: center;
        text-align: center;
    }

    .qab .qab-s6__side--end {
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 40rem) {
    .qab .qab-s6 {
        padding-block: clamp(3rem, 11vw, 4.5rem);
    }

    .qab .qab-s6__title {
        max-width: 20em;
    }

    .qab .qab-s6__actions {
        width: 100%;
    }

        .qab .qab-s6__actions .qab-btn {
            flex: 1 1 100%;
        }

    .qab .qab-s6__trust {
        gap: var(--qab-sp-2) var(--qab-sp-4);
    }

    .qab .qab-s6__horizon {
        inset-block-end: 22%;
    }
}

@media (max-width: 22.5rem) {
    .qab .qab-s6__clock b {
        font-size: 1.1rem;
    }

    .qab .qab-s6__trust {
        gap: var(--qab-sp-2) var(--qab-sp-3);
    }
}

/* ############################################################################
   END OF SECTION 06 — end of AlbertaClinic.css
   ############################################################################ */