/* =========================================================================
   ALBERTA CLINIC PAGE · MAIN STYLESHEET (qac1..qac7)
   Path: ~/public/css/albertaclinic.css
   --------------------------------------------------------------------------
   ▸ Design tokens scoped to .qac1..qac7 (independent from master vars)
   ▸ Dark obsidian palette · azure→violet→indigo brand · Alberta accents
   ▸ Apple-grade fluid typography via clamp()
   ▸ All reveal motion respects prefers-reduced-motion: reduce
   ========================================================================= */


/* =========================================================================
   DESIGN TOKENS · scoped to all qac sections
   ========================================================================= */
.qac1,
.qac2, .qac3, .qac4, .qac5, .qac6, .qac7 {
    /* Surface */
    --qac-bg-1: #07080a;
    --qac-bg-2: #0d0f1a;
    --qac-bg-3: #14172a;
    /* Ink */
    --qac-ink: #ffffff;
    --qac-ink-2: rgba(255, 255, 255, 0.86);
    --qac-ink-3: rgba(255, 255, 255, 0.62);
    --qac-ink-4: rgba(255, 255, 255, 0.42);
    --qac-ink-5: rgba(255, 255, 255, 0.22);
    /* Lines */
    --qac-line: rgba(255, 255, 255, 0.08);
    --qac-line-2: rgba(255, 255, 255, 0.14);
    /* Brand · azure trio */
    --qac-az: #2563eb;
    --qac-az-2: #3b82f6;
    --qac-az-3: #60a5fa;
    /* Brand · violet trio */
    --qac-vi: #7c3aed;
    --qac-vi-2: #a855f7;
    --qac-vi-3: #c084fc;
    /* Brand · indigo */
    --qac-in: #6366f1;
    --qac-in-2: #818cf8;
    /* Alberta accents */
    --qac-ab-blue: #003a8c; /* Alberta flag blue (use sparingly) */
    --qac-ab-wheat: #f0c674; /* Chinook horizon · winter wheat */
    --qac-ab-amber: #f59e0b; /* Chinook deeper warm */
    /* Easing */
    --qac-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --qac-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    /* Durations */
    --qac-dur-1: .25s;
    --qac-dur-2: .42s;
    --qac-dur-3: .65s;
    /* Layout */
    --qac-page-max: 1200px;
    --qac-page-pad: clamp(20px, 4vw, 56px);
}


/* =========================================================================
   SHARED REVEAL KEYFRAMES (used across qac sections)
   ========================================================================= */
@keyframes qac-revealUp-sm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qac-revealUp-md {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qac-revealUp-lg {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qac-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes qac-fadeInPart {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.85;
    }
}

@keyframes qac-fadeInAur {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.80;
    }
}


/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec1 css — qac1 · HERO
   "Built in Calgary. Built for the world's clinics."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec1: section root ─── */
.qac1 {
    --mx: 0;
    --my: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(96px, 16vh, 160px) 0 clamp(140px, 22vh, 220px);
    background: radial-gradient(ellipse 110% 70% at 50% 0%, var(--qac-bg-3) 0%, var(--qac-bg-2) 42%, var(--qac-bg-1) 100%);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─── sec1: bg layer 1 — AURORA (drifting azure→violet→indigo) ─── */
.qac1-bg-aurora {
    position: absolute;
    inset: -10% -10% 30% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(96, 165, 250, 0.32) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 75% 30%, rgba(168, 85, 247, 0.28) 0%, transparent 60%), radial-gradient(ellipse 70% 40% at 50% 10%, rgba(99, 102, 241, 0.22) 0%, transparent 65%);
    filter: blur(6px) saturate(1.05);
    transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -16px), 0);
    transition: transform .9s var(--qac-ease-out);
    opacity: 0;
    animation: qac-fadeInAur 1.4s var(--qac-ease-out) 100ms forwards, qac1-aurDrift 22s ease-in-out 1.5s infinite alternate;
}

@keyframes qac1-aurDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    50% {
        background-position: 4% 3%, -4% 2%, 2% -3%;
    }

    100% {
        background-position: -3% 2%, 3% -2%, -2% 4%;
    }
}


/* ─── sec1: bg layer 2 — DOT GRID (subtle texture) ─── */
.qac1-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%);
    opacity: 0;
    animation: qac-fadeIn .9s var(--qac-ease-out) 220ms forwards;
}


/* ─── sec1: bg layer 3 — CHINOOK ARCH (warm horizon glow, Alberta winter signature) ─── */
.qac1-bg-chinook {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 18%;
    height: clamp(80px, 14vh, 160px);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(245, 158, 11, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 100% at 50% 100%, rgba(240, 198, 116, 0.14) 0%, transparent 70%);
    filter: blur(8px);
    transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 6px), 0);
    transition: transform .9s var(--qac-ease-out);
    opacity: 0;
    animation: qac-fadeIn 1.6s var(--qac-ease-out) 320ms forwards, qac1-chinookPulse 9s ease-in-out 2s infinite;
}

@keyframes qac1-chinookPulse {
    0%, 100% {
        opacity: 0.85;
        filter: blur(8px);
    }

    50% {
        opacity: 1;
        filter: blur(10px);
    }
}


/* ─── sec1: bg layer 4 — PARTICLES (drifting upward) ─── */
.qac1-bg-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.qac1-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.55);
    opacity: 0;
    animation: qac-fadeInPart 1s var(--qac-ease-out) forwards, qac1-partDrift 18s ease-in-out infinite;
}

.qac1-particle--1 {
    left: 8%;
    bottom: 12%;
    animation-delay: 600ms, 0s;
}

.qac1-particle--2 {
    left: 18%;
    bottom: 28%;
    animation-delay: 800ms, -2s;
    width: 2px;
    height: 2px;
}

.qac1-particle--3 {
    left: 32%;
    bottom: 18%;
    animation-delay: 1000ms, -4s;
}

.qac1-particle--4 {
    left: 46%;
    bottom: 36%;
    animation-delay: 1200ms, -6s;
    width: 4px;
    height: 4px;
}

.qac1-particle--5 {
    left: 58%;
    bottom: 14%;
    animation-delay: 900ms, -8s;
}

.qac1-particle--6 {
    left: 71%;
    bottom: 30%;
    animation-delay: 1100ms, -10s;
    width: 2px;
    height: 2px;
}

.qac1-particle--7 {
    left: 83%;
    bottom: 22%;
    animation-delay: 1300ms, -12s;
}

.qac1-particle--8 {
    left: 92%;
    bottom: 38%;
    animation-delay: 1000ms, -14s;
    width: 2px;
    height: 2px;
}

.qac1-particle--9 {
    left: 26%;
    bottom: 44%;
    animation-delay: 1500ms, -16s;
    width: 4px;
    height: 4px;
}

@keyframes qac1-partDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: translate3d(8px, -40px, 0) scale(1.1);
        opacity: 0.55;
    }

    100% {
        transform: translate3d(-6px, -80px, 0) scale(0.9);
        opacity: 0;
    }
}


/* ─── sec1: bg layer 5 — CALGARY SKYLINE (multi-tone navy silhouette) ─── */
.qac1-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(140px, 22vh, 260px);
    z-index: 1;
    pointer-events: none;
    transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 4px), 0);
    transition: transform 1.1s var(--qac-ease-out);
    opacity: 0;
    animation: qac-fadeIn 1.4s var(--qac-ease-out) 480ms forwards;
}

.qac1-skyline-img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(1600px, 110%);
    height: auto;
    display: block;
    /* Slight desaturation lets the violet silhouette sit cleanly against
       the obsidian page bg; soft indigo drop-shadow gives an ambient halo. */
    filter: saturate(1.02) drop-shadow(0 -8px 24px rgba(99, 102, 241, 0.22));
    user-select: none;
    -webkit-user-drag: none;
}

/* ─── "Secret in buildings" — scattered lit windows ──────────────────────
   Tiny amber pinpoints clipped to the skyline area. mix-blend-mode: screen
   makes them ignite ONLY where dark building pixels exist — open sky stays
   clean. Each is a 1.5–2.5px radial-gradient placed pseudo-randomly. */
.qac1-skyline-windows {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78%; /* covers the building zone, not the sky */
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    animation: qac-fadeIn 1.6s var(--qac-ease-out) 900ms forwards;
    background-image:
    /* warm amber lit windows */
    radial-gradient(circle 1.6px at 12% 78%, rgba(251, 191, 36, 0.95), transparent 70%), radial-gradient(circle 1.4px at 18% 64%, rgba(251, 191, 36, 0.85), transparent 70%), radial-gradient(circle 1.8px at 14% 46%, rgba(251, 191, 36, 0.90), transparent 65%), radial-gradient(circle 1.2px at 22% 72%, rgba(252, 211, 77, 0.90), transparent 70%), radial-gradient(circle 1.5px at 28% 58%, rgba(251, 191, 36, 0.85), transparent 70%), radial-gradient(circle 1.3px at 32% 80%, rgba(252, 211, 77, 0.80), transparent 70%), radial-gradient(circle 1.7px at 36% 42%, rgba(251, 191, 36, 0.95), transparent 65%), radial-gradient(circle 1.4px at 40% 66%, rgba(251, 191, 36, 0.80), transparent 70%), radial-gradient(circle 1.6px at 44% 54%, rgba(252, 211, 77, 0.85), transparent 65%), radial-gradient(circle 1.3px at 48% 76%, rgba(251, 191, 36, 0.90), transparent 70%), radial-gradient(circle 1.8px at 52% 38%, rgba(251, 191, 36, 0.95), transparent 65%), radial-gradient(circle 1.4px at 56% 60%, rgba(252, 211, 77, 0.85), transparent 70%), radial-gradient(circle 1.5px at 60% 72%, rgba(251, 191, 36, 0.80), transparent 70%), radial-gradient(circle 1.2px at 64% 50%, rgba(251, 191, 36, 0.90), transparent 70%), radial-gradient(circle 1.6px at 68% 64%, rgba(252, 211, 77, 0.85), transparent 65%), radial-gradient(circle 1.4px at 72% 78%, rgba(251, 191, 36, 0.85), transparent 70%), radial-gradient(circle 1.7px at 76% 44%, rgba(251, 191, 36, 0.95), transparent 65%), radial-gradient(circle 1.3px at 80% 68%, rgba(252, 211, 77, 0.80), transparent 70%), radial-gradient(circle 1.5px at 84% 56%, rgba(251, 191, 36, 0.90), transparent 70%), radial-gradient(circle 1.4px at 88% 74%, rgba(251, 191, 36, 0.85), transparent 70%),
    /* a few cool violet/cyan accents — modern building lighting */
    radial-gradient(circle 1.5px at 26% 50%, rgba(167, 139, 250, 0.85), transparent 70%), radial-gradient(circle 1.4px at 50% 64%, rgba(167, 139, 250, 0.80), transparent 70%), radial-gradient(circle 1.3px at 70% 56%, rgba(96, 165, 250, 0.85), transparent 70%), radial-gradient(circle 1.6px at 82% 48%, rgba(167, 139, 250, 0.80), transparent 70%);
    /* Slow gentle flicker — subtle, professional, not a Christmas tree */
    animation: qac-fadeIn 1.6s var(--qac-ease-out) 900ms forwards, qac1-windowFlicker 7s ease-in-out 2.5s infinite;
}

@keyframes qac1-windowFlicker {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }

    35% {
        filter: brightness(1.18) saturate(1.08);
    }

    62% {
        filter: brightness(0.92) saturate(1);
    }

    78% {
        filter: brightness(1.10) saturate(1.05);
    }
}

/* Violet halo above the skyline — bridges the silhouette to brand palette */
.qac1-skyline-glow {
    position: absolute;
    left: 50%;
    bottom: 35%;
    transform: translateX(-50%);
    width: 80%;
    height: 90%;
    background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(168, 85, 247, 0.20) 0%, transparent 60%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Top-rim azure glint where the buildings meet the sky — a soft brand kiss */
.qac1-skyline-rim {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.32) 30%, rgba(168, 85, 247, 0.36) 50%, rgba(96, 165, 250, 0.32) 70%, transparent 100%);
    filter: blur(0.5px);
    opacity: 0.8;
    pointer-events: none;
}


/* ─── sec1: bg layer 6 — VIGNETTE ─── */
.qac1-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 75% at 50% 45%, transparent 35%, rgba(7, 8, 10, 0.55) 100%);
}


/* ─── sec1: content wrap ─── */
.qac1-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── sec1: eyebrow pill (mark + label + coordinates) ─── */
.qac1-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(28px, 3.6vw, 44px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    animation: qac-revealUp-sm .7s var(--qac-ease-out) 280ms forwards;
}

.qac1-eyebrow-mark {
    display: inline-flex;
    align-items: center;
    color: var(--qac-vi-3);
}

.qac1-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac1-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac1-eyebrow-coords {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}


/* ─── sec1: H1 (per-word stagger) ─── */
.qac1-h1 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(40px, 7.4vw, 96px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.046em;
    color: var(--qac-ink);
    margin: 0 0 clamp(28px, 3.4vw, 40px);
    text-shadow: 0 2px 30px rgba(15, 23, 42, 0.45);
}

.qac1-h1-line {
    display: block;
}

.qac1-h1-word {
    display: inline-block;
    margin-right: 0.28em;
    opacity: 0;
    transform: translateY(22px);
    animation: qac-revealUp-lg .85s var(--qac-ease-out) calc(var(--wi, 0) * 90ms + 460ms) forwards;
}

    .qac1-h1-word:last-child {
        margin-right: 0;
    }

.qac1-h1-accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 28px rgba(99, 102, 241, 0.40));
    animation: qac-revealUp-lg .85s var(--qac-ease-out) calc(var(--wi, 0) * 90ms + 460ms) forwards, qac1-gradShift 8s ease-in-out 2s infinite;
}

@keyframes qac1-gradShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── sec1: subhead ─── */
.qac1-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.6vw, 19px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 700px;
    margin: 0 auto clamp(36px, 4.6vw, 56px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    animation: qac-revealUp-md .75s var(--qac-ease-out) 1180ms forwards;
}

.qac1-sub-em {
    color: var(--qac-ink-2);
    font-weight: 600;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ─── sec1: trust strip (4 markers + separators) ─── */
.qac1-markers {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 18px);
    margin-bottom: clamp(64px, 9vw, 110px);
    opacity: 0;
    animation: qac-revealUp-sm .7s var(--qac-ease-out) 1380ms forwards;
}

.qac1-marker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--qac-ink-3);
    white-space: nowrap;
    transition: color .25s var(--qac-ease);
}

    .qac1-marker:hover {
        color: var(--qac-ink-2);
    }

.qac1-marker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--qac-vi-3);
    flex-shrink: 0;
}

.qac1-marker-lbl {
    line-height: 1;
}

.qac1-marker-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.16), 0 0 8px rgba(168, 85, 247, 0.45);
    flex-shrink: 0;
    animation: qac1-markerPulse 3s ease-in-out infinite;
}

@keyframes qac1-markerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.6;
    }
}


/* ─── sec1: scroll indicator ─── */
.qac1-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s var(--qac-ease);
    opacity: 0;
    animation: qac-revealUp-sm .7s var(--qac-ease-out) 1620ms forwards;
}

    .qac1-scroll:hover {
        color: var(--qac-ink-2);
    }

.qac1-scroll-lbl {
    line-height: 1;
}

.qac1-scroll-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: qac1-scrollBob 2.4s ease-in-out infinite;
}

@keyframes qac1-scrollBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}


/* =========================================================================
   sec1 css — RESPONSIVE
   ========================================================================= */

/* Tablet · ≤ 900px */
@media (max-width: 900px) {
    .qac1 {
        min-height: auto;
        padding: clamp(48px, 8vh, 80px) 0 clamp(110px, 16vh, 160px);
    }

    .qac1-h1-word {
        margin-right: 0.22em;
    }

    .qac1-skyline {
        height: clamp(110px, 18vh, 200px);
    }
    /* Tighten the markers→continue spacing on tablet */
    .qac1-markers {
        margin-bottom: clamp(40px, 6vw, 64px);
    }
}

/* Phone · ≤ 600px */
@media (max-width: 600px) {
    .qac1 {
        min-height: auto;
        padding: clamp(28px, 4vh, 48px) 0 clamp(90px, 14vh, 130px);
    }

    .qac1-wrap {
        padding: 0 20px;
    }

    .qac1-eyebrow {
        font-size: 11px;
        padding: 6px 12px 6px 10px;
        margin-bottom: clamp(20px, 3vw, 28px);
    }

    .qac1-eyebrow-coords {
        font-size: 10px;
    }

    .qac1-h1 {
        margin-bottom: clamp(20px, 3vw, 28px);
    }

    .qac1-sub {
        margin-bottom: clamp(28px, 4vw, 36px);
    }

    .qac1-markers {
        gap: 8px;
        margin-bottom: clamp(36px, 5vw, 56px);
    }

    .qac1-marker {
        font-size: 11.5px;
    }

    .qac1-marker-icon {
        width: 20px;
        height: 20px;
    }

    .qac1-marker-sep {
        display: none; /* drop separators on phone — gap handles spacing */
    }

    .qac1-skyline {
        height: clamp(90px, 14vh, 150px);
    }
}

/* Small phone · ≤ 380px */
@media (max-width: 380px) {
    .qac1 {
        padding: clamp(20px, 3vh, 36px) 0 clamp(80px, 12vh, 110px);
    }

    .qac1-h1 {
        letter-spacing: -0.038em;
    }

    .qac1-eyebrow {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 92%;
    }
}


/* =========================================================================
   sec1 css — REDUCED MOTION (accessibility)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac1-bg-aurora,
    .qac1-bg-grid,
    .qac1-bg-chinook,
    .qac1-bg-particles,
    .qac1-particle,
    .qac1-skyline,
    .qac1-skyline-windows,
    .qac1-eyebrow,
    .qac1-h1-word,
    .qac1-sub,
    .qac1-markers,
    .qac1-marker-sep,
    .qac1-scroll,
    .qac1-scroll-icon,
    .qac1-h1-accent {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .qac1-particle {
        opacity: 0.6 !important;
    }
}


/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec2 css — qac2 · THE PROBLEM
   "Every clinic runs on eight different tools. None of them talk."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec2: section root ─── */
