/* ===========================================================================
   MADDS — HMIS · Health Management Information System ("hm-") · page styles
   Solutions / Healthcare. Behaviour: static/js/hmis.js

   Visual language: "the ward" — a hospital's own objects rebuilt as layout.
     hero      = a patient monitor (live ECG + readouts + department tape)
     modules   = file folders with coloured tabs (paper on the dark field)
     platform  = a fan of scan slices with data threads
     trust     = an ID wristband (clasp + printed chips)
     outcomes  = monitor readouts (screen + numeric tiles)
     CTA       = an appointment slip (perforation, tear line, pad column)

   Nothing here reuses another page's UI: the class system is local ("hm-"),
   only the site chrome (layout/base.html + style.css) and the brand theme
   are shared. Theme values are the website's own:
     type    Afacad · white #fff / dim rgba(247,242,253,.72)
     field   linear-gradient(135deg, #0a0b2e, #4a128c 55%, #7b2ff7)
     strip   #B51BB5 · #F0A400 · #AC20BC · #43D2E0
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');

.hm-page {
    /* brand */
    --hm-magenta: #B51BB5;
    --hm-gold: #F0A400;
    --hm-violet: #AC20BC;
    --hm-cyan: #43D2E0;
    --hm-blue: #2A7BFF;
    --hm-purple: #7B2FF7;

    /* fields */
    --hm-navy: #0a0b2e;
    --hm-field: linear-gradient(135deg, #0a0b2e 0%, #4a128c 55%, #7b2ff7 100%);
    --hm-strip: linear-gradient(90deg, #B51BB5 0%, #F0A400 25%, #AC20BC 50%, #43D2E0 75%, #B51BB5 100%);

    /* type + hairlines */
    --hm-tx: #ffffff;
    --hm-tx-dim: rgba(247, 242, 253, .72);
    --hm-hair: rgba(255, 255, 255, .18);
    --hm-ink: #1b0c3f;
    --hm-ink-dim: rgba(27, 12, 63, .68);
    --hm-paper: #f7f2ff;

    --hm-ease: cubic-bezier(.22, 1, .36, 1);
}

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

.hm-page { font-family: "Afacad", sans-serif; color: var(--hm-tx); }
.hm-page p { margin: 0; }
.hm-page h1, .hm-page h2, .hm-page h3 { margin: 0; font-weight: 600; }

.hm-wrap {
    position: relative;
    z-index: 1;
    width: var(--site-width, 88%);
    max-width: 1440px;
    margin-inline: auto;
}

/* ================================================================
   TYPE
   ================================================================ */
.hm-h1 {
    font-size: clamp(2.85rem, 6.2vw, 5.35rem);
    line-height: .96;
    letter-spacing: -.042em;
}

.hm-h2 {
    font-size: clamp(2.15rem, 4.4vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -.032em;
}

.hm-h1 em, .hm-h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--hm-gold);
    text-shadow: 0 0 34px rgba(240, 164, 0, .45);
    white-space: nowrap;
}

.hm-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    line-height: 1.62;
    color: var(--hm-tx-dim);
    max-width: 56ch;
}

.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75em;
    padding: .55em 1.15em;
    border: 1px solid var(--hm-hair);
    border-left: 4px solid var(--hm-magenta);
    border-radius: 8px;
    background: #12093a;
    font-size: .82rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hm-tx-dim);
}

.hm-eyebrow i {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--hm-cyan);
    box-shadow: 0 0 12px var(--hm-cyan);
    animation: hm-pulse 1.9s ease-in-out infinite;
}

.hm-chip {
    display: inline-flex;
    align-items: center;
    gap: .75em;
    padding: .55em 1.25em .55em .75em;
    margin-bottom: 1.35rem;
    border: 1px solid var(--hm-hair);
    border-left: 4px solid var(--hm-gold);
    border-radius: 8px;
    background: #12093a;
    font-size: .82rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hm-tx-dim);
}

.hm-chip b { color: var(--hm-gold); font-weight: 700; letter-spacing: .12em; }

