/* CBS Health — the public site.
 *
 * Everything here is drawn from tokens.css. Three exceptions, all deliberate:
 * an rgba() cannot take a token and carry an alpha channel, and the Dock,
 * Medico and Care accents on the /signin doors are literals because they belong
 * to hms.css — they are the edition identities the login screens already wear,
 * and duplicating them as --cbs-* tokens would create a second source of truth
 * that could silently drift from the screens behind the doors.
 *
 * What this stylesheet is deliberately not: dark glossy grounds, neon
 * gradients, floating 3-D brain renders, or a headline set so large it says
 * nothing. Healthcare software has to read as calm authority, and the sections
 * below get their structure from rules, spacing and a single teal accent rather
 * than from decoration.
 *
 * Layout is mobile-first. Every grid is `auto-fit` with a min track, so no
 * breakpoint has to be maintained per component, and Indic scripts — which set
 * taller than Latin — grow their cards instead of overflowing them.
 */

/* ===================================================================
 * Ground
 * =============================================================== */

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

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

body.mkt {
    margin: 0;
    font-family: var(--cbs-font);
    font-size: var(--cbs-text-base);
    line-height: var(--cbs-leading);
    color: var(--cbs-ink);
    background: var(--cbs-surface-raised);
    -webkit-font-smoothing: antialiased;
}

.mkt h1, .mkt h2, .mkt h3, .mkt h4 {
    margin: 0;
    line-height: var(--cbs-leading-tight);
    font-weight: var(--cbs-weight-bold);
    letter-spacing: -0.011em;
    text-wrap: balance;
}

/* Letter-spacing tightening is a Latin typesetting habit. Applied to
   Devanagari, Telugu, Kannada, Tamil or Malayalam it crowds conjuncts. */
html:not([lang="en"]):not([lang="ms"]) .mkt h1,
html:not([lang="en"]):not([lang="ms"]) .mkt h2,
html:not([lang="en"]):not([lang="ms"]) .mkt h3 {
    letter-spacing: 0;
}

.mkt p { margin: 0; }

/* The default link colour, at ZERO specificity.
 *
 * `:where()` is what makes this safe, and it is not a flourish. Written the
 * obvious way, `.mkt a` scores (0,1,1) — one class and one type — which beats
 * every single-class component rule below it at (0,1,0). So `.mkt-btn--primary
 * { color: var(--cbs-ink-inverse) }` lost to it, and every solid button on the
 * site painted its label in --cbs-teal-deep on a --cbs-teal ground: 1.4:1,
 * which is not a low-contrast button but an unreadable one. VKG, 2026-09-13,
 * seeing the site: "What do you call these black patches? eye sour?"
 *
 * A cascade defect is invisible to every test that checks markup, and it had
 * been shipping since the site launched. `:where()` contributes nothing to
 * specificity, so a component that states its own colour now simply wins, and
 * a plain <a> that states nothing still gets teal. tests/gateway/
 * test_marketing_css_cascade.py resolves the winner for each button the way a
 * browser does and fails if any label loses its ground again.
 */
:where(.mkt) :where(a) { color: var(--cbs-teal-deep); text-decoration: none; }
:where(.mkt) :where(a):hover { text-decoration: underline; }

.mkt img, .mkt svg { max-width: 100%; }

/* One focus ring for the whole site. */
.mkt :focus-visible {
    outline: 3px solid var(--cbs-teal);
    outline-offset: 2px;
    border-radius: var(--cbs-radius-sm);
}

/* Keyboard users land here first; everyone else never sees it. */
.mkt-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--cbs-z-overlay);
    padding: var(--cbs-space-3) var(--cbs-space-4);
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
    border-radius: 0 0 var(--cbs-radius) 0;
    font-weight: var(--cbs-weight-semi);
}
.mkt-skip:focus { left: 0; }

.mkt-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================================================
 * Layout primitives
 * =============================================================== */

.mkt-wrap {
    width: 100%;
    max-width: var(--cbs-container);
    margin-inline: auto;
    padding-inline: var(--cbs-gutter);
}

.mkt-wrap--narrow { max-width: var(--cbs-container-narrow); }

.mkt-section { padding-block: var(--cbs-section-y); }

.mkt-section--tint { background: var(--cbs-surface); }

.mkt-section--sunken {
    background: var(--cbs-surface-sunken);
    border-block: 1px solid var(--cbs-line-soft);
}

.mkt-section--navy {
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
}
.mkt-section--navy h2,
.mkt-section--navy h3 { color: var(--cbs-ink-inverse); }
.mkt-section--navy p { color: rgba(255, 255, 255, 0.82); }

/* Section headers. The eyebrow carries the section's job in two words; the
   heading carries the claim; the standfirst qualifies it. */
.mkt-head { max-width: var(--cbs-measure); margin-bottom: var(--cbs-space-6); }
.mkt-head--center { margin-inline: auto; text-align: center; }

.mkt-eyebrow {
    display: block;
    margin-bottom: var(--cbs-space-3);
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cbs-teal-deep);
}

/* Uppercasing and wide tracking do nothing for non-Latin scripts and actively
   damage conjunct forms, so both are dropped outside Latin. */
html:not([lang="en"]):not([lang="ms"]) .mkt-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--cbs-text-base);
}

.mkt-section--navy .mkt-eyebrow { color: var(--cbs-teal-tint); }

.mkt-h2 { font-size: var(--cbs-text-2xl); }
.mkt-h3 { font-size: var(--cbs-text-xl); }

.mkt-standfirst {
    margin-top: var(--cbs-space-4);
    font-size: var(--cbs-text-md);
    color: var(--cbs-ink-muted);
    max-width: var(--cbs-measure);
}
.mkt-head--center .mkt-standfirst { margin-inline: auto; }

.mkt-grid {
    display: grid;
    gap: var(--cbs-space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.mkt-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.mkt-grid--pair {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--cbs-space-7);
    align-items: center;
}

/* ===================================================================
 * Buttons
 * =============================================================== */

.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cbs-space-2);
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--cbs-radius);
    font: inherit;
    font-size: var(--cbs-text-base);
    font-weight: var(--cbs-weight-semi);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cbs-motion), border-color var(--cbs-motion),
                color var(--cbs-motion), box-shadow var(--cbs-motion);
}
.mkt-btn:hover { text-decoration: none; }