.qac2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 12vh, 130px) 0 clamp(80px, 12vh, 130px);
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─── sec2: bg layer 1 — TANGLED GRID (very faint connection lines) ─── */
.qac2-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}


/* ─── sec2: bg layer 2 — FRICTION GLOW (warm amber, top-right) ─── */
.qac2-bg-friction {
    position: absolute;
    top: -10%;
    right: -8%;
    width: 55%;
    height: 60%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 70% at 60% 40%, rgba(245, 158, 11, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 70% 30%, rgba(239, 68, 68, 0.08) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.85;
}


/* ─── sec2: bg layer 3 — VIGNETTE ─── */
.qac2-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}


/* ─── sec2: content wrap ─── */
.qac2-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── sec2: eyebrow pill ─── */
.qac2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac2.qac2-on .qac2-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac2-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16), 0 0 8px rgba(239, 68, 68, 0.55);
    animation: qac2-pulseFriction 2.6s ease-in-out infinite;
}

@keyframes qac2-pulseFriction {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac2-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac2-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac2-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}


/* ─── sec2: H2 (per-word stagger via .qac2-on) ─── */
.qac2-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(30px, 4.8vw, 60px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 0 clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.qac2-h2-line {
    display: block;
}

.qac2-h2-line--quiet {
    color: var(--qac-ink-3);
    font-weight: 600;
}

.qac2-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms);
}

    .qac2-h2-word:last-child {
        margin-right: 0;
    }

.qac2.qac2-on .qac2-h2-word {
    opacity: 1;
    transform: translateY(0);
}

.qac2-h2-accent {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.32));
    animation: qac2-accentShift 9s ease-in-out infinite;
}

@keyframes qac2-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── sec2: subhead ─── */
.qac2-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 72px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac2.qac2-on .qac2-sub {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   sec2: TANGLE TABLEAU (8 vendor cards + chaotic SVG line web)
   ============================================================ */

.qac2-tangle {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto clamp(56px, 6vw, 80px);
    aspect-ratio: 5 / 3;
    min-height: 380px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--qac-ease-out) 1300ms, transform .8s var(--qac-ease-out) 1300ms;
}

.qac2.qac2-on .qac2-tangle {
    opacity: 1;
    transform: translateY(0);
}

/* ─── SVG line layer (drawn behind the cards) ─── */
.qac2-tangle-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.qac2-tangle-line {
    fill: none;
    stroke: url(#qac2_lineGrad);
    /* Fallback color since we're not actually using gradient defs — pick a chaotic dashed amber */
    stroke: rgba(245, 158, 11, 0.32);
    stroke-width: 1.2;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
    /* Each path stagger-draws over 1.4s starting after cards arrive */
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.4s var(--qac-ease-out);
}

.qac2.qac2-on .qac2-tangle-line {
    stroke-dashoffset: 0;
}

    /* Stagger each of the 14 lines via :nth-child for a "wiring chaos" build */
    .qac2.qac2-on .qac2-tangle-line:nth-child(1) {
        transition-delay: 1700ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(2) {
        transition-delay: 1780ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(3) {
        transition-delay: 1860ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(4) {
        transition-delay: 1940ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(5) {
        transition-delay: 2020ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(6) {
        transition-delay: 2100ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(7) {
        transition-delay: 2180ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(8) {
        transition-delay: 2260ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(9) {
        transition-delay: 2340ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(10) {
        transition-delay: 2420ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(11) {
        transition-delay: 2500ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(12) {
        transition-delay: 2580ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(13) {
        transition-delay: 2660ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(14) {
        transition-delay: 2740ms;
    }

/* Friction sparks at line crossings */
.qac2-tangle-spark {
    fill: #fbbf24;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

.qac2.qac2-on .qac2-tangle-spark {
    animation: qac2-sparkFlash 2.6s ease-in-out 2900ms infinite;
}

    .qac2.qac2-on .qac2-tangle-spark:nth-child(2) {
        animation-delay: 3100ms;
    }

    .qac2.qac2-on .qac2-tangle-spark:nth-child(3) {
        animation-delay: 3300ms;
    }

    .qac2.qac2-on .qac2-tangle-spark:nth-child(4) {
        animation-delay: 3500ms;
    }

    .qac2.qac2-on .qac2-tangle-spark:nth-child(5) {
        animation-delay: 3700ms;
    }

    .qac2.qac2-on .qac2-tangle-spark:nth-child(6) {
        animation-delay: 3900ms;
    }

    .qac2.qac2-on .qac2-tangle-spark:nth-child(7) {
        animation-delay: 4100ms;
    }

@keyframes qac2-sparkFlash {
    0%, 100% {
        opacity: 0;
        transform: scale(0.6);
    }

    20% {
        opacity: 0.95;
        transform: scale(1.4);
    }

    40% {
        opacity: 0.4;
        transform: scale(1);
    }

    60% {
        opacity: 0.85;
        transform: scale(1.2);
    }

    80% {
        opacity: 0.2;
        transform: scale(0.9);
    }
}


/* ─── 8 vendor-style cards · 4-col grid ─── */
.qac2-tangle-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: clamp(16px, 2.5vw, 32px);
    width: 100%;
    height: 100%;
}

/* Individual tool card */
.qac2-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity .55s var(--qac-ease-out) calc(var(--ci, 0) * 90ms + 1500ms), transform .55s var(--qac-ease-out) calc(var(--ci, 0) * 90ms + 1500ms), border-color .25s var(--qac-ease), background .25s var(--qac-ease);
}

.qac2.qac2-on .qac2-tool {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qac2-tool:hover {
    border-color: rgba(245, 158, 11, 0.30);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}

/* Soft inner glow (idle) */
.qac2-tool-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s var(--qac-ease);
    pointer-events: none;
}

.qac2-tool:hover .qac2-tool-glow {
    opacity: 1;
}

.qac2-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    transition: color .25s var(--qac-ease), background .25s var(--qac-ease);
}

.qac2-tool:hover .qac2-tool-icon {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.10);
}

.qac2-tool-lbl {
    font-size: clamp(13px, 1.15vw, 14.5px);
    font-weight: 700;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
}

.qac2-tool-bill {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--qac-ink-4);
    letter-spacing: 0.02em;
}


/* ─── Caption beneath the tableau ─── */
.qac2-tangle-caption {
    position: absolute;
    left: 50%;
    bottom: -52px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(13px, 1.15vw, 15px);
    color: var(--qac-ink-4);
    letter-spacing: -0.005em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .8s var(--qac-ease-out) 3400ms;
}

.qac2.qac2-on .qac2-tangle-caption {
    opacity: 1;
}

.qac2-tangle-caption-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ============================================================
   sec2: THE COST · 3 cards
   ============================================================ */

.qac2-cost {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin: clamp(48px, 6vw, 80px) auto clamp(40px, 4.6vw, 56px);
    max-width: 1100px;
    text-align: left;
}

.qac2-cost-card {
    position: relative;
    padding: clamp(22px, 2.4vw, 32px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(18px);
}

.qac2.qac2-on .qac2-cost-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 3500ms), transform .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 3500ms), border-color .3s var(--qac-ease);
}

.qac2-cost-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.qac2-cost-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    margin-bottom: 18px;
}

.qac2-cost-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--qac-ink);
    margin: 0 0 10px;
    line-height: 1.2;
}

.qac2-cost-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13.5px, 1.05vw, 14.5px);
    line-height: 1.6;
    color: var(--qac-ink-3);
    margin: 0 0 16px;
}

    .qac2-cost-body strong {
        color: var(--qac-ink-2);
        font-weight: 600;
    }

.qac2-cost-foot {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--qac-ink-4);
    letter-spacing: 0.04em;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}


/* ============================================================
   sec2: PIVOT line (link to sec3)
   ============================================================ */

.qac2-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
}

.qac2.qac2-on .qac2-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 3900ms, transform .7s var(--qac-ease-out) 3900ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac2-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.06);
    transform: translateY(-1px);
}

.qac2-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    color: #fff;
    animation: qac2-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac2-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* =========================================================================
   sec2 css — RESPONSIVE
   ========================================================================= */

/* Tablet · ≤ 900px */
@media (max-width: 900px) {
    .qac2-tangle {
        aspect-ratio: auto;
        min-height: 0;
        margin-bottom: clamp(72px, 9vw, 100px);
    }

    .qac2-tangle-lines {
        display: none;
    }
    /* lines look chaotic at narrow widths */
    .qac2-tangle-spark {
        display: none;
    }

    .qac2-tangle-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
    }

    .qac2-tangle-caption {
        bottom: -44px;
        white-space: normal;
        text-align: center;
        max-width: 90%;
    }

    .qac2-cost {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Phone · ≤ 600px */
@media (max-width: 600px) {
    .qac2 {
        padding: clamp(64px, 9vh, 90px) 0 clamp(64px, 9vh, 90px);
    }

    .qac2-tangle-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
    }

    .qac2-tool {
        padding: 16px 10px;
    }

    .qac2-tool-lbl {
        font-size: 13px;
    }

    .qac2-tool-bill {
        font-size: 10px;
    }

    .qac2-tangle-caption {
        bottom: -56px;
        font-size: 12px;
    }

    .qac2-tangle-caption-num {
        font-size: 22px;
    }

    .qac2-cost-card {
        padding: 22px 20px;
    }
}


/* =========================================================================
   sec2 css — REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac2-eyebrow,
    .qac2-eyebrow-dot,
    .qac2-h2-word,
    .qac2-h2-accent,
    .qac2-sub,
    .qac2-tangle,
    .qac2-tangle-line,
    .qac2-tangle-spark,
    .qac2-tool,
    .qac2-tangle-caption,
    .qac2-cost-card,
    .qac2-pivot,
    .qac2-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .qac2-tangle-line {
        stroke-dashoffset: 0 !important;
    }

    .qac2-tangle-spark {
        opacity: 0.6 !important;
    }
}































/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec2 css — qac2 · THE PROBLEM
   "Every clinic runs on eight different tools. None of them talk."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec2: section root ─── */
.qac2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 12vh, 130px) 0 clamp(80px, 12vh, 130px);
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── sec2: bg layer 1 — TANGLED GRID (very faint connection lines) ─── */
.qac2-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}

/* ─── sec2: bg layer 2 — FRICTION GLOW (warm amber, top-right) ─── */
.qac2-bg-friction {
    position: absolute;
    top: -10%;
    right: -8%;
    width: 55%;
    height: 60%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 70% at 60% 40%, rgba(245, 158, 11, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 70% 30%, rgba(239, 68, 68, 0.08) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.85;
}

/* ─── sec2: bg layer 3 — VIGNETTE ─── */
.qac2-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}

/* ─── sec2: content wrap ─── */
.qac2-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}

/* ─── sec2: eyebrow pill ─── */
.qac2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac2.qac2-on .qac2-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac2-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16), 0 0 8px rgba(239, 68, 68, 0.55);
    animation: qac2-pulseFriction 2.6s ease-in-out infinite;
}

@keyframes qac2-pulseFriction {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac2-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac2-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac2-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}

/* ─── sec2: H2 (per-word stagger via .qac2-on) ─── */
.qac2-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(30px, 4.8vw, 60px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
}

.qac2-h2-line {
    display: block;
}

.qac2-h2-line--quiet {
    color: var(--qac-ink-3);
    font-weight: 600;
}

.qac2-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms);
}

    .qac2-h2-word:last-child {
        margin-right: 0;
    }

.qac2.qac2-on .qac2-h2-word {
    opacity: 1;
    transform: translateY(0);
}

.qac2-h2-accent {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.32));
    animation: qac2-accentShift 9s ease-in-out infinite;
}

@keyframes qac2-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ─── sec2: subhead ─── */
.qac2-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 72px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac2.qac2-on .qac2-sub {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   sec2: TANGLE TABLEAU (8 vendor cards + traveling pulse network)
   ============================================================ */

.qac2-tangle {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto clamp(56px, 6vw, 80px);
    aspect-ratio: 5 / 3;
    min-height: 380px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--qac-ease-out) 1300ms, transform .8s var(--qac-ease-out) 1300ms;
}

.qac2.qac2-on .qac2-tangle {
    opacity: 1;
    transform: translateY(0);
}

/* ─── SVG line layer (background wiring, faint) ─── */
.qac2-tangle-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.qac2-tangle-line {
    fill: none;
    stroke: url(#qac2_lineG);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    stroke-linecap: round;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.4s var(--qac-ease-out);
    /* faint background wiring; pulses do the visual work */
    opacity: 0.55;
}

.qac2.qac2-on .qac2-tangle-line {
    stroke-dashoffset: 0;
}

    /* Stagger build of the 14 lines */
    .qac2.qac2-on .qac2-tangle-line:nth-child(1) {
        transition-delay: 1700ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(2) {
        transition-delay: 1780ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(3) {
        transition-delay: 1860ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(4) {
        transition-delay: 1940ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(5) {
        transition-delay: 2020ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(6) {
        transition-delay: 2100ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(7) {
        transition-delay: 2180ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(8) {
        transition-delay: 2260ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(9) {
        transition-delay: 2340ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(10) {
        transition-delay: 2420ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(11) {
        transition-delay: 2500ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(12) {
        transition-delay: 2580ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(13) {
        transition-delay: 2660ms;
    }

    .qac2.qac2-on .qac2-tangle-line:nth-child(14) {
        transition-delay: 2740ms;
    }


/* =========================================================================
   sec2: TRAVELING PULSES — packets moving along motion paths
   --------------------------------------------------------------------------
   Each pulse uses CSS `offset-path` to follow the same path geometry as one
   of the 14 SVG lines. Independent durations + delays + easing curves create
   organic, non-synchronized chaos that reads like real network traffic.
   The trail is a ::before/::after with elongated radial gradient stretched
   backward along the direction of travel.
   ========================================================================= */

.qac2-pulse-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Match the SVG viewBox proportionally so offset-path coords align */
    /* The motion-path coords are expressed in pixel-relative form below */
}

.qac2-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7ed 0%, #fbbf24 35%, #f97316 75%, transparent 100%);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.95), 0 0 14px rgba(245, 158, 11, 0.65), 0 0 24px rgba(249, 115, 22, 0.40);
    opacity: 0;
    /* offset-path is set per-pulse below; uses the same Q-curve geometry as the SVG lines.
       Coords here are scaled to a 1100px-wide tangle (max-width) and ~660px tall area;
       offset-path uses absolute path() syntax which is viewport-independent. We use the
       motion-path normalized to the tangle's actual size via a relative-positioned layer. */
    will-change: offset-distance, opacity, transform;
    /* Center the dot ON the path point */
    offset-rotate: 0deg;
    offset-anchor: 50% 50%;
}

    .qac2-pulse::after {
        /* The trailing comet tail */
        content: '';
        position: absolute;
        top: 50%;
        right: 50%;
        width: 38px;
        height: 4px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(251, 191, 36, 0) 0%, rgba(251, 191, 36, 0.30) 35%, rgba(251, 191, 36, 0.85) 90%, rgba(255, 247, 237, 0.95) 100%);
        border-radius: 50%;
        filter: blur(1.5px);
        pointer-events: none;
    }

/* Activate the pulse animations only after the section is on */
.qac2.qac2-on .qac2-pulse {
    animation: qac2-pulseRide var(--qac2-pdur, 2.4s) cubic-bezier(0.42, 0.05, 0.58, 1) var(--qac2-pdelay, 0s) infinite, qac2-pulseFlash var(--qac2-pdur, 2.4s) ease-in-out var(--qac2-pdelay, 0s) infinite;
}

@keyframes qac2-pulseRide {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

@keyframes qac2-pulseFlash {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    8% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.95;
        transform: scale(1);
    }

    92% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

/* ─── 14 motion-paths · matching the 14 SVG lines (same Q curves) ───
   Coordinates use the path() function with values calibrated to the
   tangle container's natural pixel space — the percentage coords below
   work because we're using pixel-equivalent values at the max-width
   anchor. The offset-path is ONE absolute path; it scales with browser
   zoom but holds its proportional shape inside the tangle. */

/* Scale factor: SVG viewBox 1000x600 → container roughly 1100x660 max.
   We use the same Q-curve shapes from the SVG, scaled 1.1x. */

.qac2-pulse--p1 {
    offset-path: path('M143 121 Q 275 308 418 539');
}

.qac2-pulse--p2 {
    offset-path: path('M143 121 Q 440 220 682 539');
}

.qac2-pulse--p3 {
    offset-path: path('M418 121 Q 550 330 957 539');
}

.qac2-pulse--p4 {
    offset-path: path('M682 121 Q 528 308 143 539');
}

.qac2-pulse--p5 {
    offset-path: path('M957 121 Q 770 352 418 539');
}

.qac2-pulse--p6 {
    offset-path: path('M957 121 Q 660 275 143 539');
}

.qac2-pulse--p7 {
    offset-path: path('M143 121 Q 660 110 957 121');
}

.qac2-pulse--p8 {
    offset-path: path('M143 539 Q 660 594 957 539');
}

.qac2-pulse--p9 {
    offset-path: path('M418 121 Q 418 330 418 539');
}

.qac2-pulse--p10 {
    offset-path: path('M682 121 Q 682 330 682 539');
}

.qac2-pulse--p11 {
    offset-path: path('M143 121 Q 143 330 143 539');
}

.qac2-pulse--p12 {
    offset-path: path('M957 121 Q 957 330 957 539');
}

.qac2-pulse--p13 {
    offset-path: path('M418 539 Q 550 385 957 121');
}

.qac2-pulse--p14 {
    offset-path: path('M682 539 Q 528 275 143 121');
}


/* ─── 8 vendor-style cards · 4-col grid ─── */
.qac2-tangle-grid {
    position: relative;
    z-index: 2; /* above pulses so cards remain crisp */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: clamp(16px, 2.5vw, 32px);
    width: 100%;
    height: 100%;
}

/* Individual tool card */
.qac2-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity .55s var(--qac-ease-out) calc(var(--ci, 0) * 90ms + 1500ms), transform .55s var(--qac-ease-out) calc(var(--ci, 0) * 90ms + 1500ms), border-color .35s var(--qac-ease), background .35s var(--qac-ease), box-shadow .35s var(--qac-ease);
}

.qac2.qac2-on .qac2-tool {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qac2-tool:hover {
    border-color: rgba(245, 158, 11, 0.30);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}

/* Soft inner glow on hover */
.qac2-tool-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s var(--qac-ease);
    pointer-events: none;
}

.qac2-tool:hover .qac2-tool-glow {
    opacity: 1;
}


/* ───── PING reaction · brief amber border halo when "data arrives" ─────
   Driven by JS adding/removing .qac2-tool--pinged class on a random card
   every 380–820ms. The qac2-tool-ping element is a layered border halo
   that flashes amber for ~520ms then fades. */
.qac2-tool-ping {
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    pointer-events: none;
    border: 1px solid transparent;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    transition: opacity .25s var(--qac-ease), box-shadow .25s var(--qac-ease), border-color .25s var(--qac-ease);
}

.qac2-tool--pinged {
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(251, 191, 36, 0.40), 0 0 24px rgba(251, 191, 36, 0.25), 0 8px 24px rgba(0, 0, 0, 0.30);
}

    .qac2-tool--pinged .qac2-tool-ping {
        opacity: 1;
        border-color: rgba(251, 191, 36, 0.65);
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.10), 0 0 24px rgba(251, 191, 36, 0.35);
        animation: qac2-pingBurst .52s var(--qac-ease-out);
    }

    .qac2-tool--pinged .qac2-tool-icon {
        color: #fbbf24;
        background: rgba(245, 158, 11, 0.10);
    }

@keyframes qac2-pingBurst {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(1.04);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.06);
        opacity: 0;
    }
}


.qac2-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    transition: color .25s var(--qac-ease), background .25s var(--qac-ease);
    z-index: 1;
}

.qac2-tool:hover .qac2-tool-icon {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.10);
}

.qac2-tool-lbl {
    font-size: clamp(13px, 1.15vw, 14.5px);
    font-weight: 700;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
    z-index: 1;
}

.qac2-tool-bill {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--qac-ink-4);
    letter-spacing: 0.02em;
    z-index: 1;
}

/* ─── Caption beneath the tableau ─── */
.qac2-tangle-caption {
    position: absolute;
    left: 50%;
    bottom: -52px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(13px, 1.15vw, 15px);
    color: var(--qac-ink-4);
    letter-spacing: -0.005em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .8s var(--qac-ease-out) 3400ms;
}

.qac2.qac2-on .qac2-tangle-caption {
    opacity: 1;
}

.qac2-tangle-caption-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ============================================================
   sec2: THE COST · 3 cards
   ============================================================ */

.qac2-cost {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin: clamp(48px, 6vw, 80px) auto clamp(40px, 4.6vw, 56px);
    max-width: 1100px;
    text-align: left;
}

.qac2-cost-card {
    position: relative;
    padding: clamp(22px, 2.4vw, 32px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(18px);
}

.qac2.qac2-on .qac2-cost-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 3500ms), transform .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 3500ms), border-color .3s var(--qac-ease);
}

.qac2-cost-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.qac2-cost-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    margin-bottom: 18px;
}

.qac2-cost-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--qac-ink);
    margin: 0 0 10px;
    line-height: 1.2;
}