.hm-head { max-width: 1000px; margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.hm-head__note { font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.6; color: var(--hm-tx-dim); max-width: 52ch; }

.hm-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 3.5vw, 3.75rem);
    align-items: end;
}

.hm-head--centre { max-width: 860px; margin-inline: auto; text-align: center; }
.hm-head--centre .hm-head__note { margin: 1.15rem auto 0; }

/* ================================================================
   BUTTONS — rounded slabs with a separated arrow cell
   ================================================================ */
.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.75rem;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .45s var(--hm-ease), box-shadow .45s var(--hm-ease),
                background-color .35s ease, border-color .35s ease, color .35s ease;
}

.hm-btn--fill {
    background: linear-gradient(120deg, #B51BB5 0%, #7B2FF7 100%);
    color: #fff;
    box-shadow: 0 18px 46px -14px rgba(181, 27, 181, .6);
}

.hm-btn--fill span {
    margin-left: .15rem;
    padding-left: .85rem;
    border-left: 1px solid rgba(255, 255, 255, .38);
}

.hm-btn--fill:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px -14px rgba(181, 27, 181, .75);
}

.hm-btn--ghost {
    border: 1px solid var(--hm-hair);
    background: #12093a;
    color: var(--hm-tx);
}

.hm-btn--ghost:hover {
    transform: translateY(-4px);
    border-color: var(--hm-cyan);
    color: var(--hm-cyan);
}

/* ================================================================
   PAPER — monitor graph paper over an opaque band
   ================================================================ */
.hm-paper {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
    -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 30%, transparent 88%);
    mask-image: radial-gradient(130% 95% at 50% 0%, #000 30%, transparent 88%);
}

.hm-paper--dark {
    -webkit-mask-image: radial-gradient(130% 95% at 50% 100%, #000 30%, transparent 88%);
    mask-image: radial-gradient(130% 95% at 50% 100%, #000 30%, transparent 88%);
}

/* ================================================================
   1 · HERO — THE MONITOR
   ================================================================ */
.hm-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--hdr-full, 108px) + clamp(2.75rem, 6vh, 5.25rem)) 0 clamp(3.5rem, 7vw, 5.75rem);
    background: var(--hm-field);
}

.hm-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2.25rem, 5vw, 4.5rem);
    align-items: center;
}

.hm-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.65rem; min-width: 0; }
.hm-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.hm-proof {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 0;
    margin: .5rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--hm-hair);
    width: 100%;
    list-style: none;
    color: var(--hm-tx-dim);
    font-size: 1.02rem;
}

.hm-proof li { padding: 0 1.5rem; position: relative; }
.hm-proof li:first-child { padding-left: 0; }
.hm-proof li + li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    translate: 0 -50%;
    width: 1px; height: 1.15em;
    background: var(--hm-hair);
}

.hm-proof b {
    color: var(--hm-gold);
    font-size: 1.32rem;
    letter-spacing: -.01em;
    margin-right: .35rem;
}

/* ---- the monitor slab ---- */
.hm-monitor {
    background: linear-gradient(180deg, #12093a, #0c0930);
    border: 1px solid var(--hm-hair);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 50px 110px -34px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .6s var(--hm-ease), box-shadow .6s var(--hm-ease);
}

.hm-monitor__bar {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.45rem;
    background: linear-gradient(90deg, #1b1150, #241363);
    border-bottom: 1px solid var(--hm-hair);
    font-size: .92rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hm-monitor__dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--hm-cyan);
    box-shadow: 0 0 14px var(--hm-cyan);
    animation: hm-pulse 1.9s ease-in-out infinite;
}

.hm-monitor__bar b { letter-spacing: .16em; }
.hm-monitor__sync { margin-left: auto; color: var(--hm-tx-dim); letter-spacing: .1em; text-transform: none; }

.hm-monitor__screen {
    padding: 1.35rem 1.45rem 1.65rem;
    background: #070626;
}

.hm-ecg { width: 100%; height: auto; }
.hm-ecg__grid line { stroke: rgba(67, 210, 224, .16); stroke-width: 1; }

.hm-ecg__trace {
    fill: none;
    stroke: var(--hm-cyan);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(67, 210, 224, .6));
    stroke-dasharray: 1600;
    animation: hm-trace 5.5s linear infinite;
}

