/* ================================================================
   Qlynic — EMR.aspx  |  Public marketing page
   emr.css  —  Design tokens (all sections) + Section 1
   Subsequent sections append their own CSS after this file.
   All sections reference --emr-* tokens defined here.
   ================================================================ */


/* ══════════════════════════════════════════════════════════════
   1. RESET + BASE
══════════════════════════════════════════════════════════════ */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: #07080a;
    color: rgba(255,255,255,.96);
    font-family: 'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg {
    display: block;
    flex-shrink: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}


/* ══════════════════════════════════════════════════════════════
   2. DESIGN SYSTEM TOKENS  (shared by all EMR.aspx sections)
══════════════════════════════════════════════════════════════ */
:root {
    /* ── Obsidian scale ───────────────────────────────────── */
    --emr-bg: #07080a;
    --emr-obs-1: #07080a;
    --emr-obs-2: #0c0d12;
    --emr-obs-3: #10121a;
    --emr-obs-4: #161923;
    --emr-obs-5: #1d2030;
    --emr-obs-6: #252840;
    /* ── Surfaces ─────────────────────────────────────────── */
    --emr-sf-1: rgba(255,255,255,.03);
    --emr-sf-2: rgba(255,255,255,.06);
    --emr-sf-3: rgba(255,255,255,.10);
    --emr-sf-4: rgba(255,255,255,.16);
    /* ── Text ─────────────────────────────────────────────── */
    --emr-t-1: rgba(255,255,255,.96);
    --emr-t-2: rgba(255,255,255,.64);
    --emr-t-3: rgba(255,255,255,.38);
    --emr-t-4: rgba(255,255,255,.18);
    --emr-t-5: rgba(255,255,255,.08);
    /* ── Azure ────────────────────────────────────────────── */
    --emr-azure: #3b82f6;
    --emr-azure-2: #60a5fa;
    --emr-azure-3: #93c5fd;
    --emr-azure-glow: rgba(59,130,246,.38);
    --emr-azure-sub: rgba(59,130,246,.09);
    --emr-azure-bdr: rgba(59,130,246,.24);
    /* ── Violet ───────────────────────────────────────────── */
    --emr-violet: #8b5cf6;
    --emr-violet-2: #a78bfa;
    --emr-violet-glow: rgba(139,92,246,.34);
    --emr-violet-sub: rgba(139,92,246,.09);
    --emr-violet-bdr: rgba(139,92,246,.22);
    /* ── Emerald ──────────────────────────────────────────── */
    --emr-emerald: #10b981;
    --emr-emerald-2: #34d399;
    --emr-emerald-glow: rgba(16,185,129,.32);
    --emr-emerald-sub: rgba(16,185,129,.09);
    --emr-emerald-bdr: rgba(16,185,129,.22);
    /* ── Amber ────────────────────────────────────────────── */
    --emr-amber: #f59e0b;
    --emr-amber-sub: rgba(245,158,11,.10);
    --emr-amber-bdr: rgba(245,158,11,.24);
    /* ── Rose ─────────────────────────────────────────────── */
    --emr-rose: #f43f5e;
    --emr-rose-sub: rgba(244,63,94,.10);
    --emr-rose-bdr: rgba(244,63,94,.24);
    --emr-rose-glow: rgba(244,63,94,.36);
    /* ── Brand gradients ──────────────────────────────────── */
    --emr-grad: linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);
    --emr-grad-text: linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);
    --emr-grad-glow: linear-gradient(135deg,rgba(59,130,246,.35),rgba(139,92,246,.35));
    /* ── Borders ──────────────────────────────────────────── */
    --emr-bdr: rgba(255,255,255,.06);
    --emr-bdr-2: rgba(255,255,255,.10);
    --emr-bdr-3: rgba(255,255,255,.16);
    /* ── Shadows ──────────────────────────────────────────── */
    --emr-shadow-sm: 0 4px 16px rgba(0,0,0,.48);
    --emr-shadow-md: 0 12px 40px rgba(0,0,0,.58);
    --emr-shadow-lg: 0 24px 72px rgba(0,0,0,.68);
    --emr-shadow-glow: 0 0 50px rgba(59,130,246,.18);
    /* ── Radii ────────────────────────────────────────────── */
    --emr-r-xs: 4px;
    --emr-r-sm: 8px;
    --emr-r-md: 12px;
    --emr-r-lg: 16px;
    --emr-r-xl: 22px;
    --emr-r-2xl: 28px;
    --emr-r-pill: 999px;
    /* ── Typography ───────────────────────────────────────── */
    --emr-font: 'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
    --emr-mono: 'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,monospace;
    /* ── Easing ───────────────────────────────────────────── */
    --emr-ease: cubic-bezier(.22,1,.36,1);
    --emr-ease-in: cubic-bezier(.55,0,1,.45);
    --emr-ease-out: cubic-bezier(0,.55,.45,1);
    --emr-spring: cubic-bezier(.34,1.56,.64,1);
    /* ── Z-indices ────────────────────────────────────────── */
    --emr-z-base: 1;
    --emr-z-card: 10;
    --emr-z-float: 20;
    --emr-z-modal: 100;
    --emr-z-top: 300;
}


/* ══════════════════════════════════════════════════════════════
   3. SHARED UTILITIES
══════════════════════════════════════════════════════════════ */

/* Eyebrow badge */
.emr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 14px;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.emr-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-azure-2);
    box-shadow: 0 0 8px var(--emr-azure-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 2s ease-in-out infinite;
}

@keyframes emr-pulse-dot {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.7);
    }
}

/* Gradient text */
.emr-grad-text {
    background: var(--emr-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Buttons ── */
.emr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: clamp(13px,1.5vw,17px) clamp(26px,3vw,42px);
    border-radius: var(--emr-r-pill);
    background: var(--emr-grad);
    color: #fff;
    font-family: var(--emr-font);
    font-size: clamp(13.5px,1.3vw,15.5px);
    font-weight: 800;
    letter-spacing: -0.016em;
    line-height: 1;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(59,130,246,.3), 0 8px 28px rgba(37,99,235,.40), 0 0 50px rgba(59,130,246,.12);
    transition: transform .22s var(--emr-ease), box-shadow .22s ease;
    white-space: nowrap;
    cursor: pointer;
}

    .emr-btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,255,255,.14),transparent 60%);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .emr-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(59,130,246,.45), 0 14px 40px rgba(37,99,235,.55), 0 0 70px rgba(59,130,246,.20);
    }

        .emr-btn-primary:hover::before {
            opacity: 1;
        }

    .emr-btn-primary:active {
        transform: translateY(0);
    }

.emr-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: clamp(12px,1.4vw,16px) clamp(24px,2.8vw,38px);
    border-radius: var(--emr-r-pill);
    background: transparent;
    border: 1px solid var(--emr-bdr-2);
    color: var(--emr-t-2);
    font-family: var(--emr-font);
    font-size: clamp(13.5px,1.3vw,15.5px);
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1;
    text-decoration: none;
    transition: border-color .22s ease, color .22s ease, background .22s ease, transform .22s var(--emr-ease);
    white-space: nowrap;
    cursor: pointer;
}

    .emr-btn-ghost:hover {
        border-color: var(--emr-bdr-3);
        color: var(--emr-t-1);
        background: var(--emr-sf-1);
        transform: translateY(-2px);
    }

/* Caret blink */
@keyframes emr-caret {
    0%,45% {
        opacity: 1;
    }

    55%,100% {
        opacity: 0;
    }
}

/* Shimmer (for eyebrow + badge) */
@keyframes emr-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}


/* ══════════════════════════════════════════════════════════════
   4. SECTION 1 — "The appointment was two minutes ago."
   
   Animation boot sequence (fired on DOMContentLoaded):
     0ms   Canvas particle field starts
    50ms   .emr-s1-on → orbs + grid appear
   100ms   scan beam fires (sweeps left → right, 1.8s)
   400ms   timestamp stamp slides in
   650ms   eyebrow reveals
   900ms   H1 line 1 wipes up
  1100ms   H1 line 2 wipes up
  1300ms   H1 line 3 (gradient) wipes in from left
  1600ms   subheadline clears from blur
  2000ms   stats stagger in
  2400ms   CTAs rise up
  2600ms   card column enters (perspective slide)
  then:   card inner sequence loops indefinitely
══════════════════════════════════════════════════════════════ */

/* ── Shell ── */
.emr-s1 {
    position: relative;
    background: var(--emr-obs-1);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(96px,12vh,140px) clamp(20px,4vw,60px) clamp(64px,8vh,100px);
}

/* ── Canvas ── */
.emr-s1-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.emr-s1-on .emr-s1-canvas {
    opacity: 1;
}

/* ── Dot grid ── */
.emr-s1-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(59,130,246,.040) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 92% 90% at 50% 40%, black 25%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 92% 90% at 50% 40%, black 25%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease .4s;
}

.emr-s1-on .emr-s1-grid {
    opacity: 1;
}

/* ── Ambient orbs ── */
.emr-s1-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .6s;
}

.emr-s1-on .emr-s1-orb {
    opacity: 1;
}

.emr-s1-orb--tl {
    top: -12%;
    left: -6%;
    width: clamp(320px,45vw,640px);
    height: clamp(320px,45vw,640px);
    background: radial-gradient(circle, rgba(139,92,246,.10) 0%, transparent 70%);
    animation: emr-orb-drift 22s ease-in-out infinite alternate;
}

.emr-s1-orb--br {
    bottom: -10%;
    right: -5%;
    width: clamp(280px,38vw,560px);
    height: clamp(280px,38vw,560px);
    background: radial-gradient(circle, rgba(59,130,246,.09) 0%, transparent 70%);
    animation: emr-orb-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes emr-orb-drift {
    0% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(30px,-40px) scale(1.12);
    }

    100% {
        transform: translate(-16px,22px) scale(.90);
    }
}

/* ── Scan beam (sweeps once on boot) ── */
.emr-s1-scanbeam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 160px;
    background: linear-gradient(to right, transparent 0%, rgba(59,130,246,.05) 25%, rgba(99,102,241,.10) 50%, rgba(59,130,246,.05) 75%, transparent 100% );
    pointer-events: none;
    z-index: 2;
    transform: translateX(-200px);
    will-change: transform;
}

    /* Thin leading edge inside the beam */
    .emr-s1-scanbeam::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        margin-left: -1px;
        background: linear-gradient(to bottom, transparent 0%, rgba(59,130,246,.55) 15%, rgba(139,92,246,.85) 50%, rgba(59,130,246,.55) 85%, transparent 100% );
    }

    .emr-s1-scanbeam.fire {
        animation: emr-beam-sweep 1.8s cubic-bezier(.42,0,.22,1) forwards;
    }

@keyframes emr-beam-sweep {
    from {
        transform: translateX(-200px);
    }

    to {
        transform: translateX(calc(100vw + 200px));
    }
}

/* ── Inner layout ── */
.emr-s1-inner {
    position: relative;
    z-index: var(--emr-z-base);
    max-width: 1420px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: clamp(40px,5.5vw,88px);
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   COPY COLUMN
══════════════════════════════════════════════════════════════ */
.emr-s1-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.5vw,30px);
}

/* ── Timestamp stamp ── */
.emr-s1-stamp {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--emr-mono);
    font-size: clamp(10px,.96vw,11.5px);
    font-weight: 600;
    color: var(--emr-t-3);
    letter-spacing: .06em;
    /* initial state */
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .55s ease, transform .55s var(--emr-ease);
}

    .emr-s1-stamp.show {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s1-stamp-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--emr-emerald);
    box-shadow: 0 0 10px var(--emr-emerald-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s1-stamp-time {
    font-weight: 800;
    color: var(--emr-t-2);
    letter-spacing: .04em;
}

.emr-s1-stamp-sep {
    color: var(--emr-t-5);
}

/* ── Eyebrow ── */
.emr-s1-eyebrow-wrap {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s var(--emr-ease);
}

    .emr-s1-eyebrow-wrap.show {
        opacity: 1;
        transform: translateY(0);
    }

/* ── H1 ── */
.emr-s1-h1 {
    display: flex;
    flex-direction: column;
    gap: clamp(2px,.4vw,6px);
}

.emr-s1-line {
    display: block;
    font-family: var(--emr-font);
    font-size: clamp(32px,5vw,74px);
    font-weight: 800;
    line-height: 1.10;
    letter-spacing: -0.050em;
    color: var(--emr-t-1);
    /* initial state: clipped below the baseline */
    clip-path: inset(0 0 108% 0);
    transition: clip-path .65s var(--emr-ease);
}

    .emr-s1-line.show {
        clip-path: inset(0 0 0% 0);
    }

/* Line 3: accent — different entry direction (from left) */
.emr-s1-line--accent {
    clip-path: inset(0 108% 0 0);
    background: var(--emr-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% auto;
    animation: emr-grad-flow 5s linear infinite paused;
}

    .emr-s1-line--accent.show {
        clip-path: inset(0 0% 0 0);
        animation-play-state: running;
    }

@keyframes emr-grad-flow {
    to {
        background-position: 220% center;
    }
}

/* ── Sub headline ── */
.emr-s1-sub {
    font-size: clamp(15px,1.5vw,18px);
    color: var(--emr-t-2);
    line-height: 1.78;
    max-width: 520px;
    /* initial state */
    opacity: 0;
    filter: blur(6px);
    transition: opacity .65s ease, filter .65s ease;
}

    .emr-s1-sub.show {
        opacity: 1;
        filter: blur(0);
    }

/* ── Stats row ── */
.emr-s1-stats {
    display: flex;
    align-items: center;
    gap: clamp(16px,2.5vw,30px);
    flex-wrap: wrap;
}

.emr-s1-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* initial state */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease var(--sd,0ms), transform .5s var(--emr-ease) var(--sd,0ms);
}

    .emr-s1-stat.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s1-stat-n {
    font-family: var(--emr-font);
    font-size: clamp(26px,3.2vw,44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
    color: var(--emr-t-1);
}

.emr-s1-stat-l {
    font-size: clamp(10.5px,1vw,12px);
    font-weight: 600;
    color: var(--emr-t-3);
    letter-spacing: .04em;
    line-height: 1.3;
}

.emr-s1-stat-div {
    width: 1px;
    height: clamp(28px,3.5vw,44px);
    background: var(--emr-bdr-2);
    align-self: center;
    flex-shrink: 0;
}

/* ── CTAs ── */
.emr-s1-ctas {
    display: flex;
    align-items: center;
    gap: clamp(10px,1.4vw,16px);
    flex-wrap: wrap;
    /* initial state */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s var(--emr-ease);
}

    .emr-s1-ctas.show {
        opacity: 1;
        transform: translateY(0);
    }


/* ══════════════════════════════════════════════════════════════
   VISUAL COLUMN — EMR card demo
══════════════════════════════════════════════════════════════ */
.emr-s1-visual {
    position: relative;
    /* initial state: slides in from right with perspective */
    opacity: 0;
    transform: perspective(1100px) rotateY(-8deg) translateX(48px);
    transition: opacity .8s ease, transform .85s var(--emr-ease);
}

    .emr-s1-visual.show {
        opacity: 1;
        transform: perspective(1100px) rotateY(0deg) translateX(0);
    }

/* ── Card shell ── */
.emr-s1-card {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), var(--emr-shadow-lg), 0 0 80px rgba(59,130,246,.08);
    position: relative;
    transition: box-shadow 1.2s ease;
}

    /* Aurora border — activated when conflict is detected */
    .emr-s1-card.aurora {
        box-shadow: 0 0 0 1px rgba(244,63,94,.35), var(--emr-shadow-lg), 0 0 80px rgba(244,63,94,.10);
        animation: emr-card-aurora 2.6s ease-in-out infinite alternate;
    }

@keyframes emr-card-aurora {
    0% {
        box-shadow: 0 0 0 1px rgba(244,63,94,.35), 0 24px 72px rgba(0,0,0,.68), 0 0 80px rgba(244,63,94,.10);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(245,158,11,.30), 0 24px 72px rgba(0,0,0,.68), 0 0 80px rgba(245,158,11,.08);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(244,63,94,.35), 0 24px 72px rgba(0,0,0,.68), 0 0 80px rgba(244,63,94,.10);
    }
}

/* ── Chrome bar ── */
.emr-s1-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: var(--emr-obs-4);
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s1-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s1-chrome-dot--r {
    background: rgba(244,63,94,.55);
}

.emr-s1-chrome-dot--a {
    background: rgba(245,158,11,.55);
}

.emr-s1-chrome-dot--g {
    background: rgba(16,185,129,.55);
}

.emr-s1-chrome-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 600;
    color: var(--emr-t-4);
    flex: 1;
    letter-spacing: .04em;
    margin-left: 4px;
}

.emr-s1-chrome-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--emr-emerald);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 9px;
}

.emr-s1-chrome-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--emr-emerald);
    box-shadow: 0 0 6px var(--emr-emerald-glow);
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

/* ── Two-panel layout ── */
.emr-s1-panels {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 380px;
}

/* ── Sidebar ── */
.emr-s1-sidebar {
    background: var(--emr-obs-2);
    border-right: 1px solid var(--emr-bdr);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emr-s1-sidebar-label {
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    padding: 0 6px;
    margin-bottom: 4px;
}

/* Active appointment card in sidebar */
.emr-s1-appt-card {
    display: flex;
    border-radius: var(--emr-r-md);
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-azure-bdr);
    overflow: hidden;
    /* initial: hidden, slides in */
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .45s ease, transform .45s var(--emr-ease);
}

    .emr-s1-appt-card.show {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s1-appt-stripe {
    width: 3px;
    background: var(--emr-azure);
    flex-shrink: 0;
    border-radius: 3px 0 0 3px;
    box-shadow: 0 0 8px var(--emr-azure-glow);
}

.emr-s1-appt-body {
    padding: 8px 9px;
    flex: 1;
    min-width: 0;
}

.emr-s1-appt-name {
    font-size: clamp(11.5px,1.1vw,13px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    min-height: 1.3em; /* reserve space for typewriter */
}

.emr-s1-appt-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--emr-t-3);
    letter-spacing: .05em;
    margin-bottom: 5px;
}

.emr-s1-appt-status {
    display: inline-flex;
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 7px;
}

/* Ghost (inactive) appointment rows */
.emr-s1-ghost {
    border-radius: var(--emr-r-sm);
    background: var(--emr-sf-1);
    border: 1px solid var(--emr-bdr);
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transition: opacity .4s ease;
}

    .emr-s1-ghost.show {
        opacity: 1;
    }

.emr-s1-ghost-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--emr-sf-2);
}

/* ── Workspace ── */
.emr-s1-workspace {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
    position: relative;
}

/* ── Patient identity strip ── */
.emr-s1-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--emr-bdr);
    /* initial */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .45s ease, transform .45s var(--emr-ease);
}

    .emr-s1-identity.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s1-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--emr-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--emr-font);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -.02em;
}

.emr-s1-patient-name {
    font-size: clamp(13px,1.3vw,14.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.020em;
    line-height: 1.25;
}

.emr-s1-patient-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-3);
    margin-top: 2px;
    flex-wrap: wrap;
}

.emr-s1-patient-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--emr-t-4);
    flex-shrink: 0;
}

/* QlynicId — scans in character by character */
.emr-s1-qid {
    font-family: var(--emr-mono);
    font-size: clamp(10px,.96vw,11.5px);
    font-weight: 700;
    color: var(--emr-emerald-2);
    letter-spacing: .08em;
    transition: text-shadow .4s ease;
}

    .emr-s1-qid.glow {
        text-shadow: 0 0 18px var(--emr-emerald-glow);
    }

/* ── AI History Summary panel ── */
.emr-s1-ai-panel {
    background: linear-gradient(135deg,rgba(139,92,246,.07),rgba(59,130,246,.05));
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-md);
    padding: 10px 12px;
    /* initial: slides down */
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;
    transition: opacity .4s ease, transform .4s var(--emr-ease), max-height .5s ease;
}

    .emr-s1-ai-panel.show {
        opacity: 1;
        transform: translateY(0);
        max-height: 120px;
    }

.emr-s1-ai-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-violet-2);
    margin-bottom: 6px;
}

.emr-s1-ai-sparkle {
    color: var(--emr-violet-2);
    font-size: 10px;
    animation: emr-sparkle-pulse 2.4s ease-in-out infinite;
}

@keyframes emr-sparkle-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

.emr-s1-ai-text {
    font-size: clamp(11px,1.05vw,12.5px);
    color: var(--emr-t-2);
    line-height: 1.60;
    min-height: 1.5em;
}

/* Typewriter cursor */
.emr-s1-caret {
    display: inline-block;
    width: 1.5px;
    height: .9em;
    background: var(--emr-t-2);
    border-radius: 1px;
    vertical-align: middle;
    margin-left: 2px;
    animation: emr-caret .85s ease-in-out infinite;
}

/* ── Allergy row ── */
.emr-s1-allergy {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    /* initial */
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .4s ease, transform .4s var(--emr-ease);
}

    .emr-s1-allergy.show {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s1-allergy-label {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-3);
}

.emr-s1-allergy-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 10px;
    /* pop in */
    opacity: 0;
    transform: scale(0);
    transition: opacity .35s ease var(--cd,0ms), transform .42s var(--emr-spring) var(--cd,0ms);
}

.emr-s1-allergy.show .emr-s1-allergy-chip {
    opacity: 1;
    transform: scale(1);
}

/* ── Clinical note ── */
.emr-s1-note {
    /* initial */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s var(--emr-ease);
}

    .emr-s1-note.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s1-note-label {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-3);
    margin-bottom: 5px;
}

.emr-s1-note-body {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: 9px 11px;
    font-size: clamp(11px,1.05vw,12.5px);
    color: var(--emr-t-2);
    line-height: 1.65;
    min-height: 2.8em;
}

/* ── Prescription row ── */
.emr-s1-rx {
    /* initial */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s var(--emr-ease);
}

    .emr-s1-rx.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s1-rx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-pill);
    padding: 5px 12px 5px 8px;
    font-size: clamp(10.5px,1vw,12px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.010em;
}