.qac2-cost-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13.5px, 1.05vw, 14.5px);
    line-height: 1.6;
    color: var(--qac-ink-3);
    margin: 0 0 16px;
}

    .qac2-cost-body strong {
        color: var(--qac-ink-2);
        font-weight: 600;
    }

.qac2-cost-foot {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--qac-ink-4);
    letter-spacing: 0.04em;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}


/* ============================================================
   sec2: PIVOT line (link to sec3)
   ============================================================ */

.qac2-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
}

.qac2.qac2-on .qac2-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 3900ms, transform .7s var(--qac-ease-out) 3900ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac2-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.06);
    transform: translateY(-1px);
}

.qac2-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    color: #fff;
    animation: qac2-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac2-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* =========================================================================
   sec2 css — RESPONSIVE
   ========================================================================= */

/* Tablet · ≤ 900px */
@media (max-width: 900px) {
    .qac2-tangle {
        aspect-ratio: auto;
        min-height: 0;
        margin-bottom: clamp(40px, 5vw, 60px);
    }
    /* Lines + pulses look chaotic at narrow widths — hide them on tablet/phone */
    .qac2-tangle-lines {
        display: none;
    }

    .qac2-pulse-layer {
        display: none;
    }

    .qac2-tangle-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
    }

    /* Caption flows in normal layout below the grid (no longer absolute) */
    .qac2-tangle-caption {
        position: static;
        transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: 8px;
        margin-top: clamp(28px, 3.4vw, 40px);
        white-space: normal;
        text-align: center;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.45;
    }

    .qac2-cost {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Phone · ≤ 600px */
@media (max-width: 600px) {
    .qac2 {
        padding: clamp(64px, 9vh, 90px) 0 clamp(64px, 9vh, 90px);
    }

    .qac2-tangle-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
    }

    .qac2-tool {
        padding: 16px 10px;
    }

    .qac2-tool-lbl {
        font-size: 13px;
    }

    .qac2-tool-bill {
        font-size: 10px;
    }

    .qac2-tangle-caption {
        font-size: 13px;
        gap: 6px;
        max-width: 100%;
    }

    .qac2-tangle-caption-num {
        font-size: 24px;
    }

    .qac2-cost-card {
        padding: 22px 20px;
    }
}


/* =========================================================================
   sec2 css — REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac2-eyebrow,
    .qac2-eyebrow-dot,
    .qac2-h2-word,
    .qac2-h2-accent,
    .qac2-sub,
    .qac2-tangle,
    .qac2-tangle-line,
    .qac2-pulse,
    .qac2-tool,
    .qac2-tool-ping,
    .qac2-tangle-caption,
    .qac2-cost-card,
    .qac2-pivot,
    .qac2-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .qac2-tangle-line {
        stroke-dashoffset: 0 !important;
    }

    .qac2-pulse {
        display: none !important;
    }
    /* no traveling motion = no pulses */
}



























/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec3 css — qac3 · THE REVEAL
   "Eight tools collapse into one platform."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec3: section root ─── */
.qac3 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 12vh, 130px) 0 clamp(80px, 12vh, 130px);
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── sec3: bg layer 1 — DOT GRID ─── */
.qac3-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
}

/* ─── sec3: bg layer 2 — AURORA (cool azure→violet · the calm exhale) ─── */
.qac3-bg-aurora {
    position: absolute;
    inset: -10% -10% 30% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 45% at 25% 30%, rgba(96, 165, 250, 0.20) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 78% 35%, rgba(168, 85, 247, 0.20) 0%, transparent 65%), radial-gradient(ellipse 70% 35% at 50% 12%, rgba(99, 102, 241, 0.16) 0%, transparent 70%);
    filter: blur(8px) saturate(1.05);
    opacity: 0.85;
    animation: qac3-auroraDrift 24s ease-in-out infinite alternate;
}

@keyframes qac3-auroraDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: -3% 2%, 3% -2%, 2% 3%;
    }
}

/* ─── sec3: bg layer 3 — VIGNETTE ─── */
.qac3-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}

/* ─── sec3: content wrap ─── */
.qac3-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}

/* ─── sec3: eyebrow pill ─── */
.qac3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac3.qac3-on .qac3-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac3-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16), 0 0 8px rgba(168, 85, 247, 0.55);
    animation: qac3-eyebrowPulse 2.6s ease-in-out infinite;
}

@keyframes qac3-eyebrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac3-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac3-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac3-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}

/* ─── sec3: H2 ─── */
.qac3-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(30px, 4.8vw, 60px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
}

.qac3-h2-line {
    display: block;
}

.qac3-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 220ms);
}

    .qac3-h2-word:last-child {
        margin-right: 0;
    }

.qac3.qac3-on .qac3-h2-word {
    opacity: 1;
    transform: translateY(0);
}

.qac3-h2-accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 28px rgba(99, 102, 241, 0.35));
    animation: qac3-accentShift 9s ease-in-out infinite;
}

@keyframes qac3-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ─── sec3: subhead ─── */
.qac3-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac3.qac3-on .qac3-sub {
    opacity: 1;
    transform: translateY(0);
}

.qac3-sub-em {
    color: var(--qac-ink-2);
    font-weight: 600;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* =========================================================================
   sec3: THE STAGE (orbit · with morph-to-tangle alt state)
   ========================================================================= */

.qac3-stage {
    position: relative;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 1 / 1;
    margin: 0 auto clamp(60px, 7vw, 90px);
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity .9s var(--qac-ease-out) 1300ms, transform .9s var(--qac-ease-out) 1300ms;
}

.qac3.qac3-on .qac3-stage {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ─── ORBIT RING SVG (guide circles + spokes) ─── */
.qac3-orbit-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
}

.qac3-orbit-circle {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    fill: none;
}

.qac3-core-halo {
    opacity: 0.55;
    transform-origin: 400px 400px;
    animation: qac3-halo 5s ease-in-out infinite alternate;
}

@keyframes qac3-halo {
    0% {
        opacity: 0.50;
        transform: scale(0.97);
    }

    100% {
        opacity: 0.75;
        transform: scale(1.05);
    }
}

.qac3-orbit-spoke {
    stroke: url(#qac3_spokeG);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.2s var(--qac-ease-out);
}

.qac3.qac3-on .qac3-orbit-spoke {
    stroke-dashoffset: 0;
}

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(1) {
        transition-delay: 2200ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(2) {
        transition-delay: 2280ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(3) {
        transition-delay: 2360ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(4) {
        transition-delay: 2440ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(5) {
        transition-delay: 2520ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(6) {
        transition-delay: 2600ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(7) {
        transition-delay: 2680ms;
    }

    .qac3.qac3-on .qac3-orbit-spoke:nth-child(8) {
        transition-delay: 2760ms;
    }


/* ═════════════════════════════════════════════════════════════════════════
   THE CORE · Qlynic mark with breathing glow + concentric pulse rings
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(108px, 14vw, 140px);
    height: clamp(108px, 14vw, 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4;
    color: var(--qac-vi-3);
    opacity: 0;
    transition: opacity .9s var(--qac-ease-out) 1800ms;
}

.qac3.qac3-on .qac3-core {
    opacity: 1;
}

.qac3-core-mark {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(168, 85, 247, 0.45);
    box-shadow: inset 0 0 24px rgba(99, 102, 241, 0.40), 0 0 0 6px rgba(99, 102, 241, 0.06), 0 0 30px rgba(168, 85, 247, 0.35), 0 0 60px rgba(99, 102, 241, 0.20);
    color: #c084fc;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: qac3-coreBreathe 3.4s ease-in-out infinite;
}

@keyframes qac3-coreBreathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: inset 0 0 24px rgba(99, 102, 241, 0.40), 0 0 0 6px rgba(99, 102, 241, 0.06), 0 0 30px rgba(168, 85, 247, 0.35), 0 0 60px rgba(99, 102, 241, 0.20);
    }

    50% {
        transform: scale(1.05);
        box-shadow: inset 0 0 30px rgba(99, 102, 241, 0.55), 0 0 0 8px rgba(99, 102, 241, 0.10), 0 0 42px rgba(168, 85, 247, 0.50), 0 0 78px rgba(99, 102, 241, 0.30);
    }
}

.qac3-core-label {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Concentric expanding pulse rings emanating from the core */
.qac3-core-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    margin-top: -16px; /* center on the mark, not on the label */
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.55);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.qac3.qac3-on .qac3-core-pulse {
    animation: qac3-coreEmit 3.2s ease-out infinite;
}

.qac3.qac3-on .qac3-core-pulse--2 {
    animation-delay: 1.05s;
}

.qac3.qac3-on .qac3-core-pulse--3 {
    animation-delay: 2.10s;
}

@keyframes qac3-coreEmit {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0.80;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.4);
        opacity: 0;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   8 MODULES · positioned via cos()/sin() at --angle on a ring of --r radius
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-modules {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Each module: center it at (50% + r·cos(angle), 50% + r·sin(angle)).
   --angle is the polar angle (0deg = right, 90deg = bottom in SVG/CSS).
   --r is the orbit radius as a % of the stage. */
.qac3-mod {
    --r: 40%;
    position: absolute;
    top: calc(50% + var(--r) * sin(var(--angle)));
    left: calc(50% + var(--r) * cos(var(--angle)));
    transform: translate(-50%, -50%);
    width: clamp(80px, 10vw, 110px);
    height: clamp(80px, 10vw, 110px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transition: opacity .6s var(--qac-ease-out) calc(var(--mi, 0) * 90ms + 1500ms), top .65s var(--qac-ease-out), left .65s var(--qac-ease-out), border-color .3s var(--qac-ease), background .3s var(--qac-ease), box-shadow .3s var(--qac-ease);
}

.qac3.qac3-on .qac3-mod {
    opacity: 1;
}

.qac3-mod:hover {
    border-color: rgba(168, 85, 247, 0.40);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(168, 85, 247, 0.25), 0 12px 30px rgba(0, 0, 0, 0.40);
}

.qac3-mod-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--qac-vi-3);
    transition: color .25s var(--qac-ease), background .25s var(--qac-ease);
}

.qac3-mod:hover .qac3-mod-icon {
    color: #c084fc;
    background: rgba(168, 85, 247, 0.10);
}

.qac3-mod-lbl {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
    line-height: 1.1;
    text-align: center;
}


/* ═════════════════════════════════════════════════════════════════════════
   TRAVELING SIGNAL PULSES · 8 inbound (azure) + 8 outbound (violet)
   Coordinated 1.6s loops · echoes sec2's pulse system but calm, not chaotic.
   Pulses use offset-path along the same geometry as the SVG spokes (in stage
   space, where the stage is square and the core sits at center).
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-pulse-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.qac3-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #93c5fd 35%, #3b82f6 75%, transparent 100%);
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.95), 0 0 14px rgba(59, 130, 246, 0.65), 0 0 24px rgba(99, 102, 241, 0.40);
    opacity: 0;
    will-change: offset-distance, opacity, transform;
    offset-rotate: 0deg;
    offset-anchor: 50% 50%;
}

.qac3-pulse--out {
    background: radial-gradient(circle, #ffffff 0%, #d8b4fe 35%, #a855f7 75%, transparent 100%);
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.95), 0 0 14px rgba(168, 85, 247, 0.65), 0 0 24px rgba(124, 58, 237, 0.40);
}

.qac3.qac3-on .qac3-pulse {
    animation: qac3-pulseRide 1.6s cubic-bezier(0.55, 0.05, 0.55, 0.95) var(--qac3-pdelay, 0s) infinite, qac3-pulseFlash 1.6s ease-in-out var(--qac3-pdelay, 0s) infinite;
}

@keyframes qac3-pulseRide {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

@keyframes qac3-pulseFlash {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.95;
        transform: scale(1);
    }

    90% {
        opacity: 0.85;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

/* INBOUND paths · module → core (8 spokes, ending at center 50%/50%)
   Stage is 100% × 100%. Module ring radius ≈ 40%. So endpoints sit at
   center ± 40% in the appropriate angles. We use percentage path()
   units relative to the stage box. */

.qac3-pulse--in1 {
    offset-path: path('M 90% 50% L 50% 50%');
}

.qac3-pulse--in2 {
    offset-path: path('M 78.3% 21.7% L 50% 50%');
}

.qac3-pulse--in3 {
    offset-path: path('M 50% 10% L 50% 50%');
}

.qac3-pulse--in4 {
    offset-path: path('M 21.7% 21.7% L 50% 50%');
}

.qac3-pulse--in5 {
    offset-path: path('M 10% 50% L 50% 50%');
}

.qac3-pulse--in6 {
    offset-path: path('M 21.7% 78.3% L 50% 50%');
}

.qac3-pulse--in7 {
    offset-path: path('M 50% 90% L 50% 50%');
}

.qac3-pulse--in8 {
    offset-path: path('M 78.3% 78.3% L 50% 50%');
}

/* OUTBOUND paths · core → module (reversed direction) */
.qac3-pulse--out1 {
    offset-path: path('M 50% 50% L 90% 50%');
}

.qac3-pulse--out2 {
    offset-path: path('M 50% 50% L 78.3% 21.7%');
}

.qac3-pulse--out3 {
    offset-path: path('M 50% 50% L 50% 10%');
}

.qac3-pulse--out4 {
    offset-path: path('M 50% 50% L 21.7% 21.7%');
}

.qac3-pulse--out5 {
    offset-path: path('M 50% 50% L 10% 50%');
}

.qac3-pulse--out6 {
    offset-path: path('M 50% 50% L 21.7% 78.3%');
}

.qac3-pulse--out7 {
    offset-path: path('M 50% 50% L 50% 90%');
}

.qac3-pulse--out8 {
    offset-path: path('M 50% 50% L 78.3% 78.3%');
}


/* ═════════════════════════════════════════════════════════════════════════
   8 CAPABILITY CARDS · 4×2 grid
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-caps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
    margin: 0 auto clamp(60px, 7vw, 90px);
    max-width: 1100px;
    text-align: left;
}

.qac3-cap {
    position: relative;
    padding: clamp(18px, 1.8vw, 22px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(14px);
}

.qac3.qac3-on .qac3-cap {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s var(--qac-ease-out) calc(var(--ci, 0) * 80ms + 3200ms), transform .6s var(--qac-ease-out) calc(var(--ci, 0) * 80ms + 3200ms), border-color .3s var(--qac-ease);
}

.qac3-cap:hover {
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateY(-2px);
}

.qac3-cap-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qac3-cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.22);
    color: var(--qac-vi-3);
}

.qac3-cap-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--qac-ink);
    margin: 0;
    letter-spacing: -0.012em;
}

.qac3-cap-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--qac-ink-3);
    margin: 0 0 14px;
}

.qac3-cap-merge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--qac-az-3);
    letter-spacing: 0.04em;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}


/* ═════════════════════════════════════════════════════════════════════════
   PRICING PUNCHLINE STRIP · before vs after, real Core pricing
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-pricestrip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: clamp(14px, 2vw, 28px);
    margin: 0 auto clamp(48px, 5vw, 70px);
    max-width: 1100px;
    text-align: left;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s var(--qac-ease-out) 3700ms, transform .8s var(--qac-ease-out) 3700ms;
}

.qac3.qac3-on .qac3-pricestrip {
    opacity: 1;
    transform: translateY(0);
}

.qac3-price {
    position: relative;
    padding: clamp(22px, 2.4vw, 30px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.qac3-price--before {
    opacity: 0.75;
}

.qac3-price--after {
    border-color: rgba(168, 85, 247, 0.30);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.20), 0 12px 40px rgba(99, 102, 241, 0.18);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, rgba(168, 85, 247, 0.02) 100%);
}

.qac3-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--qac-ink-3);
    margin-bottom: 18px;
}

.qac3-price-tag--after {
    border-color: rgba(168, 85, 247, 0.35);
    color: var(--qac-vi-3);
    background: rgba(168, 85, 247, 0.08);
}

.qac3-price-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24 0%, #ef4444 100%);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
}

.qac3-price-tag-dot--after {
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.55);
}

.qac3-price-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qac3-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--qac-ink-2);
}

.qac3-price-row--soft {
    color: var(--qac-ink-4);
    font-size: 12px;
}

.qac3-price-row-lbl {
    flex: 1;
}

.qac3-price-row-val {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    white-space: nowrap;
}

.qac3-price-row-val--brand {
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.qac3-price-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 0 4px;
}

.qac3-price-divider--after {
    background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.30) 50%, transparent 100%);
}

.qac3-price-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.qac3-price-total-lbl {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--qac-ink-2);
}

.qac3-price-total-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
    color: var(--qac-ink);
    white-space: nowrap;
}

.qac3-price-total-val--brand {
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 14px rgba(99, 102, 241, 0.30));
}

.qac3-price-foot {
    display: block;
    margin-top: 14px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--qac-ink-4);
    letter-spacing: 0.02em;
    line-height: 1.55;
}

.qac3-price-foot-link {
    color: var(--qac-az-3);
    text-decoration: none;
    margin-left: 4px;
    transition: color .25s var(--qac-ease);
}

    .qac3-price-foot-link:hover {
        color: var(--qac-vi-3);
    }

.qac3-pricestrip-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qac-vi-3);
    opacity: 0.7;
}


/* ═════════════════════════════════════════════════════════════════════════
   PIVOT to sec4
   ═════════════════════════════════════════════════════════════════════════ */

.qac3-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
}

.qac3.qac3-on .qac3-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 4100ms, transform .7s var(--qac-ease-out) 4100ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac3-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.06);
    transform: translateY(-1px);
}

.qac3-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    color: #fff;
    animation: qac3-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac3-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* =========================================================================
   sec3 css — RESPONSIVE
   ========================================================================= */

/* Tablet · ≤ 900px */
@media (max-width: 900px) {
    .qac3-stage {
        max-width: 560px;
    }

    .qac3-mod {
        --r: 38%;
        width: 78px;
        height: 78px;
        gap: 4px;
        padding: 8px;
    }

    .qac3-mod-icon {
        width: 30px;
        height: 30px;
    }

    .qac3-mod-lbl {
        font-size: 10.5px;
    }

    .qac3-caps {
        grid-template-columns: repeat(2, 1fr);
    }

    .qac3-pricestrip {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .qac3-pricestrip-arrow {
        transform: rotate(90deg);
    }
}

/* Phone · ≤ 600px */
@media (max-width: 600px) {
    .qac3 {
        padding: clamp(64px, 9vh, 90px) 0;
    }

    .qac3-stage {
        max-width: 380px;
    }

    .qac3-mod {
        --r: 36%;
        width: 64px;
        height: 64px;
    }

    .qac3-mod-icon {
        width: 26px;
        height: 26px;
    }

    .qac3-mod-lbl {
        font-size: 9.5px;
    }

    .qac3-mod-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Disable pulses on phone — too dense at small size */
    .qac3-pulse-layer {
        display: none;
    }

    .qac3-core {
        width: 84px;
        height: 84px;
    }

    .qac3-core-mark {
        width: 60px;
        height: 60px;
    }

        .qac3-core-mark svg {
            width: 42px;
            height: 42px;
        }

    .qac3-core-label {
        font-size: 11px;
    }

    .qac3-core-pulse {
        width: 60px;
        height: 60px;
    }

    .qac3-caps {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   sec3 css — REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac3-eyebrow,
    .qac3-eyebrow-dot,
    .qac3-h2-word,
    .qac3-h2-accent,
    .qac3-sub,
    .qac3-stage,
    .qac3-orbit-spoke,
    .qac3-core,
    .qac3-core-mark,
    .qac3-core-pulse,
    .qac3-core-halo,
    .qac3-bg-aurora,
    .qac3-mod,
    .qac3-pulse,
    .qac3-cap,
    .qac3-pricestrip,
    .qac3-pivot,
    .qac3-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .qac3-h2-word, .qac3-cap, .qac3-pricestrip, .qac3-pivot, .qac3-eyebrow, .qac3-sub {
        transform: none !important;
    }
    /* Modules keep their translate(-50%, -50%) centering — don't strip it */
    .qac3-pulse {
        display: none !important;
    }

    .qac3-orbit-spoke {
        stroke-dashoffset: 0 !important;
    }
}
/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec3 css — DELTA · OUTER SATELLITES (4 always-on systems)
   Append this block at the end of the existing sec3 css block.
   Realtime hub · Reminder engine · Patient portal · Pharmacy
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── Outer satellite ring container ─── */
.qac3-satellites {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Slow counter-rotation gives "always-on background" feeling */
    animation: qac3-satRotate 90s linear infinite;
    transform-origin: center center;
}

@keyframes qac3-satRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ─── Each satellite · positioned via cos/sin at outer radius (~57%) ─── */
.qac3-sat {
    --r: 57%;
    position: absolute;
    top: calc(50% + var(--r) * sin(var(--angle)));
    left: calc(50% + var(--r) * cos(var(--angle)));
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(168, 85, 247, 0.20);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.05), 0 4px 14px rgba(0, 0, 0, 0.30);
    color: var(--qac-ink-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* Counter-rotate the satellite content so labels stay upright as the parent rotates */
    animation: qac3-satCounter 90s linear infinite;
    opacity: 0;
    transition: opacity .7s var(--qac-ease-out) calc(var(--si, 0) * 120ms + 2400ms);
}

.qac3.qac3-on .qac3-sat {
    opacity: 1;
}

@keyframes qac3-satCounter {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.qac3-sat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: var(--qac-vi-3);
    flex-shrink: 0;
}

.qac3-sat-lbl {
    line-height: 1;
    color: var(--qac-ink-3);
}

/* Tiny pulsing live-dot on each satellite — signals "running right now" */
.qac3-sat-pulse {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18), 0 0 6px rgba(168, 85, 247, 0.55);
    animation: qac3-satLive 2.4s ease-in-out infinite;
}

@keyframes qac3-satLive {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.55;
    }
}


/* ─── RESPONSIVE: hide satellite labels on tablet, hide whole ring on phone ─── */
@media (max-width: 900px) {
    .qac3-sat {
        --r: 56%;
        padding: 4px 8px 4px 4px;
        font-size: 9.5px;
    }

    .qac3-sat-icon {
        width: 18px;
        height: 18px;
    }

        .qac3-sat-icon svg {
            width: 11px;
            height: 11px;
        }
}

@media (max-width: 600px) {
    /* On phone the satellite ring would clash with the inner ring — hide it */
    .qac3-satellites {
        display: none;
    }
}


/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    .qac3-satellites,
    .qac3-sat,
    .qac3-sat-pulse {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    /* Keep counter-rotate identity transform so labels don't flip */
    .qac3-sat {
        transform: translate(-50%, -50%) !important;
    }
}




















































/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec4 css — qac4 · AI-NATIVE CORE
   "Most clinic software has AI bolted on. Qlynic was built around it."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec4: section root · cyan/teal "lab" mood ─── */
.qac4 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 12vh, 130px) 0 clamp(80px, 12vh, 130px);
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Local accent token: cyan/teal — distinguishes sec4 from sec3 violet */
    --qac4-cy: #06b6d4;
    --qac4-cy-2: #22d3ee;
    --qac4-cy-3: #67e8f9;
    --qac4-cy-soft: rgba(34, 211, 238, 0.20);
}


/* ─── sec4: bg layer 1 — DOT GRID ─── */
.qac4-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
}


/* ─── sec4: bg layer 2 — CYAN GLOW (centered, subtle) ─── */
.qac4-bg-glow {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 60%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(34, 211, 238, 0.18) 0%, transparent 60%), radial-gradient(ellipse 75% 40% at 50% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    filter: blur(40px);
    animation: qac4-glowDrift 14s ease-in-out infinite alternate;
}

@keyframes qac4-glowDrift {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.04);
        opacity: 1;
    }
}