.hm-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    margin: 1.55rem 0 0;
}

.hm-readout div { display: grid; gap: .35rem; }
.hm-readout dt {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hm-tx-dim);
}

.hm-readout dd { margin: 0; display: flex; align-items: baseline; gap: .55rem; }
.hm-readout b { font-size: clamp(1.85rem, 2.6vw, 2.45rem); letter-spacing: -.02em; line-height: 1; }
.hm-readout span { font-size: .88rem; color: var(--hm-tx-dim); }

.hm-monitor__tape {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.45rem;
    border-top: 3px solid transparent;
    border-image: var(--hm-strip) 1;
    background: #12093a;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hm-tx-dim);
}

.hm-monitor__tape i { width: 4px; height: 4px; border-radius: 50%; background: var(--hm-violet); }

.hm-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    overflow: hidden;
    background: var(--hm-strip);
    background-size: 200% 100%;
    animation: hm-strip 16s linear infinite;
}

.hm-strip span {
    position: absolute;
    top: 0; bottom: 0;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: hm-shine 5.5s ease-in-out infinite;
}

/* ================================================================
   2 · THE CHART STACK — modules as file folders
   ================================================================ */
.hm-stack {
    position: relative;
    padding: clamp(4.5rem, 10vw, 8.5rem) 0;
    background: #0c0930;
}

.hm-folders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.35rem, 2.4vw, 2.15rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hm-folder {
    position: relative;
    margin-top: 1.75rem;
    padding: 2.5rem 1.85rem 1.95rem;
    background: var(--hm-paper);
    color: var(--hm-ink);
    border-radius: 0 18px 18px 18px;
    box-shadow: 0 32px 64px -30px rgba(0, 0, 0, .6);
    transition: transform .5s var(--hm-ease), box-shadow .5s var(--hm-ease);
}

.hm-folder:hover {
    transform: translateY(-8px);
    box-shadow: 0 46px 84px -30px rgba(0, 0, 0, .7);
}

.hm-folder__tab {
    position: absolute;
    top: -1.75rem;
    left: 0;
    padding: .62rem 1.35rem;
    background: var(--tab, #B51BB5);
    color: #fff;
    border-radius: 12px 12px 0 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: padding-right .45s var(--hm-ease);
}

.hm-folder:hover .hm-folder__tab { padding-right: 2.25rem; }

.hm-folder h3 { font-size: 1.52rem; letter-spacing: -.015em; margin-bottom: .55rem; }
.hm-folder > p { color: var(--hm-ink-dim); line-height: 1.58; font-size: 1.02rem; }

.hm-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hm-flags li {
    padding: .38em .95em;
    border: 1px solid rgba(27, 12, 63, .22);
    border-radius: 100px;
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--hm-ink);
    background: #fff;
}

/* ================================================================
   3 · SCAN SLICES — the platform
   ================================================================ */
