/*
 * AIM — Agir pour un Idéal Médical
 * Brand layer for the public pages. Loaded after home.css: it re-points the
 * shared tokens to the AIM palette and holds the homepage, header and footer.
 * Light and warm: white paper, a coral blush and a lagoon wash taken from the logo.
 */

:root {
    --navy: #0b2a5b;
    --cobalt: #0b4fb3;
    --cobalt-hover: #093f91;
    --lagoon: #12b5aa;
    --lagoon-deep: #0b7f77;
    --coral: #f2594b;
    --coral-deep: #c63a2d;
    --blush: #fff3ed;
    --sea: #e8f6f4;
    --mist: #f2f6fb;
    --mist-strong: #e4ecf6;
    --hairline: #e3e9f1;
    --paper: #fffdfb;

    /* Shared tokens used by the directory, pharmacy and assistant pages */
    --ink: #13233f;
    --ink-soft: #4a5870;
    --ink-mute: #6b778c;
    --forest: var(--navy);
    --forest-deep: #071d42;
    --green: var(--cobalt);
    --green-hover: var(--cobalt-hover);
    --green-bright: #1d63cc;
    --leaf: var(--lagoon);
    --mint: var(--mist);
    --mint-strong: var(--mist-strong);
    --line: var(--hairline);

    --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

    --shadow-soft: 0 1px 2px rgba(11, 42, 91, .05), 0 12px 32px -16px rgba(11, 42, 91, .18);
    --shadow-float: 0 1px 2px rgba(11, 42, 91, .06), 0 24px 48px -20px rgba(11, 42, 91, .28);
    --shadow-device: var(--shadow-float);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body { background: #fff; color: var(--ink); }

h1, h2, h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.012em;
}

/* Newsreader: large titles at a medium weight read warmer and calmer than bold */
.aim-hero-title,
.aim-head h2,
.page-head h1 { font-weight: 800 !important; letter-spacing: -0.035em; }

:focus-visible { outline-color: var(--cobalt); }
::selection { background: rgba(18, 181, 170, .25); }

.text-link { color: var(--cobalt); text-decoration-color: rgba(11, 79, 179, .3); }
.btn { font-family: var(--font); }
.btn-primary { background: var(--cobalt); }
.btn-primary:hover { background: var(--cobalt-hover); }
.btn-raised { background: var(--cobalt); box-shadow: 0 14px 28px -14px rgba(11, 79, 179, .6); }
.btn-raised:hover { background: var(--cobalt-hover); }
.btn-leaf { background: var(--lagoon); color: #fff; }
.btn-leaf:hover { background: var(--lagoon-deep); }

.clinic-card { border-radius: 22px; }
.clinic-card-type { color: var(--lagoon-deep); }
.clinic-card:hover { border-color: var(--cobalt); box-shadow: var(--shadow-soft); }

/* ---------- Emergency bar: visible, never alarming ---------- */

.sos-bar { background: var(--blush); color: var(--ink-soft); border-bottom: 1px solid #fbe0d7; }
.sos-title svg { color: var(--coral-deep); }
.sos-title strong { color: var(--coral-deep); }
.sos-free, .sos-alt { color: var(--ink-mute); }
.sos-numbers a { background: #fff; border-color: #f6cbbf; color: var(--ink); }
.sos-numbers a:hover { background: #fff; border-color: var(--coral); }
.sos-numbers a strong { color: var(--coral-deep); }
.sos-bar :focus-visible { outline-color: var(--coral-deep); }

/* ---------- Header ---------- */

.site-header { background: rgba(255, 255, 255, .9); border-bottom-color: var(--hairline); }
.header-row { min-height: 72px; }
.brand { gap: .6rem; }
.brand .brand-mark { width: 44px; height: 44px; object-fit: contain; }
.brand .brand-wordmark { width: auto; height: 22px; }
.nav-links a:hover { color: var(--cobalt); background: var(--mist); }
.nav-links a[aria-current="page"] { color: var(--navy); background: var(--mist-strong); }
.btn-quiet { color: var(--navy); }
.btn-quiet:hover { background: var(--mist); }

/* Clinics and pharmacies: a panel of facility types under the nav item */
.nav-group { position: relative; }
.nav-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    padding: .55rem .8rem .55rem .9rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--ink-soft);
    font: 600 1rem var(--font);
    cursor: pointer;
}
.nav-group-toggle svg { transition: transform .25s var(--ease-out); }
.nav-group-toggle:hover { color: var(--cobalt); background: var(--mist); }
.nav-group-toggle[data-current] { color: var(--navy); background: var(--mist-strong); }
.nav-group-toggle[aria-expanded="true"] { color: var(--navy); background: var(--mist-strong); }
.nav-group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-panel {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    z-index: 40;
    width: 23.5rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: var(--shadow-float);
    transform: translateX(-50%);
    animation: nav-panel-in .22s var(--ease-out);
}
.nav-panel[hidden] { display: none; }
.nav-panel ul { margin: 0; padding: 0; list-style: none; }
.nav-links .nav-panel li a {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: .8rem;
    align-items: center;
    padding: .6rem .7rem;
    border-radius: 14px;
    color: var(--ink);
    font-weight: 400;
}
.nav-links .nav-panel li a:hover,
.nav-links .nav-panel li a[aria-current="page"] { background: var(--mist); color: var(--ink); }
.nav-panel-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--sea);
    color: var(--lagoon-deep);
}
.nav-panel-icon--pharmacies { background: var(--blush); color: var(--coral-deep); }
.nav-panel-icon--medical_supply { background: var(--mist-strong); color: var(--cobalt); }
.nav-panel-name { font-weight: 700; color: var(--navy); line-height: 1.25; }
.nav-panel-text { font-size: .875rem; color: var(--ink-mute); line-height: 1.35; }
.nav-links .nav-panel-all {
    display: block;
    margin-top: .35rem;
    padding: .75rem .7rem .6rem;
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 14px 14px;
    color: var(--cobalt);
    font-weight: 700;
    font-size: .95rem;
}
.nav-links .nav-panel-all:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

html:not(.js) .nav-group:hover .nav-panel,
html:not(.js) .nav-group:focus-within .nav-panel { display: block; }

@keyframes nav-panel-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } }

@media (max-width: 1024px) {
    .nav-group-toggle { width: 100%; justify-content: space-between; padding: .8rem .5rem; font-size: 1.1rem; border-radius: 12px; }
    .nav-panel {
        position: static;
        width: auto;
        margin: .1rem 0 .5rem;
        padding: .25rem;
        border: 0;
        box-shadow: none;
        background: var(--mist);
        border-radius: 16px;
        transform: none;
        animation: none;
    }
    .nav-links .nav-panel li a { padding: .65rem .6rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-panel { animation: none; }
    .nav-group-toggle svg { transition: none; }
}
.lang-link:hover, .menu-toggle { color: var(--navy); }

/* ==========================================================================
   Homepage
   ========================================================================== */

.page-home main { overflow-x: clip; }

/* ---------- Hero ---------- */

/* A bright clinic, softly out of focus, washed towards white behind the copy */
.aim-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 34%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, .25) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%),
        url("../images/brand/hero-clinic.webp") 70% 40% / cover no-repeat,
        #eef6f6;
}
.aim-hero > * { position: relative; }
.aim-hero .aim-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 3vw, 3rem); }
.aim-hero-copy { position: relative; z-index: 4; }
@media (max-width: 960px) {
    .aim-hero .aim-hero-inner { grid-template-columns: 1fr; }
}
.aim-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.aim-hero-motto {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.4rem;
    color: var(--navy);
    font-weight: 700;
}
.aim-hero-motto img { width: 28px; height: 28px; object-fit: contain; }

.aim-hero-title {
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    font-weight: 700;
    line-height: 1.04;
    color: var(--navy);
}
.aim-hero-title .line { display: block; }
.aim-hero-title .line + .line { color: var(--lagoon-deep); }
.aim-hero .aim-hero-title { font-size: clamp(2.4rem, 4.2vw, 3.7rem); letter-spacing: -0.03em !important; line-height: 1.06; }

.aim-hero-lead {
    margin-top: 1.3rem;
    max-width: 31rem;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

/* Care finder: one question, three doors */

.finder {
    margin-top: 2rem;
    max-width: 36rem;
    padding: .45rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 22px;
    box-shadow: var(--shadow-float);
    color: var(--ink);
}
.finder-kinds { display: flex; gap: .2rem; margin: 0; padding: .25rem .25rem .45rem; border: 0; }
.finder-kinds legend { padding: 0; }
.finder-kind { position: relative; flex: 1; }
.finder-kind input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.finder-kind span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .35rem .6rem;
    border-radius: 14px;
    color: var(--ink-soft);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
.finder-kind span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hairline);
    transition: background-color .25s ease, transform .35s var(--ease-out);
}
.finder-kind input:hover + span { color: var(--navy); background: var(--mist); }
.finder-kind input:checked + span { color: var(--navy); background: var(--blush); }
.finder-kind input:checked + span::before { background: var(--coral); transform: scale(1.35); }
.finder-kind input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 1px; }

.finder-row { display: flex; gap: .45rem; }
.finder-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding-inline: 1rem;
    background: var(--mist);
    border-radius: 16px;
    color: var(--ink-mute);
}
.finder-field:focus-within { outline: 3px solid var(--cobalt); outline-offset: 1px; }
.finder-field input {
    flex: 1;
    min-width: 0;
    min-height: 54px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 400 1.05rem var(--font);
}
.finder-field input::placeholder { color: #7d889b; }
.finder-field input:focus { outline: none; }
.finder .btn { min-height: 54px; padding-inline: 1.5rem; border-radius: 16px; }

.aim-hero-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-top: 1.1rem;
    color: var(--ink-soft);
}
.aim-hero-alt a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--lagoon);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.aim-hero-alt a:hover { color: var(--cobalt); text-decoration-color: currentColor; }

/* Hero stage: two doctors around the AIM dashboard, the app on a phone, live cards floating */

.hero-stage {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 1.1;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 4rem)) 0 0;
}
.stage-doctor { position: absolute; z-index: 0; height: auto; filter: drop-shadow(0 24px 30px rgba(11, 42, 91, .18)); }
.stage-doctor--left { left: -9%; bottom: 13%; width: 38%; }
.stage-doctor--right { right: -4%; top: 2%; width: 37%; }