/* ─── sec4: bg layer 3 — SCANLINES (live-system feel) ─── */
.qac4-bg-scan {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient( 0deg, rgba(34, 211, 238, 0.03) 0px, rgba(34, 211, 238, 0.03) 1px, transparent 1px, transparent 4px );
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 80%);
    opacity: 0.6;
    animation: qac4-scanShift 8s linear infinite;
}

@keyframes qac4-scanShift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 32px;
    }
}


/* ─── sec4: bg layer 4 — VIGNETTE ─── */
.qac4-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}


/* ─── sec4: content wrap ─── */
.qac4-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── sec4: eyebrow ─── */
.qac4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.20);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac4.qac4-on .qac4-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac4-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), 0 0 8px rgba(34, 211, 238, 0.65);
    animation: qac4-eyebrowPulse 2.6s ease-in-out infinite;
}

@keyframes qac4-eyebrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac4-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac4-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac4-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}


/* ─── sec4: H2 ─── */
.qac4-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
}

.qac4-h2-line {
    display: block;
}

.qac4-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 65ms + 220ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 65ms + 220ms);
}

    .qac4-h2-word:last-child {
        margin-right: 0;
    }

.qac4.qac4-on .qac4-h2-word {
    opacity: 1;
    transform: translateY(0);
}

/* "bolted on" — strikethrough for the rejected concept */
.qac4-h2-strike {
    color: var(--qac-ink-3);
    position: relative;
}

    .qac4-h2-strike::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 56%;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.55) 25%, rgba(239, 68, 68, 0.75) 75%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .9s var(--qac-ease-out) calc(var(--wi, 0) * 65ms + 600ms);
    }

.qac4.qac4-on .qac4-h2-strike::after {
    transform: scaleX(1);
}

/* "built around it" — the brand gradient affirmation */
.qac4-h2-accent {
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, #818cf8 50%, #c084fc 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 22px rgba(34, 211, 238, 0.35));
    animation: qac4-accentShift 9s ease-in-out infinite;
}

@keyframes qac4-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── sec4: subhead ─── */
.qac4-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 72px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac4.qac4-on .qac4-sub {
    opacity: 1;
    transform: translateY(0);
}

.qac4-sub-em {
    color: var(--qac-ink-2);
    font-weight: 600;
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, var(--qac-vi-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* =========================================================================
   THE LIVE DEMO · simulated EMR encounter card
   ========================================================================= */

.qac4-demo {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto clamp(56px, 7vw, 96px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s var(--qac-ease-out) 1300ms, transform .9s var(--qac-ease-out) 1300ms;
}

.qac4.qac4-on .qac4-demo {
    opacity: 1;
    transform: translateY(0);
}


/* ─── Floating sparkles around the card (ambient) ─── */
.qac4-demo-sparkles {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    z-index: 0;
}

.qac4-demo-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--qac4-cy-2) 50%, transparent 100%);
    box-shadow: 0 0 6px var(--qac4-cy-2), 0 0 14px rgba(34, 211, 238, 0.5);
    opacity: 0;
}

.qac4.qac4-on .qac4-demo-sparkle {
    animation: qac4-sparkleDrift 6s ease-in-out infinite;
}

.qac4-demo-sparkle--1 {
    top: 8%;
    left: -2%;
    animation-delay: 0s;
}

.qac4-demo-sparkle--2 {
    top: 24%;
    right: -1%;
    animation-delay: 1.4s;
    width: 3px;
    height: 3px;
}

.qac4-demo-sparkle--3 {
    top: 60%;
    left: -3%;
    animation-delay: 2.8s;
}

.qac4-demo-sparkle--4 {
    top: 78%;
    right: -2%;
    animation-delay: 0.7s;
    width: 5px;
    height: 5px;
}

.qac4-demo-sparkle--5 {
    top: 42%;
    right: -3%;
    animation-delay: 3.6s;
}

.qac4-demo-sparkle--6 {
    top: 90%;
    left: 4%;
    animation-delay: 4.2s;
    width: 3px;
    height: 3px;
}

@keyframes qac4-sparkleDrift {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    20% {
        opacity: 0.9;
        transform: translate(0, -4px) scale(1);
    }

    50% {
        opacity: 0.55;
        transform: translate(-3px, -10px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(2px, -16px) scale(0.5);
    }
}


/* ─── DEMO CARD frame ─── */
.qac4-demo-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(99, 102, 241, 0.06), 0 24px 60px rgba(0, 0, 0, 0.40), 0 0 80px rgba(34, 211, 238, 0.08);
    overflow: hidden;
    text-align: left;
    transition: box-shadow .4s var(--qac-ease), border-color .4s var(--qac-ease);
}

.qac4-demo-card--complete {
    border-color: rgba(34, 211, 238, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(99, 102, 241, 0.10), 0 24px 60px rgba(0, 0, 0, 0.40), 0 0 100px rgba(34, 211, 238, 0.18);
}


/* ─── Window header ─── */
.qac4-demo-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.qac4-demo-head-dots {
    display: inline-flex;
    gap: 6px;
}

.qac4-demo-head-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

    .qac4-demo-head-dot:nth-child(1) {
        background: rgba(239, 68, 68, 0.55);
    }

    .qac4-demo-head-dot:nth-child(2) {
        background: rgba(245, 158, 11, 0.55);
    }

    .qac4-demo-head-dot:nth-child(3) {
        background: rgba(34, 197, 94, 0.55);
    }

.qac4-demo-head-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--qac-ink-3);
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

    .qac4-demo-head-tab svg {
        color: var(--qac4-cy-2);
    }

.qac4-demo-head-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.qac4-demo-head-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0.04em;
}

.qac4-demo-head-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.65);
    animation: qac4-livedotPulse 2s ease-in-out infinite;
}

@keyframes qac4-livedotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.4);
    }
}


/* ─── Patient row ─── */
.qac4-demo-patient {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.qac4-demo-patient-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--qac4-cy-2);
}

.qac4-demo-patient-info {
    flex: 1;
    min-width: 0;
}

.qac4-demo-patient-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qac-ink);
    letter-spacing: 0.02em;
}

.qac4-demo-patient-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--qac-ink-4);
}

.qac4-demo-patient-vitals {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.qac4-demo-vital {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.qac4-demo-vital-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--qac-ink-4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.qac4-demo-vital-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qac4-cy-3);
    letter-spacing: 0.02em;
}


/* ─── Note / chief-complaint typing area ─── */
.qac4-demo-note {
    padding: 18px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.qac4-demo-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qac4-demo-note-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--qac-ink-4);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.qac4-demo-note-cur {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--qac4-cy-2);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.65);
    animation: qac4-cursorBlink 1s ease-in-out infinite;
}

@keyframes qac4-cursorBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.qac4-demo-note-body {
    min-height: 56px;
}

.qac4-demo-note-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.55;
    color: var(--qac-ink);
    letter-spacing: -0.005em;
}

    /* TypeIt cursor styling (it injects a span we can target) */
    .qac4-demo-note-text .ti-cursor {
        color: var(--qac4-cy-2);
        font-weight: 400;
    }


/* ─── "Claude is reading" thinking indicator ─── */
.qac4-demo-thinking {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.04) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s var(--qac-ease-out), transform .4s var(--qac-ease-out);
}

.qac4-demo-thinking--in {
    opacity: 1;
    transform: translateY(0);
}

.qac4-demo-thinking--done {
    opacity: 0.55;
}

.qac4-demo-thinking-orb {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qac4-demo-thinking-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.85);
    animation: qac4-thinkCore 1.6s ease-in-out infinite;
}

@keyframes qac4-thinkCore {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.7;
    }
}

.qac4-demo-thinking-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.55);
    animation: qac4-thinkRing 2s ease-out infinite;
    opacity: 0;
}

.qac4-demo-thinking-ring--2 {
    animation-delay: 1s;
}

@keyframes qac4-thinkRing {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    20% {
        opacity: 0.8;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.qac4-demo-thinking-txt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qac4-cy-3);
    letter-spacing: 0.02em;
}

.qac4-demo-thinking-dots {
    display: inline-flex;
    gap: 3px;
}

    .qac4-demo-thinking-dots span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--qac4-cy-2);
        animation: qac4-thinkDot 1.4s ease-in-out infinite;
    }

        .qac4-demo-thinking-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .qac4-demo-thinking-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes qac4-thinkDot {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}


/* ─── Suggestion drawer · ALWAYS RENDERED, height stable ─── */
.qac4-demo-drawer {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.04) 0%, rgba(99, 102, 241, 0.02) 100%);
    /* Always rendered at full height — page never jumps. The body/save inside
       fade in via their own opacity transitions when ready. */
    opacity: 1;
}

.qac4-demo-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.10);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.06) 0%, transparent 100%);
    /* Header dims when waiting for AI, brightens when suggestions arrive */
    opacity: 0.55;
    transition: opacity .35s var(--qac-ease);
}

.qac4-demo-drawer--open .qac4-demo-drawer-head {
    opacity: 1;
}

.qac4-demo-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(34, 211, 238, 0.15);
    color: var(--qac4-cy-2);
}

.qac4-demo-drawer-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qac-ink);
    letter-spacing: -0.01em;
}

.qac4-demo-drawer-time {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--qac-ink-4);
    letter-spacing: 0.04em;
}


.qac4-demo-drawer-body {
    padding: 14px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Reserve space for 3 suggestions so the card's height never changes.
       Each suggestion row averages ~76px (head + chips + spacing). */
    min-height: 250px;
}


/* ─── Each suggestion row ─── */
.qac4-demo-sugg {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s var(--qac-ease-out), transform .45s var(--qac-ease-out);
}

.qac4-demo-sugg--in {
    opacity: 1;
    transform: translateY(0);
}

.qac4-demo-sugg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.qac4-demo-sugg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
}

.qac4-demo-sugg-icon--diff {
    background: rgba(168, 85, 247, 0.12);
    color: var(--qac-vi-3);
    border: 1px solid rgba(168, 85, 247, 0.22);
}