.hm-slices {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(5.5rem, 11vw, 9.5rem);
    background: linear-gradient(160deg, #1a0b46 0%, #3c1480 58%, #2a0f66 100%);
}

.hm-slice-set {
    position: relative;
    display: grid;
    gap: 1.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* data threads running behind the fan */
.hm-slice-set::before,
.hm-slice-set::after {
    content: "";
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    width: 2px;
    background: repeating-linear-gradient(180deg,
        rgba(255, 255, 255, .38) 0 10px, transparent 10px 22px);
}

.hm-slice-set::before { left: 4.25rem; }
.hm-slice-set::after { right: 4.25rem; }

.hm-slice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1.15rem, 2.4vw, 2.15rem);
    align-items: center;
    padding: 1.75rem 1.95rem;
    background: linear-gradient(120deg, #241363 0%, #170c46 100%);
    border: 1px solid var(--hm-hair);
    border-radius: 18px;
    box-shadow: 0 34px 70px -32px rgba(0, 0, 0, .6);
    transform: translate(var(--x, 0), 0) rotate(var(--r, 0deg));
}

.hm-slice:nth-child(1) { --x: 0rem;    --r: -1.1deg; z-index: 4; }
.hm-slice:nth-child(2) { --x: 2.35rem; --r: .75deg;  z-index: 3; }
.hm-slice:nth-child(3) { --x: -1.15rem; --r: -.6deg; z-index: 2; }
.hm-slice:nth-child(4) { --x: 1.75rem; --r: 1deg;   z-index: 1; }

.hm-slice__no {
    display: grid;
    place-items: center;
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 14px;
    background: var(--hm-strip);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.hm-slice h3 { font-size: clamp(1.35rem, 2vw, 1.72rem); margin-bottom: .35rem; }
.hm-slice p { color: var(--hm-tx-dim); line-height: 1.58; max-width: 62ch; }

.hm-slice__meta {
    padding: .55em 1.1em;
    border: 1px solid var(--hm-hair);
    border-radius: 100px;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hm-cyan);
    white-space: nowrap;
}

/* ================================================================
   4 · THE WRISTBAND — trust
   ================================================================ */
.hm-band {
    position: relative;
    padding: clamp(4.5rem, 10vw, 8.5rem) 0;
    background: linear-gradient(180deg, #0a0b2e 0%, #14103c 100%);
}

.hm-wrist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--hm-hair);
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b1150, #241363);
    box-shadow: 0 34px 80px -32px rgba(0, 0, 0, .6);
}

.hm-wrist__clasp {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.35rem 1.85rem;
    background: var(--hm-strip);
    background-size: 200% 100%;
    animation: hm-strip 18s linear infinite;
}

.hm-wrist__clasp i {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.hm-wrist__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 1.25rem 1.85rem;
    list-style: none;
}

.hm-wrist__chips li {
    padding: .58em 1.25em;
    border: 1px solid var(--hm-hair);
    border-radius: 100px;
    background: #12093a;
    font-size: .95rem;
    letter-spacing: .05em;
    transition: transform .4s var(--hm-ease), border-color .4s ease, color .4s ease;
}

.hm-wrist__chips li:hover {
    transform: translateY(-4px);
    border-color: var(--hm-cyan);
    color: var(--hm-cyan);
}

.hm-vows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: clamp(2.75rem, 5vw, 4.25rem) 0 0;
    padding: 0;
    list-style: none;
}

.hm-vows li {
    padding: .35rem clamp(1.35rem, 2.6vw, 2.35rem);
    border-left: 1px solid var(--hm-hair);
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--hm-tx-dim);
}

.hm-vows li:first-child { padding-left: 0; border-left: 0; }
.hm-vows b { display: block; color: var(--hm-tx); font-size: 1.18rem; margin-bottom: .45rem; }

/* ================================================================
   5 · READOUTS — outcomes
   ================================================================ */
.hm-outcomes {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 10vw, 8.5rem) 0;
    background: linear-gradient(135deg, #2b0b4f 0%, #4a128c 55%, #7b2ff7 100%);
}

.hm-readouts {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(1.35rem, 2.6vw, 2.35rem);
    align-items: stretch;
}

.hm-readouts__hero {
    display: flex;
    flex-direction: column;
    padding: 2.25rem 2.25rem 1.85rem;
    background: #070626;
    border: 1px solid var(--hm-hair);
    border-radius: 22px;
    box-shadow: 0 44px 90px -36px rgba(0, 0, 0, .62);
}

.hm-readouts__label {
    font-size: .82rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hm-tx-dim);
}

.hm-readouts__big {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 1.15rem 0 0;
    font-size: clamp(4.25rem, 9.5vw, 7.25rem);
    line-height: .88;
    letter-spacing: -.045em;
}