.laptop { position: absolute; z-index: 1; left: 15%; right: 9%; bottom: 8%; }
.laptop-screen {
    padding: 1.6% 1.6% 2.4%;
    border-radius: 16px 16px 6px 6px;
    background: linear-gradient(180deg, #2a3446, #121a28);
    box-shadow: 0 50px 80px -46px rgba(11, 42, 91, .7);
}
.laptop-base {
    position: relative;
    height: 12px;
    margin: 0 -6%;
    border-radius: 2px 2px 14px 14px;
    background: linear-gradient(180deg, #eef1f5 0%, #cfd6df 60%, #aab4c2 100%);
    box-shadow: 0 16px 28px -16px rgba(11, 42, 91, .5);
}
.laptop-base::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 15%;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
    background: #b9c2ce;
}

/* The dashboard drawn in HTML so it stays sharp and uses real directory numbers */
.dash {
    display: grid;
    grid-template-columns: 22% 1fr;
    aspect-ratio: 16 / 10.4;
    overflow: hidden;
    border-radius: 6px;
    background: #f6f9fc;
    font-size: clamp(.42rem, .62vw, .58rem);
    line-height: 1.25;
    color: var(--ink);
}
.dash-nav { display: flex; flex-direction: column; gap: .45em; padding: 1em .7em; background: #fff; border-right: 1px solid var(--hairline); }
.dash-nav img { width: 2.2em; height: 2.2em; margin-bottom: .6em; object-fit: contain; }
.dash-nav span { padding: .5em .6em; border-radius: .5em; color: var(--ink-soft); font-weight: 700; }
.dash-nav .is-active { background: var(--cobalt); color: #fff; }
.dash-main { display: flex; flex-direction: column; gap: .7em; padding: .9em 25% .9em .9em; min-width: 0; }
.dash-search { padding: .6em .9em; border: 1px solid var(--hairline); border-radius: 999px; background: #fff; color: var(--ink-mute); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.dash-kpi { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: .6em .7em; border: 1px solid var(--hairline); border-radius: .7em; background: #fff; }
.dash-kpi i { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: .6em; background: var(--mist-strong); color: var(--cobalt); }
.dash-kpi i svg { width: 1.4em; height: 1.4em; }
.dash-kpi--clinics i { background: var(--sea); color: var(--lagoon-deep); }
.dash-kpi--pharmacies i { background: var(--blush); color: var(--coral-deep); }
.dash-kpis small, .dash-card small { display: block; color: var(--ink-mute); font-weight: 700; }
.dash-kpis strong { display: block; margin-top: .15em; color: var(--navy); font-size: 1.9em; font-family: var(--font-display); }
.dash-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: .6em; }
.dash-card { padding: .7em .8em; border: 1px solid var(--hairline); border-radius: .7em; background: #fff; min-width: 0; }
.dash-video { position: relative; margin-top: .5em; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5em; background: #e9eef5; }
.dash-video img, .dash-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-video video { opacity: 0; transition: opacity .6s ease; }
.hero-stage.is-playing .dash-video video { opacity: 1; }
.dash-bar { display: grid; gap: .25em; margin-top: .7em; }
.dash-bar span { overflow: hidden; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.dash-bar i { display: block; height: .5em; border-radius: 999px; background: linear-gradient(90deg, var(--lagoon) var(--w), #e6edf4 var(--w)); }
.dash-list div { display: flex; justify-content: space-between; gap: .6em; padding: .45em 0; border-top: 1px solid #eef2f7; }
.dash-list div:first-of-type { margin-top: .4em; }
.dash-list span { overflow: hidden; font-weight: 700; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.dash-list em { flex: none; font-style: normal; color: var(--lagoon-deep); font-weight: 700; }

.phone {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 3%;
    width: 21%;
    padding: 5px;
    border-radius: 26px;
    background: #121a28;
    box-shadow: 0 30px 50px -24px rgba(11, 42, 91, .6);
}
.phone-screen {
    display: flex;
    flex-direction: column;
    gap: .6em;
    aspect-ratio: 9 / 18.5;
    overflow: hidden;
    padding: 1.6em .8em .8em;
    border-radius: 21px;
    background: #fff;
    font-size: clamp(.42rem, .6vw, .56rem);
}
.phone-brand { display: flex; align-items: center; gap: .35em; color: var(--navy); font-weight: 800; font-size: 1.15em; }
.phone-brand img { width: 1.8em; height: 1.8em; object-fit: contain; }
.phone-hello { margin: 0; color: var(--navy); font-family: var(--font-display); font-size: 1.45em; font-weight: 600; line-height: 1.15; }
.phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em; }
.phone-search { padding: .6em .8em; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-mute); }
.phone-tiles span { display: grid; justify-items: center; gap: .35em; padding: .8em .3em; border-radius: .8em; background: var(--mist); color: var(--navy); font-weight: 700; text-align: center; }
.phone-tiles svg { width: 1.7em; height: 1.7em; color: var(--cobalt); }
.phone-tile--clinics svg { color: var(--lagoon-deep); }
.phone-tile--pharmacies svg { color: #2f8a4c; }
.phone-tile--assistant svg { color: var(--coral-deep); }
.phone-next { padding: .65em .75em; border: 1px solid var(--hairline); border-left: 3px solid var(--cobalt); border-radius: .7em; }
.phone-next small { display: block; color: var(--ink-mute); font-weight: 700; }
.phone-next strong { color: var(--navy); }
.phone-tiles span:nth-child(2) { background: var(--sea); }
.phone-tiles span:nth-child(3) { background: #e7f6ec; }
.phone-tiles span:nth-child(4) { background: var(--blush); }
.phone-cta { display: flex; align-items: center; justify-content: space-between; gap: .4em; margin-top: auto; padding: .75em .8em; border-radius: .8em; background: var(--lagoon-deep); color: #fff; }
.phone-cta strong { display: block; font-weight: 700; }
.phone-cta small { display: block; opacity: .85; }

.float-card {
    position: absolute;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    width: 17.5rem;
    padding: .75rem .8rem .75rem .75rem;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 22px 40px -20px rgba(11, 42, 91, .4);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.float-card:hover { border-color: var(--cobalt); box-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 26px 46px -20px rgba(11, 42, 91, .5); }
.float-body { min-width: 0; white-space: normal; }
.float-body em { display: block; color: var(--ink-mute); font-size: .76rem; font-style: normal; font-weight: 700; line-height: 1.3; }
.float-body strong { display: block; overflow-wrap: anywhere; color: var(--navy); font-size: .98rem; font-weight: 700; line-height: 1.25; }
.float-body small { display: -webkit-box; margin-top: .1rem; overflow: hidden; color: var(--ink-soft); font-size: .8rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.float-go {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mist);
    color: var(--cobalt);
    transition: background-color .2s ease, color .2s ease;
}
.float-card:hover .float-go { background: var(--cobalt); color: #fff; }
.float-card--assistant { left: 20%; top: 7%; width: 19rem; padding-left: .4rem; }
.float-card--assistant img { width: 3.6rem; height: auto; margin: -1.4rem 0 -.6rem; }
.float-card--slot { right: 1%; top: 22%; }
.float-card--stock { left: 20%; bottom: -5%; width: 20rem; }
.float-card--stock .float-body small { -webkit-line-clamp: 1; }
.float-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--mist-strong);
    color: var(--cobalt);
}
.float-icon--lagoon { background: var(--sea); color: var(--lagoon-deep); }
/* ---------- Hero, after the user's mockup: badge, underlined accent, two actions, features, stats band ---------- */

.aim-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -14rem;
    top: 12%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(18, 181, 170, .16), rgba(18, 181, 170, 0));
}
.aim-hero .aim-hero-inner { padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.aim-hero-copy { padding-top: clamp(.5rem, 1.5vw, 1.25rem); }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.4rem;
    padding: .45rem 1rem .45rem .8rem;
    border: 1px solid rgba(18, 181, 170, .35);
    border-radius: 999px;
    background: rgba(232, 246, 244, .85);
    color: var(--lagoon-deep);
    font-size: .92rem;
    font-weight: 700;
}
.hero-badge svg { color: var(--coral); }

.aim-hero-title .line--accent { position: relative; display: inline-block; }
.title-squiggle {
    position: absolute;
    left: 0;
    bottom: -.12em;
    width: 100%;
    height: .3em;
    color: var(--coral);
    opacity: .85;
}
.aim-hero-lead { max-width: 33rem; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 56px;
    padding: 0 1.5rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-cta--primary { background: var(--lagoon-deep); color: #fff; box-shadow: 0 16px 30px -16px rgba(11, 127, 119, .8); }
.hero-cta--primary:hover { background: #096a63; color: #fff; transform: translateY(-1px); }
.hero-cta--ghost { border: 1.5px solid var(--hairline); background: #fff; color: var(--navy); }
.hero-cta--ghost:hover { border-color: var(--lagoon-deep); color: var(--navy); }
.hero-cta-play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; padding-left: 2px; }

.hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}
.hero-feature { display: grid; gap: .15rem; align-content: start; }
.hero-feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .45rem;
    border-radius: 14px;
    background: var(--sea);
    color: var(--lagoon-deep);
}
.hero-feature-icon svg { width: 22px; height: 22px; }
.hero-feature--directory .hero-feature-icon { background: var(--mist-strong); color: var(--cobalt); }
.hero-feature--booking .hero-feature-icon { background: #eaf6ee; color: #2f8a4c; }
.hero-feature--stock .hero-feature-icon { background: var(--blush); color: var(--coral-deep); }
.hero-feature strong { color: var(--navy); font-size: .95rem; line-height: 1.25; }
.hero-feature span:last-child { color: var(--ink-soft); font-size: .85rem; line-height: 1.35; }

/* A bigger stage, like the mockup: the laptop leads, the doctors frame it */
.aim-hero .aim-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.aim-hero .aim-hero-title { font-size: clamp(2.3rem, 3.7vw, 3.4rem); }
.hero-cta { white-space: nowrap; padding: 0 1.3rem; }
.hero-stage { aspect-ratio: 1.1; width: calc(100% + 3rem); margin-right: -3rem; margin-top: .5rem; }
/* A bright halo and soft rings behind the scene, like a lit clinic window */
.hero-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6%;
    top: 4%;
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .7) 55%, rgba(232, 246, 244, .5) 75%, rgba(232, 246, 244, 0) 100%);
}
.hero-stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 14%;
    top: 12%;
    width: 76%;
    aspect-ratio: 1;
    border: 1.5px dashed rgba(18, 181, 170, .28);
    border-radius: 50%;
}
/* She stands in front of the laptop edge, pointing at the screen */
.stage-doctor { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.stage-doctor--left { z-index: 2; left: -10%; bottom: 3%; width: 41%; filter: drop-shadow(0 26px 30px rgba(11, 42, 91, .22)); }
.stage-doctor--right { right: -6%; top: 0; width: 36%; }
.laptop { left: 16%; right: 7%; bottom: 10%; }
.laptop::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(11, 42, 91, .22), rgba(11, 42, 91, 0));
}

/* Stats band: a soft wave carries the real totals and a handwritten line */
.hero-band {
    position: relative;
    margin-top: clamp(.5rem, 2vw, 1.5rem);
    padding: 1.6rem 0 1.8rem;
    background: rgba(255, 255, 255, .88);
    border-top: 1px solid rgba(227, 233, 241, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-band::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(26rem, 34vw);
    height: 100%;
    background: linear-gradient(120deg, var(--lagoon-deep), #13a397);
    clip-path: path("M0 30 C 120 0, 260 10, 420 70 L 420 200 L 0 200 Z");
    opacity: .95;
}
.hero-script {
    position: absolute;
    left: max(1rem, calc((100vw - 78rem) / 2 - 5rem));
    bottom: 1.3rem;
    width: 15rem;
    margin: 0;
    color: #fff;
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.65rem;
    line-height: 1.05;
    transform: rotate(-6deg);
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: max(var(--gutter), min(22rem, 30vw));
}
.hero-stat { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; }
.hero-stat + .hero-stat { padding-left: 1rem; border-left: 1px solid var(--hairline); }
.hero-stat-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mist-strong); color: var(--cobalt); }
.hero-stat-icon svg { width: 22px; height: 22px; }
.hero-stat--doctors .hero-stat-icon { background: var(--sea); color: var(--lagoon-deep); }
.hero-stat--sites .hero-stat-icon { background: #eaf6ee; color: #2f8a4c; }
.hero-stat--assistant .hero-stat-icon { background: var(--blush); color: var(--coral-deep); }
.hero-stat dd { margin: 0; color: var(--navy); font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stat dt { color: var(--ink-soft); font-size: .85rem; }

@media (max-width: 1180px) {
    .hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; }
    .hero-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 960px) {
    .aim-hero .aim-hero-inner { grid-template-columns: 1fr; }
    .hero-band::before, .hero-script { display: none; }
    .hero-stats { padding-left: var(--gutter); }
}
@media (max-width: 560px) {
    .hero-cta { flex: 1 1 100%; justify-content: center; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .hero-stat { grid-template-columns: 1fr; text-align: left; }
    .hero-stat + .hero-stat { padding-left: 0; border-left: 0; }
    .hero-stat-icon { grid-row: auto; margin-bottom: .4rem; }
}

/* ---------- Futuristic devices: glass frames, a luminous teal-to-cobalt rim, light reflections ---------- */

.laptop-screen {
    position: relative;
    padding: 1.3% 1.3% 2%;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(150deg, #22324d 0%, #0d1526 55%, #0a1220 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14) inset,
        0 0 0 1.5px rgba(18, 181, 170, .55),
        0 0 34px -4px rgba(18, 181, 170, .45),
        0 0 70px -20px rgba(11, 79, 179, .55),
        0 50px 80px -46px rgba(11, 42, 91, .75);
}
.laptop-cam {
    position: absolute;
    left: 50%;
    top: .45%;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #6fe3d8, #0b4f63 70%);
    box-shadow: 0 0 6px rgba(111, 227, 216, .8);
}
.dash { position: relative; }
.dash::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 38%);
}
.laptop-base {
    background: linear-gradient(180deg, #f4f7fb 0%, #d5dce6 55%, #9fabbc 100%);
}
.laptop-base::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--lagoon), #4d8dff, var(--lagoon), transparent);
    box-shadow: 0 0 10px rgba(18, 181, 170, .9);
}

.phone {
    padding: 4px;
    border-radius: 28px;
    background: linear-gradient(145deg, #5b6b84 0%, #1a2436 35%, #0b1120 70%, #3e4d66 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .18) inset,
        0 0 0 1.5px rgba(77, 141, 255, .5),
        0 0 30px -6px rgba(77, 141, 255, .5),
        0 30px 50px -24px rgba(11, 42, 91, .65);
}
.phone-screen { position: relative; border-radius: 24px; padding-top: 2.2em; }
.phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 30%);
}
.phone-island {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 10px;
    width: 30%;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #05080f;
}

/* The assistant robot floats beside its card, lit by a soft holographic ring */
.stage-robot {
    position: absolute;
    z-index: 4;
    left: 14%;
    top: -5%;
    width: 18%;
    filter: drop-shadow(0 18px 22px rgba(11, 42, 91, .25));
}
.stage-robot img { display: block; width: 100%; height: auto; }
.stage-robot-ring {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -8%;
    width: 120%;
    aspect-ratio: 3.2;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid rgba(18, 181, 170, .55);
    background: radial-gradient(closest-side, rgba(18, 181, 170, .35), rgba(18, 181, 170, 0));
    box-shadow: 0 0 18px rgba(18, 181, 170, .45);
}
.js .stage-robot { animation: robot-float 5s ease-in-out infinite; }
@keyframes robot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.float-card--assistant { left: 34%; top: 6%; width: 16.5rem; padding-left: .9rem; }
.float-card--assistant img { display: none; }
.float-card--assistant .float-body strong::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--lagoon);
    box-shadow: 0 0 0 4px rgba(18, 181, 170, .18);
    vertical-align: .1em;
}

@media (prefers-reduced-motion: reduce) {
    .js .stage-robot { animation: none; }
}
@media (max-width: 640px) {
    .stage-robot { display: none; }
    .float-card--assistant img { display: block; }
}

/* ---------- Stories of care: a scroll strip that runs to the page edge ---------- */

.stories-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.stories-nav { display: flex; gap: .6rem; }
.stories-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.stories-arrow:hover:not(:disabled) { border-color: var(--cobalt); color: var(--cobalt); }
.stories-arrow:disabled { opacity: .35; cursor: default; }

.stories-track {
    --edge: max(var(--gutter), calc((100vw - 78rem) / 2 + var(--gutter)));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(15rem, 27vw, 21.5rem);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 2.5rem 0 0;
    padding: .5rem var(--edge) 1.25rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
    cursor: grab;
}
.stories-track::-webkit-scrollbar { display: none; }
.stories-track:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; border-radius: 28px; }
.stories-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }

/* Each story has its own tone: a tinted plate sits behind a white frame, like a print on a mount */
.story-card {
    --tone: var(--cobalt);
    --plate: var(--mist-strong);
    position: relative;
    isolation: isolate;
    padding: 0 14px 0 0;
    scroll-snap-align: start;
}
.story-card--tension { --tone: var(--coral-deep); --plate: #ffe1d8; }
.story-card--pharmacie { --tone: var(--lagoon-deep); --plate: #d3f1ed; }
.story-card--pediatrie { --tone: #b86a12; --plate: #ffe8c7; }
.story-card--maison { --tone: var(--navy); --plate: #dfe4f3; }

.story-frame {
    position: relative;
    padding: 7px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .08), 0 26px 44px -26px rgba(11, 42, 91, .45);
}
.story-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 22px -14px -14px 22px;
    border-radius: 30px;
    background: var(--plate);
    transition: transform .6s var(--ease-out);
}
.story-card.is-playing .story-frame::before { transform: translate(4px, 4px); }

.story-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    border-radius: 23px;
    background: var(--plate);
    pointer-events: none;
}

.story-chip {
    position: absolute;
    top: 19px;
    left: 19px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .35rem .8rem .35rem .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px -8px rgba(11, 42, 91, .4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.story-chip-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--plate);
    color: var(--tone);
}

/* Three small bars say the clip is playing; they stay still when it is not */
.story-live {
    position: absolute;
    right: 19px;
    bottom: 19px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    padding: 8px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    opacity: 0;
    transition: opacity .3s ease;
}
.story-live i { width: 3px; height: 4px; border-radius: 2px; background: var(--tone); }
.story-card.is-playing .story-live { opacity: 1; }
.story-card.is-playing .story-live i { animation: live-bar .9s ease-in-out infinite alternate; }
.story-card.is-playing .story-live i:nth-child(2) { animation-delay: .3s; }
.story-card.is-playing .story-live i:nth-child(3) { animation-delay: .6s; }
@keyframes live-bar { to { height: 12px; } }

.story-card-caption {
    margin: 1.35rem 0 0;
    padding-inline: .25rem 1rem;
    color: var(--ink-soft);
    line-height: 1.55;
}


/* Trust bar: the real size of the directory, the way patients check a service */
.aim-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 36rem;
    margin: 1.75rem 0 0;
    padding: .9rem .4rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}
.aim-facts div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .65rem;
    align-items: center;
    padding-inline: .8rem;
}
.aim-facts div + div { border-left: 1px solid var(--hairline); }
.fact-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--mist-strong);
    color: var(--cobalt);
}
.fact-icon svg { width: 18px; height: 18px; }
.fact-icon--lagoon { background: var(--sea); color: var(--lagoon-deep); }
.fact-icon--coral { background: var(--blush); color: var(--coral-deep); }
.aim-facts dd {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.aim-facts dt { grid-row: 2; grid-column: 2; color: var(--ink-soft); font-size: .85rem; font-weight: 400; }

@media (max-width: 560px) {
    .aim-facts div { padding-inline: .5rem; grid-template-columns: 1fr; text-align: center; }
    .fact-icon { grid-row: auto; margin: 0 auto .35rem; }
    .aim-facts dd, .aim-facts dt { grid-column: 1; grid-row: auto; }
}

/* Page-load sequence: the one orchestrated moment */

.js .aim-hero-copy > * { animation: rise .8s var(--ease-out) both; }
.js .aim-hero-copy > :nth-child(2) { animation-delay: .08s; }
.js .aim-hero-copy > :nth-child(3) { animation-delay: .16s; }
.js .aim-hero-copy > :nth-child(4) { animation-delay: .24s; }
.js .aim-hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.js .laptop { animation: scene-in 1.1s .1s var(--ease-out) backwards; }
.js .stage-doctor { animation: rise 1s .3s var(--ease-out) backwards; }
.js .phone { animation: rise .9s .55s var(--ease-out) backwards; }
.js .float-card { animation: rise .7s .9s var(--ease-out) backwards; }
.js .float-card--slot { animation-delay: 1.05s; }
.js .float-card--stock { animation-delay: 1.2s; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scene-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
    .aim-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .float-card { width: 15.5rem; }
}

@media (max-width: 960px) {
    .aim-hero-inner { grid-template-columns: 1fr; }
    .aim-hero { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .6) 100%), url("../images/brand/hero-clinic.webp") 70% 80% / cover no-repeat; }
    .hero-stage { margin-inline: auto; max-width: 40rem; }
}