.mkt-btn--primary {
    background: var(--cbs-teal);
    border-color: var(--cbs-teal);
    color: var(--cbs-ink-inverse);
}
.mkt-btn--primary:hover {
    background: var(--cbs-teal-deep);
    border-color: var(--cbs-teal-deep);
    color: var(--cbs-ink-inverse);
}

.mkt-btn--navy {
    background: var(--cbs-navy);
    border-color: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
}
.mkt-btn--navy:hover {
    background: var(--cbs-navy-soft);
    border-color: var(--cbs-navy-soft);
    color: var(--cbs-ink-inverse);
}

.mkt-btn--ghost {
    background: transparent;
    border-color: var(--cbs-line);
    color: var(--cbs-navy);
}
.mkt-btn--ghost:hover {
    border-color: var(--cbs-navy);
    background: var(--cbs-navy-tint);
    color: var(--cbs-navy);
}

/* On the navy CTA band the ghost button has to sit on a dark ground. */
.mkt-section--navy .mkt-btn--ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--cbs-ink-inverse);
}
.mkt-section--navy .mkt-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cbs-ink-inverse);
}

.mkt-btn--lg { padding: 0.85rem 1.5rem; font-size: var(--cbs-text-lg); }
.mkt-btn--sm { padding: 0.45rem 0.85rem; font-size: var(--cbs-text-sm); }

.mkt-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cbs-space-3);
    margin-top: var(--cbs-space-6);
}
.mkt-head--center .mkt-btns { justify-content: center; }

/* A text link that behaves like a button's quieter sibling. */
.mkt-link-go {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-2);
    font-weight: var(--cbs-weight-semi);
    color: var(--cbs-teal-deep);
}
.mkt-link-go .mkt-arrow { transition: transform var(--cbs-motion); }
.mkt-link-go:hover .mkt-arrow { transform: translateX(3px); }

/* ===================================================================
 * Header and navigation
 * =============================================================== */

.mkt-header {
    position: sticky;
    top: 0;
    z-index: var(--cbs-z-header);
    background: var(--cbs-surface-raised);
    border-bottom: 1px solid var(--cbs-line-soft);
}

.mkt-header__bar {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-5);
    min-height: 64px;
    padding-block: var(--cbs-space-2);
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-3);
    color: var(--cbs-navy);
    font-weight: var(--cbs-weight-bold);
    text-decoration: none;
    flex: none;
}
.mkt-brand:hover { text-decoration: none; }

/* The mark is an image now, not a lettered tile: no ground and no radius here,
   because the artwork carries its own. Kept at 34px so the header height is
   unchanged. */
.mkt-brand__mark {
    display: block;
    width: 34px;
    height: 34px;
    flex: none;
}

.mkt-brand__name { font-size: var(--cbs-text-lg); letter-spacing: -0.01em; }
.mkt-brand__name span { color: var(--cbs-teal); }

/* --- the nav itself ---------------------------------------------- */

.mkt-nav { margin-inline-start: auto; }

.mkt-nav__list {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkt-nav__item { position: relative; }

.mkt-nav__top {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-2);
    padding: var(--cbs-space-2) var(--cbs-space-3);
    border: 0;
    border-radius: var(--cbs-radius-sm);
    background: transparent;
    font: inherit;
    font-size: var(--cbs-text-base);
    font-weight: var(--cbs-weight-medium);
    color: var(--cbs-ink-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--cbs-motion), background var(--cbs-motion);
}
.mkt-nav__top:hover { color: var(--cbs-navy); background: var(--cbs-navy-tint); text-decoration: none; }

.mkt-nav__top[aria-current="page"],
.mkt-nav__item--active > .mkt-nav__top {
    color: var(--cbs-navy);
    font-weight: var(--cbs-weight-semi);
}

.mkt-nav__caret {
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--cbs-motion);
    flex: none;
}
.mkt-nav__top[aria-expanded="true"] .mkt-nav__caret {
    transform: rotate(-135deg) translate(-3px, -3px);
}

/* The dropdown. It opens on :hover and on :focus-within with no script at all,
   and hms-marketing.js only layers click-toggling and Escape on top — so the
   menu is usable before the bundle arrives and for anyone who never gets it. */
.mkt-menu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    z-index: var(--cbs-z-dropdown);
    min-width: 268px;
    margin: 0;
    padding: var(--cbs-space-2);
    list-style: none;
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    box-shadow: var(--cbs-shadow-lg);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--cbs-motion), transform var(--cbs-motion),
                visibility var(--cbs-motion);
}

.mkt-nav__item:hover > .mkt-menu,
.mkt-nav__item:focus-within > .mkt-menu,
.mkt-nav__top[aria-expanded="true"] + .mkt-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mkt-menu__link {
    display: block;
    padding: var(--cbs-space-3);
    border-radius: var(--cbs-radius-sm);
    color: var(--cbs-navy);
    text-decoration: none;
}
.mkt-menu__link:hover { background: var(--cbs-navy-tint); text-decoration: none; }

/* A menu row with a mark: the icon in its own column, the label and note
   stacked beside it. Grid rather than flex so the note aligns under the label
   and not under the icon. */
.mkt-menu__link--marked {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: var(--cbs-space-3);
    align-items: center;
}
.mkt-menu__link--marked .mkt-menu__title,
.mkt-menu__link--marked .mkt-menu__note { grid-column: 2; }
.mkt-menu__link--marked .mkt-menu__mark { grid-row: span 2; }

.mkt-menu__mark { display: block; width: 28px; height: 28px; }

.mkt-menu__title {
    display: block;
    font-weight: var(--cbs-weight-semi);
    font-size: var(--cbs-text-base);
}
.mkt-menu__note {
    display: block;
    margin-top: 2px;
    font-size: var(--cbs-text-sm);
    line-height: 1.5;
    color: var(--cbs-ink-muted);
}

/* --- header right-hand side -------------------------------------- */

.mkt-header__cta {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    flex: none;
}

.mkt-header__signin {
    font-weight: var(--cbs-weight-semi);
    color: var(--cbs-navy);
    white-space: nowrap;
}

/* Hamburger. Hidden on desktop, and it is a real <button> so it is reachable
   by keyboard and announced by a screen reader. */
.mkt-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    cursor: pointer;
}
.mkt-burger span {
    display: block;
    height: 2px;
    background: var(--cbs-navy);
    border-radius: 2px;
    transition: transform var(--cbs-motion), opacity var(--cbs-motion);
}
.mkt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mkt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- narrow viewports -------------------------------------------- */