.emr-s1-rx-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-azure-2);
    flex-shrink: 0;
}

/* Conflict badge — pops on the Rx chip */
.emr-s1-conflict-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 8px;
    /* initial */
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s ease, transform .38s var(--emr-spring);
}

    .emr-s1-conflict-badge.show {
        opacity: 1;
        transform: scale(1);
        animation: emr-conflict-pulse 1.8s ease-in-out 2;
    }

@keyframes emr-conflict-pulse {
    0%,100% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 0 3px rgba(244,63,94,.22);
    }
}

/* ── Conflict panel (slides up from card bottom) ── */
.emr-s1-conflict-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg,rgba(244,63,94,.10),rgba(245,158,11,.06));
    border-top: 1px solid var(--emr-rose-bdr);
    border-radius: 0 0 var(--emr-r-xl) var(--emr-r-xl);
    padding: 11px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* initial */
    transform: translateY(100%);
    opacity: 0;
    transition: transform .48s var(--emr-ease), opacity .4s ease;
}

    .emr-s1-conflict-panel.show {
        transform: translateY(0);
        opacity: 1;
    }

.emr-s1-conflict-ico {
    color: var(--emr-rose);
    flex-shrink: 0;
    margin-top: 1px;
}

.emr-s1-conflict-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-rose);
    margin-bottom: 2px;
}

.emr-s1-conflict-body {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-2);
    line-height: 1.55;
}

    .emr-s1-conflict-body strong {
        color: var(--emr-t-1);
        font-weight: 700;
    }


/* ══════════════════════════════════════════════════════════════
   FLOATING BADGE  (outside the card, absolute to visual col)
══════════════════════════════════════════════════════════════ */
.emr-s1-float-badge {
    position: absolute;
    bottom: -18px;
    right: clamp(12px,2vw,32px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: var(--emr-r-lg);
    padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.50), 0 0 20px rgba(16,185,129,.12);
    /* initial */
    opacity: 0;
    transform: translateY(20px) scale(.94);
    transition: opacity .5s ease, transform .55s var(--emr-spring);
    z-index: var(--emr-z-float);
    pointer-events: none;
    max-width: 260px;
}

    .emr-s1-float-badge.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.emr-s1-float-ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-emerald-2);
    flex-shrink: 0;
}

.emr-s1-float-title {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-emerald-2);
    margin-bottom: 1px;
}

.emr-s1-float-qid {
    font-family: var(--emr-mono);
    font-size: clamp(11px,1.05vw,12.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: .06em;
}

/* ── Scroll cue ── */
.emr-s1-scroll {
    position: absolute;
    bottom: clamp(20px,3vh,36px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--emr-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    z-index: var(--emr-z-base);
    /* initial */
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

    .emr-s1-scroll.show {
        opacity: 1;
    }

.emr-s1-scroll-arrow {
    animation: emr-scroll-bob 2s ease-in-out infinite;
}

@keyframes emr-scroll-bob {
    0%,100% {
        transform: translateY(0);
    }

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


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE  —  S1
   ① 1200px  ② 960px  ③ 768px  ④ 640px  ⑤ 400px
══════════════════════════════════════════════════════════════ */

/* ① Wide laptop */
@media (max-width: 1200px) {

    .emr-s1-panels {
        grid-template-columns: 200px 1fr;
    }

    .emr-s1-line {
        font-size: clamp(30px,4.6vw,60px);
    }
}

/* ② Tablet landscape — hide sidebar on card, keep layout */
@media (max-width: 960px) {

    .emr-s1-inner {
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px,4vw,52px);
    }

    /* Hide sidebar on card — show workspace only */
    .emr-s1-sidebar {
        display: none;
    }

    .emr-s1-panels {
        grid-template-columns: 1fr;
    }

    .emr-s1-line {
        font-size: clamp(28px,4.5vw,52px);
    }
}

/* ③ Tablet portrait — stack */
@media (max-width: 768px) {

    .emr-s1 {
        padding-top: clamp(80px,10vh,110px);
        padding-bottom: clamp(48px,7vh,80px);
        justify-content: flex-start;
    }

    .emr-s1-inner {
        grid-template-columns: 1fr;
        gap: clamp(40px,6vw,60px);
    }

    .emr-s1-visual {
        /* On stack layout, slide from bottom instead of right */
        transform: perspective(800px) rotateX(4deg) translateY(32px);
    }

        .emr-s1-visual.show {
            transform: perspective(800px) rotateX(0) translateY(0);
        }

    .emr-s1-float-badge {
        bottom: -14px;
        right: 10px;
    }

    .emr-s1-line {
        font-size: clamp(30px,7vw,48px);
    }

    .emr-s1-sub {
        max-width: 100%;
        font-size: clamp(15px,3.8vw,17px);
    }

    .emr-s1-scroll {
        display: none;
    }
}

/* ④ Mobile */
@media (max-width: 640px) {

    .emr-s1 {
        padding: clamp(72px,9vh,96px) 18px clamp(44px,6vh,70px);
    }

    .emr-s1-line {
        font-size: clamp(28px,8.5vw,42px);
        letter-spacing: -0.042em;
    }

    .emr-s1-sub {
        font-size: 15px;
        line-height: 1.74;
    }

    /* Stats — wrap to 2 columns */
    .emr-s1-stats {
        gap: 12px;
    }

    .emr-s1-stat-div {
        display: none;
    }

    .emr-s1-stat-n {
        font-size: clamp(24px,7vw,36px);
    }

    .emr-s1-stat-l {
        font-size: 10.5px;
    }

    /* CTAs — stack */
    .emr-s1-ctas {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .emr-btn-primary, .emr-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    /* Card — compress */
    .emr-s1-workspace {
        padding: 12px;
        gap: 9px;
    }

    .emr-s1-conflict-panel {
        padding: 9px 12px;
    }

    .emr-s1-float-badge {
        max-width: 200px;
        padding: 8px 10px;
    }

    .emr-s1-float-qid {
        font-size: 11px;
    }

    /* Card panels height */
    .emr-s1-panels {
        min-height: 320px;
    }
}

/* ⑤ Small phone */
@media (max-width: 400px) {

    .emr-s1 {
        padding-left: 14px;
        padding-right: 14px;
    }

    .emr-s1-line {
        font-size: clamp(26px,8vw,36px);
    }

    .emr-s1-sub {
        font-size: 14.5px;
    }

    .emr-s1-stat-n {
        font-size: 24px;
    }

    .emr-s1-ai-text {
        font-size: 11px;
    }

    .emr-s1-note-body {
        font-size: 11px;
    }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s1-canvas,
    .emr-s1-grid,
    .emr-s1-orb,
    .emr-s1-scanbeam {
        display: none !important;
    }

    .emr-s1-line,
    .emr-s1-stamp,
    .emr-s1-eyebrow-wrap,
    .emr-s1-sub,
    .emr-s1-stat,
    .emr-s1-ctas,
    .emr-s1-visual,
    .emr-s1-appt-card,
    .emr-s1-ghost,
    .emr-s1-identity,
    .emr-s1-ai-panel,
    .emr-s1-allergy,
    .emr-s1-note,
    .emr-s1-rx,
    .emr-s1-float-badge {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        max-height: none !important;
        transition: none !important;
        animation: none !important;
    }

    .emr-s1-allergy-chip {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .emr-s1-conflict-badge.show {
        opacity: 1 !important;
        transform: scale(1) !important;
        animation: none !important;
    }

    .emr-s1-line--accent {
        -webkit-text-fill-color: transparent;
        clip-path: none !important;
    }

    .emr-s1-conflict-panel.show {
        transform: none !important;
    }
}











/* ================================================================
   EMR.aspx — Section 2 — "The Journey"
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   Layout: centred header → 5-step timeline strip → comparison bar.

   THE SIGNAL PATH ANIMATION — "never done" technique:
   ▸ A horizontal wire connects all 5 nodes.
   ▸ When IO fires (section 30% visible, rootMargin shrinks bottom
     so animation only starts once user is actually watching it),
     a glowing current travels left→right along the wire using a
     clip-path width reveal on the ::after pseudo-element.
   ▸ Each node activates sequentially: the outer ring pulses once,
     the icon pops with spring scale, the connector to the next node
     fills — then the node's detail card drops in from above.
   ▸ Detail cards each have a unique micro-animation (typed text,
     countdown clock, QlynicId scan, record-open flash).
   ▸ The animated current wire then loops with a photon-chase effect
     (a bright dot running along the filled wire endlessly).
   ================================================================ */


/* ── Shell ── */
.emr-s2 {
    position: relative;
    background: var(--emr-obs-2);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

    /* Subtle top-glow from S1 */
    .emr-s2::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--emr-azure-bdr) 30%, var(--emr-violet-bdr) 50%, var(--emr-azure-bdr) 70%, transparent 100%);
        pointer-events: none;
    }

    /* Noise grain */
    .emr-s2::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: .018;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
        pointer-events: none;
        z-index: 0;
    }

/* Ambient orb */
.emr-s2-orb {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(400px,55vw,780px);
    height: clamp(400px,55vw,780px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.06) 0%, rgba(139,92,246,.04) 40%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    animation: emr-s2-orb-breathe 16s ease-in-out infinite alternate;
}

@keyframes emr-s2-orb-breathe {
    0% {
        opacity: .6;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.14);
    }
}


/* ── Inner wrap ── */
.emr-s2-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.emr-s2-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(52px,7.5vw,92px);
    /* entry */
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s var(--emr-ease);
}

    .emr-s2-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s2-eyebrow-wrap {
    margin-bottom: clamp(14px,1.8vw,20px);
}

.emr-s2-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,4vw,58px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.048em;
    color: var(--emr-t-1);
    margin-bottom: clamp(14px,1.8vw,20px);
}

    .emr-s2-h2 em {
        font-style: normal;
        background: var(--emr-grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s2-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}


/* ════════════════════════════════════════════════════════════
   TIMELINE STRIP
   Desktop: horizontal 5 nodes in a row.
   Mobile: vertical stack.
════════════════════════════════════════════════════════════ */
.emr-s2-timeline {
    position: relative;
}

/* ── Wire track — the "conductor" ── */
.emr-s2-wire-wrap {
    position: absolute;
    top: clamp(26px,3vw,36px); /* vertically centred on node circles */
    left: calc(clamp(20px,4.5vw,64px) + 50% / 5); /* aligns with first node centre */
    right: calc(clamp(20px,4.5vw,64px) + 50% / 5); /* aligns with last node centre  */
    height: 2px;
    z-index: 0;
    pointer-events: none;
}

/* Inactive wire base */
.emr-s2-wire-base {
    position: absolute;
    inset: 0;
    background: var(--emr-bdr-2);
    border-radius: 1px;
}

/* Active fill — grows left→right via scaleX on .s2-run */
.emr-s2-wire-fill {
    position: absolute;
    inset: 0;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--emr-azure), var(--emr-violet));
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 2.4s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 0 8px var(--emr-azure-glow);
}

.emr-s2-timeline.s2-run .emr-s2-wire-fill {
    transform: scaleX(1);
}

/* Photon — a bright bead that chases along the wire after fill completes */
.emr-s2-photon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 4px rgba(99,102,241,.75), 0 0 18px 6px rgba(59,130,246,.45);
    opacity: 0;
    pointer-events: none;
}

.emr-s2-timeline.s2-photon .emr-s2-photon {
    animation: emr-s2-photon-run 2.2s cubic-bezier(.42,0,.22,1) infinite 2.6s;
}

@keyframes emr-s2-photon-run {
    0% {
        left: 0%;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

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


/* ── Steps row ── */
.emr-s2-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}

/* ── Single step ── */
.emr-s2-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* entry — each step rises individually */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease var(--emr-sd, 0ms), transform .6s var(--emr-ease) var(--emr-sd, 0ms);
}

    .emr-s2-step.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Node circle ── */
.emr-s2-node {
    width: clamp(48px,5.5vw,64px);
    height: clamp(48px,5.5vw,64px);
    border-radius: 50%;
    background: var(--emr-obs-4);
    border: 2px solid var(--emr-bdr-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

    /* Outer ring that pulses on activation */
    .emr-s2-node::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        transition: border-color .4s ease, opacity .4s ease;
        opacity: 0;
    }

/* Active node state */
.emr-s2-step.active .emr-s2-node {
    border-color: var(--emr-azure-bdr);
    background: var(--emr-azure-sub);
    box-shadow: 0 0 0 4px rgba(59,130,246,.10), 0 0 20px rgba(59,130,246,.20);
}

    .emr-s2-step.active .emr-s2-node::before {
        border-color: var(--emr-azure-bdr);
        opacity: 1;
        animation: emr-s2-ring-pulse 1.8s ease-out 1;
    }

@keyframes emr-s2-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

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

/* Done state (steps before the active one) */
.emr-s2-step.done .emr-s2-node {
    border-color: var(--emr-emerald-bdr);
    background: var(--emr-emerald-sub);
    box-shadow: 0 0 12px rgba(16,185,129,.15);
}

/* Node icon */
.emr-s2-node-ico {
    color: var(--emr-t-3);
    transition: color .35s ease, transform .42s var(--emr-spring);
}

.emr-s2-step.active .emr-s2-node-ico {
    color: var(--emr-azure-2);
    transform: scale(1.15);
}

.emr-s2-step.done .emr-s2-node-ico {
    color: var(--emr-emerald-2);
}

/* ── Step number chip ── */
.emr-s2-num {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--emr-obs-5);
    border: 1px solid var(--emr-bdr-2);
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 800;
    color: var(--emr-t-3);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    z-index: 3;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.emr-s2-step.active .emr-s2-num {
    background: var(--emr-azure);
    border-color: var(--emr-azure);
    color: #fff;
}

.emr-s2-step.done .emr-s2-num {
    background: var(--emr-emerald);
    border-color: var(--emr-emerald);
    color: #fff;
}

/* ── Step label block (below node) ── */
.emr-s2-label-block {
    text-align: center;
    padding: clamp(10px,1.4vw,16px) clamp(6px,1.2vw,14px) 0;
    max-width: 180px;
}

.emr-s2-step-title {
    font-size: clamp(12px,1.2vw,14px);
    font-weight: 800;
    color: var(--emr-t-2);
    letter-spacing: -0.018em;
    line-height: 1.30;
    margin-bottom: 4px;
    transition: color .35s ease;
}

.emr-s2-step.active .emr-s2-step-title {
    color: var(--emr-t-1);
}

.emr-s2-step.done .emr-s2-step-title {
    color: var(--emr-t-1);
}

.emr-s2-step-sub {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-3);
    line-height: 1.55;
}

/* ── Detail card — unique per step, drops in when active ── */
.emr-s2-detail {
    margin-top: clamp(12px,1.6vw,18px);
    width: 100%;
    max-width: 180px;
    /* entry */
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transition: opacity .45s ease, transform .50s var(--emr-spring);
    pointer-events: none;
    min-height: 68px; /* prevent layout shift */
}

.emr-s2-step.active .emr-s2-detail,
.emr-s2-step.done .emr-s2-detail {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.emr-s2-detail-card {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: clamp(9px,1.2vw,13px) clamp(10px,1.3vw,14px);
    position: relative;
    overflow: hidden;
}

/* Accent line on active card */
.emr-s2-step.active .emr-s2-detail-card {
    border-color: var(--emr-azure-bdr);
}

.emr-s2-step.done .emr-s2-detail-card {
    border-color: var(--emr-emerald-bdr);
}

.emr-s2-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity .35s ease;
}

.emr-s2-step.active .emr-s2-detail-card::before {
    background: var(--emr-azure);
    opacity: 1;
    box-shadow: 0 0 8px var(--emr-azure-glow);
}

.emr-s2-step.done .emr-s2-detail-card::before {
    background: var(--emr-emerald);
    opacity: 1;
}

/* ── Step 1 detail — chat bubble ── */
.emr-s2-chat-bubble {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.emr-s2-chat-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--emr-violet), var(--emr-azure));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.emr-s2-chat-text {
    flex: 1;
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
    border-radius: 10px 10px 10px 2px;
    padding: 6px 9px;
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-1);
    line-height: 1.5;
    min-height: 2.4em;
    word-break: break-word;
}

/* Typing indicator — 3 dots */
.emr-s2-typing {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 9px;
}

    .emr-s2-typing span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--emr-t-3);
        animation: emr-s2-bounce .8s ease-in-out infinite;
    }

        .emr-s2-typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .emr-s2-typing span:nth-child(3) {
            animation-delay: .30s;
        }

@keyframes emr-s2-bounce {
    0%,80%,100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }
}

/* ── Step 2 detail — OTP + hold timer ── */
.emr-s2-otp-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 7px;
}

.emr-s2-otp-digit {
    width: clamp(18px,2.4vw,24px);
    height: clamp(22px,2.8vw,28px);
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr-2);
    border-radius: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(10px,1vw,12px);
    font-weight: 800;
    color: var(--emr-azure-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, border-color .3s ease;
}

    .emr-s2-otp-digit.filled {
        background: var(--emr-azure-sub);
        border-color: var(--emr-azure-bdr);
    }

.emr-s2-hold-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    border-radius: var(--emr-r-sm);
    padding: 4px 8px;
}

.emr-s2-hold-label {
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-amber);
}

.emr-s2-hold-timer {
    font-family: var(--emr-mono);
    font-size: clamp(11px,1.1vw,13px);
    font-weight: 800;
    color: var(--emr-amber);
    letter-spacing: .04em;
}

/* ── Step 3 detail — SMS confirmation ── */
.emr-s2-sms-wrap {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.emr-s2-sms-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--emr-emerald);
    box-shadow: 0 0 8px var(--emr-emerald-glow);
    flex-shrink: 0;
    margin-top: 4px;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s2-sms-bubble {
    flex: 1;
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: 10px 10px 10px 2px;
    padding: 6px 9px;
    font-size: clamp(9.5px,.92vw,11px);
    color: var(--emr-t-1);
    line-height: 1.5;
}

.emr-s2-sms-time {
    font-family: var(--emr-mono);
    font-size: 8px;
    color: var(--emr-t-3);
    margin-top: 4px;
    letter-spacing: .04em;
}

/* ── Step 4 detail — QlynicId generation ── */
.emr-s2-qid-gen {
    text-align: center;
}

.emr-s2-qid-gen-label {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-3);
    margin-bottom: 6px;
}

.emr-s2-qid-value {
    font-family: var(--emr-mono);
    font-size: clamp(13px,1.5vw,16px);
    font-weight: 800;
    color: var(--emr-emerald-2);
    letter-spacing: .10em;
    line-height: 1;
    text-shadow: 0 0 20px rgba(52,211,153,.28);
    display: block;
    margin-bottom: 7px;
    min-height: 1.2em;
}

.emr-s2-qid-sub {
    font-size: 9.5px;
    color: var(--emr-t-3);
    line-height: 1.45;
}

/* ── Step 5 detail — record open ── */
.emr-s2-record-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.emr-s2-record-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 7px;
    background: var(--emr-sf-1);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-sm);
    /* flash in one by one */
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s ease var(--emr-fd,0ms), transform .38s var(--emr-ease) var(--emr-fd,0ms);
}

.emr-s2-step.active .emr-s2-record-row,
.emr-s2-step.done .emr-s2-record-row {
    opacity: 1;
    transform: translateX(0);
}

.emr-s2-record-key {
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    flex-shrink: 0;
    width: 42px;
}

.emr-s2-record-val {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.010em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.emr-s2-record-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-azure);
    box-shadow: 0 0 6px var(--emr-azure-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}


/* ════════════════════════════════════════════════════════════
   COMPARISON BAR  — "47 seconds vs 2.4 days"
════════════════════════════════════════════════════════════ */
.emr-s2-compare {
    margin-top: clamp(52px,7vw,88px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px,2.5vw,32px);
    /* entry */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s2-compare.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s2-compare-card {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-xl);
    padding: clamp(20px,2.8vw,34px);
    position: relative;
    overflow: hidden;
}

.emr-s2-compare-card--before {
    border-color: var(--emr-rose-bdr);
    background: linear-gradient(135deg,rgba(244,63,94,.04),var(--emr-obs-4));
}

.emr-s2-compare-card--after {
    border-color: var(--emr-emerald-bdr);
    background: linear-gradient(135deg,rgba(16,185,129,.05),var(--emr-obs-4));
}

/* top accent */
.emr-s2-compare-card--before::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--emr-rose);
    box-shadow: 0 0 12px var(--emr-rose-glow);
}

.emr-s2-compare-card--after::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--emr-emerald);
    box-shadow: 0 0 12px var(--emr-emerald-glow);
}