/* Small screens: the laptop and phone carry the story, the doctors step aside */
@media (max-width: 640px) {
    .hero-stage { aspect-ratio: auto; display: grid; gap: .6rem; }
    .stage-doctor { display: none; }
    .laptop { position: relative; inset: auto; }
    .phone { width: 30%; right: -2%; bottom: auto; top: 12%; }
    .float-card,
    .float-card--assistant,
    .float-card--stock { position: relative; inset: auto; width: auto; max-width: none; }
    .float-card--assistant img { margin: -.6rem 0; }
}
@media (max-width: 560px) {
    .finder-row { flex-direction: column; }
    .finder-kind span { font-size: .84rem; padding-inline: .2rem; letter-spacing: -0.01em; }
    .finder-kind span::before { display: none; }
    .finder-field input { font-size: 1rem; }
    .stories-nav { display: none; }
    .stories-track { grid-auto-columns: 78%; }
}

/* ---------- Section rhythm ---------- */

.aim-section { padding-block: clamp(4rem, 7.5vw, 6.5rem); }
.aim-section--mist { background: var(--mist); }
.aim-section--sea { background: linear-gradient(180deg, var(--sea), #f6fbfa); }

.aim-head { max-width: 40rem; }
.aim-head h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.06;
    color: var(--navy);
}
.aim-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.125rem; max-width: 34rem; }

/* ---------- Directory index: four doors, each a window onto the 3D town ---------- */

.aim-doors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 2.75rem 0 0;
    padding: 0;
    list-style: none;
}
.aim-doors a {
    --tone: var(--cobalt);
    --plate: #dbe8f8;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 1.4rem 1.3rem;
    border: 1px solid var(--hairline);
    border-radius: 26px;
    background:
        linear-gradient(180deg, var(--plate) 0, var(--plate) 5.25rem, #fff 5.25rem) no-repeat;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.aim-doors li:nth-child(2) a { --tone: var(--lagoon-deep); --plate: #d6f0ec; }
.aim-doors li:nth-child(3) a { --tone: var(--coral-deep); --plate: #ffe3da; }
.aim-doors li:nth-child(4) a { --tone: var(--navy); --plate: #e1e6f4; }
.aim-doors a:hover { border-color: var(--tone); box-shadow: var(--shadow-soft); }

.door-art {
    width: 7.5rem;
    height: 7.5rem;
    margin-top: 1.4rem;
    object-fit: cover;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .08), 0 18px 30px -18px rgba(11, 42, 91, .45);
    transition: transform .45s var(--ease-out);
}
.aim-doors a:hover .door-art { transform: scale(1.04) rotate(-2deg); }

.aim-doors .index-name {
    margin-top: 1.1rem;
    font-size: clamp(1.35rem, 1.9vw, 1.6rem);
}
.aim-doors .index-text { margin-top: .4rem; color: var(--ink-soft); line-height: 1.5; }
.aim-doors .index-count {
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--navy);
}
.index-go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--hairline);
    border-radius: 50%;
    color: var(--navy);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease-out);
}
.aim-doors a:hover .index-go { background: var(--tone); border-color: var(--tone); color: #fff; transform: translateX(3px); }

.index-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--mist-strong);
    color: var(--cobalt);
}
.index-name {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--navy);
}
.index-count {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1040px) {
    .aim-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .aim-doors { grid-template-columns: 1fr; }
    .aim-doors a { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; padding: 1rem; background: #fff; }
    .door-art { grid-row: span 3; width: 5.5rem; height: 5.5rem; margin: 0; border-width: 4px; background: var(--plate); }
    .aim-doors .index-name { margin-top: .2rem; }
    .aim-doors .index-count { grid-column: 2; padding-top: .6rem; }
}

.aim-clinics-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 4rem;
}
.aim-clinics-head h3 { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.page-home .clinic-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ---------- Assistant ---------- */

.aim-assistant-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}
.aim-points { display: grid; gap: 1.1rem; margin: 2rem 0 2.2rem; padding: 0; list-style: none; }
.aim-points li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; color: var(--ink-soft); }
.aim-points li::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: .5rem;
    border-radius: 50%;
    background: var(--lagoon);
    box-shadow: 0 0 0 5px rgba(18, 181, 170, .15);
}
.aim-quota { margin-top: 1rem; color: var(--ink-mute); font-size: .925rem; max-width: 30rem; }