@media (max-width: 940px) {
    .mkt-burger { display: flex; }

    .mkt-header__signin { display: none; }

    .mkt-nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: var(--cbs-space-4) var(--cbs-gutter) var(--cbs-space-6);
        background: var(--cbs-surface-raised);
        border-bottom: 1px solid var(--cbs-line);
        box-shadow: var(--cbs-shadow-lg);
    }

    /* Closed by default on mobile. The [hidden] is set by the route's markup,
       not by script, so a blocked bundle leaves the menu shut rather than
       leaving the whole nav dumped open above the page. */
    .mkt-nav[hidden] { display: none; }

    .mkt-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .mkt-nav__top {
        width: 100%;
        justify-content: space-between;
        padding: var(--cbs-space-4) var(--cbs-space-2);
        font-size: var(--cbs-text-lg);
        color: var(--cbs-navy);
        border-bottom: 1px solid var(--cbs-line-soft);
        border-radius: 0;
    }

    /* Stacked and always open on mobile: a hover menu is meaningless on a
       touch screen, and a second tap level is one the visitor did not ask for. */
    .mkt-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: var(--cbs-space-2) 0 var(--cbs-space-4) var(--cbs-space-4);
        border-bottom: 1px solid var(--cbs-line-soft);
    }
    .mkt-nav__caret { display: none; }

    .mkt-nav__mobile-cta {
        display: flex;
        flex-direction: column;
        gap: var(--cbs-space-3);
        margin-top: var(--cbs-space-5);
    }
}

@media (min-width: 941px) {
    .mkt-nav[hidden] { display: block; }
    .mkt-nav__mobile-cta { display: none; }
}

/* ===================================================================
 * Hero
 * =============================================================== */

.mkt-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) var(--cbs-section-y);
    background:
        radial-gradient(1100px 460px at 78% -8%, rgba(0, 128, 128, 0.09), transparent 62%),
        linear-gradient(180deg, var(--cbs-surface) 0%, var(--cbs-surface-raised) 78%);
}

.mkt-hero__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1000px) {
    .mkt-hero__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

.mkt-hero__copy { max-width: 40rem; }

.mkt-hero h1 {
    font-size: var(--cbs-text-3xl);
    max-width: var(--cbs-measure-narrow);
}

.mkt-hero__sub {
    margin-top: var(--cbs-space-5);
    font-size: var(--cbs-text-lg);
    color: var(--cbs-ink-muted);
    max-width: 54ch;
}

/* The line under the buttons that says what CBS will not claim. It belongs in
   the hero, not in a footnote: the first promise a clinical tool makes should
   be about its limits. */
.mkt-hero__caveat {
    display: flex;
    align-items: flex-start;
    gap: var(--cbs-space-3);
    margin-top: var(--cbs-space-6);
    padding-top: var(--cbs-space-5);
    border-top: 1px solid var(--cbs-line);
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-faint);
    max-width: 52ch;
}
.mkt-hero__caveat svg { flex: none; margin-top: 2px; }

/* ===================================================================
 * Product preview — a real rendering of the real layout
 *
 * Not a screenshot and not a stock photo: HTML and CSS built from the same
 * tokens as the product, so it cannot drift into showing a UI that does not
 * exist. Everything inside is synthetic and labelled as such.
 * =============================================================== */

.mkt-preview {
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-lg);
    background: var(--cbs-surface-raised);
    box-shadow: var(--cbs-shadow-lg);
    overflow: hidden;
}

.mkt-preview__chrome {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    padding: var(--cbs-space-3) var(--cbs-space-4);
    background: var(--cbs-navy);
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--cbs-text-xs);
}
.mkt-preview__dots { display: flex; gap: 6px; }
.mkt-preview__dots i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}
.mkt-preview__path {
    letter-spacing: 0.04em;
    font-weight: var(--cbs-weight-medium);
}
.mkt-preview__synthetic {
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: var(--cbs-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 11px;
    white-space: nowrap;
}

.mkt-preview__body { padding: var(--cbs-space-4); background: var(--cbs-surface); }

.mkt-preview__metrics {
    display: grid;
    gap: var(--cbs-space-3);
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    margin-bottom: var(--cbs-space-4);
}

.mkt-metric {
    padding: var(--cbs-space-3);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line-soft);
    border-radius: var(--cbs-radius-sm);
}
.mkt-metric__n {
    display: block;
    font-family: var(--cbs-font-mono);
    font-size: var(--cbs-text-xl);
    font-weight: var(--cbs-weight-bold);
    line-height: 1.1;
    color: var(--cbs-navy);
    font-variant-numeric: tabular-nums;
}
.mkt-metric__l {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cbs-ink-faint);
}
.mkt-metric--warn .mkt-metric__n { color: var(--cbs-warn); }
.mkt-metric--alert .mkt-metric__n { color: var(--cbs-alert); }

/* The queue table. Reduced to five columns, because a preview that tries to
   show all fourteen shows none of them legibly. */
.mkt-preview__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line-soft);
    border-radius: var(--cbs-radius-sm);
    overflow: hidden;
    font-size: var(--cbs-text-xs);
}
.mkt-preview__table th {
    padding: var(--cbs-space-2) var(--cbs-space-3);
    background: var(--cbs-surface-sunken);
    color: var(--cbs-ink-faint);
    font-weight: var(--cbs-weight-semi);
    font-size: 11px;
    text-align: start;
    white-space: nowrap;
}
.mkt-preview__table td {
    padding: var(--cbs-space-3);
    border-top: 1px solid var(--cbs-line-soft);
    color: var(--cbs-ink-muted);
    vertical-align: middle;
}
.mkt-preview__table td:first-child {
    color: var(--cbs-navy);
    font-weight: var(--cbs-weight-semi);
}
.mkt-preview__id {
    font-family: var(--cbs-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The table is the one thing here that cannot compress further, so it scrolls
   inside its own box rather than pushing the page sideways. */
.mkt-preview__scroll { overflow-x: auto; }

.mkt-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cbs-radius-pill);
    font-size: 11px;
    font-weight: var(--cbs-weight-semi);
    white-space: nowrap;
}
/* Badges are set at 11px, so their labels take the -ink variants: the plain
   status hues do not reach 4.5:1 on their own tints at that size. */
.mkt-badge--ok    { background: var(--cbs-ok-tint);    color: var(--cbs-ok-ink); }
.mkt-badge--warn  { background: var(--cbs-warn-tint);  color: var(--cbs-warn-ink); }
.mkt-badge--alert { background: var(--cbs-alert-tint); color: var(--cbs-alert-ink); }
.mkt-badge--info  { background: var(--cbs-info-tint);  color: var(--cbs-teal-deep); }