.qac4-demo-sugg-icon--test {
    background: rgba(34, 211, 238, 0.12);
    color: var(--qac4-cy-2);
    border: 1px solid rgba(34, 211, 238, 0.22);
}

.qac4-demo-sugg-icon--ok {
    background: rgba(34, 197, 94, 0.10);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.qac4-demo-sugg-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
}

.qac4-demo-sugg-conf {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--qac-ink-4);
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 100px;
    letter-spacing: 0.04em;
}

.qac4-demo-sugg-conf--ok {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.08);
}

.qac4-demo-sugg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 32px;
}

.qac4-demo-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
}

.qac4-demo-sugg-note {
    padding-left: 32px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--qac-ink-3);
}


/* ─── Drawer footer · save pill ─── */
.qac4-demo-drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(34, 211, 238, 0.08);
    margin-top: 8px;
}

.qac4-demo-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, var(--qac4-cy) 0%, var(--qac-vi) 100%);
    border: 0;
    border-radius: 100px;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: not-allowed;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.30), 0 0 0 1px rgba(34, 211, 238, 0.20);
    transition: opacity .35s var(--qac-ease), filter .35s var(--qac-ease), box-shadow .3s var(--qac-ease);
    pointer-events: none;
    /* Default = disabled visual — desaturated, dim. The button is ALWAYS in
       the layout (no appearing/disappearing) so the card height is stable. */
    opacity: 0.45;
    filter: grayscale(0.55) brightness(0.85);
}

/* When the demo completes, the JS adds .qac4-demo-save--pulse and the button
   becomes its full-color self with the pulsing ring. */
.qac4-demo-save--pulse {
    cursor: default;
    opacity: 1;
    filter: none;
    animation: qac4-savePulse 1.8s ease-in-out infinite;
}

@keyframes qac4-savePulse {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(34, 211, 238, 0.30), 0 0 0 1px rgba(34, 211, 238, 0.20), 0 0 0 0 rgba(34, 211, 238, 0);
    }

    50% {
        box-shadow: 0 4px 18px rgba(34, 211, 238, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 0 8px rgba(34, 211, 238, 0.10);
    }
}

.qac4-demo-save-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
}

.qac4-demo-drawer-foot-fine {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--qac-ink-4);
    letter-spacing: 0.04em;
}


/* ─── Claude chip · lives in the header beside the Live badge ─── */
.qac4-demo-claudechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--qac4-cy-3);
    letter-spacing: 0.06em;
}

.qac4-demo-claudechip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.65);
    animation: qac4-livedotPulse 2.4s ease-in-out infinite;
}

.qac4-demo-foot {
    /* Footnote no longer rendered — replaced by the right-aligned stack
       inside the drawer footer (see qac4-demo-drawer-foot-fine below). */
    display: none;
}


/* =========================================================================
   THE FOUR PILLARS
   ========================================================================= */

.qac4-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
    margin: 0 auto clamp(36px, 4.6vw, 56px);
    max-width: 1100px;
    text-align: left;
}

.qac4-pillar {
    position: relative;
    padding: clamp(18px, 1.8vw, 22px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(14px);
}

.qac4.qac4-on .qac4-pillar {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s var(--qac-ease-out) calc(var(--ci, 0) * 80ms + 1900ms), transform .6s var(--qac-ease-out) calc(var(--ci, 0) * 80ms + 1900ms), border-color .3s var(--qac-ease);
}

.qac4-pillar:hover {
    border-color: rgba(34, 211, 238, 0.30);
    transform: translateY(-2px);
}

.qac4-pillar-glow {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(34, 211, 238, 0.10) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--qac-ease);
}

.qac4-pillar:hover .qac4-pillar-glow {
    opacity: 1;
}

.qac4-pillar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.qac4-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--qac4-cy-2);
}

.qac4-pillar-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--qac-ink);
    margin: 0;
    letter-spacing: -0.012em;
}

.qac4-pillar-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--qac-ink-3);
    margin: 0 0 14px;
}

.qac4-pillar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.20);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--qac4-cy-3);
    letter-spacing: 0.04em;
}

.qac4-pillar-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac4-cy-2) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.55);
    animation: qac4-livedotPulse 2.4s ease-in-out infinite;
}


/* =========================================================================
   AUDIT TRAIL TRUST LINE
   ========================================================================= */

.qac4-audit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12.5px, 1.05vw, 14px);
    line-height: 1.4;
    color: var(--qac-ink-3);
    letter-spacing: -0.005em;
    margin: 0 auto clamp(28px, 3.4vw, 40px);
    max-width: 760px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s var(--qac-ease-out) 2400ms, transform .8s var(--qac-ease-out) 2400ms;
}

.qac4.qac4-on .qac4-audit {
    opacity: 1;
    transform: translateY(0);
}

.qac4-audit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: var(--qac4-cy-2);
    flex-shrink: 0;
}


/* =========================================================================
   PIVOT to sec5
   ========================================================================= */

.qac4-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
}

.qac4.qac4-on .qac4-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 2700ms, transform .7s var(--qac-ease-out) 2700ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac4-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.06);
    transform: translateY(-1px);
}

.qac4-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac4-cy) 0%, var(--qac-vi-2) 100%);
    color: #fff;
    animation: qac4-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac4-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* =========================================================================
   sec4 css — RESPONSIVE
   ========================================================================= */

@media (max-width: 900px) {
    .qac4-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .qac4-demo-patient-vitals {
        display: none;
    }

    .qac4-demo-head-tab {
        font-size: 11.5px;
        padding: 4px 10px;
    }
}

@media (max-width: 600px) {
    .qac4 {
        padding: clamp(64px, 9vh, 90px) 0;
    }

    .qac4-pillars {
        grid-template-columns: 1fr;
    }

    /* Compact demo card on phone */
    .qac4-demo-card {
        border-radius: 14px;
    }

    .qac4-demo-head {
        padding: 12px 14px;
        gap: 10px;
    }

    .qac4-demo-head-tab span {
        display: none;
    }
    /* keep just the icon */
    .qac4-demo-patient {
        padding: 14px;
        flex-wrap: wrap;
    }

    .qac4-demo-note {
        padding: 14px 16px 16px;
    }

    .qac4-demo-thinking {
        padding: 12px 14px;
        gap: 10px;
    }

    .qac4-demo-thinking-txt {
        font-size: 11px;
    }

    .qac4-demo-drawer-head {
        padding: 12px 14px;
    }

    .qac4-demo-drawer-body {
        padding: 12px 14px 6px;
    }

    .qac4-demo-sugg-conf {
        display: none;
    }
    /* save space on tiny phones */
    .qac4-demo-sugg-chips {
        padding-left: 0;
    }

    .qac4-demo-sugg-note {
        padding-left: 0;
    }

    .qac4-demo-drawer-foot {
        padding: 12px 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .qac4-demo-claudechip {
        display: none;
    }

    .qac4-demo-foot {
        display: none;
    }
}


/* =========================================================================
   sec4 css — REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac4-eyebrow,
    .qac4-eyebrow-dot,
    .qac4-h2-word,
    .qac4-h2-strike::after,
    .qac4-h2-accent,
    .qac4-sub,
    .qac4-bg-glow,
    .qac4-bg-scan,
    .qac4-demo,
    .qac4-demo-sparkle,
    .qac4-demo-head-pill-dot,
    .qac4-demo-note-cur,
    .qac4-demo-thinking,
    .qac4-demo-thinking-core,
    .qac4-demo-thinking-ring,
    .qac4-demo-thinking-dots span,
    .qac4-demo-drawer,
    .qac4-demo-sugg,
    .qac4-demo-save,
    .qac4-demo-claudechip-dot,
    .qac4-pillar,
    .qac4-pillar-chip-dot,
    .qac4-audit,
    .qac4-pivot,
    .qac4-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .qac4-h2-word, .qac4-sub, .qac4-demo, .qac4-pillar, .qac4-audit, .qac4-pivot {
        transform: none !important;
    }

    .qac4-h2-strike::after {
        transform: scaleX(1) !important;
    }

    .qac4-demo-drawer {
        max-height: none !important;
    }

    .qac4-demo-thinking--in,
    .qac4-demo-drawer--open,
    .qac4-demo-sugg--in { /* end-state classes already handle visibility */
    }
}
/* =========================================================================
   sec4 css — STABILITY BLOCK
   The card no longer needs a forced min-height because:
     • drawer is always rendered at full height
     • drawer body has min-height: 250px reserved for 3 suggestions
     • save button always renders (just toggles disabled visual state)
   So the card grows ONCE on initial reveal and never shifts during loops.
   ========================================================================= */

/* Card flex layout (so future content distributes cleanly) */
.qac4-demo-card {
    display: flex;
    flex-direction: column;
}

/* Drawer foot — pill on left, fine-print stack on right */
.qac4-demo-drawer-foot {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
}

.qac4-demo-drawer-foot-fine {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    line-height: 1.4;
}

    .qac4-demo-drawer-foot-fine::before {
        content: 'Illustrative · not medical advice';
        font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        font-size: 9.5px;
        color: var(--qac-ink-5);
        letter-spacing: 0.04em;
    }


@media (max-width: 600px) {
    .qac4-demo-drawer-foot-fine {
        align-items: flex-start;
        text-align: left;
    }
}












































/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec5 css — qac5 · TRUST & SOVEREIGNTY
   "Your data never leaves Canada. Your AI never goes dark."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec5: section root ─── */
.qac5 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(80px, 12vh, 130px) 0;
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Local accent — institutional emerald + subtle Canada-red hint */
    --qac5-em: #10b981;
    --qac5-em-2: #34d399;
    --qac5-em-3: #6ee7b7;
    --qac5-rd: rgba(220, 38, 38, 0.06);
}


/* ─── sec5: bg layer 1 — DOT GRID ─── */
.qac5-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
}


/* ─── sec5: bg layer 2 — GLOW · subtle Canada-red wash + emerald accent ─── */
.qac5-bg-glow {
    position: absolute;
    inset: -10% -10% 30% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 35% at 50% 8%, rgba(220, 38, 38, 0.08) 0%, transparent 65%), radial-gradient(ellipse 60% 40% at 25% 30%, rgba(16, 185, 129, 0.10) 0%, transparent 65%), radial-gradient(ellipse 55% 35% at 78% 35%, rgba(96, 165, 250, 0.08) 0%, transparent 65%);
    filter: blur(30px) saturate(1.05);
    opacity: 0.75;
}


/* ─── sec5: bg layer 3 — VIGNETTE ─── */
.qac5-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}


/* ─── sec5: content wrap ─── */
.qac5-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── sec5: eyebrow pill ─── */
.qac5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac5.qac5-on .qac5-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac5-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac5-em-2) 0%, var(--qac-az-3) 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16), 0 0 8px rgba(16, 185, 129, 0.55);
    animation: qac5-eyebrowPulse 2.6s ease-in-out infinite;
}

@keyframes qac5-eyebrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac5-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac5-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac5-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}


/* ─── sec5: shield mark · single elegant draw-in ─── */
.qac5-shield {
    display: inline-block;
    margin-bottom: clamp(20px, 2.6vw, 32px);
    filter: drop-shadow(0 8px 30px rgba(168, 85, 247, 0.35));
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity .8s var(--qac-ease-out) 320ms, transform .8s var(--qac-ease-out) 320ms;
}

.qac5.qac5-on .qac5-shield {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qac5-shield-stroke {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 1.4s var(--qac-ease-out) 600ms;
}

.qac5.qac5-on .qac5-shield-stroke {
    stroke-dashoffset: 0;
}

.qac5-shield-check {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset .8s var(--qac-ease-out) 1700ms;
}

.qac5.qac5-on .qac5-shield-check {
    stroke-dashoffset: 0;
}


/* ─── sec5: H2 ─── */
.qac5-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
}

.qac5-h2-line {
    display: block;
}

.qac5-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 280ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 70ms + 280ms);
}

    .qac5-h2-word:last-child {
        margin-right: 0;
    }

.qac5.qac5-on .qac5-h2-word {
    opacity: 1;
    transform: translateY(0);
}

.qac5-h2-accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 28px rgba(99, 102, 241, 0.35));
    animation: qac5-accentShift 9s ease-in-out infinite;
}

@keyframes qac5-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── sec5: subhead ─── */
.qac5-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 760px;
    margin: 0 auto clamp(48px, 6vw, 72px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac5.qac5-on .qac5-sub {
    opacity: 1;
    transform: translateY(0);
}

.qac5-sub-em {
    color: var(--qac-ink-2);
    font-weight: 600;
    background: linear-gradient(135deg, var(--qac5-em-2) 0%, var(--qac-vi-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* =========================================================================
   THE TRUST DASHBOARD · 4-quadrant grid
   ========================================================================= */

.qac5-trust {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
    max-width: 1100px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    text-align: left;
}

/* Live scan line that sweeps top-to-bottom every 8s — "alive and watching" */
.qac5-trust-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.28) 30%, rgba(168, 85, 247, 0.40) 50%, rgba(96, 165, 250, 0.28) 70%, transparent 100%);
    filter: blur(0.5px);
    pointer-events: none;
    opacity: 0;
    z-index: 4;
}

.qac5.qac5-on .qac5-trust-scan {
    animation: qac5-scanSweep 8s ease-in-out infinite 2200ms;
}

@keyframes qac5-scanSweep {
    0% {
        top: 0%;
        opacity: 0;
    }

    8% {
        opacity: 0.7;
    }

    50% {
        top: 100%;
        opacity: 0.7;
    }

    58% {
        opacity: 0;
    }

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


/* ─── Each tile · institutional, calm, clean ─── */
.qac5-tile {
    position: relative;
    padding: clamp(22px, 2.2vw, 28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color .35s var(--qac-ease), transform .35s var(--qac-ease);
    opacity: 0;
    transform: translateY(16px);
}

.qac5.qac5-on .qac5-tile {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 1500ms), transform .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 1500ms), border-color .35s var(--qac-ease);
}

.qac5-tile:hover {
    border-color: rgba(16, 185, 129, 0.30);
    transform: translateY(-2px);
}

.qac5-tile-glow {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(16, 185, 129, 0.10) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--qac-ease);
}

.qac5-tile:hover .qac5-tile-glow {
    opacity: 1;
}


/* ─── Tile header · icon + title + status pill ─── */
.qac5-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.qac5-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: var(--qac5-em-2);
    flex-shrink: 0;
}

/* Per-tile icon tint overrides for visual variety */
.qac5-tile--canada .qac5-tile-icon {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.22);
    color: #f87171;
}

.qac5-tile--audit .qac5-tile-icon {
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.22);
    color: var(--qac-vi-3);
}

.qac5-tile--encryption .qac5-tile-icon {
    background: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.22);
    color: var(--qac-az-3);
}

.qac5-tile--compliance .qac5-tile-icon {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.22);
    color: var(--qac5-em-2);
}

.qac5-tile-h3 {
    flex: 1;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(15px, 1.35vw, 17px);
    font-weight: 700;
    color: var(--qac-ink);
    margin: 0;
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.qac5-tile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.20);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--qac5-em-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.qac5-tile-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--qac5-em-2);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.55);
    animation: qac5-statusBlink 2.4s ease-in-out infinite;
}

@keyframes qac5-statusBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}


/* ─── Tile body ─── */
.qac5-tile-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.05vw, 14px);
    line-height: 1.6;
    color: var(--qac-ink-3);
    margin: 0 0 14px;
}

    .qac5-tile-body strong {
        color: var(--qac-ink-2);
        font-weight: 600;
    }

    .qac5-tile-body em {
        font-style: italic;
        color: var(--qac-ink-2);
    }


/* ─── Tile list (3 quick bullets) ─── */
.qac5-tile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

    .qac5-tile-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 4px 0;
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--qac-ink-3);
    }

.qac5-tile-list-dot {
    flex-shrink: 0;
    margin-top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac5-em-2) 0%, var(--qac-az-3) 100%);
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}


/* ─── Compliance badge variant (last tile) ─── */
.qac5-tile-list--badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .qac5-tile-list--badges li {
        padding: 0;
    }

.qac5-tile-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--qac5-em-3);
    letter-spacing: 0.04em;
}


/* =========================================================================
   QUIET STATUS STRIP
   ========================================================================= */

.qac5-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12.5px, 1.05vw, 14px);
    line-height: 1.45;
    color: var(--qac-ink-3);
    letter-spacing: -0.005em;
    margin: 0 auto clamp(28px, 3.4vw, 40px);
    max-width: 720px;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s var(--qac-ease-out) 2400ms, transform .8s var(--qac-ease-out) 2400ms;
}

.qac5.qac5-on .qac5-status {
    opacity: 1;
    transform: translateY(0);
}

.qac5-status strong {
    color: var(--qac-ink);
    font-weight: 700;
}

.qac5-status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac5-em-2) 0%, var(--qac-az-3) 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16), 0 0 8px rgba(16, 185, 129, 0.55);
    animation: qac5-statusBlink 2.4s ease-in-out infinite;
}


/* =========================================================================
   PIVOT to sec6
   ========================================================================= */

.qac5-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
}

.qac5.qac5-on .qac5-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 2700ms, transform .7s var(--qac-ease-out) 2700ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac5-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.06);
    transform: translateY(-1px);
}

.qac5-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    color: #fff;
    animation: qac5-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac5-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* =========================================================================
   sec5 css — RESPONSIVE
   ========================================================================= */

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

    .qac5-trust-scan {
        display: none;
    }
    /* scan looks weird on a 1-col layout */
}

@media (max-width: 600px) {
    .qac5 {
        padding: clamp(64px, 9vh, 90px) 0;
    }

    .qac5-tile {
        padding: 20px 18px;
    }

    .qac5-tile-head {
        gap: 10px;
        flex-wrap: wrap;
    }

    .qac5-tile-h3 {
        font-size: 15px;
    }

    .qac5-tile-status {
        font-size: 9.5px;
    }

    .qac5-status {
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
        line-height: 1.5;
    }
}