.emr-s2-compare-tag {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.emr-s2-compare-card--before .emr-s2-compare-tag {
    color: var(--emr-rose);
}

.emr-s2-compare-card--after .emr-s2-compare-tag {
    color: var(--emr-emerald);
}

.emr-s2-compare-num {
    font-family: var(--emr-font);
    font-size: clamp(32px,4.5vw,62px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.060em;
    margin-bottom: 8px;
}

.emr-s2-compare-card--before .emr-s2-compare-num {
    color: var(--emr-rose);
}

.emr-s2-compare-card--after .emr-s2-compare-num {
    color: var(--emr-emerald);
}

.emr-s2-compare-desc {
    font-size: clamp(12.5px,1.2vw,14.5px);
    color: var(--emr-t-2);
    line-height: 1.58;
}

    .emr-s2-compare-desc strong {
        color: var(--emr-t-1);
        font-weight: 700;
    }

/* VS divider */
.emr-s2-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.emr-s2-vs-line {
    width: 1px;
    height: clamp(30px,4vw,50px);
    background: var(--emr-bdr-2);
}

.emr-s2-vs-text {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--emr-t-3);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① Wide laptop */
@media (max-width: 1080px) {
    .emr-s2-label-block {
        max-width: 150px;
    }

    .emr-s2-detail {
        max-width: 150px;
    }

    .emr-s2-step-title {
        font-size: clamp(11.5px,1.1vw,13px);
    }
}

/* ② Tablet — switch to 2-row grid (3 top, 2 bottom) */
@media (max-width: 860px) {

    /* Hide the horizontal wire — doesn't make sense on wrapped layout */
    .emr-s2-wire-wrap {
        display: none;
    }

    .emr-s2-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(20px,3vw,32px) 0;
    }

    /* Recentre steps */
    .emr-s2-label-block {
        max-width: 160px;
    }

    .emr-s2-detail {
        max-width: 160px;
    }

    .emr-s2-compare {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .emr-s2-vs {
        flex-direction: row;
    }

    .emr-s2-vs-line {
        width: clamp(40px,8vw,80px);
        height: 1px;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s2 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s2-inner {
        padding: 0 18px;
    }

    .emr-s2-h2 {
        font-size: clamp(26px,7.5vw,38px);
        letter-spacing: -0.040em;
    }

    .emr-s2-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    /* Single column stack on mobile */
    .emr-s2-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Mobile step = horizontal layout: node left, content right */
    .emr-s2-step {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(14px,4vw,20px);
        padding: clamp(16px,4vw,22px) 0;
        border-bottom: 1px solid var(--emr-bdr);
    }

        .emr-s2-step:last-child {
            border-bottom: none;
        }

    .emr-s2-node {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }

    .emr-s2-label-block {
        text-align: left;
        padding: 0;
        max-width: none;
        flex: 1;
    }

    .emr-s2-detail {
        text-align: left;
        max-width: none;
        margin-top: 10px;
        min-height: auto;
    }

    /* On mobile, steps column content is a flex column */
    .emr-s2-step-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .emr-s2-compare {
        margin-top: clamp(36px,6vw,56px);
        gap: 10px;
    }

    .emr-s2-compare-card {
        padding: 18px 16px;
        border-radius: var(--emr-r-lg);
    }

    .emr-s2-compare-num {
        font-size: clamp(30px,9vw,44px);
    }

    .emr-s2-compare-desc {
        font-size: 13.5px;
    }

    .emr-s2-vs {
        flex-direction: row;
        justify-content: center;
    }

    .emr-s2-vs-line {
        width: clamp(30px,6vw,60px);
        height: 1px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s2-inner {
        padding: 0 14px;
    }

    .emr-s2-h2 {
        font-size: clamp(24px,7vw,32px);
    }

    .emr-s2-lead {
        font-size: 14.5px;
    }

    .emr-s2-node {
        width: 40px;
        height: 40px;
    }

    .emr-s2-step-title {
        font-size: 13px;
    }

    .emr-s2-step-sub {
        font-size: 12px;
    }

    .emr-s2-compare-num {
        font-size: 28px;
    }

    .emr-s2-compare-desc {
        font-size: 13px;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s2-orb,
    .emr-s2-photon,
    .emr-s2-typing span {
        animation: none !important;
    }

    .emr-s2-head,
    .emr-s2-step,
    .emr-s2-compare,
    .emr-s2-detail,
    .emr-s2-record-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s2-wire-fill {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .emr-s2-node::before {
        animation: none !important;
    }
}


















































/* ================================================================
   EMR.aspx — Section 3 — "The Workspace"
   "Everything a doctor needs. Nothing they don't."
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "The Anatomy" — one large annotated workspace mockup.
   A dark card representing the EMR splits into two panels
   (sidebar + workspace). Six numbered callout annotations
   connect to specific areas of the UI via thin connector lines.

   GORILLA WATERMARK:
   The Qlynic gorilla-head SVG sits at ~3% opacity as a deep
   background watermark, centered and very large. On dark
   obsidian it reads as pure texture — premium, invisible to
   a casual eye but felt as intentional depth.

   ANIMATION — "SURGICAL SPOTLIGHT" technique:
   ▸ IO fires at 0.22 threshold, rootMargin -10% bottom.
   ▸ Workspace card enters with a perspective tilt (rotateX -3deg
     translateY +28px) that levels to flat — like a table sliding
     into position.
   ▸ Annotations appear one by one, each with a brief circular
     "spotlight" ripple on the target area before the annotation
     label slides in from the side.
   ▸ The active annotation target glows with a cyan ring —
     the ring then fades to a persistent dim dot after activation.
   ▸ After all 6 annotations are active, a slow continuous
     "breathing" glow alternates between annotation targets —
     drawing the eye around the workspace in a loop.
   ================================================================ */


/* ── Shell ── */
.emr-s3 {
    position: relative;
    background: var(--emr-obs-1);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

/* ── Gorilla watermark — the logo as ambient depth ── */
.emr-s3-watermark {
    position: absolute;
    /* Centre it, tilted slightly, fills right side */
    top: 50%;
    right: -8%;
    transform: translateY(-50%);
    width: clamp(320px,48vw,680px);
    opacity: .030;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px);
    /* Very subtle colour tint towards violet */
    mix-blend-mode: screen;
}

/* ── Noise grain ── */
.emr-s3::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    pointer-events: none;
    z-index: 0;
}

/* Ambient orb — violet, left-centre */
.emr-s3-orb {
    position: absolute;
    top: 15%;
    left: -8%;
    width: clamp(300px,40vw,580px);
    height: clamp(300px,40vw,580px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, rgba(59,130,246,.04) 40%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: emr-s3-orb-drift 20s ease-in-out infinite alternate;
}

@keyframes emr-s3-orb-drift {
    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(24px,-32px) scale(1.12);
    }
}


/* ── Inner ── */
.emr-s3-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.emr-s3-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px,3.5vw,52px);
    align-items: end;
    margin-bottom: clamp(40px,5.5vw,72px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s var(--emr-ease);
}

    .emr-s3-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s3-eyebrow-wrap {
    margin-bottom: clamp(12px,1.6vw,18px);
}

.emr-s3-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,54px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: var(--emr-t-1);
}

    .emr-s3-h2 em {
        font-style: normal;
        background: var(--emr-grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s3-right-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(12px,1.6vw,18px);
    padding-bottom: 4px;
}

.emr-s3-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}

/* Annotation count badge */
.emr-s3-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-3);
}

.emr-s3-count-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--emr-azure-bdr);
    background: var(--emr-azure-sub);
    font-family: var(--emr-mono);
    font-size: 11px;
    font-weight: 800;
    color: var(--emr-azure-2);
}


/* ════════════════════════════════════════════════════════════
   WORKSPACE CARD — the annotated EMR mock
   Entry: perspective tilt levels to flat
════════════════════════════════════════════════════════════ */
.emr-s3-workspace-wrap {
    position: relative;
    opacity: 0;
    transform: perspective(1200px) rotateX(-3deg) translateY(28px);
    transition: opacity .75s ease, transform .8s var(--emr-ease);
}

    .emr-s3-workspace-wrap.is-vis {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) translateY(0);
    }

/* The card itself */
.emr-s3-card {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 72px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.45);
}

/* Chrome bar */
.emr-s3-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    background: var(--emr-obs-4);
    border-bottom: 1px solid var(--emr-bdr);
    flex-shrink: 0;
}

.emr-s3-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s3-chrome-dot--r {
    background: rgba(244,63,94,.55);
}

.emr-s3-chrome-dot--a {
    background: rgba(245,158,11,.55);
}

.emr-s3-chrome-dot--g {
    background: rgba(16,185,129,.55);
}

.emr-s3-chrome-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 600;
    color: var(--emr-t-4);
    letter-spacing: .04em;
    flex: 1;
    margin-left: 5px;
}

.emr-s3-chrome-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 9px;
}

.emr-s3-chrome-live {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--emr-azure-2);
    box-shadow: 0 0 6px var(--emr-azure-glow);
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

/* Two-panel layout */
.emr-s3-panels {
    display: grid;
    grid-template-columns: clamp(180px,18vw,240px) 1fr;
    min-height: clamp(340px,44vw,500px);
}

/* ── Sidebar panel ── */
.emr-s3-sidebar {
    background: var(--emr-obs-2);
    border-right: 1px solid var(--emr-bdr);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative; /* for annotation targets */
}

.emr-s3-sb-head {
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    padding: 0 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.emr-s3-sb-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-sm);
    padding: 6px 9px;
    margin-bottom: 8px;
}

.emr-s3-sb-search-icon {
    color: var(--emr-t-4);
    flex-shrink: 0;
}

.emr-s3-sb-search-text {
    font-size: 11px;
    color: var(--emr-t-4);
    font-family: var(--emr-mono);
    letter-spacing: .02em;
}

/* Appointment mini-cards in sidebar */
.emr-s3-appt {
    display: flex;
    border-radius: var(--emr-r-sm);
    overflow: hidden;
    border: 1px solid var(--emr-bdr);
    background: var(--emr-sf-1);
    transition: border-color .2s ease;
}

    .emr-s3-appt.active {
        border-color: var(--emr-azure-bdr);
        background: var(--emr-azure-sub);
    }

.emr-s3-appt-stripe {
    width: 3px;
    background: var(--emr-azure);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--emr-azure-glow);
}

.emr-s3-appt:not(.active) .emr-s3-appt-stripe {
    background: var(--emr-bdr-2);
    box-shadow: none;
}

.emr-s3-appt-body {
    padding: 7px 8px;
    flex: 1;
    min-width: 0;
}

.emr-s3-appt-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.010em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.emr-s3-appt-meta {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    color: var(--emr-t-3);
    letter-spacing: .04em;
}

.emr-s3-appt-status {
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-azure-2);
    margin-top: 4px;
}

.emr-s3-appt:not(.active) .emr-s3-appt-status {
    color: var(--emr-t-4);
}

/* Ghost rows */
.emr-s3-ghost {
    border-radius: var(--emr-r-sm);
    background: var(--emr-sf-1);
    border: 1px solid var(--emr-bdr);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emr-s3-ghost-bar {
    height: 7px;
    border-radius: 3px;
    background: var(--emr-sf-2);
}

/* ── Workspace panel ── */
.emr-s3-workspace {
    padding: clamp(14px,1.8vw,20px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.3vw,14px);
    position: relative;
    overflow: hidden;
}

/* Patient identity strip */
.emr-s3-id-strip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: clamp(10px,1.3vw,14px);
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s3-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--emr-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.emr-s3-pat-name {
    font-size: clamp(12.5px,1.3vw,14px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.018em;
    line-height: 1.25;
}

.emr-s3-pat-meta {
    font-size: clamp(9.5px,.92vw,11px);
    color: var(--emr-t-3);
    font-family: var(--emr-mono);
    letter-spacing: .04em;
    margin-top: 2px;
}

.emr-s3-qid-badge {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,10.5px);
    font-weight: 700;
    color: var(--emr-emerald-2);
    letter-spacing: .06em;
}

/* Allergy strip */
.emr-s3-allergy-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.emr-s3-allergy-label {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-4);
}

.emr-s3-allergy-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 700;
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 9px;
}

/* Two-col grid: note + rx */
.emr-s3-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(9px,1.2vw,14px);
    flex: 1;
}

.emr-s3-section-title {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* AI summary panel */
.emr-s3-ai-panel {
    background: linear-gradient(135deg,rgba(139,92,246,.07),rgba(59,130,246,.04));
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-md);
    padding: 9px 11px;
    margin-bottom: 8px;
}

.emr-s3-ai-head {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-violet-2);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.emr-s3-ai-body {
    font-size: clamp(9.5px,.92vw,11px);
    color: var(--emr-t-2);
    line-height: 1.55;
}

/* Note textarea mock */
.emr-s3-note-mock {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: 9px 11px;
    font-size: clamp(9.5px,.92vw,11px);
    color: var(--emr-t-2);
    line-height: 1.60;
    flex: 1;
    min-height: clamp(60px,8vw,90px);
}

/* Prescription entry */
.emr-s3-rx-field {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: 9px 11px;
    margin-bottom: 8px;
    font-size: clamp(9.5px,.92vw,11px);
    font-family: var(--emr-mono);
    color: var(--emr-azure-2);
    letter-spacing: .03em;
}

.emr-s3-rx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.emr-s3-rx-tag {
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 9px;
    font-size: 9.5px;
    font-family: var(--emr-mono);
    color: var(--emr-t-2);
    letter-spacing: .03em;
}

/* AI button */
.emr-s3-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 12px;
    font-family: var(--emr-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--emr-violet-2);
    margin-top: 8px;
}


/* ════════════════════════════════════════════════════════════
   ANNOTATION SYSTEM
   Each annotation has:
   ▸ A target dot (absolute-positioned on the card)
   ▸ A connector line (SVG, drawn in via stroke-dashoffset)
   ▸ A label card (slides in from left or right)
   All powered by .is-active class added by JS.
════════════════════════════════════════════════════════════ */
.emr-s3-annotations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Target dot — the glowing circle on the UI element */
.emr-s3-target {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Outer ripple ring */
    transition: opacity .3s ease;
}

    /* Dim resting state (after activation) */
    .emr-s3-target::before {
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        border: 1.5px solid rgba(99,102,241,.45);
        background: rgba(99,102,241,.14);
        transition: opacity .5s ease;
    }

    /* Ripple — fires when .active class added */
    .emr-s3-target::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1.5px solid rgba(99,102,241,.55);
        opacity: 0;
        transform: scale(.8);
    }

    .emr-s3-target.active::after {
        animation: emr-s3-target-ripple .7s ease-out 1 forwards;
    }

@keyframes emr-s3-target-ripple {
    0% {
        opacity: .8;
        transform: scale(.8);
    }

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

/* The number badge on each target */
.emr-s3-target-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 800;
    color: rgba(99,102,241,.90);
    z-index: 1;
}