/* The AI provenance strip that sits under any synthesised block. */
.mkt-ai-note {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-2);
    margin-top: var(--cbs-space-3);
    padding: var(--cbs-space-2) var(--cbs-space-3);
    background: var(--cbs-teal-tint);
    border: 1px solid var(--cbs-teal);
    border-radius: var(--cbs-radius-sm);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cbs-teal-deep);
}
.mkt-ai-note svg { flex: none; }

/* ===================================================================
 * Cards
 * =============================================================== */

.mkt-card {
    display: flex;
    flex-direction: column;
    gap: var(--cbs-space-3);
    padding: var(--cbs-space-5);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-lg);
    box-shadow: var(--cbs-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--cbs-motion), box-shadow var(--cbs-motion),
                transform var(--cbs-motion);
}

a.mkt-card:hover {
    border-color: var(--cbs-teal);
    box-shadow: var(--cbs-shadow);
    transform: translateY(-2px);
    text-decoration: none;
}

.mkt-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--cbs-radius);
    background: var(--cbs-teal-tint);
    color: var(--cbs-teal-deep);
    flex: none;
}

.mkt-card h3 { font-size: var(--cbs-text-lg); color: var(--cbs-navy); }

.mkt-card p {
    flex: 1;
    font-size: var(--cbs-text-base);
    color: var(--cbs-ink-muted);
}

.mkt-card__foot {
    margin-top: var(--cbs-space-2);
    font-size: var(--cbs-text-base);
}

/* A card variant with the section colour as a top rule — used where several
   cards sit side by side and a full colour block would compete. */
.mkt-card--ruled { position: relative; overflow: hidden; padding-top: var(--cbs-space-6); }
.mkt-card--ruled::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cbs-teal);
}

/* ===================================================================
 * Step flow — Capture, Organize, Understand, Review, Act
 * =============================================================== */

.mkt-steps {
    display: grid;
    gap: var(--cbs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    counter-reset: mkt-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-step {
    position: relative;
    padding: var(--cbs-space-5) var(--cbs-space-4);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    counter-increment: mkt-step;
}

.mkt-step__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: var(--cbs-space-3);
    border-radius: 50%;
    background: var(--cbs-navy);
    color: var(--cbs-ink-inverse);
    font-family: var(--cbs-font-mono);
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-bold);
}

.mkt-step h3 {
    font-size: var(--cbs-text-base);
    color: var(--cbs-navy);
    margin-bottom: var(--cbs-space-2);
}
.mkt-step p { font-size: var(--cbs-text-sm); line-height: 1.6; color: var(--cbs-ink-muted); }

/* The connector between steps. Only drawn wide, where the steps are actually
   in a row; stacked on mobile an arrow pointing right is a lie. */
@media (min-width: 1000px) {
    .mkt-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(var(--cbs-space-5) + 15px);
        inset-inline-end: calc(var(--cbs-space-4) * -1 - 1px);
        width: var(--cbs-space-4);
        height: 2px;
        background: var(--cbs-line);
    }
}

/* ===================================================================
 * The information-flow diagram
 *
 * Patient data → engine → clinician → continuous care. Four stages, and the
 * clinician stage is visually the heaviest because that is the claim: the
 * software converges on a person, it does not route around one.
 * =============================================================== */

.mkt-flow {
    display: grid;
    gap: var(--cbs-space-3);
    max-width: 620px;
    margin-inline: auto;
}

.mkt-flow__stage {
    padding: var(--cbs-space-5);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius);
    background: var(--cbs-surface-raised);
    text-align: center;
}

.mkt-flow__stage h3 {
    font-size: var(--cbs-text-base);
    color: var(--cbs-navy);
    margin-bottom: var(--cbs-space-2);
}
.mkt-flow__stage p { font-size: var(--cbs-text-sm); color: var(--cbs-ink-muted); }

.mkt-flow__stage--engine {
    border-color: var(--cbs-teal);
    background: var(--cbs-teal-tint);
}
.mkt-flow__stage--engine h3 { color: var(--cbs-teal-deep); }
.mkt-flow__stage--engine p { color: var(--cbs-teal-deep); }

.mkt-flow__stage--clinician {
    border-color: var(--cbs-navy);
    background: var(--cbs-navy);
}
.mkt-flow__stage--clinician h3 { color: var(--cbs-ink-inverse); }
.mkt-flow__stage--clinician p { color: rgba(255, 255, 255, 0.82); }

.mkt-flow__arrow {
    justify-self: center;
    color: var(--cbs-ink-faint);
    line-height: 0;
}

/* ===================================================================
 * Persona / solutions cards
 * =============================================================== */

.mkt-persona { gap: var(--cbs-space-2); }

.mkt-persona__who {
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cbs-teal-deep);
}
html:not([lang="en"]):not([lang="ms"]) .mkt-persona__who {
    text-transform: none;
    letter-spacing: 0;
}

.mkt-persona ul {
    margin: var(--cbs-space-2) 0 0;
    padding-inline-start: var(--cbs-space-5);
    font-size: var(--cbs-text-base);
    color: var(--cbs-ink-muted);
}
.mkt-persona li { margin-bottom: var(--cbs-space-2); }
.mkt-persona li::marker { color: var(--cbs-teal); }

/* ===================================================================
 * The worked clinical journey
 * =============================================================== */

.mkt-journey {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--cbs-measure);
    margin-inline: auto;
}

.mkt-journey__item {
    position: relative;
    padding: 0 0 var(--cbs-space-6) var(--cbs-space-7);
    border-inline-start: 2px solid var(--cbs-line);
}
.mkt-journey__item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }

.mkt-journey__dot {
    position: absolute;
    inset-inline-start: -9px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cbs-surface-raised);
    border: 3px solid var(--cbs-teal);
}
.mkt-journey__item:first-child .mkt-journey__dot { border-color: var(--cbs-navy); }

.mkt-journey__when {
    display: block;
    font-family: var(--cbs-font-mono);
    font-size: var(--cbs-text-xs);
    letter-spacing: 0.03em;
    color: var(--cbs-ink-faint);
    margin-bottom: var(--cbs-space-2);
}

.mkt-journey__item h3 {
    font-size: var(--cbs-text-base);
    color: var(--cbs-navy);
    margin-bottom: var(--cbs-space-2);
}
.mkt-journey__item p { color: var(--cbs-ink-muted); }