.hm-readouts__big b { font-weight: 600; }
.hm-readouts__big span {
    font-size: clamp(1.05rem, 1.6vw, 1.32rem);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hm-gold);
}

.hm-spark { width: 100%; height: auto; margin: 1.65rem 0 1.35rem; }
.hm-spark__area { fill: rgba(181, 27, 181, .3); stroke: none; }

.hm-spark__line {
    fill: none;
    stroke: var(--hm-magenta);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(181, 27, 181, .6));
    stroke-dasharray: 640;
    animation: hm-trace 6s linear infinite;
}

.hm-readouts__note { margin-top: auto; color: var(--hm-tx-dim); line-height: 1.58; }

.hm-readouts__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-readouts__grid li {
    display: grid;
    align-content: center;
    gap: .4rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(150deg, #22114f 0%, #160c40 100%);
    border: 1px solid var(--hm-hair);
    border-radius: 16px;
    transition: transform .45s var(--hm-ease), border-color .45s ease;
}

.hm-readouts__grid li:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .38); }
.hm-readouts__grid b { font-size: clamp(1.95rem, 3.4vw, 2.65rem); letter-spacing: -.022em; line-height: 1; }
.hm-readouts__grid span { color: var(--hm-tx-dim); font-size: .95rem; line-height: 1.45; }

/* ================================================================
   6 · THE APPOINTMENT SLIP — CTA
   ================================================================ */
.hm-cta {
    position: relative;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(5rem, 10vw, 8rem);
    background: #0c0930;
}

.hm-slip {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
    background: var(--hm-paper);
    color: var(--hm-ink);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 60px 120px -46px rgba(0, 0, 0, .75);
}

.hm-slip__perf {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background-image: radial-gradient(circle at 6px 6px, #0c0930 3.4px, transparent 3.6px);
    background-size: 22px 12px;
}

.hm-slip__pad {
    display: grid;
    align-content: start;
    gap: 1.05rem;
    padding: 3.15rem 2.15rem 2.25rem;
    background: linear-gradient(160deg, #efe4ff, #e3d2fb);
    border-right: 2px dashed rgba(27, 12, 63, .28);
}

.hm-slip__mark {
    display: grid;
    place-items: center;
    width: 3.45rem;
    height: 3.45rem;
    border-radius: 15px;
    background: var(--hm-strip);
    background-size: 200% 100%;
    animation: hm-strip 18s linear infinite;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    box-shadow: 0 12px 28px -10px rgba(74, 18, 140, .5);
}

.hm-slip__pad p {
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hm-ink-dim);
}

.hm-slip__pad ul { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }

.hm-slip__pad li {
    padding: .55rem .95rem;
    border: 1px solid rgba(27, 12, 63, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .58);
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hm-ink);
}

.hm-slip__body { padding: clamp(2.75rem, 4.5vw, 3.75rem) clamp(2.15rem, 4vw, 3.35rem); }
.hm-slip__body .hm-chip { background: #fff; border-color: rgba(27, 12, 63, .18); color: var(--hm-ink-dim); }
.hm-slip__body .hm-lead { color: var(--hm-ink-dim); margin-top: 1.15rem; }

.hm-slip__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.15rem; }

.hm-slip__cta .hm-btn--ghost {
    background: transparent;
    border-color: rgba(27, 12, 63, .28);
    color: var(--hm-ink);
}

.hm-slip__cta .hm-btn--ghost:hover { border-color: var(--hm-magenta); color: var(--hm-magenta); }

.hm-slip__fine {
    margin-top: 1.65rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(27, 12, 63, .16);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--hm-ink-dim);
}

/* ================================================================
   REVEAL + ANIMATION
   ================================================================ */
[data-hm-rise] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s var(--hm-ease), transform .85s var(--hm-ease);
    transition-delay: var(--d, 0ms);
}

[data-hm-rise].is-in { opacity: 1; transform: none; }