.aim-chat {
    margin: 0;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 28px;
    box-shadow: var(--shadow-float);
    overflow: hidden;
}
.aim-chat-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--hairline); }
.aim-chat-head .aim-chat-avatar { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hairline); }
.aim-chat-head strong { display: block; line-height: 1.2; color: var(--navy); }
.aim-chat-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--lagoon-deep); font-size: .85rem; font-weight: 700; }
.aim-chat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lagoon); }

.aim-chat-body { display: flex; flex-direction: column; gap: .7rem; min-height: 23rem; padding: 1.25rem; background: linear-gradient(180deg, #fff, var(--paper)); }
.msg { max-width: 85%; padding: .75rem 1rem; border-radius: 18px; font-size: .95rem; line-height: 1.45; }
.msg--user { align-self: flex-end; background: var(--cobalt); color: #fff; border-bottom-right-radius: 6px; }
.msg--bot { align-self: flex-start; background: var(--mist); border-bottom-left-radius: 6px; }
.msg-card { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; padding: .7rem .8rem; border-radius: 14px; background: #fff; }
.msg-card .index-icon { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; }
.msg-card strong { display: block; font-size: .9rem; line-height: 1.3; }
.msg-card small { color: var(--ink-mute); }

.typing { display: none; align-self: flex-start; gap: 4px; padding: .9rem 1rem; background: var(--mist); border-radius: 18px; border-bottom-left-radius: 6px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b8; animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.js .aim-chat[data-chat] .msg { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s var(--ease-out); }
.js .aim-chat[data-chat] .msg.is-shown { opacity: 1; transform: none; }
.js .aim-chat[data-chat] .typing.is-shown { display: flex; }

.aim-chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 1.25rem 1.25rem;
    padding: .45rem .45rem .45rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-mute);
    font-size: .95rem;
}
.aim-chat-input i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cobalt); color: #fff; }

.aim-emergency {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--coral);
    background: #fff;
    border-radius: 0 14px 14px 0;
    color: var(--ink);
}
.aim-emergency svg { flex-shrink: 0; color: var(--coral-deep); margin-top: .1rem; }

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

/* ---------- Spaces ---------- */

.aim-spaces .space-tabs { margin-top: 2.5rem; }
.space-tab--patients,
.space-panel--patients { --space-accent: var(--cobalt); --space-wash: var(--mist-strong); }
.space-tab--clinics,
.space-panel--clinics { --space-accent: var(--lagoon-deep); --space-wash: var(--sea); }
.space-tab--pharmacies,
.space-panel--pharmacies { --space-accent: var(--coral-deep); --space-wash: var(--blush); }
.space-copy h3 { font-family: var(--font-display); color: var(--navy); }
.status--done { background: var(--sea); color: var(--lagoon-deep); }

/* ---------- Steps on the orbit ---------- */

.orbit-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 3.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.orbit-steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 22px;
    right: calc((100% - 4rem) / 3 - 22px);
    height: 2px;
    background: linear-gradient(90deg, var(--coral), rgba(242, 89, 75, .12));
}
.orbit-steps li { position: relative; counter-increment: step; }
.orbit-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9a8f, var(--coral) 55%, var(--coral-deep));
    box-shadow: 0 0 0 7px #f3faf9, 0 10px 22px rgba(242, 89, 75, .35);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}
.orbit-dot::after { content: counter(step); }
.orbit-steps h3 { margin-top: 1.5rem; font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.orbit-steps p { margin-top: .5rem; color: var(--ink-soft); max-width: 20rem; }

@media (max-width: 760px) {
    .orbit-steps { grid-template-columns: 1fr; gap: 2.25rem; }
    .orbit-steps::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--coral), rgba(242, 89, 75, .12)); }
    .orbit-steps li { padding-left: 4.5rem; }
    .orbit-dot { position: absolute; left: 0; top: 0; }
    .orbit-steps h3 { margin-top: .4rem; }
}

/* ---------- Sign up: a quiet, tinted close before the footer ---------- */