/* ===================================================================
 * Trust
 * =============================================================== */

.mkt-trust {
    display: grid;
    gap: var(--cbs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.mkt-trust__item {
    padding: var(--cbs-space-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--cbs-radius);
    background: rgba(255, 255, 255, 0.05);
}
.mkt-trust__item h3 {
    font-size: var(--cbs-text-base);
    margin-bottom: var(--cbs-space-2);
}
.mkt-trust__item p { font-size: var(--cbs-text-sm); }

/* A claim that is aspirational rather than achieved gets said so, in the
   markup and in the styling, rather than being quietly implied. */
.mkt-status {
    display: inline-block;
    margin-bottom: var(--cbs-space-3);
    padding: 2px 9px;
    border-radius: var(--cbs-radius-pill);
    font-size: 11px;
    font-weight: var(--cbs-weight-semi);
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.14);
    color: var(--cbs-ink-inverse);
}
.mkt-status--live { background: var(--cbs-ok); }
.mkt-status--planned { background: rgba(255, 255, 255, 0.14); }

/* On light grounds the same component needs different values. */
.mkt-section:not(.mkt-section--navy) .mkt-status {
    background: var(--cbs-navy-tint);
    color: var(--cbs-navy);
}
.mkt-section:not(.mkt-section--navy) .mkt-status--live {
    background: var(--cbs-ok-tint);
    color: var(--cbs-ok-ink);
}

/* "Why CBS" cards on the homepage: what is in place, then what is not yet. */
.mkt-diff__state {
    margin: var(--cbs-space-3) 0 0;
    padding-top: var(--cbs-space-3);
    border-top: 1px solid var(--cbs-line-soft);
    font-size: var(--cbs-text-sm);
}
.mkt-diff__state dt {
    font-size: 11px;
    font-weight: var(--cbs-weight-semi);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cbs-navy);
}
.mkt-diff__state dd { margin: 2px 0 var(--cbs-space-2); }
.mkt-diff__state dd:last-child { margin-bottom: 0; }

/* ===================================================================
 * Definition rows — used by /responsible-ai and /security
 * =============================================================== */

.mkt-defs { display: grid; gap: 0; margin: 0; }

.mkt-def {
    display: grid;
    gap: var(--cbs-space-2) var(--cbs-space-6);
    padding-block: var(--cbs-space-5);
    border-top: 1px solid var(--cbs-line);
}
.mkt-def:last-child { border-bottom: 1px solid var(--cbs-line); }

@media (min-width: 760px) {
    .mkt-def { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
}

.mkt-def dt {
    font-weight: var(--cbs-weight-semi);
    font-size: var(--cbs-text-lg);
    color: var(--cbs-navy);
    line-height: var(--cbs-leading-tight);
}
.mkt-def dd { margin: 0; color: var(--cbs-ink-muted); }
.mkt-def dd + dd { margin-top: var(--cbs-space-3); }

/* ===================================================================
 * Callouts
 * =============================================================== */

.mkt-callout {
    display: flex;
    gap: var(--cbs-space-4);
    padding: var(--cbs-space-5);
    border-radius: var(--cbs-radius);
    border: 1px solid var(--cbs-teal);
    background: var(--cbs-teal-tint);
    color: var(--cbs-teal-deep);
}
.mkt-callout svg { flex: none; margin-top: 3px; }
.mkt-callout strong { display: block; margin-bottom: var(--cbs-space-2); }
.mkt-callout p { font-size: var(--cbs-text-base); color: inherit; }

.mkt-callout--warn {
    border-color: var(--cbs-warn);
    background: var(--cbs-warn-tint);
    color: var(--cbs-warn-ink);
}

/* ===================================================================
 * Prose — for long-form pages
 * =============================================================== */

.mkt-prose { max-width: var(--cbs-measure); }
.mkt-prose > * + * { margin-top: var(--cbs-space-4); }
.mkt-prose h2 { margin-top: var(--cbs-space-7); font-size: var(--cbs-text-xl); color: var(--cbs-navy); }
.mkt-prose h3 { margin-top: var(--cbs-space-6); font-size: var(--cbs-text-lg); color: var(--cbs-navy); }
.mkt-prose p { color: var(--cbs-ink-muted); }
.mkt-prose ul, .mkt-prose ol { padding-inline-start: var(--cbs-space-5); color: var(--cbs-ink-muted); }
.mkt-prose li + li { margin-top: var(--cbs-space-2); }
.mkt-prose li::marker { color: var(--cbs-teal); }
.mkt-prose code {
    font-family: var(--cbs-font-mono);
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cbs-surface-sunken);
    color: var(--cbs-navy);
}

/* ===================================================================
 * Page header — the band at the top of an interior page
 * =============================================================== */

.mkt-pagehead {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--cbs-surface);
    border-bottom: 1px solid var(--cbs-line-soft);
}
.mkt-pagehead h1 { font-size: var(--cbs-text-2xl); max-width: var(--cbs-measure-narrow); }
.mkt-pagehead .mkt-standfirst { font-size: var(--cbs-text-lg); }

.mkt-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cbs-space-2);
    margin: 0 0 var(--cbs-space-4);
    padding: 0;
    list-style: none;
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-faint);
}
.mkt-crumb li::after { content: "/"; margin-inline-start: var(--cbs-space-2); color: var(--cbs-line); }
.mkt-crumb li:last-child::after { content: none; }
.mkt-crumb a { color: var(--cbs-ink-muted); }

/* ===================================================================
 * Form — the demo request
 * =============================================================== */

.mkt-form {
    display: grid;
    gap: var(--cbs-space-4);
    padding: var(--cbs-space-6);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-lg);
    box-shadow: var(--cbs-shadow-sm);
}

@media (min-width: 640px) {
    .mkt-form__row {
        display: grid;
        gap: var(--cbs-space-4);
        grid-template-columns: 1fr 1fr;
    }
}

.mkt-field { display: grid; gap: var(--cbs-space-2); }

.mkt-field label {
    font-size: var(--cbs-text-sm);
    font-weight: var(--cbs-weight-semi);
    color: var(--cbs-navy);
}
.mkt-field__hint { font-size: var(--cbs-text-xs); color: var(--cbs-ink-faint); }

.mkt-field input,
.mkt-field select,
.mkt-field textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    font: inherit;
    font-size: var(--cbs-text-base);
}
.mkt-field textarea { min-height: 120px; resize: vertical; }