.hm-slice[data-hm-rise] {
    transform: translate(var(--x, 0), 0) rotate(var(--r, 0deg));
    transition: opacity .95s var(--hm-ease), transform .95s var(--hm-ease);
}

.hm-slice[data-hm-rise].is-in { transform: translate(var(--x, 0), 0) rotate(var(--r, 0deg)); }

@keyframes hm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.55); opacity: .55; }
}

@keyframes hm-trace {
    0% { stroke-dashoffset: 1600; }
    100% { stroke-dashoffset: -1600; }
}

@keyframes hm-strip {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

@keyframes hm-shine {
    0% { left: -30%; }
    55%, 100% { left: 105%; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
    .hm-hero__in { grid-template-columns: 1fr; }
    .hm-monitor { max-width: 46rem; }
    .hm-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-readouts { grid-template-columns: 1fr; }
    .hm-head--split { grid-template-columns: 1fr; align-items: start; }
    .hm-slice { grid-template-columns: auto minmax(0, 1fr); }
    .hm-slice__meta { grid-column: 2; justify-self: start; }
}

@media (max-width: 860px) {
    .hm-folders { grid-template-columns: 1fr; }
    .hm-slice, .hm-slice:nth-child(n) { --x: 0rem; --r: 0deg; }
    .hm-slice-set::before, .hm-slice-set::after { display: none; }
    .hm-wrist { grid-template-columns: 1fr; border-radius: 28px; }
    .hm-wrist__clasp { justify-content: center; }
    .hm-vows { grid-template-columns: 1fr; gap: 1.75rem; }
    .hm-vows li { padding: 0 0 0 1.35rem; border-left: 3px solid var(--hm-hair); }
    .hm-vows li:first-child { padding-left: 1.35rem; border-left: 3px solid var(--hm-hair); }
    .hm-slip { grid-template-columns: 1fr; }
    .hm-slip__pad { border-right: 0; border-bottom: 2px dashed rgba(27, 12, 63, .28); }
}

@media (max-width: 560px) {
    .hm-hero__cta .hm-btn, .hm-slip__cta .hm-btn { width: 100%; justify-content: center; }
    .hm-proof { flex-direction: column; gap: .65rem; }
    .hm-proof li { padding: 0; }
    .hm-proof li + li::before { display: none; }
    .hm-readout { grid-template-columns: 1fr; }
    .hm-readouts__grid { grid-template-columns: 1fr; }
    .hm-monitor__tape { flex-wrap: wrap; }
    .hm-ecg__trace { stroke-width: 2.4; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-page *, .hm-page *::before, .hm-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .18s !important;
    }
    [data-hm-rise] { opacity: 1; transform: none; }
    .hm-slice[data-hm-rise] { transform: translate(var(--x, 0), 0) rotate(var(--r, 0deg)); }
}


/* =====================================================================
   HMIS · flat-colour refinement
   Removes multicolour gradients from the platform, trust and walkthrough
   sections shown in the latest design review. One solid violet accent is
   used consistently; dark/light surfaces remain flat for clarity.
   ===================================================================== */
.hm-slices {
    background: #24105a;
}

.hm-slice {
    background: #1b1150;
}

.hm-slice__no {
    background: #7b2ff7;
    color: #fff;
}

.hm-band {
    background: #0a0b2e;
}

.hm-wrist {
    background: #1b1150;
}

.hm-wrist__clasp {
    background: #7b2ff7;
    background-size: auto;
    animation: none;
}

.hm-btn--fill {
    background: #7b2ff7;
    box-shadow: 0 18px 42px -16px rgba(123, 47, 247, .52);
}

.hm-btn--fill:hover {
    background: #6f27e8;
    box-shadow: 0 24px 52px -16px rgba(123, 47, 247, .58);
}

.hm-slip__pad {
    background: #eee7fb;
}

.hm-slip__mark {
    background: #7b2ff7;
    background-size: auto;
    animation: none;
    box-shadow: 0 12px 26px -12px rgba(123, 47, 247, .42);
}