/* Connector SVG line */
.emr-s3-connector {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

    .emr-s3-connector line {
        stroke: rgba(99,102,241,.30);
        stroke-width: 1;
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        transition: stroke-dashoffset .5s var(--emr-ease);
    }

    .emr-s3-connector.active line {
        stroke-dashoffset: 0;
    }

/* Annotation label card */
.emr-s3-ann {
    position: absolute;
    transform: translateY(-50%);
    pointer-events: none;
    /* initial hidden state */
    opacity: 0;
    transition: opacity .45s ease, transform .50s var(--emr-spring);
}

/* Slide from left */
.emr-s3-ann--left {
    transform: translateY(-50%) translateX(-12px);
}

    .emr-s3-ann--left.active {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

/* Slide from right */
.emr-s3-ann--right {
    transform: translateY(-50%) translateX(12px);
}

    .emr-s3-ann--right.active {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

.emr-s3-ann-card {
    background: var(--emr-obs-5);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: clamp(9px,1.1vw,13px) clamp(10px,1.3vw,15px);
    min-width: clamp(140px,14vw,180px);
    max-width: clamp(160px,16vw,200px);
    box-shadow: var(--emr-shadow-sm);
    position: relative;
    overflow: hidden;
}

    /* Accent dot on annotation card top-left */
    .emr-s3-ann-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(99,102,241,.60), transparent);
    }

.emr-s3-ann-num {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(99,102,241,.75);
    margin-bottom: 4px;
}

.emr-s3-ann-title {
    font-size: clamp(11px,1.1vw,12.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.015em;
    line-height: 1.30;
    margin-bottom: 4px;
}

.emr-s3-ann-body {
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-3);
    line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════
   BUILT BY STRIP  — logo + "Qlynic · Gorilla Core" attribution
   Ultra-subtle footer strip at bottom of section.
════════════════════════════════════════════════════════════ */
.emr-s3-built-strip {
    margin-top: clamp(40px,5.5vw,64px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px,1.8vw,20px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s var(--emr-ease);
}

    .emr-s3-built-strip.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s3-built-line {
    flex: 1;
    max-width: clamp(60px,10vw,160px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--emr-bdr-2));
}

    .emr-s3-built-line:last-child {
        background: linear-gradient(to left, transparent, var(--emr-bdr-2));
    }

.emr-s3-built-logo {
    width: clamp(20px,2.4vw,28px);
    height: auto;
    opacity: .32;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.emr-s3-built-text {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.emr-s3-built-sep {
    color: var(--emr-t-5);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① Wide laptop */
@media (max-width: 1080px) {

    .emr-s3-panels {
        grid-template-columns: clamp(160px,17vw,210px) 1fr;
    }

    /* Annotations: tighten cards */
    .emr-s3-ann-card {
        max-width: clamp(140px,14vw,170px);
    }
}

/* ② Tablet — stack header, hide annotations overlay */
@media (max-width: 860px) {

    .emr-s3-head {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* On tablet, annotations are too cramped — hide them,
       show a feature list below the card instead */
    .emr-s3-annotations {
        display: none;
    }

    .emr-s3-feature-list-wrap {
        display: block;
    }

    .emr-s3-watermark {
        top: auto;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        width: clamp(200px,55vw,360px);
        opacity: .022;
    }

    .emr-s3-panels {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .emr-s3-sidebar {
        display: none;
    }

    .emr-s3-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s3 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s3-inner {
        padding: 0 18px;
    }

    .emr-s3-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s3-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s3-workspace {
        padding: 12px;
        gap: 10px;
    }

    .emr-s3-card {
        border-radius: var(--emr-r-lg);
    }

    .emr-s3-avatar {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .emr-s3-pat-name {
        font-size: 13px;
    }

    .emr-s3-ai-body {
        font-size: 10px;
    }

    .emr-s3-note-mock {
        font-size: 10px;
        min-height: 50px;
    }

    .emr-s3-rx-field {
        font-size: 10px;
    }

    .emr-s3-rx-tag {
        font-size: 9px;
    }

    .emr-s3-built-strip {
        gap: 10px;
    }

    .emr-s3-built-text {
        font-size: 9.5px;
    }

    .emr-s3-built-logo {
        width: 18px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s3-inner {
        padding: 0 14px;
    }

    .emr-s3-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s3-lead {
        font-size: 14.5px;
    }

    .emr-s3-panels {
        min-height: 260px;
    }

    .emr-s3-workspace {
        padding: 10px;
    }

    .emr-s3-built-text {
        font-size: 9px;
        letter-spacing: .08em;
    }
}


/* ════════════════════════════════════════════════════════════
   FEATURE LIST (shown on tablet/mobile in place of annotations)
════════════════════════════════════════════════════════════ */
.emr-s3-feature-list-wrap {
    display: none; /* shown via media query above */
    margin-top: clamp(24px,3.5vw,36px);
}

.emr-s3-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px,1.8vw,16px);
}

@media (max-width: 400px) {
    .emr-s3-feature-list {
        grid-template-columns: 1fr;
    }
}

.emr-s3-feat {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: clamp(12px,1.6vw,16px);
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-lg);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease var(--emr-sd,0ms), transform .55s var(--emr-ease) var(--emr-sd,0ms);
}

    .emr-s3-feat.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s3-feat-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--emr-r-sm);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emr-s3-feat-title {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.015em;
    margin-bottom: 3px;
    line-height: 1.28;
}

.emr-s3-feat-body {
    font-size: clamp(11px,1.05vw,12.5px);
    color: var(--emr-t-3);
    line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s3-orb {
        animation: none !important;
    }

    .emr-s3-head,
    .emr-s3-workspace-wrap,
    .emr-s3-built-strip,
    .emr-s3-feat {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s3-ann {
        opacity: 1 !important;
        transform: translateY(-50%) !important;
    }

    .emr-s3-connector line {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .emr-s3-target::after {
        animation: none !important;
    }
}









































/* ================================================================
   EMR.aspx — Section 4 — "Prescriptions"
   "The lifecycle, not just the list."
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "THE LIVING PRESCRIPTION"

   Layout:
   ▸ Centred header (emotional)
   ▸ KPI strip — 9 metrics, count-up on entry
   ▸ Two-column:
       Left  — The "living Rx card" that cycles through states
               in a 15-second loop: Active → Renewal Due → 
               Conflict Detected → Discontinued → resets
       Right — The pharmacy shelf: list of Rx rows with status 
               chips, the conflict warning scenario, and the 
               AI Analysis drawer peek

   ANIMATION — "VITALS DRAIN":
   ▸ The lifecycle card has a vertical status bar on its left edge.
   ▸ The bar is a CSS-masked fill that "drains" downward and then 
     "refills" in the new status colour via a two-phase keyframe.
   ▸ Each state transition shakes the status chip once (1 shake,
     not a loop — reads as "alert" not "decoration").
   ▸ The refill counter decrements visually (3→2→1→0 refills left).
   ▸ KPI numbers count up with an easeOutCubic rAF loop triggered 
     only when 20% of the KPI strip is visible (rootMargin -8%).
   ▸ The conflict row on the right flashes a rose border + the 
     conflict badge scales in when the cycle reaches the conflict 
     state — the two panels are synchronised.
   ================================================================ */


/* ── Shell ── */
.emr-s4 {
    position: relative;
    background: var(--emr-obs-2);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

    /* Ambient — warm amber/violet gradient, references the Rx world */
    .emr-s4::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 55% 50% at 85% 20%, rgba(245,158,11,.05) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 10% 80%, rgba(139,92,246,.05) 0%, transparent 60%);
    }

    /* Noise grain */
    .emr-s4::after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: .018;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
        pointer-events: none;
        z-index: 0;
    }

/* ── Inner ── */
.emr-s4-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.emr-s4-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px,3.5vw,52px);
    align-items: end;
    margin-bottom: clamp(40px,5.5vw,64px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s var(--emr-ease);
}

    .emr-s4-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s4-eyebrow-wrap {
    margin-bottom: clamp(12px,1.6vw,18px);
}

.emr-s4-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,54px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: var(--emr-t-1);
}

    .emr-s4-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--emr-amber), #fbbf24);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s4-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}


/* ════════════════════════════════════════════════════════════
   KPI STRIP — 9 metrics in a horizontal scroll row
════════════════════════════════════════════════════════════ */
.emr-s4-kpi-wrap {
    margin-bottom: clamp(36px,5vw,60px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s4-kpi-wrap.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s4-kpi-row {
    display: grid;
    grid-template-columns: repeat(9,1fr);
    gap: clamp(6px,1vw,12px);
}

.emr-s4-kpi {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-lg);
    padding: clamp(12px,1.5vw,18px) clamp(10px,1.2vw,16px);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

    .emr-s4-kpi:hover {
        border-color: var(--emr-bdr-2);
        box-shadow: 0 4px 16px rgba(0,0,0,.32);
    }

/* Per-KPI accent colour (set via modifier class) */
.emr-s4-kpi--cyan {
    --kc: #06b6d4;
    --kg: rgba(6,182,212,.12);
}

.emr-s4-kpi--green {
    --kc: var(--emr-emerald);
    --kg: var(--emr-emerald-sub);
}

.emr-s4-kpi--amber {
    --kc: var(--emr-amber);
    --kg: var(--emr-amber-sub);
}

.emr-s4-kpi--slate {
    --kc: rgba(255,255,255,.38);
    --kg: rgba(255,255,255,.03);
}

.emr-s4-kpi--red {
    --kc: var(--emr-rose);
    --kg: var(--emr-rose-sub);
}

.emr-s4-kpi--hot {
    --kc: #f97316;
    --kg: rgba(249,115,22,.09);
}

.emr-s4-kpi--blue {
    --kc: var(--emr-azure-2);
    --kg: var(--emr-azure-sub);
}

.emr-s4-kpi--purple {
    --kc: var(--emr-violet-2);
    --kg: var(--emr-violet-sub);
}

.emr-s4-kpi--teal {
    --kc: var(--emr-emerald-2);
    --kg: var(--emr-emerald-sub);
}

.emr-s4-kpi-n {
    font-family: var(--emr-font);
    font-size: clamp(18px,2.4vw,32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.050em;
    color: var(--kc, var(--emr-t-1));
    margin-bottom: 5px;
    transition: text-shadow .4s ease;
}

.emr-s4-kpi.lit .emr-s4-kpi-n {
    text-shadow: 0 0 18px var(--kg, transparent);
}

.emr-s4-kpi-l {
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════
   MAIN GRID — 2 columns
════════════════════════════════════════════════════════════ */
.emr-s4-main {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(16px,2.5vw,28px);
    align-items: start;
}


/* ════════════════════════════════════════════════════════════
   LEFT — THE LIVING Rx CARD
   The card that cycles through lifecycle states.
════════════════════════════════════════════════════════════ */
.emr-s4-lifecycle {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s var(--emr-ease);
}

    .emr-s4-lifecycle.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s4-lifecycle-label {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.emr-s4-lc-card {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    overflow: hidden;
    box-shadow: var(--emr-shadow-md);
    display: flex;
    position: relative;
    transition: border-color .5s ease, box-shadow .5s ease;
}

    /* ── State-driven card border ── */
    .emr-s4-lc-card[data-state="active"] {
        border-color: var(--emr-emerald-bdr);
    }

    .emr-s4-lc-card[data-state="renewal"] {
        border-color: var(--emr-amber-bdr);
        box-shadow: 0 0 0 1px var(--emr-amber-bdr), var(--emr-shadow-md);
    }

    .emr-s4-lc-card[data-state="conflict"] {
        border-color: var(--emr-rose-bdr);
        box-shadow: 0 0 0 1px var(--emr-rose-bdr), var(--emr-shadow-md);
        animation: emr-s4-conflict-shake .3s ease 1;
    }

    .emr-s4-lc-card[data-state="discontinued"] {
        border-color: var(--emr-bdr-2);
    }

@keyframes emr-s4-conflict-shake {
    0%,100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* ── Left status bar — THE VITALS DRAIN animation ── */
.emr-s4-status-bar {
    width: 5px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* The fill track */
.emr-s4-status-fill {
    position: absolute;
    inset: 0;
    transform-origin: top center;
    transition: background .5s ease;
}

/* State colours for the status bar */
.emr-s4-lc-card[data-state="active"] .emr-s4-status-fill {
    background: var(--emr-emerald);
    box-shadow: 2px 0 12px var(--emr-emerald-glow);
}

.emr-s4-lc-card[data-state="renewal"] .emr-s4-status-fill {
    background: var(--emr-amber);
    box-shadow: 2px 0 12px rgba(245,158,11,.45);
    animation: emr-s4-bar-pulse 1.2s ease-in-out infinite;
}

.emr-s4-lc-card[data-state="conflict"] .emr-s4-status-fill {
    background: var(--emr-rose);
    box-shadow: 2px 0 14px var(--emr-rose-glow);
}

.emr-s4-lc-card[data-state="discontinued"] .emr-s4-status-fill {
    background: var(--emr-bdr-3);
    box-shadow: none;
}

/* Drain animation: fill shrinks down then refills in new colour */
@keyframes emr-s4-bar-drain {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

.emr-s4-status-fill.drain {
    animation: emr-s4-bar-drain .6s var(--emr-ease-out) forwards;
}

@keyframes emr-s4-bar-pulse {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

/* ── Card body ── */
.emr-s4-lc-body {
    flex: 1;
    padding: clamp(16px,2vw,24px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px,1.5vw,18px);
    min-width: 0;
}

/* Chrome row */
.emr-s4-lc-chrome {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: clamp(10px,1.3vw,14px);
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s4-lc-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-azure-2);
    flex-shrink: 0;
    transition: background .4s ease, border-color .4s ease, color .4s ease;
}

.emr-s4-lc-card[data-state="renewal"] .emr-s4-lc-icon {
    background: var(--emr-amber-sub);
    border-color: var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s4-lc-card[data-state="conflict"] .emr-s4-lc-icon {
    background: var(--emr-rose-sub);
    border-color: var(--emr-rose-bdr);
    color: var(--emr-rose);
}

.emr-s4-lc-med {
    flex: 1;
    min-width: 0;
}

.emr-s4-lc-med-name {
    font-size: clamp(13px,1.35vw,15.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.020em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emr-s4-lc-med-meta {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    color: var(--emr-t-3);
    letter-spacing: .04em;
    margin-top: 2px;
}

/* Status chip */
.emr-s4-lc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    border-radius: var(--emr-r-pill);
    padding: 4px 11px;
    flex-shrink: 0;
    transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

/* State colours for status chip */
.emr-s4-lc-card[data-state="active"]
.emr-s4-lc-status {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s4-lc-card[data-state="renewal"]
.emr-s4-lc-status {
    color: var(--emr-amber);
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    animation: emr-s4-chip-shake .4s ease 1;
}

.emr-s4-lc-card[data-state="conflict"]
.emr-s4-lc-status {
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    animation: emr-s4-chip-shake .4s ease 1;
}

.emr-s4-lc-card[data-state="discontinued"]
.emr-s4-lc-status {
    color: var(--emr-t-3);
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
}

@keyframes emr-s4-chip-shake {
    0%,100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* Field grid */
.emr-s4-lc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(7px,1vw,11px);
}

.emr-s4-lc-field {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-md);
    padding: 8px 10px;
}

.emr-s4-lc-fkey {
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 3px;
}

.emr-s4-lc-fval {
    font-size: clamp(11px,1.1vw,12.5px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.010em;
    line-height: 1.3;
}

/* Refills counter — bar of dots */
.emr-s4-refill-dots {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.emr-s4-refill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--emr-bdr-2);
    background: transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .emr-s4-refill-dot.filled {
        background: var(--emr-azure);
        border-color: var(--emr-azure);
        box-shadow: 0 0 6px var(--emr-azure-glow);
    }

/* Renewal alert row */
.emr-s4-renewal-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    border-radius: var(--emr-r-md);
    /* hidden until renewal state */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .4s ease, max-height .4s var(--emr-ease);
}

.emr-s4-lc-card[data-state="renewal"]
.emr-s4-renewal-row,
.emr-s4-lc-card[data-state="conflict"]
.emr-s4-renewal-row {
    opacity: 1;
    max-height: 60px;
}

.emr-s4-renewal-text {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-amber);
    font-weight: 700;
    line-height: 1.4;
    flex: 1;
}

/* Discontinued reason */
.emr-s4-disc-row {
    padding: 9px 11px;
    background: var(--emr-sf-1);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-md);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .4s ease .2s, max-height .5s var(--emr-ease) .1s;
}

.emr-s4-lc-card[data-state="discontinued"] .emr-s4-disc-row {
    opacity: 1;
    max-height: 80px;
}

.emr-s4-disc-label {
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 4px;
}

.emr-s4-disc-reason {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-2);
    line-height: 1.5;
}

/* State progress strip (below card) */
.emr-s4-state-strip {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 14px;
}

.emr-s4-state-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    position: relative;
}

.emr-s4-state-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--emr-bdr-2);
    background: var(--emr-obs-4);
    transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
    position: relative;
    z-index: 1;
}

.emr-s4-state-node.passed .emr-s4-state-dot {
    border-color: var(--emr-emerald);
    background: var(--emr-emerald);
    box-shadow: 0 0 8px var(--emr-emerald-glow);
}

.emr-s4-state-node.current .emr-s4-state-dot {
    border-color: var(--emr-amber);
    background: var(--emr-amber);
    box-shadow: 0 0 8px rgba(245,158,11,.5);
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s4-state-node.conflict .emr-s4-state-dot {
    border-color: var(--emr-rose);
    background: var(--emr-rose);
    box-shadow: 0 0 8px var(--emr-rose-glow);
}

.emr-s4-state-node.done .emr-s4-state-dot {
    border-color: var(--emr-bdr-2);
    background: var(--emr-obs-5);
}

.emr-s4-state-lbl {
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    text-align: center;
    white-space: nowrap;
    transition: color .4s ease;
}

.emr-s4-state-node.passed .emr-s4-state-lbl {
    color: var(--emr-emerald-2);
}

.emr-s4-state-node.current .emr-s4-state-lbl {
    color: var(--emr-amber);
}

.emr-s4-state-node.conflict .emr-s4-state-lbl {
    color: var(--emr-rose);
}

/* Connector between nodes */
.emr-s4-state-conn {
    flex: 1;
    height: 1px;
    margin-top: -22px; /* align with dot */
    background: var(--emr-bdr);
    transition: background .5s ease;
    position: relative;
    z-index: 0;
}

    .emr-s4-state-conn.filled {
        background: var(--emr-emerald);
        box-shadow: 0 0 4px var(--emr-emerald-glow);
    }


/* ════════════════════════════════════════════════════════════
   RIGHT — PHARMACY SHELF
   List of Rx rows + allergy conflict scenario + AI analysis
════════════════════════════════════════════════════════════ */
.emr-s4-shelf {
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.4vw,16px);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease .12s, transform .7s var(--emr-ease) .12s;
}

    .emr-s4-shelf.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s4-shelf-label {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.emr-s4-shelf-count {
    font-family: var(--emr-mono);
    font-size: 9.5px;
    font-weight: 800;
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-pill);
    padding: 1px 8px;
    letter-spacing: .06em;
}

/* ── Rx row ── */
.emr-s4-rx-row {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-lg);
    padding: clamp(11px,1.4vw,16px) clamp(12px,1.5vw,18px);
    display: flex;
    align-items: center;
    gap: clamp(10px,1.3vw,16px);
    transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
    /* stagger entry */
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .5s ease var(--emr-sd,0ms), transform .55s var(--emr-ease) var(--emr-sd,0ms), border-color .4s ease, box-shadow .4s ease;
}

    .emr-s4-rx-row.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

    .emr-s4-rx-row.conflict-active {
        border-color: var(--emr-rose-bdr);
        background: linear-gradient(135deg,rgba(244,63,94,.04),var(--emr-obs-4));
        box-shadow: 0 0 0 1px var(--emr-rose-bdr), 0 4px 16px rgba(244,63,94,.08);
    }

/* Rx row icon */
.emr-s4-rx-row-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .4s ease, border-color .4s ease, color .4s ease;
}

.emr-s4-rx-row-ico--active {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s4-rx-row-ico--amber {
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s4-rx-row-ico--rose {
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    color: var(--emr-rose);
}

.emr-s4-rx-row-ico--slate {
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
    color: var(--emr-t-3);
}

.emr-s4-rx-row-info {
    flex: 1;
    min-width: 0;
}

.emr-s4-rx-row-name {
    font-size: clamp(12.5px,1.25vw,14px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.015em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.emr-s4-rx-row.conflict-active .emr-s4-rx-row-name {
    text-decoration: line-through;
    text-decoration-color: var(--emr-rose);
}

.emr-s4-rx-row-meta {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    color: var(--emr-t-3);
    letter-spacing: .04em;
}

/* Status pill on row */
.emr-s4-rx-status {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    border-radius: var(--emr-r-pill);
    padding: 3px 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.emr-s4-rx-status--active {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s4-rx-status--amber {
    color: var(--emr-amber);
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
}

.emr-s4-rx-status--expired {
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
}

.emr-s4-rx-status--disc {
    color: var(--emr-t-3);
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
}

/* Conflict badge on a row */
.emr-s4-conflict-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 9px;
    flex-shrink: 0;
    /* hidden until triggered */
    opacity: 0;
    transform: scale(0);
    transition: opacity .35s ease, transform .4s var(--emr-spring);
}

    .emr-s4-conflict-badge.show {
        opacity: 1;
        transform: scale(1);
        animation: emr-s4-conflict-glow 1.6s ease-in-out 2;
    }

@keyframes emr-s4-conflict-glow {
    0%,100% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 0 3px rgba(244,63,94,.22);
    }
}

/* ── AI Analysis panel ── */
.emr-s4-ai-panel {
    background: linear-gradient(135deg,rgba(139,92,246,.07),rgba(59,130,246,.04));
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-lg);
    padding: clamp(14px,1.8vw,20px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s var(--emr-ease);
}

    .emr-s4-ai-panel.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s4-ai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.emr-s4-ai-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-violet-2);
}

.emr-s4-ai-credit {
    font-family: var(--emr-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--emr-t-4);
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 8px;
    margin-left: auto;
}

.emr-s4-ai-body {
    font-size: clamp(11.5px,1.1vw,13px);
    color: var(--emr-t-2);
    line-height: 1.65;
}

    .emr-s4-ai-body strong {
        color: var(--emr-t-1);
        font-weight: 700;
    }

/* Safety note under AI */
.emr-s4-ai-disclaimer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: clamp(9.5px,.92vw,11px);
    color: var(--emr-t-4);
    font-family: var(--emr-mono);
    letter-spacing: .04em;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① Wide laptop */
@media (max-width: 1080px) {

    .emr-s4-kpi-row {
        grid-template-columns: repeat(5,1fr);
    }
    /* Show remaining 4 on second row */
    .emr-s4-kpi:nth-child(n+6) {
        display: block;
    }

    .emr-s4-main {
        grid-template-columns: 1fr 1fr;
    }
}

/* ② Tablet */
@media (max-width: 860px) {

    .emr-s4-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .emr-s4-kpi-row {
        grid-template-columns: repeat(5,1fr);
    }

    .emr-s4-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s4 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s4-inner {
        padding: 0 18px;
    }

    .emr-s4-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s4-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s4-kpi-row {
        grid-template-columns: repeat(3,1fr);
        gap: 7px;
    }

    .emr-s4-kpi {
        padding: 12px 8px;
    }

    .emr-s4-kpi-n {
        font-size: clamp(18px,5.5vw,26px);
    }

    .emr-s4-kpi-l {
        font-size: 7.5px;
    }

    .emr-s4-lc-fields {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .emr-s4-lc-body {
        padding: 14px;
        gap: 12px;
    }

    .emr-s4-state-lbl {
        font-size: 7px;
    }

    .emr-s4-rx-row {
        padding: 10px 12px;
    }

    .emr-s4-rx-row-name {
        font-size: 13px;
    }

    .emr-s4-rx-row-meta {
        font-size: 9px;
    }

    .emr-s4-ai-body {
        font-size: 12px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s4-inner {
        padding: 0 14px;
    }

    .emr-s4-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s4-lead {
        font-size: 14.5px;
    }

    .emr-s4-kpi-row {
        grid-template-columns: repeat(3,1fr);
        gap: 5px;
    }

    .emr-s4-kpi-n {
        font-size: 18px;
    }

    .emr-s4-lc-fields {
        grid-template-columns: 1fr;
    }

    .emr-s4-shelf {
        gap: 9px;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s4-head,
    .emr-s4-kpi-wrap,
    .emr-s4-lifecycle,
    .emr-s4-shelf,
    .emr-s4-rx-row,
    .emr-s4-ai-panel {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s4-status-fill,
    .emr-s4-lc-status,
    .emr-s4-lc-card {
        animation: none !important;
    }

    .emr-s4-conflict-badge.show {
        opacity: 1 !important;
        transform: scale(1) !important;
        animation: none !important;
    }

    .emr-s4-renewal-row,
    .emr-s4-disc-row {
        opacity: 1 !important;
        max-height: 80px !important;
    }
}
































/* ================================================================
   EMR.aspx — Section 5 — "The AI"
   "Country-aware. History-aware. Honest about uncertainty."
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   THEME: White. Bright contrast break from obsidian S1–S4.
   The clinical corridor video established the mood.
   Now the intelligence layer emerges — clean, precise, medical.

   ── VIDEO TRANSITION: "THE VENETIAN BREACH" ──────────────────
   ▸ <video> plays fullscreen as the section opens.
   ▸ 10 horizontal white strips sit behind the video, invisible.
   ▸ At 3.8s, each strip expands from scaleX(0) → scaleX(1),
     alternating transform-origin: left / right, staggered 28ms.
     All 10 complete in ~580ms total.
   ▸ The video simultaneously fades to opacity 0.08 (still running,
     a ghost of the corridor breathing under the white).
   ▸ Section content fades in at strip completion (≈700ms).
   ▸ The video pauses at ~5s to save resources.
   ▸ On mobile: video is replaced by a static gradient.

   ── SECTION ANIMATION ─────────────────────────────────────────
   ▸ Header enters from below (translateY 24px → 0).
   ▸ Two-column main: left copy clips in, right drawer slides in.
   ▸ AI drawer plays an internal sequence:
     condition detected → first-line pops → second-line pops →
     avoid list appears → confidence badges fill left→right.
   ▸ Country badge pulses on entry.
   ================================================================ */


/* ════════════════════════════════════════════════════════════
   VIDEO STAGE  —  sits behind everything, full-section height
════════════════════════════════════════════════════════════ */
.emr-s5-stage {
    position: relative;
    overflow: hidden;
    /* height set by JS to window height, or min 100svh */
    min-height: 100svh;
    background: #ffffff;
}

/* ── Stage collapse — fired by JS after venetian closes ──
   Height is first locked to its rendered px value by JS,
   then .collapsed sets it to 0 so the CSS transition has
   a start and end point. overflow:hidden prevents bleed. ── */
.emr-s5-stage {
    overflow: hidden;
    transition: height .75s cubic-bezier(.4,0,.2,1), min-height .75s cubic-bezier(.4,0,.2,1);
}

    .emr-s5-stage.collapsed {
        height: 0 !important;
        min-height: 0 !important;
    }

/* ── Video element ── */
.emr-s5-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 1;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

    .emr-s5-video.breached {
        opacity: .08;
    }

/* No video on mobile — saves bandwidth */
@media (max-width: 640px) {
    .emr-s5-video {
        display: none;
    }

    .emr-s5-stage {
        background: linear-gradient(160deg, #f0f4ff 0%, #ffffff 60%);
        min-height: auto;
    }
}

/* ── Venetian strips — 10 white panels ── */
.emr-s5-venetian {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.emr-s5-strip {
    flex: 1;
    background: #ffffff;
    transform-origin: left center; /* even: from left */
    transform: scaleX(0);
    will-change: transform;
}

    .emr-s5-strip:nth-child(even) {
        transform-origin: right center;
    }

/* Triggered by .breach class added by JS */
.emr-s5-venetian.breach .emr-s5-strip {
    transform: scaleX(1);
    transition: transform .38s cubic-bezier(.22,1,.36,1);
}

    /* Stagger delays — 28ms per strip */
    .emr-s5-venetian.breach .emr-s5-strip:nth-child(1) {
        transition-delay: 0ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(2) {
        transition-delay: 28ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(3) {
        transition-delay: 56ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(4) {
        transition-delay: 84ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(5) {
        transition-delay: 112ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(6) {
        transition-delay: 140ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(7) {
        transition-delay: 168ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(8) {
        transition-delay: 196ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(9) {
        transition-delay: 224ms;
    }

    .emr-s5-venetian.breach .emr-s5-strip:nth-child(10) {
        transition-delay: 252ms;
    }

/* ── Video overlay text (shown while video plays) ── */
.emr-s5-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    padding: clamp(32px,5vh,56px) clamp(24px,5vw,64px);
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 50%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s ease;
}

    .emr-s5-video-overlay.breached {
        opacity: 0;
    }

.emr-s5-video-caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emr-s5-video-eyebrow {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11.5px);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

.emr-s5-video-title {
    font-family: var(--emr-font);
    font-size: clamp(20px,2.8vw,38px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.034em;
    color: #ffffff;
}


/* ════════════════════════════════════════════════════════════
   SECTION BODY  —  white theme, appears after venetian breach
════════════════════════════════════════════════════════════ */
.emr-s5 {
    position: relative;
    z-index: 4;
    background: #ffffff;
    padding: clamp(72px,10vh,120px) 0 clamp(72px,10vh,120px);
    border-top: 1px solid rgba(0,0,0,.07);
    /* hidden until venetian breach completes */
    opacity: 0;
    transition: opacity .6s ease;
}

    .emr-s5.revealed {
        opacity: 1;
    }

    /* Subtle dot grid on white */
    .emr-s5::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(59,130,246,.06) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

/* Ghost corridor — the video at 8% opacity floats behind the grid */
.emr-s5-ghost {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.emr-s5-ghost-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0; /* synced to .emr-s5-video.breached opacity but here as a separate element */
    mix-blend-mode: luminosity;
}

@media (max-width: 640px) {
    .emr-s5-ghost {
        display: none;
    }
}

/* ── Inner ── */
.emr-s5-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
}


/* ════════════════════════════════════════════════════════════
   HEADER  (white theme — dark text)
════════════════════════════════════════════════════════════ */
.emr-s5-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px,3.5vw,52px);
    align-items: end;
    margin-bottom: clamp(44px,6vw,72px);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s5-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

/* White-theme eyebrow */
.emr-s5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-violet);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 14px;
    width: fit-content;
    margin-bottom: clamp(12px,1.6vw,18px);
}

.emr-s5-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-violet);
    box-shadow: 0 0 8px var(--emr-violet-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 2s ease-in-out infinite;
}

.emr-s5-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,54px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: #0a0b10;
}

    .emr-s5-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--emr-violet), var(--emr-azure));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s5-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: #3d4051;
    line-height: 1.78;
}


/* ════════════════════════════════════════════════════════════
   MAIN GRID — copy left / AI drawer right
════════════════════════════════════════════════════════════ */
.emr-s5-main {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: clamp(24px,3.5vw,52px);
    align-items: start;
}


/* ── LEFT: feature copy blocks ── */
.emr-s5-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.8vw,30px);
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s5-copy.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s5-feat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: clamp(18px,2.5vw,26px);
    border-bottom: 1px solid rgba(0,0,0,.07);
}

    .emr-s5-feat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.emr-s5-feat-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.emr-s5-feat-ico--violet {
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    color: var(--emr-violet);
}

.emr-s5-feat-ico--azure {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure);
}

.emr-s5-feat-ico--green {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald);
}

.emr-s5-feat-ico--amber {
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s5-feat-title {
    font-size: clamp(13.5px,1.35vw,15.5px);
    font-weight: 800;
    color: #0a0b10;
    letter-spacing: -0.020em;
    line-height: 1.28;
    margin-bottom: 5px;
}

.emr-s5-feat-body {
    font-size: clamp(12.5px,1.2vw,14px);
    color: #4a4f6a;
    line-height: 1.68;
}

    .emr-s5-feat-body strong {
        color: #0a0b10;
        font-weight: 700;
    }


/* ── RIGHT: AI Drawer mockup ── */
.emr-s5-drawer {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 32px 80px rgba(0,0,0,.45), 0 0 60px rgba(139,92,246,.08);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .7s ease .1s, transform .75s var(--emr-ease) .1s;
}

    .emr-s5-drawer.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

/* Drawer chrome */
.emr-s5-drawer-chrome {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: var(--emr-obs-4);
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s5-dchrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s5-dchrome-dot--r {
    background: rgba(244,63,94,.55);
}

.emr-s5-dchrome-dot--a {
    background: rgba(245,158,11,.55);
}

.emr-s5-dchrome-dot--g {
    background: rgba(16,185,129,.55);
}

.emr-s5-dchrome-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 600;
    color: var(--emr-t-4);
    flex: 1;
    margin-left: 4px;
    letter-spacing: .04em;
}

/* Country badge */
.emr-s5-country-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 10px;
    /* pop in */
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s ease, transform .45s var(--emr-spring);
}

    .emr-s5-country-badge.show {
        opacity: 1;
        transform: scale(1);
    }

.emr-s5-country-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--emr-azure-2);
    box-shadow: 0 0 6px var(--emr-azure-glow);
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

/* Drawer body */
.emr-s5-drawer-body {
    padding: clamp(16px,2vw,24px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px,1.8vw,20px);
}

/* Condition pill */
.emr-s5-condition {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .45s ease, transform .45s var(--emr-ease);
}

    .emr-s5-condition.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s5-cond-label {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    white-space: nowrap;
}

.emr-s5-cond-chip {
    background: linear-gradient(135deg,rgba(139,92,246,.12),rgba(59,130,246,.08));
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 13px;
    font-family: var(--emr-font);
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--emr-violet-2);
    letter-spacing: -0.010em;
    white-space: nowrap;
}

/* Drug group section header */
.emr-s5-group-head {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.emr-s5-group-line {
    flex: 1;
    height: 1px;
    background: var(--emr-bdr);
}

/* Drug suggestion row */
.emr-s5-drug {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(9px,1.2vw,13px) clamp(10px,1.3vw,14px);
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-md);
    /* stagger entry */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease var(--emr-dd,0ms), transform .45s var(--emr-ease) var(--emr-dd,0ms);
}

    .emr-s5-drug.show {
        opacity: 1;
        transform: translateY(0);
    }

    .emr-s5-drug:hover {
        border-color: var(--emr-bdr-2);
    }

.emr-s5-drug-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emr-s5-drug-ico--first {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s5-drug-ico--second {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s5-drug-ico--avoid {
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    color: var(--emr-rose);
}

.emr-s5-drug-info {
    flex: 1;
    min-width: 0;
}

.emr-s5-drug-name {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.emr-s5-drug-why {
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-3);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Confidence badge — fills left→right via scaleX on .fill */
.emr-s5-conf {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.emr-s5-conf-num {
    font-family: var(--emr-mono);
    font-size: clamp(11px,1.1vw,12.5px);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--emr-emerald-2);
    line-height: 1;
}

.emr-s5-conf-bar {
    width: clamp(36px,4.5vw,52px);
    height: 3px;
    background: var(--emr-sf-2);
    border-radius: 2px;
    overflow: hidden;
}

.emr-s5-conf-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--emr-emerald);
    box-shadow: 0 0 4px var(--emr-emerald-glow);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .6s var(--emr-ease) var(--emr-cd, 0ms);
}

.emr-s5-drug.show .emr-s5-conf-fill {
    transform: scaleX(1);
}

/* Second-line confidence colour */
.emr-s5-drug--second .emr-s5-conf-num {
    color: var(--emr-azure-2);
}

.emr-s5-drug--second .emr-s5-conf-fill {
    background: var(--emr-azure);
    box-shadow: 0 0 4px var(--emr-azure-glow);
}

/* Avoid row — no confidence, just reason */
.emr-s5-drug--avoid .emr-s5-drug-name {
    color: var(--emr-rose);
    text-decoration: line-through;
    text-decoration-color: rgba(244,63,94,.4);
}

.emr-s5-avoid-reason {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-rose);
    background: var(--emr-rose-sub);
    border: 1px solid var(--emr-rose-bdr);
    border-radius: var(--emr-r-pill);
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* AI disclaimer */
.emr-s5-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--emr-t-4);
    padding-top: clamp(10px,1.3vw,14px);
    border-top: 1px solid var(--emr-bdr);
    opacity: 0;
    transition: opacity .4s ease;
}

    .emr-s5-disclaimer.show {
        opacity: 1;
    }

/* Ignored meds memory row */
.emr-s5-memory {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-md);
    padding: 10px 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .4s ease, transform .45s var(--emr-ease);
}

    .emr-s5-memory.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s5-memory-icon {
    color: var(--emr-t-3);
    flex-shrink: 0;
    margin-top: 1px;
}

.emr-s5-memory-text {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-3);
    line-height: 1.55;
}

    .emr-s5-memory-text strong {
        color: var(--emr-t-2);
        font-weight: 700;
    }


/* ── Echo line — appears at top of section as a brand gradient hairline
   exactly at the seam where the collapsed stage ends ── */
.emr-s5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,.50) 25%, rgba(59,130,246,.65) 50%, rgba(139,92,246,.50) 75%, transparent 100%);
    box-shadow: 0 0 18px rgba(139,92,246,.28);
    z-index: 5;
    opacity: 0;
    transition: opacity .5s ease .1s;
    pointer-events: none;
}