.mkt-field input:focus,
.mkt-field select:focus,
.mkt-field textarea:focus {
    outline: none;
    border-color: var(--cbs-teal);
    box-shadow: 0 0 0 3px var(--cbs-teal-tint);
}

.mkt-form__consent {
    display: flex;
    gap: var(--cbs-space-3);
    align-items: flex-start;
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-muted);
}
.mkt-form__consent input { margin-top: 4px; flex: none; }

/* ===================================================================
 * Footer
 * =============================================================== */

.mkt-footer {
    background: var(--cbs-navy-deep);
    color: rgba(255, 255, 255, 0.72);
    padding-block: var(--cbs-space-8) var(--cbs-space-5);
    font-size: var(--cbs-text-sm);
}

.mkt-footer__grid {
    display: grid;
    gap: var(--cbs-space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    padding-bottom: var(--cbs-space-7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mkt-footer__brand { grid-column: 1 / -1; max-width: 34ch; }
@media (min-width: 900px) { .mkt-footer__brand { grid-column: auto; } }

.mkt-footer__brand .mkt-brand { color: var(--cbs-ink-inverse); margin-bottom: var(--cbs-space-3); }
.mkt-footer__brand .mkt-brand__mark { background: var(--cbs-teal); }

.mkt-footer h2 {
    margin-bottom: var(--cbs-space-3);
    font-size: var(--cbs-text-xs);
    font-weight: var(--cbs-weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cbs-ink-inverse);
}
html:not([lang="en"]):not([lang="ms"]) .mkt-footer h2 {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--cbs-text-sm);
}

.mkt-footer ul { margin: 0; padding: 0; list-style: none; }
.mkt-footer li + li { margin-top: var(--cbs-space-2); }
.mkt-footer a { color: rgba(255, 255, 255, 0.72); }
.mkt-footer a:hover { color: var(--cbs-ink-inverse); }

.mkt-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cbs-space-3) var(--cbs-space-5);
    align-items: center;
    padding-top: var(--cbs-space-5);
    font-size: var(--cbs-text-xs);
    color: rgba(255, 255, 255, 0.5);
}
.mkt-footer__legal p { max-width: var(--cbs-measure); }

/* The standing credit line. Given its own weight rather than being dropped in
   beside the copyright: it names who designed the product, who implemented it
   and who holds the licence, and those are three different parties. A line
   nobody can read is the same as a line that is not there. */
.mkt-footer__credit {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
    color: rgba(255, 255, 255, 0.72);
}

/* A white chip, because the agency's logo is drawn for a white ground and this
   footer is navy. Sized to the line rather than to the logo: it accompanies
   the credit, it does not compete with it. */
.mkt-footer__agency {
    display: grid;
    place-items: center;
    flex: none;
    padding: 5px 7px;
    border-radius: var(--cbs-radius-sm);
    background: #FFFFFF;
}
.mkt-footer__agency img { display: block; height: 34px; width: auto; }

/* The regulatory line. Not small print hidden in a corner — a medical
   decision-support tool has to say what it is not, where people will read it. */
.mkt-footer__disclosure {
    grid-column: 1 / -1;
    margin-top: var(--cbs-space-5);
    padding: var(--cbs-space-4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--cbs-radius-sm);
    font-size: var(--cbs-text-xs);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.66);
}

/* ===================================================================
 * The sign-in chooser at /signin
 * =============================================================== */

.mkt-doors {
    display: grid;
    gap: var(--cbs-space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    align-items: stretch;
}

.mkt-door {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cbs-space-3);
    padding: var(--cbs-space-6) var(--cbs-space-5) var(--cbs-space-5);
    background: var(--cbs-surface-raised);
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-lg);
    box-shadow: var(--cbs-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--cbs-motion), box-shadow var(--cbs-motion),
                transform var(--cbs-motion);
}
.mkt-door:hover {
    border-color: var(--edition);
    box-shadow: var(--cbs-shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
}
.mkt-door::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--edition);
}

/* The edition hues hms.css gives each door, so the chooser and the screens
   behind it are recognisably one product. Counter is warm on purpose: a shop
   is a different kind of place from a ward, and the difference should be
   readable at a glance. */