/* =========================================================================
   sec5 css — REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qac5-eyebrow,
    .qac5-eyebrow-dot,
    .qac5-shield,
    .qac5-shield-stroke,
    .qac5-shield-check,
    .qac5-h2-word,
    .qac5-h2-accent,
    .qac5-sub,
    .qac5-trust-scan,
    .qac5-tile,
    .qac5-tile-status-dot,
    .qac5-status,
    .qac5-status-dot,
    .qac5-pivot,
    .qac5-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .qac5-h2-word, .qac5-shield, .qac5-sub, .qac5-tile, .qac5-status, .qac5-pivot, .qac5-eyebrow {
        transform: none !important;
    }

    .qac5-shield-stroke, .qac5-shield-check {
        stroke-dashoffset: 0 !important;
    }

    .qac5-trust-scan {
        display: none !important;
    }
}









































/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec6 css — qac6 · WHERE QLYNIC WORKS
   "Forged in Alberta. Designed for the world."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec6: section root ─── */
.qac6 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(96px, 14vh, 150px) 0 clamp(96px, 14vh, 150px);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Local accent: warm amber (Calgary Tower red) + brand violet */
    --qac6-warm: #f59e0b;
    --qac6-warm-2: #fbbf24;
    --qac6-warm-3: #fcd34d;
    --qac6-rd: #ef4444;
}


/* ═════════════════════════════════════════════════════════════════════════
   BACKGROUND LAYERS · photo + 4 overlays for depth and contrast
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Layer 1: PHOTO (Calgary night, full bleed) ─── */
.qac6-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.qac6-bg-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    /* Slight desaturation + brightness drop so the photo doesn't fight the content.
       The photo provides mood, the overlays provide contrast. */
    filter: saturate(0.85) brightness(0.55) contrast(1.05);
    /* Gentle slow zoom over 40s — Ken Burns effect, very subtle */
    animation: qac6-photoZoom 40s ease-in-out infinite alternate;
}

@keyframes qac6-photoZoom {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.06) translate(-1%, -1%);
    }
}


/* ─── Layer 2: MOOD OVERLAY (deep violet→black, anchors content readability) ─── */
.qac6-bg-mood {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 8, 10, 0.78) 0%, rgba(13, 15, 26, 0.62) 35%, rgba(20, 23, 42, 0.58) 65%, rgba(7, 8, 10, 0.85) 100%);
}


/* ─── Layer 3: AURORA (brand wash · subtle, non-competing) ─── */
.qac6-bg-aurora {
    position: absolute;
    inset: -10% -10% 30% -10%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 35% at 25% 20%, rgba(96, 165, 250, 0.14) 0%, transparent 65%), radial-gradient(ellipse 55% 35% at 78% 30%, rgba(168, 85, 247, 0.16) 0%, transparent 65%), radial-gradient(ellipse 70% 35% at 50% 8%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    filter: blur(20px) saturate(1.05);
    opacity: 0.85;
    mix-blend-mode: screen;
    animation: qac6-auroraDrift 22s ease-in-out infinite alternate;
}

@keyframes qac6-auroraDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: -3% 2%, 3% -2%, 2% 3%;
    }
}


/* ─── Layer 4: VIGNETTE (focus the eye on the center) ─── */
.qac6-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(7, 8, 10, 0.55) 100%);
}


/* ─── Layer 5: GRAIN (micro-texture, premium feel) ─── */
.qac6-bg-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.5;
}


/* ═════════════════════════════════════════════════════════════════════════
   CONTENT WRAP
   ═════════════════════════════════════════════════════════════════════════ */

.qac6-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── sec6: eyebrow pill ─── */
.qac6-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(7, 8, 10, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.40);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac6.qac6-on .qac6-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac6-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac6-warm) 0%, var(--qac6-rd) 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16), 0 0 8px rgba(245, 158, 11, 0.65);
    animation: qac6-eyebrowPulse 2.6s ease-in-out infinite;
}

@keyframes qac6-eyebrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac6-eyebrow-label {
    color: rgba(255, 255, 255, 0.92);
}

.qac6-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac6-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.62);
}


/* ─── sec6: H2 ─── */
.qac6-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(32px, 5.6vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.042em;
    color: var(--qac-ink);
    margin: 0 auto clamp(22px, 2.8vw, 34px);
    max-width: 1100px;
    text-shadow: 0 4px 30px rgba(7, 8, 10, 0.65);
}

.qac6-h2-line {
    display: block;
}

.qac6-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--qac-ease-out) calc(var(--wi, 0) * 80ms + 280ms), transform .8s var(--qac-ease-out) calc(var(--wi, 0) * 80ms + 280ms);
}

    .qac6-h2-word:last-child {
        margin-right: 0;
    }

.qac6.qac6-on .qac6-h2-word {
    opacity: 1;
    transform: translateY(0);
}

/* "Alberta." — warm amber (Calgary Tower red glow) */
.qac6-h2-warm {
    background: linear-gradient(135deg, var(--qac6-warm-2) 0%, var(--qac6-warm) 60%, var(--qac6-rd) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 24px rgba(245, 158, 11, 0.35));
    animation: qac6-warmShift 9s ease-in-out infinite;
}

@keyframes qac6-warmShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* "the world." — brand azure→violet gradient */
.qac6-h2-accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 28px rgba(99, 102, 241, 0.40));
    animation: qac6-accentShift 9s ease-in-out infinite;
}

@keyframes qac6-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── sec6: subhead ─── */
.qac6-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.62;
    color: var(--qac-ink-2);
    max-width: 800px;
    margin: 0 auto clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.005em;
    font-weight: 400;
    text-shadow: 0 2px 16px rgba(7, 8, 10, 0.55);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1100ms, transform .7s var(--qac-ease-out) 1100ms;
}

.qac6.qac6-on .qac6-sub {
    opacity: 1;
    transform: translateY(0);
}

.qac6-sub-em {
    color: var(--qac-ink);
    font-weight: 600;
}


/* ─── sec6: origin line · "Calgary HQ · 51.04°N · 114.07°W" ─── */
.qac6-origin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(7, 8, 10, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 100px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-bottom: clamp(56px, 7vw, 90px);
    box-shadow: 0 4px 24px rgba(7, 8, 10, 0.45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s var(--qac-ease-out) 1400ms, transform .8s var(--qac-ease-out) 1400ms;
}

.qac6.qac6-on .qac6-origin {
    opacity: 1;
    transform: translateY(0);
}

.qac6-origin-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--qac6-warm-2);
    flex-shrink: 0;
}

.qac6-origin-txt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--qac-ink-2);
    flex-wrap: wrap;
    justify-content: center;
}

    .qac6-origin-txt strong {
        color: var(--qac-ink);
        font-weight: 700;
        letter-spacing: -0.01em;
    }

.qac6-origin-sep {
    color: rgba(255, 255, 255, 0.28);
}

.qac6-origin-coords {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--qac6-warm-3);
    letter-spacing: 0.04em;
}

.qac6-origin-tag {
    color: var(--qac-ink-3);
    font-style: italic;
    letter-spacing: -0.005em;
}


/* ═════════════════════════════════════════════════════════════════════════
   THREE "DESIGNED TO TRAVEL" CARDS
   ═════════════════════════════════════════════════════════════════════════ */

.qac6-travel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
    max-width: 1100px;
    margin: 0 auto clamp(56px, 7vw, 90px);
    text-align: left;
}

.qac6-travel-card {
    position: relative;
    padding: clamp(22px, 2.4vw, 30px);
    background: rgba(7, 8, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 36px rgba(0, 0, 0, 0.45);
    transition: border-color .35s var(--qac-ease), transform .35s var(--qac-ease);
    opacity: 0;
    transform: translateY(18px);
}

.qac6.qac6-on .qac6-travel-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 1700ms), transform .7s var(--qac-ease-out) calc(var(--ci, 0) * 110ms + 1700ms), border-color .35s var(--qac-ease);
}

.qac6-travel-card:hover {
    border-color: rgba(245, 158, 11, 0.35);
    transform: translateY(-2px);
}

.qac6-travel-glow {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(245, 158, 11, 0.10) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--qac-ease);
}

.qac6-travel-card:hover .qac6-travel-glow {
    opacity: 1;
}


.qac6-travel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.qac6-travel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--qac6-warm-2);
    flex-shrink: 0;
}

.qac6-travel-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(15px, 1.35vw, 17px);
    font-weight: 700;
    color: var(--qac-ink);
    margin: 0;
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.qac6-travel-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.05vw, 14.5px);
    line-height: 1.6;
    color: var(--qac-ink-2);
    margin: 0 0 16px;
}

.qac6-travel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--qac6-warm-3);
    letter-spacing: 0.04em;
}

.qac6-travel-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac6-warm-2) 0%, var(--qac6-rd) 100%);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.55);
    animation: qac6-chipPulse 2.4s ease-in-out infinite;
}

@keyframes qac6-chipPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.35);
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   GLOBAL REACH STRIP · 4 location pills horizontal
   ═════════════════════════════════════════════════════════════════════════ */

.qac6-reach {
    margin: 0 auto clamp(40px, 5vw, 64px);
    max-width: 1100px;
}

.qac6-reach-h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--qac-ink-4);
    margin: 0 0 18px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .7s var(--qac-ease-out) 2400ms, transform .7s var(--qac-ease-out) 2400ms;
}

.qac6.qac6-on .qac6-reach-h4 {
    opacity: 1;
    transform: translateY(0);
}

.qac6-reach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.qac6-reach-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(7, 8, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}

.qac6.qac6-on .qac6-reach-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .65s var(--qac-ease-out) calc(var(--ri, 0) * 130ms + 2600ms), transform .65s var(--qac-ease-out) calc(var(--ri, 0) * 130ms + 2600ms), border-color .3s var(--qac-ease);
}

.qac6-reach-item:hover {
    border-color: rgba(245, 158, 11, 0.30);
    transform: translateY(-2px) scale(1);
}

.qac6-reach-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--qac-ink-4);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
}

.qac6-reach-region {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--qac-ink-2);
    letter-spacing: -0.005em;
}

/* The LIVE pill gets the warm/active treatment — Canada is real, others are roadmap */
.qac6-reach-item--live {
    border-color: rgba(245, 158, 11, 0.40);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(7, 8, 10, 0.55) 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18), 0 8px 24px rgba(245, 158, 11, 0.12);
}

    .qac6-reach-item--live .qac6-reach-status {
        color: #fff;
        background: linear-gradient(135deg, var(--qac6-warm) 0%, var(--qac6-rd) 100%);
        border-color: rgba(245, 158, 11, 0.55);
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
    }

    .qac6-reach-item--live .qac6-reach-region {
        color: var(--qac-ink);
    }


/* ═════════════════════════════════════════════════════════════════════════
   PIVOT to sec7
   ═════════════════════════════════════════════════════════════════════════ */

.qac6-pivot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--qac-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 12px 20px;
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 100px;
    background: rgba(7, 8, 10, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease), transform .3s var(--qac-ease);
    opacity: 0;
    transform: translateY(8px);
    box-shadow: 0 4px 20px rgba(7, 8, 10, 0.40);
}

.qac6.qac6-on .qac6-pivot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--qac-ease-out) 3200ms, transform .7s var(--qac-ease-out) 3200ms, color .3s var(--qac-ease), border-color .3s var(--qac-ease), background .3s var(--qac-ease);
}

.qac6-pivot:hover {
    color: var(--qac-ink);
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.08);
    transform: translateY(-1px);
}

.qac6-pivot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac6-warm) 0%, var(--qac6-rd) 100%);
    color: #fff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.50);
    animation: qac6-pivotBob 2.4s ease-in-out infinite;
}

@keyframes qac6-pivotBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   sec6 css — RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */

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

    .qac6-bg-photo-img {
        object-position: center 50%;
    }
}

@media (max-width: 600px) {
    .qac6 {
        padding: clamp(72px, 11vh, 110px) 0;
    }

    .qac6-origin-txt {
        font-size: 12px;
        gap: 6px;
    }

    .qac6-origin-coords {
        font-size: 10.5px;
    }

    .qac6-origin-tag {
        display: none;
    }
    /* keep the pill compact on phone */

    .qac6-travel-card {
        padding: 22px 20px;
    }

    .qac6-reach-list {
        flex-direction: column;
        align-items: stretch;
    }

    .qac6-reach-item {
        justify-content: flex-start;
    }

    .qac6-bg-photo-img {
        object-position: 60% 50%; /* lean into the city skyline on portrait */
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   sec6 css — REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .qac6-bg-photo-img,
    .qac6-bg-aurora,
    .qac6-eyebrow,
    .qac6-eyebrow-dot,
    .qac6-h2-word,
    .qac6-h2-warm,
    .qac6-h2-accent,
    .qac6-sub,
    .qac6-origin,
    .qac6-travel-card,
    .qac6-travel-chip-dot,
    .qac6-reach-h4,
    .qac6-reach-item,
    .qac6-pivot,
    .qac6-pivot-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .qac6-h2-word, .qac6-sub, .qac6-origin, .qac6-travel-card,
    .qac6-reach-h4, .qac6-reach-item, .qac6-pivot, .qac6-eyebrow {
        transform: none !important;
    }
}
























































/* █████████████████████████████████████████████████████████████████████████
   █                                                                       █
   █   sec7 + MODAL · COMPLETE CSS                                         █
   █   Append this entire file at the END of albertaclinic.css.            █
   █                                                                       █
   █   Two parts, clearly separated:                                       █
   █     PART A — sec7 base styles (the close section + 3 doors)          █
   █     PART B — sec7 modal styles (full-page form modal)                 █
   █                                                                       █
   █████████████████████████████████████████████████████████████████████████ */


/* █████████████████████████████████████████████████████████████████████████
   █                                                                       █
   █   ┌─────────────────────────────────────────────────────────────┐    █
   █   │                                                             │    █
   █   │   PART A · sec7 base styles                                 │    █
   █   │                                                             │    █
   █   │   THE CLOSE — "Three doors out. Pick what feels right."     │    █
   █   │                                                             │    █
   █   │   - section root, background layers, eyebrow, H2, subhead   │    █
   █   │   - 3 door cards (founder · demo · founding-clinic)         │    █
   █   │   - sign-off strip + closing line                            │    █
   █   │                                                             │    █
   █   └─────────────────────────────────────────────────────────────┘    █
   █                                                                       █
   █████████████████████████████████████████████████████████████████████████ */

/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec7 css — qac7 · THE CLOSE
   "Three doors out. Pick the one that feels right."
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */

/* ─── sec7: section root ─── */
.qac7 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(96px, 14vh, 150px) 0 clamp(72px, 10vh, 110px);
    background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--qac-bg-2) 0%, var(--qac-bg-1) 70%), var(--qac-bg-1);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Local accent: gold for the founding-clinic door */
    --qac7-gold: #f59e0b;
    --qac7-gold-2: #fbbf24;
    --qac7-gold-3: #fcd34d;
}


/* ═════════════════════════════════════════════════════════════════════════
   BACKGROUND LAYERS
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Layer 1: dot grid ─── */
.qac7-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
}


/* ─── Layer 2: brand aurora · returning to abstract space ─── */
.qac7-bg-aurora {
    position: absolute;
    inset: -10% -10% 30% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 40% at 22% 25%, rgba(96, 165, 250, 0.16) 0%, transparent 65%), radial-gradient(ellipse 50% 38% at 80% 30%, rgba(168, 85, 247, 0.18) 0%, transparent 65%), radial-gradient(ellipse 70% 35% at 50% 8%, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
    filter: blur(20px) saturate(1.05);
    opacity: 0.85;
    animation: qac7-auroraDrift 22s ease-in-out infinite alternate;
}

@keyframes qac7-auroraDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: -3% 2%, 3% -2%, 2% 3%;
    }
}


/* ─── Layer 3: floating particles · single subtle field ─── */
.qac7-bg-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.qac7-bg-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--qac-vi-3) 50%, transparent 100%);
    box-shadow: 0 0 6px var(--qac-vi-3), 0 0 14px rgba(168, 85, 247, 0.4);
    opacity: 0;
    animation: qac7-particleDrift 7s ease-in-out infinite;
}

.qac7-bg-particle--1 {
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

.qac7-bg-particle--2 {
    top: 24%;
    right: 11%;
    animation-delay: 1.2s;
}

.qac7-bg-particle--3 {
    top: 42%;
    left: 14%;
    animation-delay: 2.4s;
    width: 4px;
    height: 4px;
}

.qac7-bg-particle--4 {
    top: 60%;
    right: 18%;
    animation-delay: 0.6s;
}

.qac7-bg-particle--5 {
    top: 78%;
    left: 9%;
    animation-delay: 3.6s;
}

.qac7-bg-particle--6 {
    top: 32%;
    left: 50%;
    animation-delay: 4.8s;
    width: 2px;
    height: 2px;
}

.qac7-bg-particle--7 {
    top: 68%;
    right: 8%;
    animation-delay: 5.4s;
}

.qac7-bg-particle--8 {
    top: 88%;
    left: 38%;
    animation-delay: 2.0s;
    width: 4px;
    height: 4px;
}

@keyframes qac7-particleDrift {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    25% {
        opacity: 0.85;
        transform: translate(0, -6px) scale(1);
    }

    75% {
        opacity: 0.55;
        transform: translate(2px, -14px) scale(1.1);
    }
}


/* ─── Layer 4: vignette ─── */
.qac7-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(7, 8, 10, 0.55) 100%);
}


/* ═════════════════════════════════════════════════════════════════════════
   CONTENT WRAP
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--qac-page-max);
    margin: 0 auto;
    padding: 0 var(--qac-page-pad);
    text-align: center;
}


/* ─── eyebrow ─── */
.qac7-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: clamp(20px, 2.4vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 20px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s var(--qac-ease-out) 80ms, transform .65s var(--qac-ease-out) 80ms;
}

.qac7.qac7-on .qac7-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.qac7-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16), 0 0 8px rgba(168, 85, 247, 0.55);
    animation: qac7-eyebrowPulse 2.6s ease-in-out infinite;
}

@keyframes qac7-eyebrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.qac7-eyebrow-label {
    color: rgba(255, 255, 255, 0.88);
}

.qac7-eyebrow-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}

.qac7-eyebrow-aux {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}


/* ─── H2 closing claim ─── */
.qac7-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.038em;
    color: var(--qac-ink);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    max-width: 1000px;
}

.qac7-h2-line {
    display: block;
}