.emr-s5.revealed::before {
    opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① Wide laptop */
@media (max-width: 1080px) {
    .emr-s5-main {
        grid-template-columns: 1fr 1.05fr;
    }
}

/* ② Tablet */
@media (max-width: 860px) {

    .emr-s5-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .emr-s5-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .emr-s5-copy {
        transform: none;
    }

    .emr-s5-drawer {
        transform: none;
    }

    .emr-s5-video-title {
        font-size: clamp(18px,4vw,28px);
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s5 {
        padding: clamp(52px,8vh,72px) 0 clamp(52px,8vh,72px);
    }

    .emr-s5-inner {
        padding: 0 18px;
    }

    .emr-s5-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s5-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s5-feat {
        gap: 11px;
        padding-bottom: 16px;
    }

    .emr-s5-feat-ico {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .emr-s5-feat-title {
        font-size: 14px;
    }

    .emr-s5-feat-body {
        font-size: 13px;
    }

    .emr-s5-drawer-body {
        padding: 14px;
        gap: 12px;
    }

    .emr-s5-drug {
        padding: 9px 10px;
    }

    .emr-s5-drug-name {
        font-size: 12.5px;
    }

    .emr-s5-drug-why {
        font-size: 10px;
    }

    /* On mobile, stage is smaller */
    .emr-s5-stage {
        min-height: 60vw;
    }

    .emr-s5-video-title {
        font-size: clamp(16px,5vw,24px);
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s5-inner {
        padding: 0 14px;
    }

    .emr-s5-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s5-lead {
        font-size: 14.5px;
    }

    .emr-s5-drawer-body {
        padding: 12px;
        gap: 10px;
    }

    .emr-s5-drug-name {
        font-size: 12px;
    }

    .emr-s5-stage {
        min-height: 50vw;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    /* Skip the venetian animation — just fade to white */
    .emr-s5-venetian.breach .emr-s5-strip {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .emr-s5-video.breached {
        opacity: 0 !important;
        transition: none !important;
    }

    .emr-s5-video-overlay.breached {
        opacity: 0 !important;
        transition: none !important;
    }

    .emr-s5 {
        opacity: 1 !important;
        transition: none !important;
    }

    .emr-s5-head,
    .emr-s5-copy,
    .emr-s5-drawer,
    .emr-s5-condition,
    .emr-s5-drug,
    .emr-s5-memory,
    .emr-s5-disclaimer,
    .emr-s5-country-badge,
    .emr-s5-corridor-echo {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s5-conf-fill {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}



























































/* ================================================================
   EMR.aspx — Section 6 — "Group + Recurring"
   "The patients most likely to fall through the cracks."
   White theme — continues from S5.
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "THE SPLIT"

   A single unified seed card sits centred on entry.
   When IO fires (0.24 threshold, rootMargin -12% bottom):

   Phase 1 (0–300ms):
   ▸ The seed card's centre line glows violet (a 2px hairline).
   ▸ The header above rises in.

   Phase 2 (300–750ms):
   ▸ The left half of the split container clips out to the left:
       clip-path: inset(0 50% 0 0) → inset(0 0 0 0)
   ▸ The right half clips out to the right simultaneously:
       clip-path: inset(0 0 0 50%) → inset(0 0 0 0)
   ▸ Both halves use cubic-bezier(.22,1,.36,1) — they decelerate
     into their final positions so it feels like the card is
     being pulled apart by two hands.
   ▸ The centre seam line fades as the halves separate.

   Phase 3 (750ms onwards):
   ▸ Content in each half activates with their own sequences:
     LEFT (Group):  family tabs appear one-by-one (100ms gaps),
                    then the active tab's workspace fades in.
     RIGHT (Recurring): session dots fire in left-to-right (40ms
                    gaps), each dot scales up from 0 with spring.
                    Dots with encounters pulse emerald once.
   ================================================================ */


/* ── Shell ── */
.emr-s6 {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid rgba(0,0,0,.07);
}

    /* Subtle dot grid — white section */
    .emr-s6::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(139,92,246,.055) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 20%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 20%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

/* Ambient orbs — violet left, azure right */
.emr-s6-orb-l {
    position: absolute;
    top: -5%;
    left: -8%;
    width: clamp(260px,36vw,480px);
    height: clamp(260px,36vw,480px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.06) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
}

.emr-s6-orb-r {
    position: absolute;
    bottom: -5%;
    right: -6%;
    width: clamp(220px,30vw,400px);
    height: clamp(220px,30vw,400px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.05) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* ── Inner ── */
.emr-s6-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.emr-s6-head {
    text-align: center;
    max-width: 740px;
    margin: 0 auto clamp(52px,7vw,80px);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s6-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

/* White-theme eyebrow (emerald accent for group/recurring theme) */
.emr-s6-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-emerald);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 14px;
    margin-bottom: clamp(14px,1.8vw,20px);
}

.emr-s6-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-emerald);
    box-shadow: 0 0 8px var(--emr-emerald-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 2s ease-in-out infinite;
}

.emr-s6-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,54px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: #0a0b10;
    margin-bottom: clamp(14px,1.8vw,20px);
}

    .emr-s6-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--emr-emerald), var(--emr-azure));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s6-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: #4a4f6a;
    line-height: 1.76;
}


/* ════════════════════════════════════════════════════════════
   THE SPLIT CONTAINER
════════════════════════════════════════════════════════════ */
.emr-s6-split-wrap {
    position: relative;
}

/* ── Centre seam — the hairline that glows before split ── */
.emr-s6-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, transparent 0%, var(--emr-violet) 20%, var(--emr-azure) 50%, var(--emr-violet) 80%, transparent 100%);
    box-shadow: 0 0 18px 2px var(--emr-violet-glow);
    z-index: 5;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

    .emr-s6-seam.glow {
        opacity: 1;
        transform: scaleY(1);
    }

    .emr-s6-seam.fading {
        opacity: 0;
        transition: opacity .5s ease .2s;
    }

/* ── The two halves — use clip-path for the split ── */
.emr-s6-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px,2.2vw,24px);
    position: relative;
}

/* Each half starts clipped to 50% from its inner edge,
   then opens to full width on .split class */
.emr-s6-half {
    /* Base: clipped to nothing visible */
    clip-path: inset(0 50% 0 0);
    transition: clip-path .55s cubic-bezier(.22,1,.36,1) var(--emr-hd, 0ms);
    will-change: clip-path;
}

.emr-s6-half--right {
    clip-path: inset(0 0 0 50%);
}

/* When .split fires: both halves open fully */
.emr-s6-halves.split .emr-s6-half {
    clip-path: inset(0 0% 0 0);
}

.emr-s6-halves.split .emr-s6-half--right {
    clip-path: inset(0 0 0 0%);
}


/* ════════════════════════════════════════════════════════════
   SHARED CARD SHELL (used by both halves)
════════════════════════════════════════════════════════════ */
.emr-s6-card {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.40), 0 8px 20px rgba(0,0,0,.28);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card chrome bar */
.emr-s6-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: var(--emr-obs-4);
    border-bottom: 1px solid var(--emr-bdr);
    flex-shrink: 0;
}

.emr-s6-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s6-chrome-dot--r {
    background: rgba(244,63,94,.55);
}

.emr-s6-chrome-dot--a {
    background: rgba(245,158,11,.55);
}

.emr-s6-chrome-dot--g {
    background: rgba(16,185,129,.55);
}

.emr-s6-chrome-title {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.86vw,10.5px);
    font-weight: 600;
    color: var(--emr-t-4);
    flex: 1;
    margin-left: 4px;
    letter-spacing: .04em;
}

.emr-s6-chrome-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,9px);
    font-weight: 700;
    letter-spacing: .10em;
    border-radius: var(--emr-r-pill);
    padding: 2px 9px;
}

.emr-s6-chrome-badge--group {
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
}

.emr-s6-chrome-badge--recur {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

/* Card body padding */
.emr-s6-card-body {
    padding: clamp(14px,1.8vw,20px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px,1.5vw,16px);
    flex: 1;
}


/* ════════════════════════════════════════════════════════════
   LEFT CARD — GROUP BOOKING
════════════════════════════════════════════════════════════ */

/* Patient tabs bar */
.emr-s6-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--emr-bdr);
    padding-bottom: 11px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .emr-s6-tabs::-webkit-scrollbar {
        display: none;
    }

.emr-s6-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--emr-r-md);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
    /* stagger entry */
    opacity: 0;
    transform: translateY(-8px) scale(.94);
    transition: opacity .4s ease var(--emr-td, 0ms), transform .45s var(--emr-spring) var(--emr-td, 0ms), background .2s ease, border-color .2s ease;
}

    .emr-s6-tab.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .emr-s6-tab.active {
        background: var(--emr-azure-sub);
        border-color: var(--emr-azure-bdr);
    }

    .emr-s6-tab.done {
        background: var(--emr-emerald-sub);
        border-color: var(--emr-emerald-bdr);
    }

/* Mini avatar in tab */
.emr-s6-tab-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.emr-s6-tab-name {
    font-size: clamp(10.5px,1vw,12px);
    font-weight: 700;
    color: var(--emr-t-2);
    letter-spacing: -0.010em;
}

.emr-s6-tab.active .emr-s6-tab-name {
    color: var(--emr-azure-2);
}

.emr-s6-tab.done .emr-s6-tab-name {
    color: var(--emr-emerald-2);
}

/* Done check */
.emr-s6-tab-check {
    color: var(--emr-emerald-2);
    opacity: 0;
    transition: opacity .3s ease;
}

.emr-s6-tab.done .emr-s6-tab-check {
    opacity: 1;
}

/* Group workspace (the content under the active tab) */
.emr-s6-group-workspace {
    display: flex;
    flex-direction: column;
    gap: 9px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .45s var(--emr-ease);
}

    .emr-s6-group-workspace.show {
        opacity: 1;
        transform: translateY(0);
    }

/* Mini identity strip */
.emr-s6-mini-id {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s6-mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--emr-azure), var(--emr-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.emr-s6-mini-name {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.016em;
}

.emr-s6-mini-reason {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    color: var(--emr-t-3);
    margin-top: 1px;
    letter-spacing: .03em;
}

.emr-s6-mini-qid {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    color: var(--emr-emerald-2);
    letter-spacing: .06em;
    margin-left: auto;
    flex-shrink: 0;
}

/* Note skeleton (placeholder lines) */
.emr-s6-note-area {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.emr-s6-note-line {
    height: 8px;
    border-radius: 4px;
    background: var(--emr-sf-2);
}

/* Rx mini chips row */
.emr-s6-rx-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.emr-s6-rx-mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--emr-sf-2);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 9px;
    font-size: clamp(9.5px,.92vw,11px);
    font-family: var(--emr-mono);
    color: var(--emr-t-2);
    letter-spacing: .03em;
    /* pop in */
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s ease var(--emr-pd,0ms), transform .38s var(--emr-spring) var(--emr-pd,0ms);
}

.emr-s6-group-workspace.show .emr-s6-rx-mini-chip {
    opacity: 1;
    transform: scale(1);
}

/* Group stat row */
.emr-s6-group-stat {
    display: flex;
    align-items: center;
    gap: clamp(8px,1.2vw,14px);
    padding: 10px 12px;
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-md);
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-azure-2);
}

.emr-s6-group-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-azure);
    box-shadow: 0 0 8px var(--emr-azure-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}


/* ════════════════════════════════════════════════════════════
   RIGHT CARD — RECURRING SERIES
════════════════════════════════════════════════════════════ */

/* Series header row */
.emr-s6-series-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s6-series-info {
}

.emr-s6-series-title {
    font-size: clamp(12.5px,1.25vw,14px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.016em;
    margin-bottom: 3px;
}

.emr-s6-series-meta {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    color: var(--emr-t-3);
    letter-spacing: .04em;
}

.emr-s6-series-count {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 9px;
    flex-shrink: 0;
}

/* ── The session grid — dots in a row ── */
.emr-s6-sessions-label {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 10px;
}

.emr-s6-sessions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(6px,1vw,10px);
}

/* Single session node */
.emr-s6-session {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* stagger entry */
    opacity: 0;
    transform: scale(0) translateY(6px);
    transition: opacity .35s ease var(--emr-sd, 0ms), transform .42s var(--emr-spring) var(--emr-sd, 0ms);
}

    .emr-s6-session.show {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

.emr-s6-session-dot {
    width: clamp(30px,4vw,44px);
    height: clamp(30px,4vw,44px);
    border-radius: 50%;
    border: 2px solid var(--emr-bdr-2);
    background: var(--emr-obs-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,11px);
    font-weight: 800;
    color: var(--emr-t-4);
    position: relative;
    transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

/* States */
.emr-s6-session--done .emr-s6-session-dot {
    border-color: var(--emr-emerald-bdr);
    background: var(--emr-emerald-sub);
    color: var(--emr-emerald-2);
    box-shadow: 0 0 12px rgba(16,185,129,.20);
}

.emr-s6-session--current .emr-s6-session-dot {
    border-color: var(--emr-azure-bdr);
    background: var(--emr-azure-sub);
    color: var(--emr-azure-2);
    box-shadow: 0 0 14px rgba(59,130,246,.28);
}

.emr-s6-session--future .emr-s6-session-dot {
    border-color: var(--emr-bdr);
    background: transparent;
    color: var(--emr-t-5);
}

/* Encounter dot indicator — tiny filled circle on top-right */
.emr-s6-session-enc {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emr-emerald);
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px var(--emr-emerald-glow);
    /* fires via .show → emr-s6-session-enc.show */
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s ease, transform .38s var(--emr-spring);
}

.emr-s6-session--done.show .emr-s6-session-enc {
    opacity: 1;
    transform: scale(1);
}

/* Once-fired emerald pulse on done sessions */
.emr-s6-session--done.show .emr-s6-session-dot {
    animation: emr-s6-dot-pulse 0.6s ease-out 1;
}

@keyframes emr-s6-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,.50);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 12px rgba(16,185,129,.20);
    }
}

.emr-s6-session-num {
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-t-4);
    text-transform: uppercase;
}

/* Current session active ring */
.emr-s6-session--current .emr-s6-session-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--emr-azure-bdr);
    animation: emr-s6-ring 2s ease-in-out infinite;
}

@keyframes emr-s6-ring {
    0%,100% {
        opacity: .6;
        transform: scale(1);
    }

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

/* Progress track */
.emr-s6-progress-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    border-radius: var(--emr-r-md);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .45s var(--emr-ease);
}

    .emr-s6-progress-row.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s6-progress-label {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--emr-emerald-2);
    flex: 1;
    text-transform: uppercase;
}