.mkt-door--dock    { --edition: #005B8F; }
.mkt-door--medico  { --edition: #5A29B8; }
.mkt-door--care    { --edition: #0A6151; }
.mkt-door--counter { --edition: #8F4C12; }

/* The module's app icon on its door. Same mark, same size discipline as the
   cards and the sign-in chooser: one image per module across the whole site,
   so the brand impression is cumulative rather than four separate ones. */
.mkt-door__icon { display: block; width: 40px; height: 40px; }

.mkt-door h3 { font-size: var(--cbs-text-xl); color: var(--edition); }
.mkt-door p { flex: 1; color: var(--cbs-ink-muted); }

.mkt-door__go {
    display: inline-flex;
    align-items: center;
    gap: var(--cbs-space-2);
    margin-top: var(--cbs-space-2);
    font-weight: var(--cbs-weight-semi);
    color: var(--edition);
}
.mkt-door:hover .mkt-arrow { transform: translateX(3px); }
.mkt-door .mkt-arrow { transition: transform var(--cbs-motion); }

.mkt-lang {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-2);
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-muted);
}
.mkt-lang select {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--cbs-line);
    border-radius: var(--cbs-radius-sm);
    background: var(--cbs-surface-raised);
    color: var(--cbs-ink);
    /* Nine languages in their own scripts: inherit the page stack rather than a
       form-control default that may not carry them. */
    font-family: inherit;
    font-size: var(--cbs-text-sm);
}

/* ===================================================================
 * Motion preferences
 * =============================================================== */

@media (prefers-reduced-motion: reduce) {
    .mkt *,
    .mkt *::before,
    .mkt *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    a.mkt-card:hover,
    .mkt-door:hover { transform: none; }
}

/* ===================================================================
 * Print — a demo request often ends as a PDF on somebody's desk
 * =============================================================== */

/* ===================================================================
 * Print / PDF export
 *
 * A design review of this site is usually read as a PDF, so this is a real
 * output, not a courtesy. The first version of this block was four lines and
 * produced three defects a reviewer found before we did.
 *
 * The important one: browsers do not print background colours by default. Any
 * rule that pairs a dark ground with light text — the navy CTA band, the
 * footer, the preview chrome, the step numerals, the badges — therefore prints
 * as white ink on white paper. The content is not missing, it is invisible,
 * which is worse: the page looks blank rather than broken.
 *
 * So every dark surface is inverted to ink-on-paper here rather than being
 * asked to print its background. `print-color-adjust: exact` is deliberately
 * not used: it depends on a browser setting the reader controls, and a design
 * document must not need one.
 * =============================================================== */

@media print {
    /* Screen chrome that means nothing on paper. `.mkt-cta` goes as a whole
       block: hiding only its buttons, as this once did, left the heading
       "Ready to streamline your clinical workflow?" stranded on its own page. */
    .mkt-header,
    .mkt-footer,
    .mkt-skip,
    .mkt-cta,
    .mkt-btns,
    .mkt-nav,
    .mkt-burger { display: none !important; }

    /* Both selectors: the site sets `body.mkt`, and the offline preview build
       rewrites that to bare `body` because the class comes from the Jinja
       template rather than the file. Naming only one of them is how this block
       came to apply to the site and not to the PDF anyone was actually
       reading. */
    body,
    body.mkt {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .mkt-section { padding-block: 1.2rem; }

    /* --- dark surfaces, inverted --- */

    .mkt-section--navy,
    .mkt-section--tint,
    .mkt-section--sunken {
        background: #fff;
        border-top: 1px solid #999;
    }
    .mkt-section--navy h2,
    .mkt-section--navy h3,
    .mkt-section--navy p,
    .mkt-section--navy .mkt-eyebrow { color: #000; }

    .mkt-trust__item {
        background: #fff;
        border: 1px solid #999;
    }

    .mkt-status {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000;
    }

    .mkt-preview__chrome {
        background: #fff;
        color: #000;
        border-bottom: 1px solid #999;
    }
    .mkt-preview__synthetic { background: #fff; border: 1px solid #000; }

    .mkt-step__n,
    .mkt-brand__mark,
    .mkt-flow__stage--clinician {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .mkt-flow__stage--clinician h3,
    .mkt-flow__stage--clinician p { color: #000; }

    .mkt-badge,
    .mkt-ai-note,
    .mkt-callout {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #666;
    }

    .mkt-card,
    .mkt-preview { box-shadow: none; border: 1px solid #999; }

    /* --- pagination --- */

    /* A heading alone at the foot of a page, with its section overleaf, is the
       other defect the reviewer saw. */
    h1, h2, h3, .mkt-eyebrow {
        break-after: avoid-page;
        page-break-after: avoid;
    }
    h1, h2, h3 {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .mkt-card,
    .mkt-step,
    .mkt-def,
    .mkt-callout,
    .mkt-trust__item,
    .mkt-journey__item,
    .mkt-flow__stage,
    .mkt-preview,
    figure,
    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Grids become a single column: three cards across a portrait page are
       three unreadable columns. */
    .mkt-grid,
    .mkt-grid--wide,
    .mkt-grid--pair,
    .mkt-steps,
    .mkt-trust,
    .mkt-doors {
        display: block;
    }
    .mkt-grid > *,
    .mkt-steps > *,
    .mkt-trust > *,
    .mkt-doors > * { margin-bottom: 0.8rem; }

    /* The connector arrow between steps points right; stacked, it lies. */
    .mkt-step:not(:last-child)::after { display: none; }

    /* Give a reader the destination of a link they cannot click — but only for
       real pages, not for every in-page anchor. */
    .mkt-prose a[href^="/"]::after {
        content: " (cbshealth.in" attr(href) ")";
        font-size: 0.85em;
        color: #444;
    }

    a { color: #000; text-decoration: underline; }
}

/* ===================================================================
 * Layout helpers
 *
 * A small, closed set. These exist because the alternative was a style
 * attribute on the element, and an inline `padding` is exactly the drift a
 * token system is supposed to prevent: it is invisible to a search for the
 * rule, and it cannot be changed for the whole site at once.
 * =============================================================== */

/* A measure-limited column INSIDE an existing .mkt-wrap, which is already
   supplying the gutter. Where the narrow column is the section's only child,
   use `.mkt-wrap .mkt-wrap--narrow` instead — nesting one wrap inside another
   applies the gutter twice. */
.mkt-narrow {
    max-width: var(--cbs-container-narrow);
    margin-inline: auto;
}

/* Bulleted lists outside .mkt-prose, which supplies its own indent. */
.mkt-list {
    padding-inline-start: var(--cbs-space-5);
    color: var(--cbs-ink-muted);
}
.mkt-list li + li { margin-top: var(--cbs-space-2); }
.mkt-list li::marker { color: var(--cbs-teal); }

/* A definition row that stays one column at every width. Used where the term
   is a step in a sequence and the two-column split would break the reading
   order. */
.mkt-def--stacked { grid-template-columns: none; }

/* Grids whose columns are different heights and should top-align rather than
   centre on each other. */
.mkt-grid--top { align-items: start; }

.mkt-btns--center { justify-content: center; }
.mkt-btns--flush { margin-top: 0; }

/* Vertical separation between a section's own content and a block appended
   after it. Named rather than inlined so the rhythm stays adjustable. */
.mkt-after { margin-top: var(--cbs-space-6); }
.mkt-after--wide { margin-top: var(--cbs-space-7); }
.mkt-before { margin-bottom: var(--cbs-space-6); }

.mkt-measure { max-width: var(--cbs-measure); }

.mkt-mono { font-family: var(--cbs-font-mono); }

.mkt-lang--end { justify-content: flex-end; margin-bottom: var(--cbs-space-4); }

/* ===================================================================
 * Polish — accent, depth and motion
 *
 * Added 2026-09-09. The brief was "drab colouring schemes ... some buzz and
 * trendy features (not annoying)", and the second half is the harder
 * constraint. What is deliberately NOT here, because each is the annoyance:
 * parallax, auto-advancing carousels, scroll-jacking, counters that tick up,
 * entrance animation on every element, and anything that moves while being
 * read.
 *
 * What is here moves only on hover, focus, or first entry into the viewport,
 * once, and never again. Every rule is inert under prefers-reduced-motion,
 * which is honoured at the foot of this block rather than per-rule.
 * =============================================================== */

/* --- the accent, used sparingly ------------------------------------- */

/* A short amber rule under a section eyebrow. This is the whole of the
   accent's job on a text page: mark where a section starts. */
.mkt-eyebrow {
    position: relative;
    padding-bottom: var(--cbs-space-2);
}
.mkt-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--cbs-amber);
    border-radius: 2px;
}
.mkt-head--center .mkt-eyebrow::after { left: 50%; transform: translateX(-50%); }

/* On the navy band the amber is too dark to read as an accent. */
.mkt-section--navy .mkt-eyebrow::after { background: var(--cbs-teal-tint); }

/* --- depth on the things that are actually clickable ----------------- */

.mkt-card,
.mkt-door {
    transition: transform var(--cbs-motion),
                box-shadow var(--cbs-motion),
                border-color var(--cbs-motion);
}
.mkt-card:hover,
.mkt-door:hover {
    transform: translateY(-2px);
    box-shadow: var(--cbs-shadow-hover);
    border-color: var(--cbs-teal-tint);
}

/* A link that is a whole card gets the accent edge on hover, so the pointer
   has somewhere to land visually before the page changes. */
a.mkt-card { position: relative; overflow: hidden; }
a.mkt-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cbs-amber);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--cbs-motion);
}
a.mkt-card:hover::before { transform: scaleY(1); transform-origin: top; }

/* --- the four modules -------------------------------------------------
   Dock, Medico, Care and Counter are the four things an establishment buys,
   and they are the only cards on this site that carry a mark of their own.
   Everything here is a variation on .mkt-card rather than a second card
   component: one hover, one radius, one shadow across the whole site. */

.mkt-module-card { gap: var(--cbs-space-3); }

.mkt-module-card__head {
    display: flex;
    align-items: center;
    gap: var(--cbs-space-3);
}

/* The mark is the app icon PNG itself, which already carries its own navy
   ground and rounded corners — so no background and no radius here, or the
   card would draw a second tile behind the first. A capability card keeps its
   teal-tinted line glyph, and that difference is the whole signal: a module is
   a thing you install and sign in to, a capability is something the software
   does. */
.mkt-module-card__mark {
    width: 46px;
    height: 46px;
    flex: none;
}

.mkt-module-card__name { display: flex; flex-direction: column; }
.mkt-module-card__name strong {
    font-size: var(--cbs-text-lg);
    color: var(--cbs-navy);
    line-height: 1.25;
}

.mkt-module-card__who {
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-muted);
}

.mkt-module-card .mkt-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cbs-space-2);
}

.mkt-module-card__count {
    font-size: var(--cbs-text-sm);
    font-family: var(--cbs-font-mono);
    color: var(--cbs-ink-muted);
}

/* --- a module page head ---------------------------------------------- */

.mkt-module-head {
    display: flex;
    align-items: flex-start;
    gap: var(--cbs-space-4);
}

.mkt-module-head__mark {
    width: 62px;
    height: 62px;
    flex: none;
}

.mkt-module-head__who {
    display: flex;
    align-items: flex-start;
    gap: var(--cbs-space-2);
    margin-top: var(--cbs-space-3);
    max-width: var(--cbs-measure);
    font-size: var(--cbs-text-base);
    color: var(--cbs-ink-muted);
}

.mkt-module-head__who svg { flex: none; margin-top: 3px; color: var(--cbs-teal-deep); }
.mkt-module-head__who strong { color: var(--cbs-navy); }

/* --- the derived count, above the feature list ------------------------ */

.mkt-module-count {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cbs-space-3);
    margin-bottom: var(--cbs-space-5);
    max-width: var(--cbs-measure);
    font-size: var(--cbs-text-base);
    color: var(--cbs-ink-muted);
}