.qac7-h2-line--quiet {
    color: var(--qac-ink-3);
    font-weight: 600;
    margin-top: 8px;
}

.qac7-h2-word {
    display: inline-block;
    margin-right: 0.26em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--qac-ease-out) calc(var(--wi, 0) * 60ms + 220ms), transform .7s var(--qac-ease-out) calc(var(--wi, 0) * 60ms + 220ms);
}

    .qac7-h2-word:last-child {
        margin-right: 0;
    }

.qac7.qac7-on .qac7-h2-word {
    opacity: 1;
    transform: translateY(0);
}

.qac7-h2-accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 28px rgba(99, 102, 241, 0.35));
    animation: qac7-accentShift 9s ease-in-out infinite;
}

@keyframes qac7-accentShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ─── subhead ─── */
.qac7-sub {
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.62;
    color: var(--qac-ink-3);
    max-width: 680px;
    margin: 0 auto clamp(56px, 7vw, 90px);
    letter-spacing: -0.005em;
    font-weight: 400;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--qac-ease-out) 1300ms, transform .7s var(--qac-ease-out) 1300ms;
}

.qac7.qac7-on .qac7-sub {
    opacity: 1;
    transform: translateY(0);
}


/* ═════════════════════════════════════════════════════════════════════════
   THREE DOORS · the centerpiece
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
    max-width: 1200px;
    margin: 0 auto clamp(72px, 9vw, 110px);
    text-align: left;
}

.qac7-door {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.6vw, 34px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 36px rgba(0, 0, 0, 0.30);
    transition: border-color .35s var(--qac-ease), transform .35s var(--qac-ease), box-shadow .35s var(--qac-ease);
    opacity: 0;
    transform: translateY(20px);
    cursor: pointer;
}

.qac7.qac7-on .qac7-door {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s var(--qac-ease-out) calc(var(--ci, 0) * 140ms + 1500ms), transform .8s var(--qac-ease-out) calc(var(--ci, 0) * 140ms + 1500ms), border-color .35s var(--qac-ease), box-shadow .35s var(--qac-ease);
}

.qac7-door:hover {
    border-color: rgba(168, 85, 247, 0.40);
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(168, 85, 247, 0.25), 0 24px 60px rgba(99, 102, 241, 0.18), 0 12px 30px rgba(0, 0, 0, 0.40);
}

.qac7-door-glow {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--qac-ease);
}

.qac7-door:hover .qac7-door-glow {
    opacity: 1;
}


/* ─── Door head · top icon/avatar/thumb area + tag ─── */
.qac7-door-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.qac7-door-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--qac-ink-4);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
}


/* ─── Door title ─── */
.qac7-door-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 1.95vw, 26px);
    font-weight: 800;
    color: var(--qac-ink);
    margin: 0 0 12px;
    letter-spacing: -0.024em;
    line-height: 1.15;
}


/* ─── Door body ─── */
.qac7-door-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.05vw, 14.5px);
    line-height: 1.6;
    color: var(--qac-ink-3);
    margin: 0 0 18px;
    flex: 1;
}

    .qac7-door-body strong {
        color: var(--qac-ink-2);
        font-weight: 600;
    }


/* ─── Meta list (small bullets) ─── */
.qac7-door-meta {
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .qac7-door-meta li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--qac-ink-3);
    }

.qac7-door-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.20);
    color: var(--qac-vi-3);
    flex-shrink: 0;
}


/* ─── Door CTA ─── */
.qac7-door-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    border-radius: 100px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30), 0 0 0 1px rgba(99, 102, 241, 0.20);
    transition: transform .25s var(--qac-ease), box-shadow .25s var(--qac-ease);
    margin-top: auto;
}

.qac7-door:hover .qac7-door-cta {
    transform: translateX(3px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.30);
}

.qac7-door-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
}


/* ═════════════════════════════════════════════════════════════════════════
   DOOR 1 — TALK TO THE FOUNDER · personal avatar treatment
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-door-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.30), 0 0 24px rgba(99, 102, 241, 0.30), 0 4px 14px rgba(0, 0, 0, 0.30);
    flex-shrink: 0;
}

.qac7-door-avatar-initials {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    z-index: 2;
}

.qac7-door-avatar-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.55);
    opacity: 0;
    animation: qac7-avatarPulse 2.4s ease-out infinite;
}

@keyframes qac7-avatarPulse {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    20% {
        opacity: 0.85;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   DOOR 2 — SEE THE DASHBOARD · mini abstract dashboard preview
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-door-thumb {
    position: relative;
    width: 56px;
    height: 50px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.12) 0%, rgba(7, 8, 10, 0.55) 100%);
    border: 1px solid rgba(99, 102, 241, 0.30);
    overflow: hidden;
    flex-shrink: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.20);
}

.qac7-door-thumb-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--qac-az-2) 0%, var(--qac-vi-2) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.qac7-door-thumb-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.qac7-door-thumb-row {
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.qac7-door-thumb-row--1 {
    width: 80%;
    background: rgba(96, 165, 250, 0.30);
}

.qac7-door-thumb-row--2 {
    width: 60%;
}

.qac7-door-thumb-row--3 {
    width: 95%;
    background: rgba(168, 85, 247, 0.25);
}

.qac7-door-thumb-row--4 {
    width: 45%;
}

.qac7-door-thumb-pulse {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--qac-az-3);
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.85);
    animation: qac7-thumbPulse 1.8s ease-in-out infinite;
}

@keyframes qac7-thumbPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.4);
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   DOOR 3 — FOUNDING CLINICS · gold/amber prestige treatment
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-door--founding {
    border-color: rgba(245, 158, 11, 0.32);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.005) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(245, 158, 11, 0.15), 0 12px 36px rgba(0, 0, 0, 0.30), 0 0 40px rgba(245, 158, 11, 0.08);
}

    .qac7-door--founding:hover {
        border-color: rgba(245, 158, 11, 0.55);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(245, 158, 11, 0.40), 0 24px 60px rgba(245, 158, 11, 0.22), 0 12px 30px rgba(0, 0, 0, 0.40);
    }

    .qac7-door--founding .qac7-door-glow {
        background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(245, 158, 11, 0.16) 0%, transparent 60%);
    }

    .qac7-door--founding .qac7-door-meta-icon {
        background: rgba(245, 158, 11, 0.10);
        border-color: rgba(245, 158, 11, 0.22);
        color: var(--qac7-gold-2);
    }

.qac7-door-tag--gold {
    color: var(--qac7-gold-3);
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
}

.qac7-door-crown {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.40);
    color: var(--qac7-gold-2);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15), 0 0 18px rgba(245, 158, 11, 0.20);
}

.qac7-door-limited {
    position: absolute;
    top: 0px;
    right: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(239, 68, 68, 0.14) 100%);
    border: 1px solid rgba(245, 158, 11, 0.50);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: #fcd34d;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25), 0 0 0 1px rgba(245, 158, 11, 0.20);
    white-space: nowrap;
}

/* Push the crown DOWN slightly when the limited badge is present so they don't visually collide */
.qac7-door--founding .qac7-door-head {
    margin-top: 22px;
}

.qac7-door-limited-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac7-gold-2) 0%, #ef4444 100%);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.65);
    animation: qac7-limitedPulse 2s ease-in-out infinite;
}

@keyframes qac7-limitedPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.50;
        transform: scale(1.4);
    }
}

.qac7-door-cta--gold {
    background: linear-gradient(135deg, var(--qac7-gold) 0%, #ef4444 100%);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.qac7-door--founding:hover .qac7-door-cta--gold {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55), 0 0 0 1px rgba(245, 158, 11, 0.40);
}


/* ═════════════════════════════════════════════════════════════════════════
   SIGN-OFF STRIP · trust echoes + closing line
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-signoff {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.qac7-signoff-strip {
    list-style: none;
    margin: 0 0 clamp(40px, 5vw, 56px);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s var(--qac-ease-out) 2400ms, transform .8s var(--qac-ease-out) 2400ms;
}

.qac7.qac7-on .qac7-signoff-strip {
    opacity: 1;
    transform: translateY(0);
}

.qac7-signoff-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    color: var(--qac-ink-3);
    letter-spacing: -0.005em;
}

.qac7-signoff-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--qac-ink-3);
    flex-shrink: 0;
}

.qac7-signoff-item--mail .qac7-signoff-icon {
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.25);
    color: var(--qac-vi-3);
}

.qac7-signoff-mail {
    color: var(--qac-vi-3);
    text-decoration: none;
    font-weight: 600;
    transition: color .25s var(--qac-ease);
    letter-spacing: -0.005em;
}

    .qac7-signoff-mail:hover {
        color: var(--qac-vi);
        text-decoration: underline;
    }


/* ─── Final closing line · echoes sec1's H1 ─── */
.qac7-signoff-final {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.022em;
    color: var(--qac-ink-2);
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.0s var(--qac-ease-out) 2700ms, transform 1.0s var(--qac-ease-out) 2700ms;
}

.qac7.qac7-on .qac7-signoff-final {
    opacity: 1;
    transform: translateY(0);
}

.qac7-signoff-final-line {
    display: block;
}

.qac7-signoff-final-line--accent {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 35%, #a78bfa 65%, #c084fc 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 18px rgba(99, 102, 241, 0.30));
    animation: qac7-accentShift 9s ease-in-out infinite;
    margin-top: 2px;
}


/* ═════════════════════════════════════════════════════════════════════════
   sec7 css — RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .qac7-doors {
        grid-template-columns: 1fr;
        max-width: 580px;
    }
    /* On tablet/phone, the founding-clinic door comes FIRST since it's the highest-intent */
    .qac7-door--founder {
        order: 2;
    }

    .qac7-door--demo {
        order: 3;
    }

    .qac7-door--founding {
        order: 1;
    }
}

@media (max-width: 600px) {
    .qac7 {
        padding: clamp(72px, 11vh, 110px) 0 clamp(56px, 8vh, 80px);
    }

    .qac7-door {
        padding: 24px 22px;
    }

    .qac7-door-h3 {
        font-size: 20px;
    }

    .qac7-door-body {
        font-size: 13.5px;
    }

    .qac7-door-limited {
        top: 14px;
        right: 14px;
        font-size: 8.5px;
        padding: 3px 8px;
    }

    .qac7-signoff-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 4px;
    }

    .qac7-signoff-final-line {
        display: inline;
        margin-right: 4px;
    }

    .qac7-signoff-final-line--accent {
        display: block;
        margin-top: 6px;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   sec7 css — REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .qac7-bg-aurora,
    .qac7-bg-particle,
    .qac7-eyebrow,
    .qac7-eyebrow-dot,
    .qac7-h2-word,
    .qac7-h2-accent,
    .qac7-sub,
    .qac7-door,
    .qac7-door-avatar-pulse,
    .qac7-door-thumb-pulse,
    .qac7-door-limited-dot,
    .qac7-signoff-strip,
    .qac7-signoff-final,
    .qac7-signoff-final-line--accent {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .qac7-h2-word, .qac7-sub, .qac7-door, .qac7-signoff-strip,
    .qac7-signoff-final, .qac7-eyebrow {
        transform: none !important;
    }
}


/* █████████████████████████████████████████████████████████████████████████
   █                                                                       █
   █   ┌─────────────────────────────────────────────────────────────┐    █
   █   │                                                             │    █
   █   │   PART B · sec7 modal styles                                │    █
   █   │                                                             │    █
   █   │   THE MODAL — opens when any of the 3 doors is clicked      │    █
   █   │                                                             │    █
   █   │   - founding-clinic door upgrade (aurora, shimmer, sparkles)│    █
   █   │   - full-page modal overlay with cinematic background       │    █
   █   │   - intent-aware accent colors (violet · azure · gold)      │    █
   █   │   - form fields, status messages, submit button             │    █
   █   │   - animated success state                                   │    █
   █   │                                                             │    █
   █   └─────────────────────────────────────────────────────────────┘    █
   █                                                                       █
   █████████████████████████████████████████████████████████████████████████ */

/* =========================================================================
   ════════════════════════════════════════════════════════════════════════
   sec7 css — UPGRADES + MODAL
   Append at the END of the existing sec7 CSS block in albertaclinic.css.
   ════════════════════════════════════════════════════════════════════════
   ========================================================================= */


/* ═════════════════════════════════════════════════════════════════════════
   FOUNDING-CLINIC DOOR · ULTRA EYE-CATCHING UPGRADE
   ═════════════════════════════════════════════════════════════════════════ */

/* Base: position relative is already set on .qac7-door, but ensure the new
   layered children are clipped inside the rounded card */
.qac7-door--founding {
    overflow: hidden;
    /* Constant idle attention loop — gentle scale breath on the WHOLE card */
    animation: qac7-foundingBreath 5s ease-in-out infinite;
}

@keyframes qac7-foundingBreath {
    0%, 100% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(245, 158, 11, 0.18), 0 12px 36px rgba(0, 0, 0, 0.30), 0 0 40px rgba(245, 158, 11, 0.10);
    }

    50% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(245, 158, 11, 0.32), 0 18px 50px rgba(245, 158, 11, 0.18), 0 0 60px rgba(245, 158, 11, 0.20);
    }
}

/* Aurora layer — amber/red glow that drifts across the card always */
.qac7-door-aurora {
    position: absolute;
    inset: -50%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 35% 40% at 30% 30%, rgba(245, 158, 11, 0.25) 0%, transparent 60%), radial-gradient(ellipse 30% 35% at 75% 70%, rgba(239, 68, 68, 0.18) 0%, transparent 60%), radial-gradient(ellipse 25% 30% at 50% 50%, rgba(252, 211, 77, 0.12) 0%, transparent 65%);
    filter: blur(20px);
    animation: qac7-foundingAurora 11s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes qac7-foundingAurora {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(2%, -3%) rotate(8deg);
    }
}

/* Sweeping shimmer — diagonal light bar that travels across every ~5s */
.qac7-door-shimmer {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, rgba(252, 211, 77, 0.0) 25%, rgba(252, 211, 77, 0.18) 45%, rgba(255, 255, 255, 0.28) 50%, rgba(252, 211, 77, 0.18) 55%, rgba(252, 211, 77, 0.0) 75%, transparent 100%);
    transform: skewX(-12deg);
    animation: qac7-foundingShimmer 5.4s ease-in-out infinite 1.2s;
}

@keyframes qac7-foundingShimmer {
    0% {
        left: -120%;
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        left: 220%;
        opacity: 0;
    }
}

/* Sparkle particles around the crown — tiny twinkles */
.qac7-door-sparkles {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 80px;
    height: 70px;
    z-index: 2;
    pointer-events: none;
}

.qac7-door-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--qac7-gold-2) 50%, transparent 100%);
    box-shadow: 0 0 6px var(--qac7-gold-2), 0 0 12px rgba(252, 211, 77, 0.65);
    opacity: 0;
    animation: qac7-foundingSparkle 3s ease-in-out infinite;
}

.qac7-door-sparkle--1 {
    top: 0;
    left: 35px;
    animation-delay: 0s;
}

.qac7-door-sparkle--2 {
    top: 18px;
    left: 58px;
    animation-delay: 0.7s;
    width: 3px;
    height: 3px;
}

.qac7-door-sparkle--3 {
    top: 38px;
    left: 8px;
    animation-delay: 1.4s;
}

.qac7-door-sparkle--4 {
    top: 52px;
    left: 48px;
    animation-delay: 2.1s;
    width: 3px;
    height: 3px;
}

@keyframes qac7-foundingSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }

    25% {
        opacity: 1;
        transform: scale(1.2);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    75% {
        opacity: 0.85;
        transform: scale(1.1);
    }
}

/* Ensure the crown + content stay above the new layers */
.qac7-door--founding .qac7-door-glow,
.qac7-door--founding .qac7-door-head,
.qac7-door--founding .qac7-door-h3,
.qac7-door--founding .qac7-door-body,
.qac7-door--founding .qac7-door-meta,
.qac7-door--founding .qac7-door-cta,
.qac7-door--founding .qac7-door-limited {
    position: relative;
    z-index: 3;
}

/* Limited-spots badge — beefier pulse */
.qac7-door--founding .qac7-door-limited {
    animation: qac7-limitedBeat 2.4s ease-in-out infinite;
}

@keyframes qac7-limitedBeat {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
        transform: scale(1.05);
    }
}

/* Hover · pause the breath, lean into the shimmer */
.qac7-door--founding:hover {
    animation-play-state: paused;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(245, 158, 11, 0.55), 0 28px 70px rgba(245, 158, 11, 0.30), 0 12px 30px rgba(0, 0, 0, 0.40);
}

/* Reduced motion — kill all the founding extras */
@media (prefers-reduced-motion: reduce) {
    .qac7-door--founding,
    .qac7-door-aurora,
    .qac7-door-shimmer,
    .qac7-door-sparkle,
    .qac7-door--founding .qac7-door-limited {
        animation: none !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   FORM BUTTONS · the doors are now <button>, not <a>.
   Make sure they look identical to the original anchor styling.
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-door {
    /* Strip default <button> chrome */
    font-family: inherit;
    text-align: left;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    color: inherit;
    /* Already had: padding, border-radius, etc. — those stay from the base rule */
}

    .qac7-door:focus-visible {
        outline: 2px solid rgba(168, 85, 247, 0.6);
        outline-offset: 3px;
    }


/* ═════════════════════════════════════════════════════════════════════════
   THE MODAL · cinematic overlay + glass card + form
   ═════════════════════════════════════════════════════════════════════════ */

.qac7-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s var(--qac-ease), visibility 0s linear .35s;
}

.qac7-modal--open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity .35s var(--qac-ease), visibility 0s linear 0s;
}

/* ─── Backdrop ─── */
.qac7-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(13, 15, 26, 0.55) 0%, rgba(7, 8, 10, 0.92) 100%);
    backdrop-filter: blur(14px) saturate(0.85);
    -webkit-backdrop-filter: blur(14px) saturate(0.85);
    cursor: pointer;
}


/* ─── Stage holds the card centered ─── */
.qac7-modal-stage {
    position: relative;
    width: min(640px, 92vw);
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform .45s var(--qac-ease-out), opacity .35s var(--qac-ease-out);
}