.emr-s6-progress-track {
    flex: 2;
    height: 5px;
    background: var(--emr-sf-2);
    border-radius: 3px;
    overflow: hidden;
}

.emr-s6-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--emr-emerald);
    box-shadow: 0 0 6px var(--emr-emerald-glow);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .9s cubic-bezier(.22,1,.36,1);
}

.emr-s6-progress-row.show .emr-s6-progress-fill {
    transform: scaleX(.42);
}
/* 5/12 */

.emr-s6-progress-frac {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 800;
    color: var(--emr-emerald-2);
    letter-spacing: .04em;
    flex-shrink: 0;
}

/* Next session card */
.emr-s6-next-session {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-azure-bdr);
    border-radius: var(--emr-r-md);
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .4s ease .15s, transform .45s var(--emr-ease) .15s;
}

.emr-s6-progress-row.show ~ .emr-s6-next-session {
    opacity: 1;
    transform: translateX(0);
}

.emr-s6-next-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-azure-2);
    flex-shrink: 0;
}

.emr-s6-next-title {
    font-size: clamp(11px,1.1vw,12.5px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.012em;
    margin-bottom: 2px;
}

.emr-s6-next-meta {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    color: var(--emr-t-3);
    letter-spacing: .04em;
}


/* ════════════════════════════════════════════════════════════
   BOTTOM STATS ROW — 3 figures across full width
════════════════════════════════════════════════════════════ */
.emr-s6-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px,1.5vw,18px);
    margin-top: clamp(36px,5vw,56px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s var(--emr-ease);
}

    .emr-s6-stats.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s6-stat {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--emr-r-xl);
    padding: clamp(18px,2.5vw,30px);
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
}

    /* Top accent per stat */
    .emr-s6-stat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

    .emr-s6-stat:nth-child(1)::before {
        background: var(--emr-violet);
        box-shadow: 0 0 10px var(--emr-violet-glow);
    }

    .emr-s6-stat:nth-child(2)::before {
        background: var(--emr-emerald);
        box-shadow: 0 0 10px var(--emr-emerald-glow);
    }

    .emr-s6-stat:nth-child(3)::before {
        background: var(--emr-azure);
        box-shadow: 0 0 10px var(--emr-azure-glow);
    }

.emr-s6-stat-n {
    font-family: var(--emr-font);
    font-size: clamp(34px,4.5vw,60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.060em;
    color: #0a0b10;
    margin-bottom: 6px;
}

.emr-s6-stat-l {
    font-size: clamp(12.5px,1.2vw,14.5px);
    font-weight: 700;
    color: #3d4051;
    letter-spacing: -0.012em;
    line-height: 1.35;
    margin-bottom: 5px;
}

.emr-s6-stat-sub {
    font-size: clamp(11px,1.05vw,12.5px);
    color: #7a7f99;
    line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① */
@media (max-width: 1080px) {
    .emr-s6-sessions-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .emr-s6-session-dot {
        width: clamp(28px,3.8vw,38px);
        height: clamp(28px,3.8vw,38px);
    }
}

/* ② Tablet — stack split cards */
@media (max-width: 860px) {

    /* On tablet, cancel clip-path split and just fade in stacked */
    .emr-s6-half,
    .emr-s6-half--right {
        clip-path: none !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .6s ease var(--emr-hd, 0ms), transform .65s var(--emr-ease) var(--emr-hd, 0ms);
    }

    .emr-s6-halves.split .emr-s6-half,
    .emr-s6-halves.split .emr-s6-half--right {
        opacity: 1;
        transform: translateY(0);
    }

    .emr-s6-halves {
        grid-template-columns: 1fr;
    }

    .emr-s6-seam {
        display: none;
    }

    .emr-s6-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s6 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s6-inner {
        padding: 0 18px;
    }

    .emr-s6-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s6-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s6-sessions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
    }

    .emr-s6-session-dot {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }

    .emr-s6-tabs {
        gap: 4px;
    }

    .emr-s6-tab {
        padding: 5px 8px;
    }

    .emr-s6-tab-name {
        font-size: 10.5px;
    }

    .emr-s6-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
    }

    .emr-s6-stat {
        padding: 18px 16px;
        border-radius: var(--emr-r-lg);
    }

    .emr-s6-stat-n {
        font-size: clamp(30px,9vw,44px);
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s6-inner {
        padding: 0 14px;
    }

    .emr-s6-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s6-lead {
        font-size: 14.5px;
    }

    .emr-s6-sessions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .emr-s6-session-dot {
        width: 30px;
        height: 30px;
        font-size: 9px;
    }

    .emr-s6-stat-n {
        font-size: 28px;
    }

    .emr-s6-stat-l {
        font-size: 12px;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s6-head,
    .emr-s6-stats {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s6-half,
    .emr-s6-half--right {
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s6-seam {
        display: none;
    }

    .emr-s6-tab,
    .emr-s6-group-workspace,
    .emr-s6-session,
    .emr-s6-progress-row,
    .emr-s6-next-session {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s6-rx-mini-chip {
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: none !important;
    }

    .emr-s6-session-enc {
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: none !important;
    }

    .emr-s6-progress-fill {
        transform: scaleX(.42) !important;
        transition: none !important;
    }

    .emr-s6-session--done .emr-s6-session-dot {
        animation: none !important;
    }

    .emr-s6-session--current .emr-s6-session-dot::after {
        animation: none !important;
    }

    .emr-s6-group-stat-dot {
        animation: none !important;
    }
}















































/* ================================================================
   EMR.aspx — Section 7 — "QlynicId"
   "Your patient's identity — portable, permanent, theirs."
   Dark obsidian theme — contrast after S5/S6 white.
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "THE BROADCAST"

   The QlynicId code sits at the exact centre of the section.
   When IO fires (0.26 threshold, rootMargin -14% bottom):

   Phase 1 (0–600ms):
   ▸ The ID materialises character by character via a character-
     scan technique — each char flickers through random glyphs
     before locking, like a real signal being decoded.
   ▸ The dashes appear instantly (they're structural, not data).

   Phase 2 (600ms+):
   ▸ Three concentric signal rings expand outward from the ID.
     Each ring starts at scale(0) and expands to scale(1) with
     different durations (0.8s / 1.1s / 1.4s).
     After all three are out, they pulse on a looping keyframe
     — three rings at offset timing, like a broadcast tower.
   ▸ A thin beam draws from the ID to each of three nodes.
     Beams use stroke-dashoffset animation.

   Phase 3 (1200ms+):
   ▸ Three destination nodes materialise at the ring edges
     (Clinic A, Clinic B, Patient Portal) — each scales in
     from 0 with spring physics, staggered 160ms.

   Phase 4 (1800ms+):
   ▸ Three "Beat" story cards appear below — the three moments
     of the QlynicId story (at booking / across clinics / portal).
   ▸ Each card wipes in via clip-path from bottom.
   ================================================================ */


/* ── Shell ── */
.emr-s7 {
    position: relative;
    background: var(--emr-obs-1);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

/* Grid texture */
.emr-s7-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(59,130,246,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Noise grain */
.emr-s7-noise {
    position: absolute;
    inset: 0;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    pointer-events: none;
    z-index: 0;
}

/* ── Inner ── */
.emr-s7-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ════════════════════════════════════════════════════════════
   HEADER (centred)
════════════════════════════════════════════════════════════ */
.emr-s7-head {
    text-align: center;
    max-width: 700px;
    margin-bottom: clamp(52px,7vw,80px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s7-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s7-eyebrow-wrap {
    margin-bottom: clamp(14px,1.8vw,20px);
}

.emr-s7-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,56px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: var(--emr-t-1);
    margin-bottom: clamp(14px,1.8vw,20px);
}

    .emr-s7-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--emr-emerald-2), var(--emr-azure-2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s7-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}


/* ════════════════════════════════════════════════════════════
   BROADCAST STAGE — the centred signal animation
════════════════════════════════════════════════════════════ */
.emr-s7-broadcast {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(52px,7vw,80px);
    /* height is driven by the SVG inside */
}

/* ── The SVG canvas for rings and beams ── */
.emr-s7-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Signal rings — CSS animation */
.emr-s7-ring {
    fill: none;
    stroke-width: 1;
}

.emr-s7-ring--1 {
    stroke: rgba(52,211,153,.22);
}

.emr-s7-ring--2 {
    stroke: rgba(52,211,153,.14);
}

.emr-s7-ring--3 {
    stroke: rgba(59,130,246,.10);
}

/* Ring scale-in entry */
.emr-s7-ring {
    transform-origin: 50% 50%;
    transform: scale(0);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}

    .emr-s7-ring.show {
        transform: scale(1);
        opacity: 1;
    }

    /* After entry, continuous pulse */
    .emr-s7-ring.pulsing {
        animation: emr-s7-ring-breathe var(--emr-rd, 4s) ease-in-out infinite;
    }

@keyframes emr-s7-ring-breathe {
    0%,100% {
        opacity: var(--emr-ra, .20);
        transform: scale(1);
    }

    50% {
        opacity: var(--emr-rb, .08);
        transform: scale(1.04);
    }
}

.emr-s7-ring--1 {
    --emr-rd: 3.8s;
    --emr-ra: .22;
    --emr-rb: .08;
}

.emr-s7-ring--2 {
    --emr-rd: 4.4s;
    --emr-ra: .14;
    --emr-rb: .05;
}

.emr-s7-ring--3 {
    --emr-rd: 5.2s;
    --emr-ra: .10;
    --emr-rb: .03;
}

/* Beam lines — stroke-dashoffset draw */
.emr-s7-beam {
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity: 0;
    transition: stroke-dashoffset .7s var(--emr-ease) var(--emr-bd, 0ms), opacity .3s ease var(--emr-bd, 0ms);
}

    .emr-s7-beam.draw {
        stroke-dashoffset: 0;
        opacity: 1;
    }

.emr-s7-beam--1 {
    stroke: rgba(52,211,153,.40);
    --emr-bd: 1200ms;
}

.emr-s7-beam--2 {
    stroke: rgba(52,211,153,.35);
    --emr-bd: 1360ms;
}

.emr-s7-beam--3 {
    stroke: rgba(59,130,246,.35);
    --emr-bd: 1520ms;
}

/* Moving photon along each beam */
.emr-s7-photon {
    r: 3;
    fill: rgba(255,255,255,.85);
    filter: drop-shadow(0 0 4px rgba(52,211,153,.9));
    opacity: 0;
}

    .emr-s7-photon.run {
        animation: emr-s7-photon-anim var(--emr-pt, 2.8s) ease-in-out infinite var(--emr-pd, 0ms);
        opacity: 1;
    }


/* ── Central QlynicId chip ── */
.emr-s7-id-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px,1.4vw,16px);
    padding: clamp(36px,5vw,72px) 0;
}

.emr-s7-id-label {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    opacity: 0;
    transition: opacity .5s ease;
}

    .emr-s7-id-label.show {
        opacity: 1;
    }

/* The big QlynicId display */
.emr-s7-id-display {
    font-family: var(--emr-mono);
    font-size: clamp(28px,4.5vw,64px);
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--emr-emerald-2);
    text-shadow: 0 0 40px rgba(52,211,153,.25);
    display: flex;
    align-items: center;
    gap: 0;
    /* each character is a span, managed by JS */
    min-height: 1.25em;
    white-space: nowrap;
}

.emr-s7-id-char {
    display: inline-block;
    transition: color .15s ease;
    min-width: .62em;
    text-align: center;
}

    .emr-s7-id-char.scanning {
        color: rgba(255,255,255,.30);
    }

    .emr-s7-id-char.locked {
        color: var(--emr-emerald-2);
    }

    .emr-s7-id-char.dash {
        color: rgba(52,211,153,.35);
        min-width: .4em;
    }

/* Glow pulse once fully assembled */
.emr-s7-id-display.complete {
    animation: emr-s7-id-glow 2s ease-out 1;
}

@keyframes emr-s7-id-glow {
    0%,100% {
        text-shadow: 0 0 40px rgba(52,211,153,.25);
    }

    40% {
        text-shadow: 0 0 70px rgba(52,211,153,.70), 0 0 120px rgba(52,211,153,.25);
    }
}

.emr-s7-id-sub {
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--emr-t-4);
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .5s ease .2s;
}

    .emr-s7-id-sub.show {
        opacity: 1;
    }

.emr-s7-id-sub-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--emr-t-5);
    flex-shrink: 0;
}


/* ── Destination nodes ── */
.emr-s7-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* spring entry */
    opacity: 0;
    transform: scale(0);
    transition: opacity .4s ease var(--emr-nd, 0ms), transform .5s var(--emr-spring) var(--emr-nd, 0ms);
    pointer-events: none;
    z-index: 3;
}

    .emr-s7-node.show {
        opacity: 1;
        transform: scale(1);
    }

.emr-s7-node-card {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-lg);
    padding: clamp(8px,1.1vw,12px) clamp(10px,1.3vw,16px);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: var(--emr-shadow-sm);
}

.emr-s7-node-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emr-s7-node-ico--clinic {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s7-node-ico--portal {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s7-node-name {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-t-2);
}

.emr-s7-node-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s7-node-status--live {
    background: var(--emr-emerald);
    box-shadow: 0 0 6px var(--emr-emerald-glow);
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s7-node-status--pending {
    background: var(--emr-azure-2);
    box-shadow: 0 0 6px var(--emr-azure-glow);
    animation: emr-pulse-dot 2.4s ease-in-out infinite;
}

.emr-s7-node-label {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-t-4);
}


/* ════════════════════════════════════════════════════════════
   THREE BEAT CARDS  — the QlynicId story in 3 acts
════════════════════════════════════════════════════════════ */
.emr-s7-beats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px,2vw,22px);
    width: 100%;
}

.emr-s7-beat {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-xl);
    padding: clamp(20px,2.6vw,32px);
    position: relative;
    overflow: hidden;
    /* clip-path wipe from bottom */
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--emr-ease) var(--emr-bt, 0ms);
}

    .emr-s7-beat.show {
        clip-path: inset(0 0 0% 0);
    }

    /* Top accent colour per beat */
    .emr-s7-beat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

    .emr-s7-beat:nth-child(1)::before {
        background: var(--emr-emerald);
        box-shadow: 0 0 12px var(--emr-emerald-glow);
    }

    .emr-s7-beat:nth-child(2)::before {
        background: var(--emr-azure);
        box-shadow: 0 0 12px var(--emr-azure-glow);
    }

    .emr-s7-beat:nth-child(3)::before {
        background: var(--emr-violet);
        box-shadow: 0 0 12px var(--emr-violet-glow);
    }

    /* Beat inner glow */
    .emr-s7-beat:nth-child(1) {
        background: linear-gradient(160deg, rgba(16,185,129,.05), var(--emr-obs-3));
    }

    .emr-s7-beat:nth-child(2) {
        background: linear-gradient(160deg, rgba(59,130,246,.05), var(--emr-obs-3));
    }

    .emr-s7-beat:nth-child(3) {
        background: linear-gradient(160deg, rgba(139,92,246,.05), var(--emr-obs-3));
    }

.emr-s7-beat-num {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.emr-s7-beat:nth-child(1) .emr-s7-beat-num {
    color: var(--emr-emerald-2);
}

.emr-s7-beat:nth-child(2) .emr-s7-beat-num {
    color: var(--emr-azure-2);
}

.emr-s7-beat:nth-child(3) .emr-s7-beat-num {
    color: var(--emr-violet-2);
}

.emr-s7-beat-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.emr-s7-beat:nth-child(1) .emr-s7-beat-ico {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s7-beat:nth-child(2) .emr-s7-beat-ico {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s7-beat:nth-child(3) .emr-s7-beat-ico {
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    color: var(--emr-violet-2);
}

.emr-s7-beat-title {
    font-family: var(--emr-font);
    font-size: clamp(14px,1.5vw,17px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.022em;
    line-height: 1.28;
    margin-bottom: 9px;
}

.emr-s7-beat-body {
    font-size: clamp(12.5px,1.2vw,14px);
    color: var(--emr-t-2);
    line-height: 1.68;
}

    .emr-s7-beat-body strong {
        color: var(--emr-t-1);
        font-weight: 700;
    }

/* Mini ID display inside each beat card */
.emr-s7-beat-id {
    margin-top: 14px;
    padding: 8px 11px;
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-md);
    font-family: var(--emr-mono);
    font-size: clamp(10px,.96vw,12px);
    font-weight: 700;
    letter-spacing: .10em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.emr-s7-beat:nth-child(1) .emr-s7-beat-id {
    color: var(--emr-emerald-2);
    border-color: var(--emr-emerald-bdr);
}

.emr-s7-beat:nth-child(2) .emr-s7-beat-id {
    color: var(--emr-azure-2);
    border-color: var(--emr-azure-bdr);
}

.emr-s7-beat:nth-child(3) .emr-s7-beat-id {
    color: var(--emr-violet-2);
    border-color: var(--emr-violet-bdr);
}

.emr-s7-beat-id-badge {
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--emr-r-pill);
    flex-shrink: 0;
}

.emr-s7-beat:nth-child(1) .emr-s7-beat-id-badge {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s7-beat:nth-child(2) .emr-s7-beat-id-badge {
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
}

.emr-s7-beat:nth-child(3) .emr-s7-beat-id-badge {
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ① 1080px  ② 860px  ③ 640px  ④ 400px
════════════════════════════════════════════════════════════ */

/* ① */
@media (max-width: 1080px) {
    .emr-s7-id-display {
        font-size: clamp(24px,4vw,52px);
    }
}

/* ② Tablet */
@media (max-width: 860px) {

    /* Nodes: hide SVG canvas and absolute nodes — not enough room */
    .emr-s7-svg {
        display: none;
    }

    .emr-s7-node {
        display: none;
    }

    .emr-s7-id-wrap {
        padding: clamp(24px,4vw,44px) 0;
    }

    .emr-s7-beats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s7 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s7-inner {
        padding: 0 18px;
    }

    .emr-s7-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s7-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s7-id-display {
        font-size: clamp(22px,7vw,36px);
        letter-spacing: .08em;
    }

    .emr-s7-id-wrap {
        padding: 20px 0;
    }

    .emr-s7-beat {
        padding: 18px 16px;
        border-radius: var(--emr-r-lg);
    }

    .emr-s7-beat-title {
        font-size: clamp(13.5px,4vw,16px);
    }

    .emr-s7-beat-body {
        font-size: 13px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s7-inner {
        padding: 0 14px;
    }

    .emr-s7-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s7-lead {
        font-size: 14.5px;
    }

    .emr-s7-id-display {
        font-size: clamp(20px,6.5vw,28px);
    }

    .emr-s7-beat-title {
        font-size: 13px;
    }

    .emr-s7-beat-body {
        font-size: 12.5px;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s7-head {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s7-ring {
        transform: scale(1) !important;
        opacity: .15 !important;
        animation: none !important;
        transition: none !important;
    }

    .emr-s7-beam {
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .emr-s7-node {
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: none !important;
    }

    .emr-s7-photon {
        display: none;
    }

    .emr-s7-id-label,
    .emr-s7-id-sub {
        opacity: 1 !important;
        transition: none !important;
    }

    .emr-s7-id-char {
        color: var(--emr-emerald-2) !important;
    }

    .emr-s7-id-display {
        animation: none !important;
    }

    .emr-s7-beat {
        clip-path: none !important;
        transition: none !important;
    }
}












































/* ================================================================
   EMR.aspx — Section 8 — "Patient Portal"
   "The portal is coming. The records are already ready."
   Dark obsidian — continues from S7.
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "THE DEFROST"

   A patient portal mockup (phone-scale) sits on the right.
   It starts frozen: filter:blur(20px) saturate(0) brightness(.55)
   with a frosted glass overlay (radial SVG noise + azure tint).

   IO fires at 0.24 threshold, rootMargin -12% bottom:

   Phase 1 (0ms):    Header copy column slides in from left.
   Phase 2 (300ms):  Frost overlay opacity transitions 1 → 0 (1.4s).
   Phase 3 (300ms):  Card filter transitions to clear (1.8s total).
   Phase 4 (700ms):  "Under Development" badge fades in on the card.
   Phase 5 (1400ms): Portal content rows materialise staggered.
   Phase 6 (2200ms): Waitlist strip fades in below the card.

   The frost uses a CSS `backdrop-filter` approach with a ::before
   pseudo-element that carries the ice effect — no extra DOM nodes.
   On mobile the frost effect is simplified to opacity-only.
   ================================================================ */


/* ── Shell ── */
.emr-s8 {
    position: relative;
    background: var(--emr-obs-2);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

    /* Top gradient rule */
    .emr-s8::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--emr-violet-bdr) 30%, var(--emr-azure-bdr) 50%, var(--emr-violet-bdr) 70%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

/* Ambient orbs */
.emr-s8-orb-l {
    position: absolute;
    top: -10%;
    left: -6%;
    width: clamp(280px,38vw,520px);
    height: clamp(280px,38vw,520px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    animation: emr-s8-orb-drift 18s ease-in-out infinite alternate;
}

.emr-s8-orb-r {
    position: absolute;
    bottom: -8%;
    right: -5%;
    width: clamp(220px,30vw,420px);
    height: clamp(220px,30vw,420px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.06) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

@keyframes emr-s8-orb-drift {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(20px,-30px);
    }
}

/* Noise grain */
.emr-s8::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    pointer-events: none;
    z-index: 0;
}

/* ── Inner ── */
.emr-s8-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,80px);
    align-items: center;
}


/* ════════════════════════════════════════════════════════════
   LEFT — COPY COLUMN
════════════════════════════════════════════════════════════ */
.emr-s8-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.8vw,30px);
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .7s ease, transform .7s var(--emr-ease);
}

    .emr-s8-copy.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s8-eyebrow-wrap { /* uses shared .emr-eyebrow */
}

.emr-s8-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,54px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: var(--emr-t-1);
}

    .emr-s8-h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--emr-azure-2), var(--emr-violet-2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s8-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}

/* Feature promise list */
.emr-s8-promises {
    display: flex;
    flex-direction: column;
    gap: clamp(12px,1.6vw,18px);
}

.emr-s8-promise {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .5s ease var(--emr-pd,0ms), transform .55s var(--emr-ease) var(--emr-pd,0ms);
}

    .emr-s8-promise.show {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s8-promise-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.emr-s8-promise-ico--azure {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s8-promise-ico--violet {
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    color: var(--emr-violet-2);
}

.emr-s8-promise-ico--green {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s8-promise-ico--amber {
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s8-promise-text {
}

.emr-s8-promise-title {
    font-size: clamp(13px,1.3vw,15px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.018em;
    line-height: 1.28;
    margin-bottom: 3px;
}

.emr-s8-promise-body {
    font-size: clamp(12px,1.15vw,13.5px);
    color: var(--emr-t-3);
    line-height: 1.60;
}

/* Dev status bar */
.emr-s8-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .55s var(--emr-ease);
}

    .emr-s8-status-bar.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s8-status-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-violet-2);
    flex-shrink: 0;
}

.emr-s8-status-text {
    flex: 1;
    min-width: 0;
}

.emr-s8-status-title {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.015em;
    margin-bottom: 2px;
}

.emr-s8-status-sub {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-3);
    line-height: 1.50;
}

.emr-s8-status-badge {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-pill);
    padding: 3px 10px;
    flex-shrink: 0;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════
   RIGHT — PORTAL MOCKUP (FROSTED)
   The entire mockup starts frozen and defrosts on entry.
════════════════════════════════════════════════════════════ */
.emr-s8-mockup-wrap {
    position: relative;
    opacity: 0;
    transform: translateX(22px);
    transition: opacity .6s ease .1s, transform .65s var(--emr-ease) .1s;
}

    .emr-s8-mockup-wrap.is-vis {
        opacity: 1;
        transform: translateX(0);
    }

/* The phone-scale mockup card */
.emr-s8-phone {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: clamp(22px,3vw,34px);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 32px 80px rgba(0,0,0,.60), 0 0 60px rgba(59,130,246,.06);
    position: relative;
    max-width: 380px;
    margin: 0 auto;
    /* FROST STATE — starts frozen */
    filter: blur(18px) saturate(0) brightness(.5);
    transition: filter 1.8s cubic-bezier(.22,1,.36,1), box-shadow 1.8s ease;
}

    .emr-s8-phone.defrosted {
        filter: blur(0) saturate(1) brightness(1);
        box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 32px 80px rgba(0,0,0,.60), 0 0 60px rgba(59,130,246,.10);
    }

/* Frost overlay — the ice crystal texture layer */
.emr-s8-frost {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(99,102,241,.18) 0%, rgba(59,130,246,.12) 40%, rgba(99,102,241,.08) 70%, transparent 100%), repeating-linear-gradient( 45deg, transparent 0px, transparent 3px, rgba(255,255,255,.018) 3px, rgba(255,255,255,.018) 4px );
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.4s ease .3s;
}

    .emr-s8-frost.clear {
        opacity: 0;
    }

/* "Under Development" badge — floats over phone mockup */
.emr-s8-dev-badge {
    position: absolute;
    top: 14px;
    right: -8px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,10px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--emr-violet-2);
    background: var(--emr-obs-5);
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-pill);
    padding: 5px 13px;
    box-shadow: 0 4px 20px rgba(0,0,0,.40), 0 0 16px rgba(139,92,246,.15);
    opacity: 0;
    transform: translateX(10px) scale(.9);
    transition: opacity .4s ease, transform .45s var(--emr-spring);
}

    .emr-s8-dev-badge.show {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

.emr-s8-dev-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-violet-2);
    box-shadow: 0 0 8px var(--emr-violet-glow);
    flex-shrink: 0;
    animation: emr-pulse-dot 2s ease-in-out infinite;
}