.mkt-module-count .mkt-status { margin-bottom: 0; }

/* --- the feature list itself ------------------------------------------
   Two columns on a wide viewport and one on a narrow, with each group kept
   whole: a heading orphaned from its own bullets at a column break reads as
   belonging to the group above it, which on a feature list is a factual
   error rather than a typographic one. */

.mkt-featuregroups {
    columns: 2;
    column-gap: var(--cbs-space-7);
}

.mkt-featuregroup {
    break-inside: avoid;
    margin-bottom: var(--cbs-space-6);
}

.mkt-featuregroup h3 {
    padding-bottom: var(--cbs-space-2);
    margin-bottom: var(--cbs-space-3);
    border-bottom: 2px solid var(--cbs-teal);
    font-size: var(--cbs-text-base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cbs-navy);
}

.mkt-featurelist { list-style: none; padding: 0; margin: 0; }

.mkt-featurelist li {
    position: relative;
    padding-inline-start: var(--cbs-space-5);
    margin-bottom: var(--cbs-space-3);
}

.mkt-featurelist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cbs-teal);
}

.mkt-featurelist strong {
    display: block;
    font-size: var(--cbs-text-base);
    color: var(--cbs-navy);
}

.mkt-featurelist span {
    display: block;
    font-size: var(--cbs-text-sm);
    color: var(--cbs-ink-muted);
}

@media (max-width: 860px) {
    .mkt-featuregroups { columns: 1; }
    .mkt-module-head__mark { width: 52px; height: 52px; }
}

/* --- the masthead earns a gradient; nothing else does ---------------- */

.mkt-section--navy { background: var(--cbs-grad-navy); }

/* --- reveal on first entry, once -------------------------------------
   Sections fade up as they arrive. `.is-in` is added once by
   hms-marketing.js and never removed: re-animating on scroll back up is what
   makes a reveal feel like a toy rather than like the page arriving.

   Two failure modes are designed out rather than mitigated.

   No flash. The script runs at the end of <body>, so the page has already
   painted by the time it can do anything. Hiding a section at that point
   would show it and then take it away. So the script adds `.mkt-reveal` ONLY
   to sections that are already below the fold, which cannot flash because
   they were never on screen. Everything above the fold is left untouched and
   appears instantly.

   No JavaScript, no problem. The class is added by script, so with the script
   blocked or failed nothing carries it and nothing is hidden. The rule needs
   no `.js` guard on <html> because the guard is the class itself. */
.mkt-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--cbs-motion-reveal), transform var(--cbs-motion-reveal);
}
.mkt-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* --- focus stays obvious --------------------------------------------- */

.mkt-btn:focus-visible,
.mkt-card:focus-visible,
.mkt-door:focus-visible {
    outline: 3px solid var(--cbs-amber);
    outline-offset: 3px;
}

/* --- and none of it happens if the reader asked for stillness -------- */

@media (prefers-reduced-motion: reduce) {
    .mkt-card, .mkt-door { transition: none; }
    .mkt-card:hover, .mkt-door:hover { transform: none; }
    a.mkt-card::before { transition: none; }
    .mkt-reveal { opacity: 1; transform: none; transition: none; }
}