.qac7-modal--open .qac7-modal-stage {
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* ─── Atmospheric background layers BEHIND the card ─── */
.qac7-modal-bg {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
}

/* Aurora — subtle drifting brand glow */
.qac7-modal-bg--aurora {
    background: radial-gradient(ellipse 50% 40% at 30% 30%, rgba(96, 165, 250, 0.20) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 75% 70%, rgba(168, 85, 247, 0.22) 0%, transparent 60%);
    filter: blur(40px);
    opacity: 0.95;
    animation: qac7-modalAurora 14s ease-in-out infinite alternate;
}

@keyframes qac7-modalAurora {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(2%, -2%) scale(1.06);
    }
}

/* Light rays — radial sunburst from top behind the card */
.qac7-modal-bg--rays {
    background: conic-gradient( from 220deg at 50% 0%, transparent 0deg, rgba(168, 85, 247, 0.10) 60deg, transparent 120deg, rgba(96, 165, 250, 0.10) 180deg, transparent 240deg );
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 80%);
    opacity: 0.7;
    animation: qac7-modalRays 22s linear infinite;
}

@keyframes qac7-modalRays {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Floating particles — 12 little twinkles */
.qac7-modal-bg--particles {
    pointer-events: none;
}

    .qac7-modal-bg--particles span {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: radial-gradient(circle, #fff 0%, var(--qac-vi-3) 50%, transparent 100%);
        box-shadow: 0 0 6px var(--qac-vi-3);
        opacity: 0;
        animation: qac7-modalParticle 6s ease-in-out infinite;
    }

        .qac7-modal-bg--particles span:nth-child(1) {
            top: 8%;
            left: 14%;
            animation-delay: 0.0s;
        }

        .qac7-modal-bg--particles span:nth-child(2) {
            top: 18%;
            left: 82%;
            animation-delay: 0.7s;
        }

        .qac7-modal-bg--particles span:nth-child(3) {
            top: 32%;
            left: 6%;
            animation-delay: 1.4s;
        }

        .qac7-modal-bg--particles span:nth-child(4) {
            top: 26%;
            left: 48%;
            animation-delay: 2.1s;
        }

        .qac7-modal-bg--particles span:nth-child(5) {
            top: 48%;
            left: 72%;
            animation-delay: 2.8s;
        }

        .qac7-modal-bg--particles span:nth-child(6) {
            top: 58%;
            left: 18%;
            animation-delay: 3.5s;
        }

        .qac7-modal-bg--particles span:nth-child(7) {
            top: 72%;
            left: 88%;
            animation-delay: 4.2s;
        }

        .qac7-modal-bg--particles span:nth-child(8) {
            top: 80%;
            left: 38%;
            animation-delay: 4.9s;
        }

        .qac7-modal-bg--particles span:nth-child(9) {
            top: 12%;
            left: 60%;
            animation-delay: 0.3s;
        }

        .qac7-modal-bg--particles span:nth-child(10) {
            top: 64%;
            left: 50%;
            animation-delay: 1.1s;
        }

        .qac7-modal-bg--particles span:nth-child(11) {
            top: 88%;
            left: 70%;
            animation-delay: 1.9s;
        }

        .qac7-modal-bg--particles span:nth-child(12) {
            top: 40%;
            left: 28%;
            animation-delay: 2.6s;
        }

@keyframes qac7-modalParticle {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }

    25% {
        opacity: 0.85;
        transform: translate(0, -4px) scale(1);
    }

    75% {
        opacity: 0.45;
        transform: translate(2px, -10px) scale(0.9);
    }
}


/* ─── The CARD ─── */
.qac7-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(20, 23, 42, 0.92) 0%, rgba(13, 15, 26, 0.94) 100%);
    border: 1px solid rgba(168, 85, 247, 0.30);
    border-radius: 24px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(168, 85, 247, 0.15), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 100px rgba(168, 85, 247, 0.18);
    padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3vw, 36px);
    color: var(--qac-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
}

/* Accent variants — change card edge glow based on intent */
.qac7-modal-card--violet {
    border-color: rgba(168, 85, 247, 0.30);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(168, 85, 247, 0.15), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 100px rgba(168, 85, 247, 0.18);
}

.qac7-modal-card--azure {
    border-color: rgba(96, 165, 250, 0.30);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(96, 165, 250, 0.15), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 100px rgba(96, 165, 250, 0.20);
}

.qac7-modal-card--gold {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(245, 158, 11, 0.20), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 100px rgba(245, 158, 11, 0.22);
}

.qac7-modal-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(168, 85, 247, 0.10) 0%, transparent 60%);
}

.qac7-modal-card--azure .qac7-modal-card-glow {
    background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(96, 165, 250, 0.12) 0%, transparent 60%);
}

.qac7-modal-card--gold .qac7-modal-card-glow {
    background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245, 158, 11, 0.16) 0%, transparent 60%);
}

/* Card scrollbar (WebKit) */
.qac7-modal-card::-webkit-scrollbar {
    width: 8px;
}

.qac7-modal-card::-webkit-scrollbar-track {
    background: transparent;
}

.qac7-modal-card::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.30);
    border-radius: 100px;
}

    .qac7-modal-card::-webkit-scrollbar-thumb:hover {
        background: rgba(168, 85, 247, 0.50);
    }


/* ─── Close button ─── */
.qac7-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 8, 10, 0.55);
    color: var(--qac-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .25s var(--qac-ease), border-color .25s var(--qac-ease), background .25s var(--qac-ease), transform .25s var(--qac-ease);
}

    .qac7-modal-close:hover {
        color: var(--qac-ink);
        border-color: rgba(239, 68, 68, 0.55);
        background: rgba(239, 68, 68, 0.10);
        transform: rotate(90deg);
    }


/* ─── Header ─── */
.qac7-modal-head {
    margin-bottom: 22px;
    padding-right: 40px; /* clear the close button */
}

.qac7-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--qac-vi-3);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.qac7-modal-card--azure .qac7-modal-eyebrow {
    background: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.28);
    color: var(--qac-az-3);
}

.qac7-modal-card--gold .qac7-modal-eyebrow {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.32);
    color: var(--qac7-gold-3);
}

.qac7-modal-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qac-az-3) 0%, var(--qac-vi-3) 100%);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.65);
    animation: qac7-eyebrowPulse 2.4s ease-in-out infinite;
}

.qac7-modal-card--gold .qac7-modal-eyebrow-dot {
    background: linear-gradient(135deg, var(--qac7-gold-2) 0%, #ef4444 100%);
}

.qac7-modal-h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.026em;
    color: var(--qac-ink);
    margin: 0 0 10px;
}

.qac7-modal-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--qac-ink-3);
    margin: 0;
    letter-spacing: -0.005em;
}


/* ─── Form rows ─── */
.qac7-modal-form {
    display: block;
}

.qac7-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.qac7-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qac7-modal-field--full {
    grid-column: 1 / -1;
}

.qac7-modal-label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: -0.005em;
    margin-bottom: 2px;
}

.qac7-modal-label-opt {
    font-weight: 400;
    color: rgba(148, 163, 184, 0.7);
    font-size: 11.5px;
    margin-left: 6px;
}

.qac7-modal-form input[type="text"],
.qac7-modal-form input[type="email"],
.qac7-modal-form input[type="tel"],
.qac7-modal-form select,
.qac7-modal-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(7, 8, 10, 0.65) 0%, rgba(7, 8, 10, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #f1f5f9;
    font-family: 'DM Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    transition: border-color .25s var(--qac-ease), background .25s var(--qac-ease), box-shadow .25s var(--qac-ease);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

    /* Hover · subtle border highlight to show it's interactive */
    .qac7-modal-form input[type="text"]:hover,
    .qac7-modal-form input[type="email"]:hover,
    .qac7-modal-form input[type="tel"]:hover,
    .qac7-modal-form textarea:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: linear-gradient(180deg, rgba(13, 15, 26, 0.75) 0%, rgba(7, 8, 10, 0.65) 100%);
    }

    /* Select hover · re-declare chevron AND gradient together so the arrow doesn't get wiped */
    .qac7-modal-form select:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(13, 15, 26, 0.75) 0%, rgba(7, 8, 10, 0.65) 100%);
    }

.qac7-modal-card--azure .qac7-modal-form select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(13, 15, 26, 0.75) 0%, rgba(7, 8, 10, 0.65) 100%);
}

.qac7-modal-card--gold .qac7-modal-form select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(13, 15, 26, 0.75) 0%, rgba(7, 8, 10, 0.65) 100%);
}

/* Custom select arrow — branded chevron */
.qac7-modal-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(7, 8, 10, 0.65) 0%, rgba(7, 8, 10, 0.55) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 14px center, 0 0;
    background-size: 14px, auto;
    padding-right: 38px;
    cursor: pointer;
}

/* Select arrow color shifts per intent accent */
.qac7-modal-card--azure .qac7-modal-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(7, 8, 10, 0.65) 0%, rgba(7, 8, 10, 0.55) 100%);
}

.qac7-modal-card--gold .qac7-modal-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"), linear-gradient(180deg, rgba(7, 8, 10, 0.65) 0%, rgba(7, 8, 10, 0.55) 100%);
}

/* Fix native select dropdown styling on dark backgrounds (Chrome/Edge) */
.qac7-modal-form select option {
    background: #14172a;
    color: #f1f5f9;
    padding: 8px;
}

.qac7-modal-form textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
    font-family: 'DM Sans', sans-serif;
}

    .qac7-modal-form input::placeholder,
    .qac7-modal-form textarea::placeholder {
        color: rgba(148, 163, 184, 0.55);
        opacity: 1;
        font-weight: 400;
    }

    /* Focus · branded glow ring per intent accent */
    .qac7-modal-form input:focus,
    .qac7-modal-form select:focus,
    .qac7-modal-form textarea:focus {
        outline: none;
        border-color: rgba(168, 85, 247, 0.65);
        background: linear-gradient(180deg, rgba(20, 23, 42, 0.85) 0%, rgba(13, 15, 26, 0.75) 100%);
        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), 0 0 0 1px rgba(168, 85, 247, 0.45) inset;
    }

.qac7-modal-card--azure .qac7-modal-form input:focus,
.qac7-modal-card--azure .qac7-modal-form select:focus,
.qac7-modal-card--azure .qac7-modal-form textarea:focus {
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 0 0 1px rgba(96, 165, 250, 0.45) inset;
}

.qac7-modal-card--gold .qac7-modal-form input:focus,
.qac7-modal-card--gold .qac7-modal-form select:focus,
.qac7-modal-card--gold .qac7-modal-form textarea:focus {
    border-color: rgba(245, 158, 11, 0.65);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15), 0 0 0 1px rgba(245, 158, 11, 0.45) inset;
}

/* Browser autofill — keep our dark background instead of yellow */
.qac7-modal-form input:-webkit-autofill,
.qac7-modal-form input:-webkit-autofill:hover,
.qac7-modal-form input:-webkit-autofill:focus,
.qac7-modal-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #14172a inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9;
    transition: background-color 5000s ease-in-out 0s;
}


/* ─── Status (errors) ─── */
.qac7-modal-status {
    margin: 8px 0 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--qac-ink-3);
}

    .qac7-modal-status:empty {
        display: none;
    }

.qac7-modal-status--err {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-radius: 8px;
    color: #fca5a5;
}

.qac7-modal-status--ok {
    padding: 10px 14px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 8px;
    color: #86efac;
}


/* ─── Footer ─── */
.qac7-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.qac7-modal-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--qac-ink-4);
    margin: 0;
    letter-spacing: -0.005em;
}

.qac7-modal-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
    flex-shrink: 0;
}


/* ─── Submit button · god-tier ───
   Cinematic CTA. Multi-layer gradient, hover shimmer, scale-on-press,
   premium box-shadow with intent-aware accent glow. */
.qac7-modal-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px 13px 22px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: 0;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.005em;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 22px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(168, 85, 247, 0.35);
    transition: transform .2s var(--qac-ease), box-shadow .25s var(--qac-ease), background-position .35s var(--qac-ease), opacity .2s var(--qac-ease);
}

    /* Hover shimmer — diagonal light bar that travels across the button */
    .qac7-modal-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.0) 30%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0.0) 70%, transparent 100%);
        transform: skewX(-12deg);
        transition: left .65s var(--qac-ease-out);
        pointer-events: none;
    }

    .qac7-modal-submit:hover::before {
        left: 220%;
    }

    .qac7-modal-submit:hover {
        transform: translateY(-1px);
        background-position: 100% 50%;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 12px 30px rgba(99, 102, 241, 0.60), 0 0 0 1px rgba(168, 85, 247, 0.55);
    }

    .qac7-modal-submit:active {
        transform: translateY(0) scale(0.98);
    }

/* Azure variant */
.qac7-modal-card--azure .qac7-modal-submit {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #60a5fa 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 22px rgba(59, 130, 246, 0.50), 0 0 0 1px rgba(96, 165, 250, 0.35);
}

    .qac7-modal-card--azure .qac7-modal-submit:hover {
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 12px 30px rgba(59, 130, 246, 0.65), 0 0 0 1px rgba(96, 165, 250, 0.55);
    }

/* Gold variant — for founding-clinic */
.qac7-modal-card--gold .qac7-modal-submit {
    background: linear-gradient(135deg, #b45309 0%, #d97706 35%, #f59e0b 70%, #ef4444 100%);
    background-size: 220% 220%;
    background-position: 0% 50%;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 8px 22px rgba(245, 158, 11, 0.55), 0 0 0 1px rgba(245, 158, 11, 0.45);
}

    .qac7-modal-card--gold .qac7-modal-submit:hover {
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 14px 34px rgba(245, 158, 11, 0.70), 0 0 0 1px rgba(245, 158, 11, 0.65);
    }

/* Disabled state */
.qac7-modal-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

    .qac7-modal-submit:disabled::before {
        display: none;
    }

/* Inner icon button-circle */
.qac7-modal-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: opacity .2s var(--qac-ease), transform .25s var(--qac-ease);
    flex-shrink: 0;
}

.qac7-modal-submit:hover .qac7-modal-submit-icon {
    background: rgba(255, 255, 255, 0.32);
    transform: translateX(2px);
}

/* Spinner shown during loading */
.qac7-modal-submit-spin {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: qac7-modalSpin 0.8s linear infinite;
}

@keyframes qac7-modalSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.qac7-modal-submit--loading {
    background-position: 100% 50%;
}

    .qac7-modal-submit--loading .qac7-modal-submit-spin {
        opacity: 1;
    }

    .qac7-modal-submit--loading .qac7-modal-submit-lbl {
        opacity: 0.5;
        padding-left: 18px;
    }

    .qac7-modal-submit--loading .qac7-modal-submit-icon {
        opacity: 0;
    }

    .qac7-modal-submit--loading::before {
        display: none;
    }


/* ─── Success overlay (after send) · cinematic confirmation ─── */
.qac7-modal-success {
    display: none;
    text-align: center;
    padding: 48px 12px 24px;
    position: relative;
}

.qac7-modal-success--in {
    display: block;
    animation: qac7-modalSuccessIn .65s var(--qac-ease-out);
}

@keyframes qac7-modalSuccessIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Confetti particles around the success state — only on render */
.qac7-modal-success::before,
.qac7-modal-success::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: qac7-successConfetti 1.4s ease-out forwards;
}

.qac7-modal-success::before {
    left: 25%;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.65);
    --confetti-x: -80px;
    --confetti-y: -40px;
}

.qac7-modal-success::after {
    right: 25%;
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.65);
    --confetti-x: 80px;
    --confetti-y: -50px;
}

@keyframes qac7-successConfetti {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }

    20% {
        opacity: 1;
        transform: translate(0, -10px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--confetti-x), var(--confetti-y)) scale(0.6);
    }
}

.qac7-modal-success-orb {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qac7-modal-success-check {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    color: #fff;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.10), 0 0 0 1px rgba(16, 185, 129, 0.35), 0 12px 30px rgba(16, 185, 129, 0.45), 0 0 40px rgba(16, 185, 129, 0.30);
    animation: qac7-successCheckPop 0.5s var(--qac-ease-out) 0.15s backwards;
}

@keyframes qac7-successCheckPop {
    0% {
        transform: scale(0.4) rotate(-12deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.08) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.qac7-modal-success-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.55);
    opacity: 0;
    animation: qac7-modalSuccessRing 2.4s ease-out infinite;
}

.qac7-modal-success-ring--2 {
    animation-delay: 1.2s;
}

@keyframes qac7-modalSuccessRing {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    20% {
        transform: scale(0.9);
        opacity: 0.85;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.qac7-modal-success-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.026em;
    color: #f8fafc;
    margin: 0 0 12px;
    background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 18px rgba(16, 185, 129, 0.30));
}

.qac7-modal-success-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 auto 24px;
    max-width: 420px;
    letter-spacing: -0.005em;
}

    .qac7-modal-success-body strong {
        color: #f1f5f9;
        font-weight: 700;
    }

/* Inbox callback — additional confirmation visual */
.qac7-modal-success-inbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.30);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #6ee7b7;
    letter-spacing: 0.04em;
    margin: 0 auto 24px;
}

.qac7-modal-success-inbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.qac7-modal-success-close {
    padding: 11px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    color: #e2e8f0;
    font-family: 'Plus Jakarta Sans', inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s var(--qac-ease), border-color .25s var(--qac-ease), background .25s var(--qac-ease);
}

    .qac7-modal-success-close:hover {
        color: #fff;
        border-color: rgba(168, 85, 247, 0.50);
        background: rgba(168, 85, 247, 0.12);
    }


/* ═════════════════════════════════════════════════════════════════════════
   MODAL · RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .qac7-modal-stage {
        width: 96vw;
        max-height: 96vh;
    }

    .qac7-modal-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .qac7-modal-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .qac7-modal-h2 {
        font-size: 20px;
    }

    .qac7-modal-sub {
        font-size: 13px;
    }

    .qac7-modal-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .qac7-modal-submit {
        justify-content: center;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   MODAL · REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .qac7-modal,
    .qac7-modal-stage,
    .qac7-modal-bg,
    .qac7-modal-bg--particles span,
    .qac7-modal-eyebrow-dot,
    .qac7-modal-submit-spin,
    .qac7-modal-success,
    .qac7-modal-success-ring {
        animation: none !important;
        transition: none !important;
    }

    .qac7-modal--open .qac7-modal-stage {
        transform: none !important;
        opacity: 1 !important;
    }
}