/* ── Phone chrome bar ── */
.emr-s8-phone-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: var(--emr-obs-4);
    border-bottom: 1px solid var(--emr-bdr);
}

.emr-s8-phone-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--emr-font);
    font-size: 13px;
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.020em;
}

.emr-s8-phone-logo-ico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--emr-grad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emr-s8-phone-url {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 600;
    color: var(--emr-t-3);
    letter-spacing: .04em;
}

.emr-s8-phone-notif {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--emr-azure-2);
}

/* ── Patient identity strip ── */
.emr-s8-pat-strip {
    padding: 12px 16px;
    border-bottom: 1px solid var(--emr-bdr);
    display: flex;
    align-items: center;
    gap: 11px;
    background: linear-gradient(135deg, rgba(59,130,246,.04), transparent);
    /* portal content — initially hidden, revealed after defrost */
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .4s ease var(--emr-rd, 0ms), transform .45s var(--emr-ease) var(--emr-rd, 0ms);
}

    .emr-s8-pat-strip.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s8-pat-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--emr-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.emr-s8-pat-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.018em;
    margin-bottom: 2px;
}

.emr-s8-pat-qid {
    font-family: var(--emr-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--emr-emerald-2);
    letter-spacing: .08em;
}

/* ── Section tabs ── */
.emr-s8-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--emr-bdr);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .4s ease var(--emr-rd, 0ms), transform .4s var(--emr-ease) var(--emr-rd, 0ms);
}

    .emr-s8-tabs.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s8-tab {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emr-t-3);
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    cursor: default;
}

    .emr-s8-tab.active {
        color: var(--emr-azure-2);
        border-bottom-color: var(--emr-azure);
    }

/* ── Portal content body ── */
.emr-s8-phone-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Appointment row */
.emr-s8-appt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--emr-r-md);
    border: 1px solid var(--emr-bdr);
    background: var(--emr-obs-4);
    /* portal content — stagger entry */
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .45s ease var(--emr-rd, 0ms), transform .50s var(--emr-ease) var(--emr-rd, 0ms);
}

    .emr-s8-appt-row.show {
        opacity: 1;
        transform: translateX(0);
    }

    .emr-s8-appt-row.upcoming {
        border-color: var(--emr-azure-bdr);
        background: linear-gradient(135deg,rgba(59,130,246,.04),var(--emr-obs-4));
    }

.emr-s8-appt-stripe {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}

.emr-s8-appt-row.upcoming .emr-s8-appt-stripe {
    background: var(--emr-azure);
    box-shadow: 0 0 6px var(--emr-azure-glow);
}

.emr-s8-appt-row:not(.upcoming) .emr-s8-appt-stripe {
    background: var(--emr-bdr-2);
}

.emr-s8-appt-info {
    flex: 1;
    min-width: 0;
}