.aim-signup { background: linear-gradient(180deg, #fff 0%, #f1f6fb 100%); }
.aim-signup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}
.aim-signup-copy img { width: 92px; height: 92px; object-fit: contain; margin-bottom: 1.5rem; }
.aim-signup .signup-card { border-color: rgba(227, 233, 241, .9); box-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 30px 60px -30px rgba(11, 42, 91, .45); }
.aim-signup .signup-login a { color: var(--cobalt); }
@media (max-width: 860px) {
    .aim-signup-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer: night over the lagoon ---------- */

.site-footer { background: var(--navy); color: #c4d0e4; border-top: 0; }
.site-footer h2 { color: #fff; }
.site-footer a { color: #c4d0e4; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #8fd9d2; }
.site-footer .brand-mark { width: 40px; height: 40px; }
.footer-tagline { margin-top: 1rem; color: #c4d0e4; max-width: 22rem; }
.footer-base { border-top-color: rgba(255, 255, 255, .12); color: #9fb0cc; }
.footer-base strong { color: #ff9d90; }

/* ==========================================================================
   Inner pages: the same morning sky as the homepage, a lighter dose
   ========================================================================== */

.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, #f3f7fc 0%, #f8fafd 100%);
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { color: var(--navy); }

/* A round window onto the 3D town, tucked behind the search card */
.page-head-art {
    position: absolute;
    top: clamp(1.25rem, 3vw, 2rem);
    right: max(var(--gutter), calc((100vw - 78rem) / 2 + var(--gutter)));
    width: clamp(9rem, 15vw, 13.5rem);
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border: 6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .08), 0 24px 40px -22px rgba(11, 42, 91, .45);
}
.js .page-head-art { animation: scene-in 1s .1s var(--ease-out) backwards; }

@media (max-width: 900px) {
    .page-head-art { display: none; }
}

/* Pharmacy without a storefront photo yet: a calm branded placeholder */
.pharmacy-photo--empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .6rem;
    background: linear-gradient(160deg, #eef4fb 0%, #e3edf8 100%);
    color: var(--cobalt);
}
.pharmacy-photo--empty::after { display: none; }
.pharmacy-photo-cross {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background:
        linear-gradient(currentColor, currentColor) center / 50% 16% no-repeat,
        linear-gradient(currentColor, currentColor) center / 16% 50% no-repeat,
        #fff;
    box-shadow: 0 6px 16px -8px rgba(11, 42, 91, .35);
    opacity: 1;
}
.pharmacy-photo--empty .pharmacy-photo-label {
    padding: .15rem .6rem;
    background: rgba(255, 255, 255, .8);
    color: var(--ink-soft);
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .js .aim-hero-copy > *,
    .js .laptop,
    .js .phone,
    .js .stage-doctor,
    .js .float-card { animation: none; }
    .dash-video video { transition: none; }
    .typing i { animation: none; }
    .js .page-head-art { animation: none; }
    .story-card.is-playing .story-live i { animation: none; height: 8px; }
    .story-frame::before { transition: none; }
    .js .aim-chat[data-chat] .msg { opacity: 1; transform: none; transition: none; }
    .aim-doors a:hover .index-go,
    .aim-doors a:hover .door-art { transform: none; }
}

/* Assistant section: a paler stretch of the same sky */
#assistant { background: linear-gradient(180deg, #f8f3ee 0%, #e9f2fb 45%, #eef4f9 100%); }

/* ==========================================================================
   Role spaces: pharmacy dashboard and patient space (board-*)
   Self-contained; does not touch the homepage or hero rules above.
   ========================================================================== */

.board-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.board-kpi,
.board-quick-card {
    --tone: var(--cobalt);
    --tone-soft: #e6eefa;
}
.board-kpi--lagoon,
.board-quick-card--lagoon { --tone: var(--lagoon-deep); --tone-soft: var(--sea); }
.board-kpi--coral,
.board-quick-card--coral { --tone: var(--coral-deep); --tone-soft: #fdeae7; }
.board-kpi--navy,
.board-quick-card--navy { --tone: var(--navy); --tone-soft: var(--mist-strong); }

.board-kpi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "icon value" "icon label" "note note";
    column-gap: .9rem;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.board-kpi:hover { border-color: #c9d6ea; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.board-kpi-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--tone-soft);
    color: var(--tone);
}
.board-kpi-value {
    grid-area: value;
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.board-kpi-label { grid-area: label; margin-top: .25rem; color: var(--ink-soft); font-size: .92rem; font-weight: 600; line-height: 1.3; }
.board-kpi-note {
    grid-area: note;
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--hairline);
    color: var(--ink-mute);
    font-size: .84rem;
}

.board-section { margin-bottom: 2rem; }
.board-section-head,
.board-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.board-section-head h2,
.board-card-head h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.board-link { color: var(--cobalt); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.board-link:hover { text-decoration: underline; }

.board-status {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}
.board-status-card {
    --dot: var(--cobalt);
    position: relative;
    display: grid;
    gap: .35rem;
    padding: .9rem 1rem .9rem 1.15rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.board-status-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dot);
}
.board-status-card:hover { border-color: #c9d6ea; box-shadow: var(--shadow-soft); }
.board-status-label { color: var(--ink-soft); font-size: .88rem; font-weight: 600; }
.board-status-card strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.board-status-card.is-empty strong { color: #9aa6b8; }
.board-status-card--received { --dot: var(--cobalt); }
.board-status-card--preparing { --dot: #e8a317; }
.board-status-card--ready { --dot: var(--lagoon); }
.board-status-card--collected { --dot: #0f9488; }
.board-status-card--refused { --dot: var(--coral); }
.board-status-card--cancelled { --dot: #b8c3d4; }

.board-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.25rem;
    align-items: start;
}
.board-card {
    padding: 1.35rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .04);
}
.board-count {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--mist-strong);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.board-count--alert { background: #fdeae7; color: var(--coral-deep); }

.board-empty {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px dashed #cdd9ea;
    border-radius: 14px;
    background: var(--mist);
}
.board-empty p { margin: 0; color: var(--ink-soft); }
.board-empty-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--lagoon-deep);
}

.board-stock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.board-stock li { --level: #e8a317; --level-soft: #fff4dc; padding: .85rem 0; }
.board-stock li + li { border-top: 1px solid var(--hairline); }
.board-stock li.is-critical { --level: var(--coral); --level-soft: #fdeae7; }
.board-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.board-stock-row strong { min-width: 0; font-size: .98rem; color: var(--ink); }
.board-stock-tag {
    flex-shrink: 0;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--level-soft);
    color: var(--coral-deep);
    font-size: .76rem;
    font-weight: 700;
}
.board-stock li.is-low .board-stock-tag { color: #8a5a00; }
.board-stock-bar {
    height: 8px;
    margin: .55rem 0 .4rem;
    border-radius: 999px;
    background: var(--mist-strong);
    overflow: hidden;
}
.board-stock-bar span { display: block; height: 100%; border-radius: inherit; background: var(--level); }
.board-stock small { color: var(--ink-mute); font-size: .84rem; }
.board-stock small b { color: var(--ink); font-variant-numeric: tabular-nums; }
.board-stock li.is-critical small b { color: var(--coral-deep); }

.board-team { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.board-team li { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; }
.board-team li + li { border-top: 1px solid var(--hairline); }
.board-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mist-strong);
    color: var(--navy);
    font-weight: 700;
    font-size: .85rem;
}
.board-team li:nth-child(3n+2) .board-avatar { background: var(--sea); color: var(--lagoon-deep); }
.board-team li:nth-child(3n) .board-avatar { background: #fdeae7; color: var(--coral-deep); }
.board-team-main { min-width: 0; flex: 1; }
.board-team-main strong,
.board-team-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-team-main small { color: var(--ink-mute); font-size: .84rem; }
.board-pill { flex-shrink: 0; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.board-pill.is-on { background: var(--sea); color: var(--lagoon-deep); }
.board-pill.is-off { background: var(--mist); color: var(--ink-mute); }

/* ---------- Patient space header ---------- */

.board-hello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 1.75rem 1.5rem 1.75rem 2rem;
    border: 1px solid var(--hairline);
    border-radius: 22px;
    background:
        radial-gradient(26rem 14rem at 100% 0%, rgba(18, 181, 170, .16), transparent 70%),
        linear-gradient(115deg, #fff 0%, var(--mist) 40%, var(--sea) 100%);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.board-hello-date { margin: 0; color: var(--ink-mute); font-size: .92rem; font-weight: 600; }
.page-head .board-hello h1 { margin-top: .35rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-head .board-hello-copy > p:last-child { margin-top: .5rem; max-width: 34rem; color: var(--ink-soft); font-size: 1.02rem; }
.board-hello-stats { display: flex; gap: .75rem; margin: 0; }
.board-hello-stats div {
    min-width: 9rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: rgba(255, 255, 255, .85);
}
.board-hello-stats dt { color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
.board-hello-stats dd {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.board-hello-robot { width: 112px; height: auto; margin: -1rem 0 -1.75rem; align-self: end; }

.board-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1.25rem;
}
.board-quick-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.board-quick-card:hover { border-color: #c9d6ea; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.board-quick-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--tone-soft);
    color: var(--tone);
}
.board-quick-text { min-width: 0; }
.board-quick-text strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--navy); }
.board-quick-text small { display: block; margin-top: .1rem; color: var(--ink-mute); font-size: .84rem; line-height: 1.35; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .board-kpis,
    .board-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .board-grid { grid-template-columns: minmax(0, 1fr); }
    .board-hello { grid-template-columns: minmax(0, 1fr) auto; }
    .board-hello-stats { grid-column: 1 / -1; grid-row: 2; }
    .board-hello-robot { grid-column: 2; grid-row: 1; margin: -1rem -.5rem 0 0; }
}
@media (max-width: 640px) {
    .board-kpis { gap: .75rem; }
    .board-kpi {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "icon" "value" "label" "note";
        padding: .9rem;
    }
    .board-kpi-icon { width: 42px; height: 42px; margin-bottom: .6rem; border-radius: 12px; }
    .board-kpi-value { font-size: 1.55rem; }
    .board-kpi-label { font-size: .86rem; }
    .board-kpi-note { margin-top: .6rem; padding-top: .55rem; font-size: .78rem; }
    .board-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .board-card { padding: 1.1rem 1rem 1.2rem; }
    .board-hello { padding: 1.35rem 1.15rem; gap: 1rem; }
    .board-hello-robot { width: 76px; }
    .board-hello-stats div { flex: 1; min-width: 0; padding: .75rem .85rem; }
    .board-hello-stats dd { font-size: 1.5rem; }
    .board-quick { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .board-quick-card { padding: .85rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .board-kpi,
    .board-status-card,
    .board-quick-card { transition: none; }
    .board-kpi:hover,
    .board-quick-card:hover { transform: none; }
}

/* One family site-wide: Plus Jakarta Sans, the hierarchy is carried by weight */
body, input, button, select, textarea, .btn { font-family: var(--font); }

/* ==========================================================================
   Hero labels, after the mockup: frosted glass, a 3D icon, title / status / detail,
   a filled round arrow. The robot spills out of its own label.
   ========================================================================== */

.tag {
    position: absolute;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem .85rem .85rem .9rem;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(246, 250, 253, .86) 100%);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 0 0 1px rgba(11, 42, 91, .05),
        0 24px 44px -22px rgba(11, 42, 91, .42);
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.tag:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(11, 79, 179, .12), 0 30px 50px -22px rgba(11, 42, 91, .5); }
.tag:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.tag-icon { width: 3.4rem; height: 3.4rem; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(11, 42, 91, .18)); }
.tag-body { display: grid; gap: .12rem; min-width: 0; white-space: normal; }
.tag-body strong { color: var(--navy); font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.tag-body b { color: var(--lagoon-deep); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.tag-body small { margin-top: .15rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.35; }
.tag-go {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lagoon-deep);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(11, 127, 119, .9);
    transition: transform .25s var(--ease-out);
}
.tag:hover .tag-go { transform: translateX(2px); }

/* Assistant: the robot is bigger than its label and leans out of it */
.tag--assistant { left: 12%; top: 3%; width: 22rem; padding-left: 7.2rem; grid-template-columns: minmax(0, 1fr) auto; }
.tag-robot {
    position: absolute;
    left: -.4rem;
    bottom: -.4rem;
    width: 6.6rem;
    height: auto;
    filter: drop-shadow(0 14px 16px rgba(11, 42, 91, .25));
}
.js .tag-robot { animation: robot-float 5s ease-in-out infinite; }

.tag--slot { right: -2%; top: 21%; width: 21rem; }
.tag--slot .tag-go { background: #fff; color: var(--lagoon-deep); box-shadow: 0 0 0 1px var(--hairline); }

/* Stock: a soft lagoon tint, like the mockup's coloured alert card */
.tag--stock {
    left: 20%;
    bottom: -3%;
    width: 22rem;
    background: linear-gradient(135deg, rgba(240, 251, 249, .97) 0%, rgba(226, 246, 242, .9) 100%);
    border-color: rgba(18, 181, 170, .25);
}
.tag--stock .tag-body strong { font-size: .95rem; }

/* 3D icons in the features row and the stats band replace the line icons */
img.hero-feature-icon {
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: .45rem;
    padding: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(11, 42, 91, .16));
}
img.hero-stat-icon {
    width: 3.2rem;
    height: 3.2rem;
    background: none;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(11, 42, 91, .16));
}

/* A soft cobalt-to-lagoon blob behind the laptop, as in the mockup */
.hero-stage .laptop::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -8%;
    right: -6%;
    top: -14%;
    bottom: -10%;
    border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: radial-gradient(ellipse at 60% 40%, rgba(77, 141, 255, .22), rgba(18, 181, 170, .14) 55%, rgba(18, 181, 170, 0) 75%);
    filter: blur(6px);
}

@media (max-width: 1180px) {
    .tag--assistant { width: 18rem; }
    .tag--slot, .tag--stock { width: 18rem; }
}
@media (max-width: 640px) {
    .tag { position: relative; inset: auto; width: auto; margin-top: .6rem; }
    .tag--assistant { margin-top: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tag, .tag-go { transition: none; }
    .js .tag-robot { animation: none; }
}
@media (max-width: 960px) {
    .hero-stage { width: 100%; margin-right: 0; }
}
@media (max-width: 640px) {
    .phone { right: 0; }
    .tag { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tag--assistant { grid-template-columns: minmax(0, 1fr) auto; padding-left: 6.4rem; }
    .tag-robot { width: 5.6rem; }
}

/* ==========================================================================
   Hero decor: quiet medical accents that fill the empty corners
   ========================================================================== */

.hero-decor { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.aim-hero > .hero-decor { position: absolute; }
.aim-hero-inner { position: relative; z-index: 1; }

/* Soft organic shapes, like the mockup's teal waves on the edges */
.decor-blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.decor-blob--left {
    left: -9rem;
    top: 18%;
    width: 18rem;
    height: 26rem;
    background: linear-gradient(160deg, rgba(18, 181, 170, .22), rgba(77, 141, 255, .10));
}
.decor-blob--top {
    left: 41%;
    top: -7rem;
    width: 16rem;
    height: 12rem;
    background: radial-gradient(closest-side, rgba(242, 89, 75, .12), rgba(242, 89, 75, 0));
}

/* A heartbeat line running under the copy towards the screens */
.decor-pulse {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 13.5%;
    width: 46%;
    height: 70px;
    color: rgba(18, 181, 170, .28);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
}
.decor-pulse path { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.js .decor-pulse path { animation: pulse-draw 3.2s .4s var(--ease-out) forwards; }
html:not(.js) .decor-pulse path { stroke-dashoffset: 0; }
@keyframes pulse-draw { to { stroke-dashoffset: 0; } }

/* Medical crosses: a few, small, in brand tints */
.decor-cross { position: absolute; width: 18px; height: 18px; }
.decor-cross--a { left: 3%; top: 14%; color: rgba(18, 181, 170, .45); width: 22px; height: 22px; }
.decor-cross--b { left: 6.5%; top: 62%; color: rgba(242, 89, 75, .35); }
.decor-cross--c { left: 44%; top: 9%; color: rgba(11, 79, 179, .25); width: 14px; height: 14px; }
.decor-cross--d { left: 46%; top: 70%; color: rgba(18, 181, 170, .35); width: 26px; height: 26px; }
.decor-cross--e { right: 3%; top: 8%; color: rgba(242, 89, 75, .3); }
.decor-cross--f { left: 2%; bottom: 14%; color: rgba(11, 79, 179, .22); width: 30px; height: 30px; }

/* Thin rings, echoing the logo's orbit */
.decor-ring { position: absolute; border: 2px solid rgba(18, 181, 170, .25); border-radius: 50%; }
.decor-ring--a { left: 39%; top: 13%; width: 54px; height: 54px; }
.decor-ring--b { right: 6%; bottom: 20%; width: 26px; height: 26px; border-color: rgba(242, 89, 75, .3); }

/* Three soft 3D objects floating in the gaps */
.decor-3d { position: absolute; height: auto; filter: drop-shadow(0 14px 14px rgba(11, 42, 91, .18)); }
.decor-3d--heart { left: 43%; top: 20%; width: 4.4rem; transform: rotate(-10deg); }
.decor-3d--pill { left: 35%; top: 3%; width: 3.4rem; transform: rotate(18deg); }
.decor-3d--shield { right: 1.2%; top: 44%; width: 3.6rem; opacity: .95; }
.js .decor-3d--heart { animation: decor-float 6s ease-in-out infinite; }
.js .decor-3d--pill { animation: decor-float 7s 1s ease-in-out infinite; }
.js .decor-3d--shield { animation: decor-float 8s .5s ease-in-out infinite; }
@keyframes decor-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@media (max-width: 1180px) {
    .decor-3d--heart, .decor-ring--a, .decor-cross--c { display: none; }
}
@media (max-width: 960px) {
    .decor-pulse, .decor-3d--pill, .decor-3d--shield, .decor-cross--d { display: none; }
    .decor-blob--left { left: -12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .js .decor-3d--heart, .js .decor-3d--pill, .js .decor-3d--shield { animation: none; }
    .js .decor-pulse path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Hero devices, refined: real hardware proportions, no glow ----------
 * A graphite laptop with an even bezel, an aluminium deck with its hinge and
 * thumb notch, and a phone with a metal band, side keys and the island. Light
 * comes from the top left; shadows are long and soft, like a product shot. */

.laptop-screen {
    padding: 1.15% 1.15% 1.9%;
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(180deg, #2b3038 0%, #16191f 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .09),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 0 1px #4a515c,
        0 2px 3px rgba(11, 23, 45, .12),
        0 28px 46px -22px rgba(11, 23, 45, .42),
        0 60px 90px -50px rgba(11, 23, 45, .45);
}
.laptop-cam {
    top: .38%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 40% 35%, #3b4654 0%, #0a0d12 70%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.dash { border-radius: 3px; }
.dash::after {
    background: linear-gradient(122deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 42%);
}

/* Deck: brushed aluminium, a darker hinge line, a lip that catches the light */
.laptop-base {
    height: 13px;
    margin: 0 -7%;
    border-radius: 1px 1px 16px 16px / 1px 1px 10px 10px;
    background:
        linear-gradient(180deg, #8e97a3 0, #8e97a3 2px, transparent 2px),
        linear-gradient(180deg, #f2f4f7 0%, #dde2e8 45%, #b9c1cb 82%, #9aa3ae 100%);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .6),
        0 1px 0 rgba(11, 23, 45, .08),
        0 18px 26px -14px rgba(11, 23, 45, .38);
}
.laptop-base::before {
    top: 2px;
    width: 13%;
    height: 5px;
    border-radius: 0 0 9px 9px;
    background: linear-gradient(180deg, #a9b2bd, #c7ced6);
    box-shadow: inset 0 1px 1px rgba(11, 23, 45, .18);
}
.laptop-base::after {
    left: 1.5%;
    right: 1.5%;
    bottom: -3px;
    height: 3px;
    border-radius: 0 0 50% 50%;
    background: #8a939e;
    box-shadow: none;
}
.laptop::after {
    left: 0;
    right: 0;
    bottom: -30px;
    height: 30px;
    background: radial-gradient(closest-side, rgba(11, 23, 45, .2), rgba(11, 23, 45, 0));
}

/* Phone: graphite band, a hairline highlight, keys on both sides */
.phone {
    padding: 3px;
    border-radius: 30px;
    background: linear-gradient(160deg, #6c737d 0%, #3a3f47 18%, #24282e 50%, #3a3f47 82%, #5d646e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 0 0 1px rgba(11, 23, 45, .35),
        0 2px 4px rgba(11, 23, 45, .14),
        0 26px 40px -18px rgba(11, 23, 45, .45),
        0 50px 70px -40px rgba(11, 23, 45, .4);
}
.phone::before,
.phone::after {
    content: "";
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2a2e34, #555c66);
}
.phone::before { left: -3px; top: 20%; height: 18%; }
.phone::after { right: -3px; top: 27%; height: 14%; background: linear-gradient(90deg, #555c66, #2a2e34); }
.phone-screen {
    border-radius: 27px;
    padding-top: 2.4em;
    box-shadow: 0 0 0 3px #0b0d10;
}
.phone-screen::after {
    background: linear-gradient(128deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 28%);
}
.phone-island {
    top: 11px;
    width: 28%;
    height: 10px;
    background: #050608;
    box-shadow: inset -6px 0 0 -3px #121821;
}

/* ---------- Hero background, unified ----------
 * One continuous tone from left to right: the copy side takes the same cool
 * mist as the clinic photo instead of flat white, the wash fades in small
 * steps (no visible seam in the middle), and the photo is toned down so its
 * colour stays close to the left side. The left glow and blob are softened. */
.aim-hero {
    background:
        linear-gradient(90deg,
            #f5f9fa 0%,
            rgba(245, 249, 250, .97) 26%,
            rgba(245, 249, 250, .9) 38%,
            rgba(245, 249, 250, .78) 48%,
            rgba(245, 249, 250, .64) 58%,
            rgba(245, 249, 250, .52) 70%,
            rgba(245, 249, 250, .44) 85%,
            rgba(245, 249, 250, .4) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #fff 100%),
        linear-gradient(rgba(236, 244, 246, .35), rgba(236, 244, 246, .35)),
        url("../images/brand/hero-clinic.webp") 70% 40% / cover no-repeat,
        #eef5f7;
}
.aim-hero::before { background: radial-gradient(closest-side, rgba(18, 181, 170, .08), rgba(18, 181, 170, 0)); }
.decor-blob--left { background: linear-gradient(160deg, rgba(18, 181, 170, .1), rgba(77, 141, 255, .05)); }

@media (max-width: 960px) {
    .aim-hero {
        background:
            linear-gradient(180deg, #f5f9fa 0%, rgba(245, 249, 250, .92) 45%, rgba(245, 249, 250, .7) 100%),
            url("../images/brand/hero-clinic.webp") 70% 80% / cover no-repeat,
            #eef5f7;
    }
}

/* ---------- Hero background, without the seam ----------
 * The clinic photo has a hard vertical edge where the window meets the wall.
 * It now sits on its own layer, slightly softened and masked in from the left,
 * so the copy side and the photo side melt into one tone with no visible line. */
.aim-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #fff 100%),
        #f5f9fa;
}
.aim-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -12px;
    background: url("../images/brand/hero-clinic.webp") 70% 40% / cover no-repeat;
    filter: blur(3px) saturate(.9);
    opacity: .8;
    -webkit-mask-image: linear-gradient(90deg, transparent 22%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, .7) 62%, #000 82%), linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 22%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, .7) 62%, #000 82%), linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
    pointer-events: none;
}
@media (max-width: 960px) {
    .aim-hero { background: #f5f9fa; }
    .aim-hero::after {
        background-position: 70% 80%;
        opacity: .45;
        -webkit-mask-image: linear-gradient(180deg, transparent 15%, #000 85%);
        mask-image: linear-gradient(180deg, transparent 15%, #000 85%);
    }
}

/* ---------- Home guide: numbered sections the visitor can follow ---------- */

.home-guide { padding-block: 1.75rem 0; }
.home-guide-inner { display: flex; align-items: center; gap: 1rem; }
.home-guide-title {
    flex: none;
    color: var(--ink-mute);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.home-guide-list {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.home-guide-list::-webkit-scrollbar { display: none; }
.home-guide-list a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .95rem .4rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.home-guide-list b {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--mist-strong);
    color: var(--cobalt);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.home-guide-list a:hover,
.home-guide-list a:focus-visible { border-color: var(--cobalt); color: var(--cobalt); box-shadow: var(--shadow-soft); }
@media (max-width: 760px) {
    .home-guide-title { display: none; }
    .home-guide-list { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

/* Each numbered section: a kicker above the title and, at the right edge of the
 * content, the section number in a crisp teal ring with a small coral cross,
 * drawn like the rings and crosses of the hero. It sits beside the title and
 * never under text. */
.aim-section--step {
    --mark: clamp(4.5rem, 6vw, 5.5rem);
    --mark-top: clamp(2.5rem, 4.5vw, 4rem);
    --mark-side: max(var(--gutter), calc((100vw - 78rem) / 2 + var(--gutter)));
    position: relative;
    isolation: isolate;
    scroll-margin-top: 5.5rem;
}
.aim-section--step::before {
    content: attr(data-step);
    content: attr(data-step) / "";
    position: absolute;
    top: var(--mark-top);
    right: var(--mark-side);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--mark);
    height: var(--mark);
    padding-top: .06em;
    border: 2px solid rgba(18, 181, 170, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 7px rgba(18, 181, 170, .07), 0 14px 28px -18px rgba(11, 42, 91, .35);
    color: var(--lagoon-deep);
    font-family: "Fraunces", Georgia, serif;
    font-size: calc(var(--mark) * .4);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.aim-section--step::after {
    content: "";
    position: absolute;
    top: calc(var(--mark-top) - .55rem);
    right: calc(var(--mark-side) - .7rem);
    width: 16px;
    height: 16px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 5px 100% no-repeat;
    border-radius: 1px;
    color: rgba(242, 89, 75, .5);
    pointer-events: none;
}
.js .aim-section--step::after { animation: decor-float 7s ease-in-out infinite; }

/* A card filling the right-hand side starts below the marker */
@media (min-width: 861px) {
    #compte .signup-card { margin-top: calc(var(--mark) + 1.5rem); }
    #compte .aim-signup-grid { align-items: start; }
    #compte .aim-signup-copy { align-self: center; }
}
@media (min-width: 901px) {
    #assistant .aim-chat { margin-top: calc(var(--mark) + 1.5rem); }
    #assistant .aim-assistant-grid { align-items: start; grid-template-rows: auto 1fr; row-gap: 1.5rem; }
}
/* One column: the title keeps clear of the marker */
@media (max-width: 900px) {
    .aim-section--step { --mark: 3.6rem; }
    .aim-section--step .aim-head > h2 { padding-right: calc(var(--mark) + .75rem); }
}
@media (prefers-reduced-motion: reduce) {
    .js .aim-section--step::after { animation: none; }
}

.aim-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    color: var(--cobalt);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.aim-kicker b {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: .78rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.aim-signup-copy .aim-kicker { display: flex; width: max-content; margin-top: 1.25rem; }

/* ---------- Stories, as cards: the clip, then a numbered caption ---------- */

.story-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 42, 91, .05), 0 22px 40px -30px rgba(11, 42, 91, .45);
}
.story-frame { padding: 8px 8px 0; border-radius: 26px 26px 0 0; background: transparent; box-shadow: none; }
.story-frame::before { display: none; }
.story-frame video { border-radius: 19px; }
.story-chip { top: 20px; left: 20px; }
.story-live { right: 20px; bottom: 12px; }
.story-card-body {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem 1.35rem;
}
.story-number {
    flex: none;
    color: var(--tone);
    font-family: "Fraunces", Georgia, serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    opacity: .45;
}
.story-card-caption { margin: 0; padding: 0; color: var(--ink-soft); line-height: 1.55; }

.stories-dots { display: flex; gap: .45rem; margin-top: .75rem; }
.stories-dots i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--hairline);
    transition: width .3s var(--ease-out), background-color .3s ease;
}
.stories-dots i.is-active { width: 26px; background: var(--cobalt); }

/* ---------- Steps, as cards with a faint number behind each one ---------- */

.orbit-steps li {
    isolation: isolate;
    overflow: hidden;
    padding: 1.5rem 1.5rem 1.75rem;
    border: 1px solid rgba(11, 42, 91, .07);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}
.orbit-steps::before { display: none; }
.orbit-number {
    position: absolute;
    z-index: -1;
    right: .5rem;
    bottom: -1.4rem;
    color: transparent;
    background: linear-gradient(180deg, rgba(242, 89, 75, .16), rgba(242, 89, 75, 0) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: "Fraunces", Georgia, serif;
    font-size: 7.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
}
.orbit-steps p { max-width: 17rem; }
@media (max-width: 760px) {
    .orbit-steps li { padding: 1.25rem 1.25rem 1.4rem 4.75rem; }
    .orbit-dot { left: 1.25rem; top: 1.25rem; }
    .orbit-number { font-size: 5.5rem; bottom: -1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .stories-dots i { transition: none; }
}

/* ---------- Home, compact ----------
 * Tighter rhythm below the hero: less padding, smaller titles, square video
 * cards, a shorter chat, and on phones the clinic cards become a swipe strip
 * instead of a tall stack. Each section should fit in about one screen. */
.aim-section { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.aim-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
.aim-head p { margin-top: .6rem; font-size: 1.05rem; }
.aim-kicker { margin-bottom: .6rem; }
.home-guide { padding-block: 1.25rem 0; }

/* Stories: square clips (the videos are square), narrower cards */
.stories-track { grid-auto-columns: clamp(14rem, 21vw, 17.5rem); margin-top: 1.5rem; padding-bottom: .75rem; }
.story-frame video { aspect-ratio: 1 / 1; }
.story-card-body { padding: .85rem 1.1rem 1rem; gap: .75rem; }
.story-number { font-size: 1.8rem; }
.story-card-caption { font-size: .95rem; line-height: 1.5; }
.stories-dots { margin-top: .5rem; }

/* Directory: smaller doors, closer clinic list */
.aim-doors { margin-top: 1.75rem; }
.aim-doors a { padding: 0 1.2rem 1.1rem; background: linear-gradient(180deg, var(--plate) 0, var(--plate) 4.25rem, #fff 4.25rem) no-repeat; }
.door-art { width: 6rem; height: 6rem; margin-top: 1.1rem; }
.aim-doors .index-name { margin-top: .8rem; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.aim-clinics-head { margin-top: 2.5rem; }
.page-home .clinic-cards { margin-top: 1rem; }

/* Assistant: the example chat no longer reserves empty space */
.aim-points { gap: .75rem; margin: 1.25rem 0 1.5rem; }
.aim-chat-body { min-height: 15rem; }
.aim-emergency { margin-top: 1.5rem; }

/* Spaces */
.aim-spaces .space-tabs { margin-top: 1.5rem; }
.space-panel { padding: clamp(1.25rem, 3vw, 2.25rem); gap: clamp(1.5rem, 4vw, 3rem); }

/* Steps */
.orbit-steps { margin-top: 1.75rem; gap: 1.25rem; }
.orbit-steps li { padding: 1.25rem 1.25rem 1.4rem; }
.orbit-steps h3 { margin-top: 1rem; font-size: 1.2rem; }
.orbit-number { font-size: 6rem; }

/* Sign up */
.aim-signup-copy img { width: 64px; height: 64px; margin-bottom: 1rem; }

@media (max-width: 760px) {
    .stories-track { grid-auto-columns: 74%; }
    .page-home .clinic-cards {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: .85rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: .25rem var(--gutter) .75rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .page-home .clinic-cards::-webkit-scrollbar { display: none; }
    .page-home .clinic-cards > li { scroll-snap-align: start; }
    .aim-doors { gap: .75rem; }
    .aim-doors a { grid-template-columns: 4.5rem 1fr; padding: .85rem; background: #fff; }
    .door-art { width: 4.5rem; height: 4.5rem; }
    .orbit-steps { gap: .85rem; }
    .orbit-steps li { padding: 1rem 1rem 1.1rem 4.25rem; }
    .orbit-dot { left: 1rem; top: 1rem; }
    .orbit-steps h3 { margin-top: .2rem; }
    .aim-chat-body { min-height: 0; }
}

/* Stories: the arrows sit under the strip, beside the dots */
.stories-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.stories-foot .stories-dots { margin-top: 0; }
.stories-foot .stories-arrow { width: 42px; height: 42px; }

/* Assistant on desktop: the emergency note goes under the text, beside the chat */
@media (min-width: 901px) {
    #assistant .aim-chat { grid-column: 2; grid-row: 1 / span 2; }
    #assistant .aim-emergency { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
}

/* Spaces on phones: three tabs side by side, icon above a short label */
@media (max-width: 680px) {
    .space-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .3rem; }
    .space-tab { flex-direction: column; justify-content: center; gap: .35rem; min-height: 0; padding: .6rem .3rem; font-size: .8rem; text-align: center; }
    .space-tab-icon { width: 30px; height: 30px; }
}

/* The kicker: a short teal rule and the step name; the number lives in the marker */
.aim-kicker b { display: none; }
.aim-kicker::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--lagoon); }

/* ---------- Hero, compact ----------
 * Same rhythm as the sections below: a slightly smaller title, closer blocks,
 * smaller icons, a slimmer stats band. On phones the four features and the four
 * totals sit two by two with the icon beside the text, and the live cards drop
 * their detail line, so the hero no longer runs over two screens. */
.aim-hero .aim-hero-title { font-size: clamp(2.2rem, 3.4vw, 3.15rem); }
.aim-hero-lead { margin-top: .9rem; }
.hero-ctas { margin-top: 1.4rem; }
.hero-cta { min-height: 50px; padding: 0 1.3rem; font-size: 1rem; }
.hero-features { margin-top: 1.6rem; gap: .9rem; }
img.hero-feature-icon { width: 2.6rem; height: 2.6rem; margin-bottom: .3rem; }
.hero-band { margin-top: .5rem; padding: 1.1rem 0 1.2rem; }
img.hero-stat-icon { width: 2.7rem; height: 2.7rem; }
.hero-stat dd { font-size: 1.3rem; }

@media (max-width: 960px) {
    .hero-stage { margin-top: 0; }
}
@media (max-width: 640px) {
    .tag { margin-top: .45rem; padding-block: .6rem; }
    .tag--assistant { margin-top: 1.6rem; }
    .tag-body small { display: none; }
    .tag-icon { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 560px) {
    .hero-ctas { gap: .5rem; margin-top: 1.1rem; }
    .hero-cta { min-height: 48px; }
    .hero-features { grid-template-columns: 1fr 1fr; gap: .75rem .9rem; margin-top: 1.25rem; }
    .hero-feature { grid-template-columns: 2.3rem minmax(0, 1fr); column-gap: .55rem; align-items: center; }
    img.hero-feature-icon { grid-row: span 2; width: 2.3rem; height: 2.3rem; margin: 0; }
    .hero-feature strong { font-size: .88rem; }
    .hero-feature span:last-child { font-size: .76rem; }
    .hero-band { padding: .9rem 0 1rem; }
    .hero-stats { row-gap: .85rem; }
    .hero-stat { grid-template-columns: 2.3rem minmax(0, 1fr); column-gap: .55rem; }
    img.hero-stat-icon { grid-row: span 2; width: 2.3rem; height: 2.3rem; margin: 0; }
    .hero-stat dd { font-size: 1.15rem; }
    .hero-stat dt { font-size: .76rem; line-height: 1.3; }
}

/* ---------- Stories, on a bedside monitor ----------
 * The five moments of care play on a hospital bedside monitor drawn in CSS,
 * like the hero laptop: off-white medical casing with a handle, a dark screen
 * (clip, live heart trace, one reading per moment), a side bezel with a knob,
 * keys and a speaker grille, on a short stand. The channels beside it switch
 * the moment; while nobody touches them they run on, a bar showing the time
 * left. Light from the top left, soft product-shot shadows, no glow. */

.vm {
    --vm-screen: #071631;
    --vm-trace: #35d3b6;
    --vm-amber: #f6c453;
    --vm-step: 8s;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    margin-top: 1.5rem;
}

.vm-device { position: relative; padding-top: 18px; }
.vm-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 34%;
    height: 26px;
    transform: translateX(-50%);
    border: 7px solid #dfe4ea;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.vm-casing {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 12px;
    padding: 14px;
    border-radius: 26px;
    background: linear-gradient(160deg, #fdfefe 0%, #eef1f5 55%, #dde3ea 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -2px 0 rgba(11, 23, 45, .06),
        0 0 0 1px #d5dbe3,
        0 2px 3px rgba(11, 23, 45, .08),
        0 30px 50px -26px rgba(11, 23, 45, .4),
        0 70px 90px -60px rgba(11, 23, 45, .45);
}

/* Screen */
.vm-screen {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 56px;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--vm-screen);
    box-shadow: inset 0 0 0 2px #0c1d3c, inset 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 1px #b9c2cd;
    color: #e7eef9;
}
.vm-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 28%, rgba(255, 255, 255, 0) 45%);
}
.vm-topbar { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .72rem; font-weight: 700; }
.vm-live { display: inline-flex; align-items: center; gap: .35rem; color: #ff8a73; letter-spacing: .02em; }
.vm-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff6a4d; }
.vm-brand { color: rgba(231, 238, 249, .65); }
.vm-clock { margin-left: auto; color: rgba(231, 238, 249, .8); font-variant-numeric: tabular-nums; }

.vm-view { display: grid; grid-template-columns: minmax(0, 1fr) 34%; min-height: 0; }
.vm-video { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #0b1d3d; }
.vm-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}
.vm-video video.is-active { opacity: 1; }
.vm-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(7, 22, 49, .14) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

.vm-readouts { display: grid; align-content: start; gap: .2rem; padding: .7rem .8rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.vm-readout { display: grid; gap: .1rem; margin: 0; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.vm-readout[hidden] { display: none; }
.vm-readout span { color: rgba(231, 238, 249, .62); font-size: .7rem; font-weight: 700; }
.vm-readout strong { display: flex; align-items: center; gap: .4rem; font-size: clamp(1.15rem, 2.2vw, 1.75rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; overflow-wrap: anywhere; }
.vm-readout small { color: rgba(231, 238, 249, .7); font-size: .72rem; font-weight: 600; }
.vm-readout--pulse strong { color: var(--vm-trace); }
.vm-readout--consultation strong, .vm-readout--maison strong { color: #8fc1ff; font-size: clamp(1rem, 1.7vw, 1.3rem); }
.vm-readout--tension strong, .vm-readout--pharmacie strong { color: var(--vm-amber); }
.vm-readout--pediatrie strong { color: #ffb49e; }
.vm-heart { width: .55em; height: .55em; border-radius: 50%; background: var(--vm-trace); }
.vm.is-running .vm-heart, .vm-device:hover .vm-heart { animation: vm-beat .83s ease-in-out infinite; }

/* Heart trace: two copies of the same beats slide left, seamlessly */
.vm-ecg { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(90deg, rgba(53, 211, 182, .06), transparent 60%); }
.vm-ecg svg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; animation: vm-trace 6s linear infinite; }
.vm-ecg path { fill: none; stroke: var(--vm-trace); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vm-ecg::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 28%; background: linear-gradient(90deg, transparent, var(--vm-screen)); }

/* Side bezel */
.vm-bezel { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: .6rem 0; }
.vm-led { width: 9px; height: 9px; border-radius: 50%; background: #1baf7a; box-shadow: 0 0 0 3px rgba(27, 175, 122, .16); }
.vm-knob {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e5e9ef 45%, #bcc4ce 100%);
    box-shadow: 0 0 0 1px #c9d0d9, 0 6px 10px -4px rgba(11, 23, 45, .35), inset 0 -2px 3px rgba(11, 23, 45, .12);
}
.vm-knob::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 10px; border-radius: 2px; background: var(--cobalt, #0b4fb3); transform: translateX(-50%); }
.vm-keys { display: grid; gap: 7px; }
.vm-keys i { display: block; width: 30px; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #f6f8fa, #d4dae2); box-shadow: 0 0 0 1px #c9d0d9; }
.vm-keys i:first-child { background: linear-gradient(180deg, #ff9a85, #e2563c); box-shadow: 0 0 0 1px #c9452c; }
.vm-grill { display: grid; gap: 4px; }
.vm-grill i { display: block; width: 26px; height: 2px; border-radius: 2px; background: #c3cad3; }

.vm-stand { display: block; width: 18%; margin: 0 auto; }
.vm-stand i { display: block; width: 30%; height: 22px; margin: 0 auto; background: linear-gradient(90deg, #c7ced7, #eef1f4 50%, #c7ced7); }
.vm-stand::after { content: ""; display: block; height: 12px; border-radius: 8px 8px 14px 14px; background: linear-gradient(180deg, #f1f4f7, #c9d0d9); box-shadow: 0 14px 22px -12px rgba(11, 23, 45, .45); }

/* Channels */
.vm-channels { display: grid; gap: .55rem; }
.vm-channel {
    --tone: var(--cobalt, #0b4fb3);
    --plate: #e6eefa;
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem .9rem .9rem;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #fff;
    color: var(--ink, #13233f);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vm-channel--tension { --tone: var(--coral-deep, #c4320a); --plate: #ffe1d8; }
.vm-channel--pharmacie { --tone: var(--lagoon-deep, #0b7f77); --plate: #d3f1ed; }
.vm-channel--pediatrie { --tone: #b86a12; --plate: #ffe8c7; }
.vm-channel--maison { --tone: var(--navy, #0b2a5b); --plate: #dfe4f3; }
.vm-channel:hover { border-color: var(--tone); }
.vm-channel:focus-visible { outline: 3px solid var(--cobalt, #0b4fb3); outline-offset: 2px; }
.vm-channel[aria-selected="true"] { border-color: var(--tone); box-shadow: 0 14px 28px -22px rgba(11, 42, 91, .6); transform: translateX(-4px); }
.vm-channel-num { color: var(--tone); font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 500; line-height: 1; opacity: .55; }
.vm-channel[aria-selected="true"] .vm-channel-num { opacity: 1; }
.vm-channel-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--plate); color: var(--tone); }
.vm-channel-icon svg { width: 20px; height: 20px; }
.vm-channel-text { display: grid; min-width: 0; gap: .1rem; }
.vm-channel-text strong { font-size: .98rem; font-weight: 800; }
.vm-channel-text small { color: var(--ink-soft, #4a5870); font-size: .84rem; line-height: 1.4; }
.vm-channel:not([aria-selected="true"]) .vm-channel-text small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.vm-channel-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.vm-channel-bar b { display: block; width: 0; height: 100%; background: var(--tone); }
.vm-channel[aria-selected="true"] .vm-channel-bar b { width: 100%; }
.vm.is-running .vm-channel.is-filling .vm-channel-bar b { width: 0; animation: vm-fill var(--vm-step) linear forwards; }

@keyframes vm-trace { to { transform: translateX(-50%); } }
@keyframes vm-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(.95); } }
@keyframes vm-fill { from { width: 0; } to { width: 100%; } }

@media (max-width: 991px) {
    .vm { grid-template-columns: minmax(0, 1fr); }
    .vm-device { width: 100%; max-width: 40rem; margin: 0 auto; }
    .vm-channels { grid-auto-flow: column; grid-auto-columns: minmax(15rem, 78%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem .1rem .6rem; scrollbar-width: none; }
    .vm-channels::-webkit-scrollbar { display: none; }
    .vm-channel { scroll-snap-align: start; }
    .vm-channel[aria-selected="true"] { transform: none; }
    .vm-channel:not([aria-selected="true"]) .vm-channel-text small { -webkit-line-clamp: 2; }
}

@media (max-width: 575px) {
    .vm-casing { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 20px; }
    .vm-bezel { display: none; }
    .vm-view { grid-template-columns: minmax(0, 1fr); }
    .vm-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; padding: .3rem .7rem; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
    .vm-readout { border-bottom: 0; }
    .vm-screen { grid-template-rows: auto auto 44px; }
    .vm-handle { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-ecg svg, .vm-heart, .vm-channel-bar b { animation: none !important; }
    .vm-video video, .vm-channel { transition: none; }
}

/* ---------- Stories monitor, refined: the clip first ----------
 * The clip takes most of the screen and shows at full brightness (no scan
 * lines, a faint reflection only). The sentence of the moment sits on the
 * clip, on a soft dark fade, and changes with it: clip, sentence and reading
 * cross-fade together. */

.vm { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.vm-screen::after { background: linear-gradient(125deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 30%); }
.vm-view { grid-template-columns: minmax(0, 1fr) 26%; }
.vm-video { aspect-ratio: 4 / 3.4; background: #0b1d3d; }
.vm-video video {
    transform: scale(1.03);
    filter: saturate(1.05);
    transition: opacity .8s ease, transform 1.6s ease;
}
.vm-video video.is-active { transform: scale(1); }

/* The sentence, on the clip */
.vm-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 2.6rem 1.1rem 1rem;
    background: linear-gradient(180deg, rgba(7, 22, 49, 0) 0%, rgba(7, 22, 49, .62) 45%, rgba(7, 22, 49, .88) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .6s ease;
    pointer-events: none;
}
.vm-caption.is-active { opacity: 1; transform: none; transition-delay: .25s; }
.vm-caption-tag {
    justify-self: start;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    backdrop-filter: blur(4px);
}
.vm-caption-text { max-width: 34rem; font-size: clamp(.95rem, 1.4vw, 1.12rem); font-weight: 700; line-height: 1.4; text-wrap: pretty; }

/* Readings: the moment's reading fades in under the pulse */
.vm-readouts { grid-template-rows: auto auto; align-content: start; }
.vm-readout:not(.vm-readout--pulse) {
    grid-row: 2;
    grid-column: 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .5s ease;
}
.vm-readout:not(.vm-readout--pulse).is-active { opacity: 1; transform: none; transition-delay: .2s; }
.vm-readout { border-bottom: 0; }
.vm-readout--pulse { border-bottom: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 991px) {
    .vm { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .vm-view { grid-template-columns: minmax(0, 1fr); }
    .vm-video { aspect-ratio: 1 / 1; }
    .vm-caption { padding: 2rem .8rem .75rem; }
    .vm-caption-text { font-size: .9rem; }
    .vm-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .vm-readout:not(.vm-readout--pulse) { grid-row: 1; grid-column: 2; }
    .vm-readout--pulse { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-video video, .vm-caption, .vm-readout { transition: none !important; transform: none !important; }
}

/* ---------- Stories monitor: the service, the dial and the good-mood button ----------
 * Under the channels, the AIM service behind the moment: what it does and a
 * button to use it, cross-fading with the clip. The dial turns like an old
 * TV and goes to the next moment. The red key gives a "prescription of the
 * day": a warm, funny health tip on the screen, a few hearts floating up and a
 * coral heart trace. A handwritten "Press here!" points at it. */

.vm { align-items: start; }
.vm-side { display: grid; gap: .9rem; min-width: 0; }
.vm-channel { padding: .6rem .85rem .75rem; }
.vm-channel-text small { display: none !important; }
.vm-channel-icon { width: 2.1rem; height: 2.1rem; }

/* The service */
.vm-services { display: grid; }
.vm-service {
    grid-area: 1 / 1;
    display: grid;
    gap: .55rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border: 1px solid #e3e9f1;
    border-radius: 18px;
    background: linear-gradient(160deg, #fff 0%, #f6f9fd 100%);
    box-shadow: 0 16px 34px -28px rgba(11, 42, 91, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .5s ease, visibility 0s linear .5s;
}
.vm-service.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.vm-service h3 { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--navy, #0b2a5b); font-size: 1.12rem; font-weight: 800; }
.vm-service h3::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tone, var(--cobalt, #0b4fb3)); }
.vm-service--tension { --tone: var(--coral-deep, #c4320a); }
.vm-service--pharmacie { --tone: var(--lagoon-deep, #0b7f77); }
.vm-service--pediatrie { --tone: #b86a12; }
.vm-service--maison { --tone: var(--navy, #0b2a5b); }
.vm-service p { margin: 0; color: var(--ink-soft, #4a5870); font-size: .95rem; line-height: 1.6; }
.vm-service-cta {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .45rem;
    margin-top: .2rem;
    padding: .62rem 1rem;
    border-radius: 12px;
    background: var(--tone, var(--cobalt, #0b4fb3));
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.vm-service-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(11, 42, 91, .6); }
.vm-service-cta:focus-visible { outline: 3px solid var(--cobalt, #0b4fb3); outline-offset: 2px; }

/* The dial */
button.vm-knob { padding: 0; border: 0; cursor: pointer; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
button.vm-knob:hover { box-shadow: 0 0 0 1px #aeb7c3, 0 8px 14px -4px rgba(11, 23, 45, .4), inset 0 -2px 3px rgba(11, 23, 45, .12); }
button.vm-knob:focus-visible, .vm-joy-key:focus-visible { outline: 3px solid var(--cobalt, #0b4fb3); outline-offset: 3px; }

/* The red key and its handwritten hint */
.vm-keys { position: relative; }
.vm-joy-key {
    display: block;
    width: 30px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #ff9a85, #e2563c);
    box-shadow: 0 0 0 1px #c9452c, 0 3px 0 #b63c25;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}
.vm-joy-key:hover { filter: brightness(1.05); }
.vm-joy-key:active { transform: translateY(2px); box-shadow: 0 0 0 1px #c9452c, 0 1px 0 #b63c25; }
.vm-keys i:first-of-type { background: linear-gradient(180deg, #f6f8fa, #d4dae2); box-shadow: 0 0 0 1px #c9d0d9; }
.vm-joy-hint {
    position: absolute;
    top: -2.1rem;
    left: 2.6rem;
    width: max-content;
    color: var(--coral-deep, #c4320a);
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-6deg);
    pointer-events: none;
}
.vm-joy-hint::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 1.15rem;
    width: 1.5rem;
    height: 1rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 0 0 0 14px;
    transform: rotate(18deg);
}
.vm.is-joy .vm-joy-hint { opacity: 0; transition: opacity .3s ease; }

/* Phones: the bezel is hidden, a small button in the screen's top bar instead */
.vm-joy-mini {
    display: none;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid rgba(255, 138, 115, .5);
    border-radius: 999px;
    background: rgba(255, 106, 77, .14);
    color: #ffb4a3;
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

/* The prescription of the day, on the screen */
.vm-joy {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: min(23rem, calc(100% - 2rem));
    padding: 1.1rem 1.2rem 1rem;
    border-radius: 18px;
    background: #fffdf8;
    color: var(--ink, #13233f);
    box-shadow: 0 0 0 1px #f1d9a6, 0 24px 50px -18px rgba(0, 0, 0, .6);
    transform: translate(-50%, -50%) rotate(-1.5deg);
    animation: vm-joy-in .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.vm-joy[hidden] { display: none; }
.vm-joy-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; color: var(--coral-deep, #c4320a); font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.vm-joy-text { margin: 0; color: var(--navy, #0b2a5b); font-family: "Caveat", "Segoe Script", cursive; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.vm-joy-sign { margin: .55rem 0 .7rem; color: var(--ink-mute, #6b778c); font-size: .78rem; font-style: italic; }
.vm-joy-close { padding: .45rem .85rem; border: 0; border-radius: 10px; background: var(--lagoon-deep, #0b7f77); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.vm-joy-close:focus-visible { outline: 3px solid var(--cobalt, #0b4fb3); outline-offset: 2px; }

/* Hearts floating up */
.vm-hearts { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.vm-hearts i {
    position: absolute;
    bottom: 3.5rem;
    width: 16px;
    height: 16px;
    background: #ff7a62;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.7-8-11a4.6 4.6 0 0 1 8-2.9A4.6 4.6 0 0 1 20 10c0 6.3-8 11-8 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.7-8-11a4.6 4.6 0 0 1 8-2.9A4.6 4.6 0 0 1 20 10c0 6.3-8 11-8 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    animation: vm-heart-up 2.2s ease-out forwards;
}
.vm-hearts i:nth-child(odd) { background: #ffb4a3; width: 12px; height: 12px; }

/* The heart trace turns coral while the good mood lasts */
.vm.is-joy .vm-ecg path { stroke: #ff7a62; }
.vm.is-joy .vm-ecg svg { animation-duration: 3s; }
.vm.is-joy .vm-heart { background: #ff7a62; }

@keyframes vm-joy-in { from { opacity: 0; transform: translate(-50%, -40%) rotate(-6deg) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-1.5deg) scale(1); } }
@keyframes vm-heart-up {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--drift, 0), -180px) scale(1.15); }
}

@media (max-width: 991px) {
    .vm-joy-hint { display: none; }
}

@media (max-width: 575px) {
    .vm-joy-mini { display: inline-flex; }
    .vm-joy-text { font-size: 1.35rem; }
    .vm-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-joy, .vm-hearts i { animation: none !important; }
    .vm-joy { transform: translate(-50%, -50%); }
    .vm-service, button.vm-knob { transition: none !important; }
}

/* Good-mood hint, final place: under the monitor on the right, its arrow up at the red key */
.vm-device > .vm-joy-hint {
    position: absolute;
    top: auto;
    left: auto;
    right: 1.6rem;
    bottom: -1.2rem;
    z-index: 3;
    display: inline-flex;
    align-items: flex-end;
    gap: .15rem;
    transform: rotate(-4deg);
}
.vm-device > .vm-joy-hint::before { content: none; }
.vm-device > .vm-joy-hint svg { margin-bottom: .55rem; }
.vm-bezel { justify-content: space-between; }