.emr-s8-appt-name {
    font-size: clamp(11px,1.05vw,12.5px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.emr-s8-appt-meta {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    color: var(--emr-t-3);
    letter-spacing: .04em;
}

.emr-s8-appt-badge {
    font-family: var(--emr-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    border-radius: var(--emr-r-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}

.emr-s8-appt-badge--upcoming {
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
}

.emr-s8-appt-badge--done {
    color: var(--emr-t-4);
    background: var(--emr-sf-1);
    border: 1px solid var(--emr-bdr);
}

/* Records peek row */
.emr-s8-record-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--emr-r-md);
    border: 1px solid var(--emr-bdr);
    background: var(--emr-obs-4);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .45s ease var(--emr-rd, 0ms), transform .50s var(--emr-ease) var(--emr-rd, 0ms);
}

    .emr-s8-record-row.show {
        opacity: 1;
        transform: translateX(0);
    }

.emr-s8-record-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emr-s8-record-ico--enc {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s8-record-ico--rx {
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    color: var(--emr-violet-2);
}

.emr-s8-record-ico--msg {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s8-record-name {
    flex: 1;
    font-size: clamp(11px,1.05vw,12.5px);
    font-weight: 700;
    color: var(--emr-t-1);
    letter-spacing: -0.010em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emr-s8-record-count {
    font-family: var(--emr-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--emr-t-3);
    letter-spacing: .06em;
    flex-shrink: 0;
}

/* Coming-soon overlay strip at bottom of phone */
.emr-s8-coming-strip {
    margin: 8px 0 0;
    padding: 9px 12px;
    background: linear-gradient(135deg,rgba(139,92,246,.08),rgba(59,130,246,.06));
    border: 1px solid var(--emr-violet-bdr);
    border-radius: var(--emr-r-md);
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease var(--emr-rd,0ms), transform .45s var(--emr-ease) var(--emr-rd,0ms);
}

    .emr-s8-coming-strip.show {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s8-coming-text {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-2);
    line-height: 1.5;
    flex: 1;
}

    .emr-s8-coming-text strong {
        color: var(--emr-violet-2);
        font-weight: 700;
    }


/* ════════════════════════════════════════════════════════════
   WAITLIST STRIP  — below the mockup, full width
════════════════════════════════════════════════════════════ */
.emr-s8-waitlist {
    grid-column: 1 / -1;
    margin-top: clamp(40px,5.5vw,56px);
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    padding: clamp(24px,3.2vw,38px);
    display: flex;
    align-items: center;
    gap: clamp(20px,3vw,40px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s8-waitlist.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

    /* Top accent */
    .emr-s8-waitlist::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--emr-azure-bdr) 30%, var(--emr-violet-bdr) 50%, var(--emr-azure-bdr) 70%, transparent 100%);
        border-radius: var(--emr-r-xl) var(--emr-r-xl) 0 0;
    }

.emr-s8-waitlist {
    position: relative;
    overflow: hidden;
}

.emr-s8-waitlist-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--emr-azure-sub), var(--emr-violet-sub));
    border: 1px solid var(--emr-azure-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emr-azure-2);
    flex-shrink: 0;
}

.emr-s8-waitlist-text {
    flex: 1;
    min-width: 0;
}

.emr-s8-waitlist-title {
    font-size: clamp(15px,1.6vw,19px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.022em;
    margin-bottom: 5px;
}

.emr-s8-waitlist-sub {
    font-size: clamp(12.5px,1.2vw,14.5px);
    color: var(--emr-t-2);
    line-height: 1.60;
}

/* The "already ready" proof chips */
.emr-s8-proof-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.emr-s8-proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: var(--emr-r-pill);
    padding: 4px 11px;
}

.emr-s8-proof-chip--green {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s8-proof-chip--azure {
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
}

.emr-s8-proof-chip--violet {
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
}

.emr-s8-proof-chip--amber {
    color: var(--emr-amber);
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
}

.emr-s8-proof-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emr-s8-proof-chip--green .emr-s8-proof-dot {
    background: var(--emr-emerald);
}

.emr-s8-proof-chip--azure .emr-s8-proof-dot {
    background: var(--emr-azure);
}

.emr-s8-proof-chip--violet .emr-s8-proof-dot {
    background: var(--emr-violet);
}

.emr-s8-proof-chip--amber .emr-s8-proof-dot {
    background: var(--emr-amber);
}

/* CTA button in waitlist */
.emr-s8-waitlist-cta {
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ① Laptop */
@media (max-width: 1080px) {
    .emr-s8-inner {
        gap: clamp(28px,4.5vw,56px);
    }

    .emr-s8-phone {
        max-width: 340px;
    }
}

/* ② Tablet — stack */
@media (max-width: 860px) {

    .emr-s8-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .emr-s8-copy {
        transform: translateY(20px);
    }

        .emr-s8-copy.is-vis {
            transform: translateY(0);
        }

    .emr-s8-mockup-wrap {
        transform: translateY(20px);
    }

        .emr-s8-mockup-wrap.is-vis {
            transform: translateY(0);
        }

    .emr-s8-phone {
        max-width: 420px;
    }

    .emr-s8-waitlist {
        flex-direction: column;
        text-align: center;
    }

    .emr-s8-waitlist-cta {
        width: 100%;
    }

        .emr-s8-waitlist-cta .emr-btn-primary {
            width: 100%;
            justify-content: center;
        }

    .emr-s8-proof-chips {
        justify-content: center;
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s8 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s8-inner {
        padding: 0 18px;
    }

    .emr-s8-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s8-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s8-promise-title {
        font-size: 13.5px;
    }

    .emr-s8-promise-body {
        font-size: 12.5px;
    }

    .emr-s8-promise-ico {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .emr-s8-phone {
        border-radius: 20px;
    }

    .emr-s8-phone-body {
        padding: 10px 12px;
        gap: 7px;
    }

    .emr-s8-waitlist {
        padding: 18px 16px;
        border-radius: var(--emr-r-lg);
        gap: 14px;
    }

    .emr-s8-waitlist-title {
        font-size: clamp(14px,4vw,17px);
    }

    .emr-s8-waitlist-sub {
        font-size: 13px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s8-inner {
        padding: 0 14px;
    }

    .emr-s8-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s8-lead {
        font-size: 14.5px;
    }

    .emr-s8-phone {
        max-width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s8-copy,
    .emr-s8-mockup-wrap,
    .emr-s8-waitlist,
    .emr-s8-promise,
    .emr-s8-status-bar,
    .emr-s8-dev-badge,
    .emr-s8-pat-strip,
    .emr-s8-tabs,
    .emr-s8-appt-row,
    .emr-s8-record-row,
    .emr-s8-coming-strip {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Skip defrost — show phone at full clarity */
    .emr-s8-phone {
        filter: none !important;
        transition: none !important;
    }

    .emr-s8-frost {
        opacity: 0 !important;
        transition: none !important;
    }
}
















































/* ================================================================
   EMR.aspx — Section 9 — "The Full Loop"
   "One continuous data flow, not five disconnected tools."
   Dark obsidian.
   ================================================================ */

/* ── Shell ── */
.emr-s9 {
    position: relative;
    background: var(--emr-obs-1);
    overflow: hidden;
    padding: clamp(80px,11vh,130px) 0 clamp(80px,11vh,130px);
    border-top: 1px solid var(--emr-bdr);
}

.emr-s9-atmo {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(139,92,246,.05) 0%, rgba(59,130,246,.03) 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.emr-s9-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(59,130,246,.030) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.emr-s9-noise {
    position: absolute;
    inset: 0;
    opacity: .015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    pointer-events: none;
    z-index: 0;
}

.emr-s9-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px,4.5vw,64px);
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.emr-s9-head {
    text-align: center;
    max-width: 720px;
    margin-bottom: clamp(52px,7vw,80px);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s9-head.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s9-h2 {
    font-family: var(--emr-font);
    font-size: clamp(28px,3.8vw,56px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.046em;
    color: var(--emr-t-1);
    margin-bottom: clamp(14px,1.8vw,20px);
}

    .emr-s9-h2 em {
        font-style: normal;
        background: var(--emr-grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.emr-s9-lead {
    font-size: clamp(14.5px,1.45vw,17px);
    color: var(--emr-t-2);
    line-height: 1.76;
}


/* ════════════════════════════════════════════════════════════
   CIRCUIT STAGE (desktop only)
════════════════════════════════════════════════════════════ */
.emr-s9-circuit {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 960 / 520;
    margin-bottom: clamp(48px,6.5vw,72px);
    /* CRITICAL: prevent phantom height on mobile */
    overflow: hidden;
}

/* SVG */
.emr-s9-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Circuit path */
.emr-s9-path {
    fill: none;
    stroke: rgba(99,102,241,.20);
    stroke-width: 1.5;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 1.6s cubic-bezier(.4,.14,.3,1) .2s;
}

    .emr-s9-path.drawn {
        stroke-dashoffset: 0;
    }

/* Direction arrows */
.emr-s9-arrow {
    opacity: 0;
    transition: opacity .4s ease;
}

    .emr-s9-arrow.show {
        opacity: 1;
    }

/* Node card wraps */
.emr-s9-card-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.80);
    transition: opacity .5s ease var(--emr-nd,0ms), transform .6s var(--emr-spring) var(--emr-nd,0ms);
    pointer-events: none;
}

    .emr-s9-card-wrap.lit {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }

.emr-s9-card {
    background: var(--emr-obs-4);
    border: 1px solid var(--emr-bdr-2);
    border-radius: var(--emr-r-xl);
    padding: clamp(14px,1.8vw,20px);
    width: clamp(160px,18vw,220px);
    box-shadow: var(--emr-shadow-md);
    position: relative;
    overflow: hidden;
    transition: border-color .4s ease, box-shadow .4s ease;
}

.emr-s9-card-wrap.photon-hit .emr-s9-card {
    border-color: var(--emr-nd-color, var(--emr-azure-bdr));
    box-shadow: 0 0 0 2px var(--emr-nd-glow, var(--emr-azure-sub)), var(--emr-shadow-md), 0 0 30px var(--emr-nd-glow, rgba(59,130,246,.15));
    animation: emr-s9-card-hit .6s ease-out 1;
}

@keyframes emr-s9-card-hit {
    0% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

.emr-s9-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--emr-nd-grad, var(--emr-azure));
    opacity: 0;
    transition: opacity .4s ease var(--emr-nd,0ms);
}

.emr-s9-card-wrap.lit .emr-s9-card::before {
    opacity: 1;
}

.emr-s9-card-num {
    font-family: var(--emr-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-nd-text, var(--emr-azure-2));
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.emr-s9-card-num-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--emr-nd-text, var(--emr-azure-2));
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s9-card-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.emr-s9-card-title {
    font-family: var(--emr-font);
    font-size: clamp(12.5px,1.4vw,15px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.020em;
    line-height: 1.25;
    margin-bottom: 5px;
}

.emr-s9-card-sub {
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-3);
    line-height: 1.55;
}

/* Per-card colour vars */
.emr-s9-card-wrap--booking {
    --emr-nd-color: var(--emr-violet-bdr);
    --emr-nd-glow: rgba(139,92,246,.15);
    --emr-nd-text: var(--emr-violet-2);
    --emr-nd-grad: var(--emr-violet);
}

.emr-s9-card-wrap--encounter {
    --emr-nd-color: var(--emr-azure-bdr);
    --emr-nd-glow: rgba(59,130,246,.15);
    --emr-nd-text: var(--emr-azure-2);
    --emr-nd-grad: var(--emr-azure);
}

.emr-s9-card-wrap--rx {
    --emr-nd-color: var(--emr-amber-bdr);
    --emr-nd-glow: rgba(245,158,11,.12);
    --emr-nd-text: var(--emr-amber);
    --emr-nd-grad: var(--emr-amber);
}

.emr-s9-card-wrap--portal {
    --emr-nd-color: var(--emr-emerald-bdr);
    --emr-nd-glow: rgba(16,185,129,.12);
    --emr-nd-text: var(--emr-emerald-2);
    --emr-nd-grad: var(--emr-emerald);
}

.emr-s9-card-wrap--booking .emr-s9-card-ico {
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
    color: var(--emr-violet-2);
}

.emr-s9-card-wrap--encounter .emr-s9-card-ico {
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s9-card-wrap--rx .emr-s9-card-ico {
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s9-card-wrap--portal .emr-s9-card-ico {
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s9-mini {
    margin-top: 9px;
    padding: 7px 9px;
    background: var(--emr-obs-5);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-md);
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-nd-text, var(--emr-t-2));
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.45;
}

.emr-s9-mini-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emr-nd-text, var(--emr-t-3));
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

/* Node rings */
.emr-s9-node-ring {
    fill: none;
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity .4s ease var(--emr-nd, 0ms);
}

.emr-s9-node-group.lit .emr-s9-node-ring {
    opacity: 1;
}

.emr-s9-node-ring.active-pulse {
    animation: emr-s9-ring-hit .8s ease-out 1;
}

@keyframes emr-s9-ring-hit {
    0% {
        stroke-width: 1.5;
        opacity: .8;
        r: 44;
    }

    100% {
        stroke-width: .5;
        opacity: 0;
        r: 64;
    }
}

/* Centre statement */
.emr-s9-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .8s ease;
}

    .emr-s9-centre.show {
        opacity: 1;
    }

.emr-s9-centre-label {
    font-family: var(--emr-mono);
    font-size: clamp(8px,.76vw,9.5px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    margin-bottom: 6px;
}

.emr-s9-centre-text {
    font-family: var(--emr-font);
    font-size: clamp(20px,2.8vw,36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.038em;
    color: var(--emr-t-1);
}

.emr-s9-centre-sub {
    font-size: clamp(10.5px,1vw,12px);
    color: var(--emr-t-4);
    margin-top: 6px;
    letter-spacing: .02em;
}


/* ════════════════════════════════════════════════════════════
   MOBILE TIMELINE STACK
   Replaces circuit on ≤860px.
   Key fix: nodes are VISIBLE BY DEFAULT — no opacity:0 initial
   state on mobile. JS stagger is purely additive enhancement.
════════════════════════════════════════════════════════════ */
.emr-s9-stack {
    display: none;
    width: 100%;
    max-width: 520px;
    margin-bottom: clamp(40px,6vw,64px);
    /* Timeline container — vertical line runs down the left */
    position: relative;
}

    /* The continuous vertical line */
    .emr-s9-stack::before {
        content: '';
        position: absolute;
        top: 24px;
        bottom: 24px;
        left: 20px;
        width: 2px;
        background: linear-gradient(to bottom, var(--emr-violet-bdr), var(--emr-azure-bdr), var(--emr-amber-bdr), var(--emr-emerald-bdr));
        z-index: 0;
    }

/* Each node row */
.emr-s9-tl-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px,3vw,20px);
    padding-bottom: clamp(20px,3.5vw,28px);
    position: relative;
    z-index: 1;
    /* VISIBLE BY DEFAULT on mobile — no opacity:0 */
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s ease var(--emr-nd,0ms), transform .55s var(--emr-ease) var(--emr-nd,0ms);
}

    .emr-s9-tl-item:last-child {
        padding-bottom: 0;
    }

/* JS-driven stagger — starts from hidden state ONLY when .s9-animate is applied
       to the stack by JS. Without JS the items are always visible. */
.emr-s9-stack.s9-animate .emr-s9-tl-item {
    opacity: 0;
    transform: translateY(14px);
}

    .emr-s9-stack.s9-animate .emr-s9-tl-item.show {
        opacity: 1;
        transform: translateY(0);
    }

/* The timeline dot (left side) */
.emr-s9-tl-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border: 2px solid;
    transition: box-shadow .4s ease;
}

.emr-s9-tl-item:nth-child(1) .emr-s9-tl-dot {
    background: var(--emr-violet-sub);
    border-color: var(--emr-violet-bdr);
    color: var(--emr-violet-2);
}

.emr-s9-tl-item:nth-child(2) .emr-s9-tl-dot {
    background: var(--emr-azure-sub);
    border-color: var(--emr-azure-bdr);
    color: var(--emr-azure-2);
}

.emr-s9-tl-item:nth-child(3) .emr-s9-tl-dot {
    background: var(--emr-amber-sub);
    border-color: var(--emr-amber-bdr);
    color: var(--emr-amber);
}

.emr-s9-tl-item:nth-child(4) .emr-s9-tl-dot {
    background: var(--emr-emerald-sub);
    border-color: var(--emr-emerald-bdr);
    color: var(--emr-emerald-2);
}

.emr-s9-tl-item.show:nth-child(1) .emr-s9-tl-dot,
.emr-s9-tl-item:nth-child(1) .emr-s9-tl-dot {
    box-shadow: 0 0 16px var(--emr-violet-glow);
}

.emr-s9-tl-item:nth-child(2) .emr-s9-tl-dot {
    box-shadow: 0 0 16px var(--emr-azure-glow);
}

.emr-s9-tl-item:nth-child(3) .emr-s9-tl-dot {
    box-shadow: 0 0 12px rgba(245,158,11,.30);
}

.emr-s9-tl-item:nth-child(4) .emr-s9-tl-dot {
    box-shadow: 0 0 12px var(--emr-emerald-glow);
}

/* Content block */
.emr-s9-tl-content {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.emr-s9-tl-step {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.emr-s9-tl-item:nth-child(1) .emr-s9-tl-step {
    color: var(--emr-violet-2);
}

.emr-s9-tl-item:nth-child(2) .emr-s9-tl-step {
    color: var(--emr-azure-2);
}

.emr-s9-tl-item:nth-child(3) .emr-s9-tl-step {
    color: var(--emr-amber);
}

.emr-s9-tl-item:nth-child(4) .emr-s9-tl-step {
    color: var(--emr-emerald-2);
}

.emr-s9-tl-title {
    font-size: clamp(14.5px,3.5vw,17px);
    font-weight: 800;
    color: var(--emr-t-1);
    letter-spacing: -0.020em;
    line-height: 1.25;
    margin-bottom: 6px;
}

.emr-s9-tl-body {
    font-size: clamp(12.5px,3vw,14px);
    color: var(--emr-t-3);
    line-height: 1.62;
}

/* Mini stat chip inside timeline item */
.emr-s9-tl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: var(--emr-r-pill);
}

.emr-s9-tl-item:nth-child(1) .emr-s9-tl-chip {
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
}

.emr-s9-tl-item:nth-child(2) .emr-s9-tl-chip {
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
}

.emr-s9-tl-item:nth-child(3) .emr-s9-tl-chip {
    color: var(--emr-amber);
    background: var(--emr-amber-sub);
    border: 1px solid var(--emr-amber-bdr);
}

.emr-s9-tl-item:nth-child(4) .emr-s9-tl-chip {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s9-tl-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: emr-pulse-dot 1.8s ease-in-out infinite;
}

.emr-s9-tl-item:nth-child(1) .emr-s9-tl-chip-dot {
    background: var(--emr-violet-2);
}

.emr-s9-tl-item:nth-child(2) .emr-s9-tl-chip-dot {
    background: var(--emr-azure-2);
}

.emr-s9-tl-item:nth-child(3) .emr-s9-tl-chip-dot {
    background: var(--emr-amber);
}

.emr-s9-tl-item:nth-child(4) .emr-s9-tl-chip-dot {
    background: var(--emr-emerald-2);
}


/* ════════════════════════════════════════════════════════════
   BOTTOM FACTS
════════════════════════════════════════════════════════════ */
.emr-s9-facts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(12px,1.8vw,20px);
    width: 100%;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s9-facts.is-vis {
        opacity: 1;
        transform: translateY(0);
    }

.emr-s9-fact {
    background: var(--emr-obs-3);
    border: 1px solid var(--emr-bdr);
    border-radius: var(--emr-r-lg);
    padding: clamp(16px,2.2vw,26px);
    position: relative;
    overflow: hidden;
}

    .emr-s9-fact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 3px;
    }

    .emr-s9-fact:nth-child(1)::before {
        background: var(--emr-violet);
        box-shadow: 2px 0 10px var(--emr-violet-glow);
    }

    .emr-s9-fact:nth-child(2)::before {
        background: var(--emr-azure);
        box-shadow: 2px 0 10px var(--emr-azure-glow);
    }

    .emr-s9-fact:nth-child(3)::before {
        background: var(--emr-amber);
        box-shadow: 2px 0 10px rgba(245,158,11,.4);
    }

    .emr-s9-fact:nth-child(4)::before {
        background: var(--emr-emerald);
        box-shadow: 2px 0 10px var(--emr-emerald-glow);
    }

.emr-s9-fact-n {
    font-family: var(--emr-font);
    font-size: clamp(26px,3.5vw,44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
    color: var(--emr-t-1);
    margin-bottom: 6px;
}

.emr-s9-fact-l {
    font-size: clamp(11.5px,1.1vw,13px);
    font-weight: 700;
    color: var(--emr-t-2);
    letter-spacing: -0.012em;
    line-height: 1.30;
    margin-bottom: 4px;
}

.emr-s9-fact-sub {
    font-size: clamp(10px,.96vw,11.5px);
    color: var(--emr-t-4);
    line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ① 1080px */
@media (max-width: 1080px) {
    .emr-s9-card {
        width: clamp(140px,16vw,190px);
        padding: 13px 14px;
    }

    .emr-s9-card-title {
        font-size: clamp(11.5px,1.3vw,14px);
    }

    .emr-s9-card-sub {
        font-size: clamp(9.5px,.92vw,11px);
    }

    .emr-s9-mini {
        font-size: clamp(8px,.76vw,9px);
    }
}

/* ② 860px — swap to timeline stack */
@media (max-width: 860px) {

    /* Kill the circuit completely — zero height, no overflow */
    .emr-s9-circuit {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .emr-s9-stack {
        display: block;
    }

    .emr-s9-facts {
        grid-template-columns: repeat(2,1fr);
    }
}

/* ③ Mobile */
@media (max-width: 640px) {

    .emr-s9 {
        padding: clamp(60px,9vh,80px) 0 clamp(60px,9vh,80px);
    }

    .emr-s9-inner {
        padding: 0 18px;
    }

    .emr-s9-h2 {
        font-size: clamp(26px,7.5vw,36px);
        letter-spacing: -0.040em;
    }

    .emr-s9-lead {
        font-size: 15px;
        line-height: 1.72;
    }

    .emr-s9-stack {
        max-width: 100%;
    }

        .emr-s9-stack::before {
            left: 19px;
        }

    .emr-s9-tl-dot {
        width: 38px;
        height: 38px;
    }

    .emr-s9-facts {
        grid-template-columns: repeat(2,1fr);
        gap: 9px;
    }

    .emr-s9-fact {
        padding: 14px 12px;
        border-radius: var(--emr-r-lg);
    }

    .emr-s9-fact-n {
        font-size: clamp(22px,6.5vw,32px);
    }

    .emr-s9-fact-l {
        font-size: 11.5px;
    }

    .emr-s9-fact-sub {
        font-size: 10px;
    }
}

/* ④ Small phone */
@media (max-width: 400px) {

    .emr-s9-inner {
        padding: 0 14px;
    }

    .emr-s9-h2 {
        font-size: clamp(24px,7vw,30px);
    }

    .emr-s9-lead {
        font-size: 14.5px;
    }

    .emr-s9-facts {
        grid-template-columns: 1fr;
    }

    .emr-s9-fact-n {
        font-size: clamp(28px,8vw,36px);
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .emr-s9-head,
    .emr-s9-facts {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .emr-s9-path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .emr-s9-arrow {
        opacity: 1 !important;
    }

    .emr-s9-card-wrap {
        opacity: 1 !important;
        transform: translate(-50%,-50%) scale(1) !important;
        transition: none !important;
    }

    .emr-s9-node-ring {
        opacity: 1 !important;
    }

    .emr-s9-centre {
        opacity: 1 !important;
    }

    /* Timeline items always visible */
    .emr-s9-stack.s9-animate .emr-s9-tl-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}























































/* ================================================================
   EMR.aspx — Section 10 — The CTA
   "The EMR is included. It starts when the patient does."
   Dark obsidian. Full viewport. The finale.
   Tokens from emr.css :root — no re-declaration.
   ================================================================

   CONCEPT: "THE IGNITION"

   The section begins pitch black — a solid dark overlay covers
   everything. When IO fires at 0.20 threshold:

   Phase 0 (0ms):
   ▸ Canvas fires 80 spark particles from the CTA button's
     approximate screen position. Each particle travels outward
     at a random angle, fades over 600–900ms, leaves a short
     light trail. Particles are azure/violet/white tones.

   Phase 0 (0ms, simultaneous):
   ▸ The black overlay's clip-path expands:
       circle(0% at 50% 62%) → circle(200% at 50% 62%)
     in 900ms with cubic-bezier(.12,.8,.32,1) — fast-out
     so it reads as explosive, not gradual.
   ▸ The overlay also transitions opacity 1 → 0 behind the
     clip-path so the burned edge has a white-hot glow.

   Phase 1 (300ms): Gorilla watermark fades in.
   Phase 2 (400ms): Eyebrow badge rises.
   Phase 3 (550ms): H1 line 1 wipes up (clip-path).
   Phase 4 (720ms): H1 line 2 wipes up.
   Phase 5 (890ms): H1 gradient line wipes from left.
   Phase 6 (1100ms): Sub paragraph de-blurs.
   Phase 7 (1500ms): Proof chips pop in staggered.
   Phase 8 (1800ms): CTAs rise.
   Phase 9 (2200ms): Tech strip scrolls in.
   Phase 10 (2600ms): Footer fades in.
   ================================================================ */


/* ── Shell ── */
.emr-s10 {
    position: relative;
    background: var(--emr-obs-1);
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(80px,12vh,140px) clamp(20px,4.5vw,64px) clamp(60px,8vh,100px);
    border-top: 1px solid var(--emr-bdr);
}

/* ── The ignition overlay — starts solid, burns away ── */
.emr-s10-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.04) 0%, var(--emr-obs-1) 55%);
    clip-path: circle(0% at 50% 62%);
    pointer-events: none;
    will-change: clip-path;
    /* The burn — fires via .ignite class */
    transition: none;
}

    .emr-s10-overlay.ignite {
        animation: emr-s10-burn 900ms cubic-bezier(.12,.8,.32,1) forwards;
    }

@keyframes emr-s10-burn {
    0% {
        clip-path: circle(0% at 50% 62%);
        background: radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.75) 0%, rgba(139,92,246,.25) 25%, rgba(59,130,246,.12) 50%, var(--emr-obs-1) 75%);
    }

    40% {
        background: radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.15) 0%, rgba(139,92,246,.06) 30%, transparent 65%);
        clip-path: circle(65% at 50% 62%);
    }

    100% {
        clip-path: circle(200% at 50% 62%);
        background: transparent;
    }
}

/* ── Spark canvas ── */
.emr-s10-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 21;
}

/* ── Ambient orbs ── */
.emr-s10-orb-tl {
    position: absolute;
    top: -8%;
    left: -5%;
    width: clamp(360px,50vw,700px);
    height: clamp(360px,50vw,700px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.emr-s10-orb-br {
    position: absolute;
    bottom: -8%;
    right: -4%;
    width: clamp(280px,38vw,520px);
    height: clamp(280px,38vw,520px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.06) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
}

/* ── Gorilla watermark (centred, massive) ── */
.emr-s10-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px,52vw,680px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    filter: blur(1.5px);
    mix-blend-mode: screen;
    transition: opacity 2.2s ease .3s;
}

    .emr-s10-watermark.show {
        opacity: .028;
    }

/* Fine grid */
.emr-s10-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(99,102,241,.025) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 15%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 15%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ── Inner — stacks vertically, centred ── */
.emr-s10-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    width: 100%;
    max-width: 900px;
}


/* ════════════════════════════════════════════════════════════
   EYEBROW
════════════════════════════════════════════════════════════ */
.emr-s10-eyebrow-wrap {
    margin-bottom: clamp(22px,3vw,34px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s var(--emr-ease);
}

    .emr-s10-eyebrow-wrap.show {
        opacity: 1;
        transform: translateY(0);
    }


/* ════════════════════════════════════════════════════════════
   H1 — THE VERDICT
   Three lines. Each wipes from below (clip-path).
   Line 3 also has gradient + flows left.
════════════════════════════════════════════════════════════ */
.emr-s10-h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px,.5vw,8px);
    margin-bottom: clamp(24px,3.2vw,40px);
}

.emr-s10-line {
    display: block;
    font-family: var(--emr-font);
    font-size: clamp(36px,6.2vw,88px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.058em;
    color: var(--emr-t-1);
    clip-path: inset(0 0 110% 0);
    transition: clip-path .7s var(--emr-ease);
    white-space: nowrap;
}

    .emr-s10-line.show {
        clip-path: inset(0 0 0% 0);
    }

/* Line 3 — gradient, wipes from left */
.emr-s10-line--grad {
    background: var(--emr-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 240% auto;
    clip-path: inset(0 110% 0 0);
    transition: clip-path .75s var(--emr-ease), background-position 6s linear;
    animation: emr-s10-gradflow 5s linear infinite paused;
}

    .emr-s10-line--grad.show {
        clip-path: inset(0 0% 0 0);
        animation-play-state: running;
    }

@keyframes emr-s10-gradflow {
    to {
        background-position: 240% center;
    }
}


/* ════════════════════════════════════════════════════════════
   SUB
════════════════════════════════════════════════════════════ */
.emr-s10-sub {
    font-size: clamp(15px,1.6vw,19px);
    color: var(--emr-t-2);
    line-height: 1.75;
    max-width: 620px;
    margin-bottom: clamp(28px,3.8vw,44px);
    opacity: 0;
    filter: blur(7px);
    transition: opacity .7s ease, filter .7s ease;
}

    .emr-s10-sub.show {
        opacity: 1;
        filter: blur(0);
    }


/* ════════════════════════════════════════════════════════════
   PROOF CHIPS
════════════════════════════════════════════════════════════ */
.emr-s10-chips {
    display: flex;
    align-items: center;
    gap: clamp(8px,1.2vw,14px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(28px,3.8vw,44px);
}

.emr-s10-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--emr-mono);
    font-size: clamp(9.5px,.92vw,11.5px);
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: var(--emr-r-pill);
    padding: 6px 15px;
    /* pop in */
    opacity: 0;
    transform: scale(.85) translateY(6px);
    transition: opacity .45s ease var(--emr-cd,0ms), transform .5s var(--emr-spring) var(--emr-cd,0ms);
}

    .emr-s10-chip.show {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

.emr-s10-chip--green {
    color: var(--emr-emerald-2);
    background: var(--emr-emerald-sub);
    border: 1px solid var(--emr-emerald-bdr);
}

.emr-s10-chip--azure {
    color: var(--emr-azure-2);
    background: var(--emr-azure-sub);
    border: 1px solid var(--emr-azure-bdr);
}

.emr-s10-chip--violet {
    color: var(--emr-violet-2);
    background: var(--emr-violet-sub);
    border: 1px solid var(--emr-violet-bdr);
}

.emr-s10-chip-ico {
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   CTAS — the two buttons
════════════════════════════════════════════════════════════ */
.emr-s10-ctas {
    display: flex;
    align-items: center;
    gap: clamp(10px,1.4vw,16px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(40px,5.5vw,64px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s var(--emr-ease);
}

    .emr-s10-ctas.show {
        opacity: 1;
        transform: translateY(0);
    }

/* Override primary button for bigger CTA feel */
.emr-s10 .emr-btn-primary {
    padding: clamp(15px,1.8vw,20px) clamp(32px,4vw,54px);
    font-size: clamp(14.5px,1.4vw,17px);
    box-shadow: 0 0 0 1px rgba(59,130,246,.35), 0 12px 40px rgba(37,99,235,.50), 0 0 80px rgba(59,130,246,.16);
}

    .emr-s10 .emr-btn-primary:hover {
        box-shadow: 0 0 0 1px rgba(59,130,246,.55), 0 18px 56px rgba(37,99,235,.65), 0 0 110px rgba(59,130,246,.28);
        transform: translateY(-3px);
    }

.emr-s10 .emr-btn-ghost {
    padding: clamp(14px,1.7vw,19px) clamp(28px,3.5vw,46px);
    font-size: clamp(14.5px,1.4vw,17px);
}

/* Arrow icon rotation hint on CTA hover */
.emr-s10-cta-arrow {
    transition: transform .22s var(--emr-ease);
    flex-shrink: 0;
}

.emr-btn-primary:hover .emr-s10-cta-arrow {
    transform: translateX(4px);
}


/* ════════════════════════════════════════════════════════════
   TECH STACK STRIP
════════════════════════════════════════════════════════════ */
.emr-s10-tech {
    display: flex;
    align-items: center;
    gap: clamp(14px,2.2vw,28px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(44px,6vw,68px);
    opacity: 0;
    transition: opacity .65s ease;
}

    .emr-s10-tech.show {
        opacity: 1;
    }

.emr-s10-tech-label {
    font-family: var(--emr-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emr-t-4);
    white-space: nowrap;
}

.emr-s10-tech-sep {
    width: 1px;
    height: 14px;
    background: var(--emr-bdr-2);
    flex-shrink: 0;
}

.emr-s10-tech-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emr-t-3);
    white-space: nowrap;
    transition: color .2s ease;
}

    .emr-s10-tech-item:hover {
        color: var(--emr-t-2);
    }

.emr-s10-tech-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   FOOTER STRIP  — the last thing on the page
════════════════════════════════════════════════════════════ */
.emr-s10-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px,1.8vw,18px);
    opacity: 0;
    transition: opacity .7s ease;
    width: 100%;
}

    .emr-s10-footer.show {
        opacity: 1;
    }

/* The dividing rule */
.emr-s10-rule {
    width: clamp(140px,30vw,320px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--emr-bdr-2) 30%, var(--emr-bdr-2) 70%, transparent 100%);
}

/* Gorilla logo + brand line */
.emr-s10-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emr-s10-brand-logo {
    width: clamp(22px,2.8vw,32px);
    opacity: .40;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.emr-s10-brand-name {
    font-family: var(--emr-font);
    font-size: clamp(14px,1.4vw,17px);
    font-weight: 800;
    color: var(--emr-t-3);
    letter-spacing: -0.020em;
}

.emr-s10-brand-sep {
    color: var(--emr-t-5);
    margin: 0 4px;
}

.emr-s10-brand-gorilla {
    font-family: var(--emr-mono);
    font-size: clamp(10px,.96vw,12px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--emr-t-4);
}

/* Legal line */
.emr-s10-legal {
    font-family: var(--emr-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--emr-t-5);
    line-height: 1.6;
    text-align: center;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ① laptop */
@media (max-width: 1080px) {
    .emr-s10-line {
        font-size: clamp(32px,5.8vw,76px);
    }
}

/* ② tablet */
@media (max-width: 860px) {
    .emr-s10-line {
        font-size: clamp(30px,6vw,60px);
        white-space: normal;
        text-align: center;
    }

    .emr-s10-sub {
        font-size: clamp(14.5px,2vw,17px);
    }

    .emr-s10-tech {
        gap: 10px 18px;
    }
}

/* ③ mobile */
@media (max-width: 640px) {

    .emr-s10 {
        padding: clamp(72px,10vh,100px) 18px clamp(52px,7vh,80px);
        min-height: auto;
    }

    .emr-s10-line {
        font-size: clamp(32px,9vw,52px);
        letter-spacing: -0.046em;
        white-space: normal;
    }

    .emr-s10-sub {
        font-size: 15px;
        max-width: 100%;
    }

    .emr-s10-chips {
        gap: 8px;
    }

    .emr-s10-chip {
        font-size: 10px;
        padding: 5px 12px;
    }

    .emr-s10-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .emr-s10 .emr-btn-primary,
    .emr-s10 .emr-btn-ghost {
        width: 100%;
        justify-content: center;
        max-width: 360px;
    }

    .emr-s10-tech {
        gap: 8px 14px;
    }

    .emr-s10-tech-item {
        font-size: 9.5px;
    }

    .emr-s10-tech-sep {
        display: none;
    }

    .emr-s10-brand-name {
        font-size: 14px;
    }

    .emr-s10-brand-gorilla {
        font-size: 10px;
    }

    .emr-s10-legal {
        font-size: 9px;
    }
}

/* ④ small phone */
@media (max-width: 400px) {

    .emr-s10 {
        padding-left: 14px;
        padding-right: 14px;
    }

    .emr-s10-line {
        font-size: clamp(28px,8.5vw,42px);
    }

    .emr-s10-sub {
        font-size: 14.5px;
    }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    /* Skip the ignition entirely */
    .emr-s10-overlay {
        display: none !important;
    }

    .emr-s10-canvas {
        display: none !important;
    }

    .emr-s10-watermark,
    .emr-s10-eyebrow-wrap,
    .emr-s10-sub,
    .emr-s10-ctas,
    .emr-s10-tech,
    .emr-s10-footer {
        opacity: 1 !important;
        transition: none !important;
        filter: none !important;
    }

    .emr-s10-line {
        clip-path: none !important;
        transition: none !important;
    }

    .emr-s10-line--grad {
        clip-path: none !important;
        animation: none !important;
    }

    .emr-s10-chip {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}