/*
 * Page styles for the product site: forms. Loaded after marketing.css.
 * Colours come from brand.css tokens only - no blue.
 *
 * Covers contact, demo, quote, thank-you, FAQ, privacy, terms, the "which
 * hospital?" sign-in page and the not-found page. Every page-level rule hangs
 * off an .fm-* wrapper, because this sheet is loaded on every page of the site
 * and must not restyle anyone else's.
 *
 * Nothing here decides behaviour. The enquiry forms keep their fields, their
 * error elements and their aria wiring exactly as the markup renders them;
 * this only changes how they look.
 */

/* ---------------------------------------------------------------- tones
 * One small vocabulary for every icon tile and tinted panel on these pages:
 * --t is the glyph / strong colour, --t-soft its tint. Each pairing is one of
 * the module accents from brand.css, so every glyph clears 4.5:1 on its tint.
 */
body.marketing .fm-tone-plum,    body.marketing .fm-ico,
body.marketing .fm-ico--plum                                       { --t: var(--brand);          --t-soft: var(--brand-50); }
body.marketing .fm-tone-orange,  body.marketing .fm-ico--orange    { --t: var(--accent-600);     --t-soft: var(--accent-50); }
body.marketing .fm-tone-red,     body.marketing .fm-ico--red       { --t: var(--red-600);        --t-soft: var(--red-50); }
body.marketing .fm-tone-green,   body.marketing .fm-ico--green     { --t: var(--green-600);      --t-soft: var(--green-50); }
body.marketing .fm-tone-amber,   body.marketing .fm-ico--amber     { --t: var(--warn);           --t-soft: var(--acc-finance-soft); }
body.marketing .fm-tone-magenta, body.marketing .fm-ico--magenta   { --t: var(--acc-people);     --t-soft: var(--acc-people-soft); }
body.marketing .fm-tone-teal,    body.marketing .fm-ico--teal      { --t: var(--acc-operations); --t-soft: var(--acc-operations-soft); }

/* The icon tile: a tinted rounded square holding one Bootstrap Icons glyph. */
body.marketing .fm-ico {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--t-soft);
    color: var(--t);
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(11, 15, 26, .04);
}

body.marketing .fm-ico--sm {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    font-size: .95rem;
}

/* Filled: the tone as a solid tile, for the one icon a panel leads with. */
body.marketing .fm-ico--solid {
    background: var(--t);
    color: #fff;
    box-shadow: 0 8px 18px -10px var(--t);
}

/* ---------------------------------------------------------------- page hero
 * Heading and lead on the left, the page's own illustration on the right. On
 * a phone the picture drops under the lead at a modest size, so the form still
 * starts near the top of the screen.
 */
body.marketing .fm-hero.fm-tone-plum   { --acc-soft: var(--brand-50); }
body.marketing .fm-hero.fm-tone-orange { --acc-soft: var(--accent-50); }
body.marketing .fm-hero.fm-tone-amber  { --acc-soft: var(--acc-finance-soft); }
body.marketing .fm-hero.fm-tone-green  { --acc-soft: var(--green-50); }
body.marketing .fm-hero.fm-tone-red    { --acc-soft: var(--red-50); }

body.marketing .fm-hero {
    padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

/* A warm pool on the right, behind the picture. */
body.marketing .fm-hero::after {
    content: "";
    position: absolute;
    right: -8rem;
    top: -4rem;
    width: 42rem;
    height: 32rem;
    background:
        radial-gradient(closest-side, rgba(var(--accent-rgb), .12), transparent 70%),
        radial-gradient(closest-side at 30% 70%, rgba(var(--brand-rgb), .08), transparent 70%);
    pointer-events: none;
}

body.marketing .fm-hero-grid {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    body.marketing .fm-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    }
}

body.marketing .fm-hero-copy .lead { margin-bottom: 0; }

/* A short gradient rule under the heading: an accent, not a divider. */
body.marketing .fm-hero-copy h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 1rem;
    border-radius: var(--r-pill);
    background: var(--brand-gradient);
}

body.marketing .fm-hero-art {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 440px;
}

body.marketing .fm-hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    body.marketing .fm-hero-art { max-width: 300px; }
}

@media (max-width: 575.98px) {
    body.marketing .fm-hero-art { max-width: 250px; }
}

/* ---------------------------------------------------------------- form section */

/*
 * Bootstrap's invalid state is compiled in its own red; point it at the brand
 * red for everything inside these pages (the required asterisks, the error
 * lines under fields, the invalid borders).
 */
body.marketing .fm-section,
body.marketing .fm-signin {
    --bs-danger-rgb: 190, 18, 60;
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
    --fm-field-border: var(--line);
    --fm-field-border: color-mix(in srgb, var(--line) 72%, var(--ink-dim));
}

body.marketing .page-hero + .fm-section {
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

body.marketing .fm-section {
    background:
        radial-gradient(40rem 26rem at 0% 100%, rgba(var(--brand-rgb), .045), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
}

/* ---------------------------------------------------------------- form card */

body.marketing .fm-form {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(30rem 16rem at 100% 0%, rgba(var(--brand-rgb), .05), transparent 70%),
        var(--surface);
    padding: clamp(1.35rem, 3.4vw, 2.6rem);
    padding-top: clamp(1.75rem, 3.6vw, 2.85rem);
    box-shadow:
        0 1px 2px rgba(11, 15, 26, .04),
        0 12px 28px -18px rgba(11, 15, 26, .16),
        0 34px 70px -40px rgba(var(--brand-rgb), .38);
}

/* The brand gradient along the top edge. */
body.marketing .fm-form::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--brand-gradient);
}

/* "Fields marked * are required." - set apart from the fields it describes. */
body.marketing .fm-form > p.form-text {
    font-size: .85rem;
    color: var(--ink-faint);
    padding-bottom: 1rem;
    margin-bottom: 1.4rem !important;
    border-bottom: 1px dashed var(--line);
}

body.marketing .fm-form .form-label,
body.marketing .fm-form legend.form-label {
    font-weight: 650;
    font-size: .9rem;
    color: var(--ink);
    letter-spacing: -.005em;
    margin-bottom: .45rem;
}

body.marketing .fm-form .form-label .fw-normal { font-weight: 450 !important; color: var(--ink-faint) !important; }

body.marketing .fm-form .form-text {
    color: var(--ink-faint);
    font-size: .84rem;
}

/* --- fields -------------------------------------------------------------- */

body.marketing .fm-form .form-control,
body.marketing .fm-form .form-select {
    min-height: 3rem;
    padding: .7rem .95rem;
    font-size: .98rem;
    color: var(--ink);
    background-color: var(--surface);
    border: 1.5px solid var(--fm-field-border);
    border-radius: var(--r);
    box-shadow: inset 0 1px 2px rgba(11, 15, 26, .04);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.marketing .fm-form textarea.form-control { min-height: 8.5rem; resize: vertical; }

body.marketing .fm-form .form-select {
    padding-right: 2.6rem;
    /* A plum chevron instead of Bootstrap's grey one. */
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23602874' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right .95rem center;
    background-size: 14px 11px;
}

body.marketing .fm-form .form-control::placeholder { color: var(--ink-dim); }

body.marketing .fm-form .form-control:hover:not(:focus):not(.is-invalid),
body.marketing .fm-form .form-select:hover:not(:focus):not(.is-invalid) {
    border-color: var(--brand-300);
}

/*
 * Focus: a plum border and a soft plum ring. The ring replaces the site-wide
 * 3px outline on text fields only - two rings around one input read as a
 * rendering fault - and it is strong enough to be the indicator on its own.
 */
body.marketing .fm-form .form-control:focus,
body.marketing .fm-form .form-select:focus {
    background-color: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .2);
    outline: 0;
}

/* --- invalid ------------------------------------------------------------- */

body.marketing .fm-form .form-control.is-invalid,
body.marketing .fm-form .form-select.is-invalid {
    border-color: var(--danger);
    background-color: var(--red-50);
}

body.marketing .fm-form .form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='%23be123c'/%3e%3cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3e%3ccircle cx='8' cy='11.4' r='1.1' fill='%23fff'/%3e%3c/svg%3e");
}

body.marketing .fm-form .form-select.is-invalid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='%23be123c'/%3e%3cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3e%3ccircle cx='8' cy='11.4' r='1.1' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right .95rem center, center right 2.4rem;
}

body.marketing .fm-form .form-control.is-invalid:focus,
body.marketing .fm-form .form-select.is-invalid:focus {
    background-color: #fff;
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(190, 18, 60, .14);
}

/*
 * The message under a field. The server renders it and form-validation.js
 * reuses the same element (toggling [hidden]), so both get the same look.
 */
body.marketing .fm-form .form-text.text-danger {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .45rem;
    font-size: .85rem;
    font-weight: 550;
    line-height: 1.45;
}

body.marketing .fm-form .form-text.text-danger::before {
    content: "\f332";
    content: "\f332" / "";
    font-family: "bootstrap-icons";
    font-weight: 400;
    line-height: 1.45;
    flex: 0 0 auto;
}

/* The summary at the top of the form. */
body.marketing .fm-form .alert-danger {
    --bs-alert-bg: var(--red-50);
    --bs-alert-color: var(--red-600);
    --bs-alert-border-color: rgba(190, 18, 60, .22);
    --bs-alert-link-color: var(--red-600);
    border-left: 4px solid var(--red-600);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    font-size: .95rem;
}

body.marketing .fm-form .alert-danger > p:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
}

body.marketing .fm-form .alert-danger > p:first-child::before {
    content: "\f332";
    content: "\f332" / "";
    font-family: "bootstrap-icons";
    font-weight: 400;
}

body.marketing .fm-form .alert-danger ul { padding-left: 1.75rem !important; }
body.marketing .fm-form .alert-danger li + li { margin-top: .2rem; }

/* A notice that is not about one field: the throttle, a save failure. */
body.marketing .fm-form .alert-warning {
    --bs-alert-bg: var(--acc-finance-soft);
    --bs-alert-color: var(--warn);
    --bs-alert-border-color: rgba(180, 83, 9, .25);
    border-left: 4px solid var(--warn);
    border-radius: var(--r);
    font-size: .95rem;
}

/* --- checkboxes ----------------------------------------------------------- */

body.marketing .fm-form .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: .2em;
    border: 1.5px solid var(--fm-field-border);
    border-radius: .35em;
    cursor: pointer;
}

body.marketing .fm-form .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

body.marketing .fm-form .form-check-input.is-invalid { border-color: var(--danger); }
body.marketing .fm-form .form-check-input.is-invalid ~ .form-check-label { color: var(--ink); }

/* The consent line, in its own quiet box so it cannot be missed. */
body.marketing .fm-form .col-12 > .form-check {
    padding: .95rem 1.1rem .95rem 2.85rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

body.marketing .fm-form .col-12 > .form-check:has(.is-invalid) {
    background: var(--red-50);
    border-color: rgba(190, 18, 60, .3);
}

body.marketing .fm-form .col-12 > .form-check .form-check-label {
    font-size: .95rem;
    color: var(--ink);
}

/* --- quote: modules ------------------------------------------------------- */

body.marketing .fm-form fieldset fieldset {
    padding: 1rem 1rem .6rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
}

body.marketing .fm-form fieldset fieldset > legend.form-label {
    float: left;          /* keeps the legend inside the tile, not on its border */
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft) !important;
    padding: 0;
    margin-bottom: .7rem !important;
}

/* A dot in each module group's own colour. */
body.marketing .fm-form fieldset fieldset > legend.form-label::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--fm-group, var(--brand));
}

body.marketing .fm-form fieldset > fieldset:nth-of-type(1) { --fm-group: var(--acc-clinical); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(2) { --fm-group: var(--acc-inpatient); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(3) { --fm-group: var(--acc-diagnostics); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(4) { --fm-group: var(--acc-pharmacy); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(5) { --fm-group: var(--acc-finance); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(6) { --fm-group: var(--acc-people); }
body.marketing .fm-form fieldset > fieldset:nth-of-type(7) { --fm-group: var(--acc-operations); }

body.marketing .fm-form .module-checks {
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* Each module a small tile; a ticked one takes the brand tint. */
body.marketing .fm-form .module-checks .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-height: 0;
    margin: 0;
    padding: .55rem .75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .15s ease, background-color .15s ease;
}

body.marketing .fm-form .module-checks .form-check-input {
    float: none;
    margin: .15em 0 0;
    flex: 0 0 auto;
}

body.marketing .fm-form .module-checks .form-check-label {
    flex: 1 1 auto;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
}

body.marketing .fm-form .module-checks .form-check:hover { border-color: var(--brand-300); }

body.marketing .fm-form .module-checks .form-check:has(.form-check-input:checked) {
    background: var(--brand-50);
    border-color: var(--brand-300);
}

/* --- submit -------------------------------------------------------------- */

body.marketing .fm-submit { padding-top: .35rem; }

body.marketing .fm-submit .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 13rem;
}

body.marketing .fm-submit .btn-accent {
    box-shadow: 0 12px 28px -12px rgba(var(--accent-rgb), .7);
}

body.marketing .fm-submit .btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px rgba(var(--accent-rgb), .8);
}

body.marketing .fm-submit .btn i { transition: transform .18s ease; }
body.marketing .fm-submit .btn:hover i { transform: translateX(3px); }

@media (max-width: 575.98px) {
    body.marketing .fm-submit .btn { width: 100%; }
}

/* ---------------------------------------------------------------- side panels */

body.marketing .fm-aside { align-content: start; }

body.marketing .fm-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

body.marketing .fm-panel > h2 {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.08rem;
    margin-bottom: 1.1rem !important;
}

body.marketing .fm-panel > p { font-size: .95rem; }

/*
 * The lead panel: a tinted card in the page's tone. The tint runs from the
 * tone into white so the text keeps a plain ground to sit on.
 */
body.marketing .fm-panel--lead {
    overflow: hidden;
    background:
        radial-gradient(18rem 12rem at 100% 0%, var(--t-soft), transparent 70%),
        linear-gradient(165deg, var(--t-soft) 0%, #fff 58%);
    border-color: var(--line);
    border-color: color-mix(in srgb, var(--t) 18%, #fff);
    box-shadow: var(--shadow-sm);
    box-shadow: 0 1px 2px rgba(11, 15, 26, .04), 0 18px 40px -26px color-mix(in srgb, var(--t) 55%, transparent);
}

body.marketing .fm-panel--lead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--t);
    opacity: .85;
}

/* --- "what happens next": a numbered path with a glyph per step ---------- */

body.marketing .fm-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
    counter-reset: fm-step;
}

body.marketing .fm-steps > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    counter-increment: fm-step;
}

/* The dashed line joining one step to the next. */
body.marketing .fm-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1.25rem - 1px);
    top: 2.9rem;
    bottom: -.95rem;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--brand-300) 0 4px, transparent 4px 8px);
}

body.marketing .fm-steps .fm-ico {
    position: relative;
    box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px var(--t);
}

/* The step number, as a chip on the tile's corner. */
body.marketing .fm-steps .fm-ico::after {
    content: counter(fm-step);
    position: absolute;
    top: -.4rem;
    right: -.45rem;
    display: grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: .2rem;
    border-radius: var(--r-pill);
    background: var(--brand-gradient);
    color: #fff;
    font-family: var(--font-body);
    font-size: .64rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px #fff;
}

body.marketing .fm-steps > li > span:last-child {
    padding-top: .45rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-body);
}

/* --- lists with a glyph per line (demo coverage, quote reasons) ---------- */

body.marketing .fm-iconlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8rem;
}

body.marketing .fm-iconlist > li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .93rem;
    line-height: 1.5;
    color: var(--ink-body);
}

body.marketing .fm-iconlist > li > span:last-child { padding-top: .2rem; min-width: 0; }

body.marketing .fm-reasons { display: grid; gap: 1.1rem; }

body.marketing .fm-reasons .fm-reason {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

body.marketing .fm-reasons h3 {
    font-size: .98rem;
    margin: .1rem 0 .3rem !important;
}

body.marketing .fm-reasons p { color: var(--ink-body); line-height: 1.55; }

body.marketing .fm-panel-note {
    margin-top: 1.1rem !important;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
    font-size: .88rem !important;
    color: var(--ink-faint) !important;
}

/* --- link lists ---------------------------------------------------------- */

body.marketing .fm-links {
    list-style: none;
    margin: 0 -.5rem;
    padding: 0;
    display: grid;
    gap: .15rem;
}

body.marketing .fm-links a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: var(--r);
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

body.marketing .fm-links a::after {
    content: "\f138";
    content: "\f138" / "";
    font-family: "bootstrap-icons";
    font-weight: 400;
    margin-left: auto;
    color: var(--ink-dim);
    transition: transform .15s ease, color .15s ease;
}

body.marketing .fm-links a:hover { background: var(--brand-50); color: var(--brand-700); }
body.marketing .fm-links a:hover::after { color: var(--brand); transform: translateX(3px); }

/* --- contact details ----------------------------------------------------- */

body.marketing .fm-reach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

body.marketing .fm-reach > li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

body.marketing .fm-reach a { font-weight: 600; text-decoration: none; }
body.marketing .fm-reach a:hover { text-decoration: underline; text-underline-offset: 3px; }

body.marketing .fm-panel a:not(.btn) { text-underline-offset: 3px; }

/* ---------------------------------------------------------------- thank you */

body.marketing .fm-thanks {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(36rem 24rem at 50% 0%, var(--t-soft), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
}

body.marketing .fm-thanks--enquiry { --t: var(--brand);      --t-soft: var(--brand-50); }
body.marketing .fm-thanks--demo    { --t: var(--accent-600); --t-soft: var(--accent-50); }
body.marketing .fm-thanks--quote   { --t: var(--warn);       --t-soft: var(--acc-finance-soft); }

body.marketing .fm-thanks-card {
    position: relative;
    overflow: hidden;
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(1.75rem, 4.5vw, 3.25rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow:
        0 1px 2px rgba(11, 15, 26, .04),
        0 34px 70px -40px rgba(var(--brand-rgb), .4);
    text-align: center;
}

body.marketing .fm-thanks-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--brand-gradient);
}

body.marketing .fm-thanks-art {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: -.5rem auto 1rem;
}

body.marketing .fm-thanks-card h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
body.marketing .fm-thanks-card .lead { color: var(--ink-body); }

body.marketing .fm-thanks-card > p:not(.lead) {
    max-width: 34em;
    margin-inline: auto;
    color: var(--ink-faint);
}

@media (max-width: 575.98px) {
    body.marketing .fm-thanks-card .btn { width: 100%; }
}

/* ---------------------------------------------------------------- FAQ */

body.marketing .fm-faq-section {
    background: linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
}

body.marketing .fm-faq .accordion-item {
    border-radius: var(--r-lg) !important;
    margin-bottom: .65rem;
    box-shadow: var(--shadow-xs);
}

/* A little more air where the subject changes, so the topics read as groups. */
body.marketing .fm-faq .accordion-item.fm-faq-start:not(:first-child) { margin-top: 1.75rem; }

body.marketing .fm-faq .accordion-item:hover { border-color: var(--brand-300); }

body.marketing .fm-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--line);
    border-color: color-mix(in srgb, var(--t) 35%, #fff);
    box-shadow: var(--shadow);
}

body.marketing .fm-faq .accordion-button {
    gap: .95rem;
    padding: 1rem 1.15rem;
    line-height: 1.4;
}

body.marketing .fm-faq .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, var(--t-soft), #fff 85%);
    color: var(--ink);
}

body.marketing .fm-faq .accordion-button:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    border-radius: var(--r-lg);
}

body.marketing .fm-faq .fm-ico { transition: background-color .2s ease, color .2s ease; }

body.marketing .fm-faq .accordion-button:not(.collapsed) .fm-ico {
    background: var(--t);
    color: #fff;
}

body.marketing .fm-faq .accordion-body {
    padding: .35rem 1.3rem 1.3rem calc(1.15rem + 2.5rem + .95rem);
    font-size: 1rem;
}

body.marketing .fm-faq .accordion-body ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: .5rem;
}

body.marketing .fm-faq .accordion-body li {
    position: relative;
    padding-left: 1.35rem;
}

body.marketing .fm-faq .accordion-body li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .62em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--t);
    opacity: .75;
}

body.marketing .fm-faq .accordion-body code {
    color: var(--brand-700);
    background: var(--brand-50);
    padding: .1em .4em;
    border-radius: 6px;
}

@media (max-width: 575.98px) {
    body.marketing .fm-faq .accordion-button { padding: .9rem; gap: .75rem; font-size: .96rem; }
    body.marketing .fm-faq .accordion-body { padding: .35rem 1rem 1.15rem; }
}

/* "Still unsure?" as a friendly callout rather than a stray line. */
body.marketing .fm-faq-more {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.25rem;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(120deg, var(--brand-50), #fff 60%, var(--accent-50));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

body.marketing .fm-faq-more p { margin: 0; color: var(--ink); font-weight: 550; }
body.marketing .fm-faq-more a { font-weight: 700; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- legal pages */

body.marketing .fm-legal-hero::after { display: none; }

body.marketing .fm-legal-hero .fm-hero-grid { gap: 1rem 2.5rem; }

@media (min-width: 768px) {
    body.marketing .fm-legal-hero .fm-hero-grid { grid-template-columns: minmax(0, 1fr) auto; }
}

body.marketing .fm-legal-hero .fm-hero-art { max-width: 280px; justify-self: end; }

@media (max-width: 767.98px) {
    body.marketing .fm-legal-hero .fm-hero-art { max-width: 210px; justify-self: start; order: -1; }
}

/* "Last updated ..." as a dated chip. */
body.marketing .fm-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    font-size: .92rem !important;
    font-weight: 600;
    color: var(--brand-700) !important;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(var(--brand-rgb), .16);
    border-radius: var(--r-pill);
}

body.marketing .fm-updated i { color: var(--accent-600); }

body.marketing .fm-legal-section {
    background: linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
}

/* The notice itself: a sheet of paper, set at a reading measure. */
body.marketing .fm-legal {
    counter-reset: fm-sec;
    padding: clamp(1.5rem, 4.5vw, 3rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    color: var(--ink-body);
    line-height: 1.75;
}

body.marketing .fm-legal > * { max-width: 70ch; }

body.marketing .fm-legal h2 {
    counter-increment: fm-sec;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    margin: 2.6rem 0 .9rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line-soft);
}

body.marketing .fm-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

body.marketing .fm-legal h2::before {
    content: counter(fm-sec, decimal-leading-zero);
    content: counter(fm-sec, decimal-leading-zero) / "";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
}

body.marketing .fm-legal ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.2rem;
    display: grid;
    gap: .65rem;
}

body.marketing .fm-legal li {
    position: relative;
    padding-left: 1.6rem;
}

body.marketing .fm-legal li::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: .68em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-50);
}

body.marketing .fm-legal strong { color: var(--ink); }

body.marketing .fm-legal code {
    color: var(--brand-700);
    background: var(--brand-50);
    padding: .12em .45em;
    border-radius: 6px;
    font-size: .88em;
}

body.marketing .fm-legal hr {
    margin: 2.5rem 0 1.25rem;
    border-color: var(--line);
    opacity: 1;
}

body.marketing .fm-legal hr + p { margin-bottom: 0; }

body.marketing .fm-legal hr + p::before {
    content: "\f24a";
    content: "\f24a" / "";
    font-family: "bootstrap-icons";
    color: var(--accent-600);
    font-size: 1rem;
    vertical-align: -.15em;
    margin-right: .5rem;
}

/* ---------------------------------------------------------------- sign in */

body.marketing .fm-signin {
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    background:
        radial-gradient(44rem 26rem at 0% 0%, var(--brand-50), transparent 65%),
        radial-gradient(36rem 24rem at 100% 100%, var(--accent-50), transparent 62%),
        var(--canvas);
}

body.marketing .fm-signin-card {
    display: grid;
    max-width: 1000px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(11, 15, 26, .04),
        0 40px 80px -44px rgba(var(--brand-rgb), .45),
        0 14px 30px -20px rgba(11, 15, 26, .18);
}

@media (min-width: 992px) {
    body.marketing .fm-signin-card { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

body.marketing .fm-signin-art {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    background:
        radial-gradient(24rem 18rem at 20% 10%, #fff, transparent 70%),
        linear-gradient(160deg, var(--brand-50) 0%, var(--accent-50) 100%);
}

body.marketing .fm-signin-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--brand-rgb), .12) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, transparent 30%, var(--ink) 100%);
            mask-image: radial-gradient(70% 60% at 50% 40%, transparent 30%, var(--ink) 100%);
    pointer-events: none;
}

body.marketing .fm-signin-art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

@media (max-width: 991.98px) {
    body.marketing .fm-signin-art img { max-width: 280px; }
}

body.marketing .fm-signin-body {
    padding: clamp(1.5rem, 4.5vw, 3.25rem);
    align-self: center;
}

body.marketing .fm-signin-body h1 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    margin-bottom: .6rem;
}

body.marketing .fm-signin-body > .lead {
    font-size: 1.02rem;
    color: var(--ink-body);
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--line);
}

body.marketing .fm-signin .form-label { color: var(--ink); }

body.marketing .fm-signin .input-group-text {
    background: var(--brand-50);
    color: var(--brand);
    border: 1.5px solid var(--fm-field-border);
    border-right: 0;
    border-radius: var(--r) 0 0 var(--r);
    padding-inline: 1rem;
}

body.marketing .fm-signin .input-group .form-control {
    border: 1.5px solid var(--fm-field-border);
    border-left: 0;
    border-radius: 0 var(--r) var(--r) 0;
    background-color: var(--surface);   /* not the shorthand: it would undo the invalid icon's no-repeat */
    color: var(--ink);
    font-size: 1.05rem;
    min-height: 3.35rem;
}

body.marketing .fm-signin .input-group .form-control::placeholder { color: var(--ink-dim); }

body.marketing .fm-signin .input-group:focus-within {
    border-radius: var(--r);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .16);
}

body.marketing .fm-signin .input-group:focus-within .input-group-text,
body.marketing .fm-signin .input-group:focus-within .form-control {
    border-color: var(--brand);
    background-color: #fff;
}

body.marketing .fm-signin .input-group .form-control:focus { box-shadow: none; outline: 0; }

body.marketing .fm-signin .input-group:has(.is-invalid) .input-group-text,
body.marketing .fm-signin .input-group .form-control.is-invalid {
    border-color: var(--danger);
}

body.marketing .fm-signin .input-group:has(.is-invalid) .input-group-text {
    background: var(--red-50);
    color: var(--danger);
}

body.marketing .fm-signin .input-group:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 4px rgba(190, 18, 60, .14);
}

body.marketing .fm-signin .form-control.is-invalid {
    background-color: var(--red-50);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='%23be123c'/%3e%3cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3e%3ccircle cx='8' cy='11.4' r='1.1' fill='%23fff'/%3e%3c/svg%3e");
}

/* Rendered with .d-block (display: block !important), so the icon is inline. */
body.marketing .fm-signin .invalid-feedback {
    margin-top: .55rem;
    padding-left: 1.45rem;
    text-indent: -1.45rem;
    color: var(--danger);
    font-size: .88rem;
    font-weight: 550;
    line-height: 1.5;
}

body.marketing .fm-signin .invalid-feedback::before {
    content: "\f332";
    content: "\f332" / "";
    display: inline-block;
    width: 1.45rem;
    text-indent: 0;
    font-family: "bootstrap-icons";
    font-weight: 400;
    vertical-align: -.1em;
}

body.marketing .fm-signin .form-text { color: var(--ink-faint); margin-top: .6rem; }
body.marketing .fm-signin .form-text strong { color: var(--brand-700); }

/* Found: the hospital, its address, and the way through. */
body.marketing .fm-signin-badge {
    display: inline-grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 20px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: var(--shadow-brand);
}

body.marketing .fm-signin-host {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: var(--r-pill);
    background: var(--green-50);
    color: var(--green-600) !important;
    font-weight: 600;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

body.marketing .fm-signin-links {
    max-width: 1000px;
    margin: 1.75rem auto 0;
    text-align: center;
}

body.marketing .fm-signin-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

body.marketing .fm-signin-switch a {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1rem;
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--brand-700);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

body.marketing .fm-signin-switch a:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
}

/* ---------------------------------------------------------------- not found */

body.marketing .fm-lost {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background:
        radial-gradient(40rem 26rem at 50% 0%, var(--brand-50), transparent 68%),
        radial-gradient(30rem 20rem at 100% 100%, var(--accent-50), transparent 62%),
        var(--canvas);
}

body.marketing .fm-lost-card {
    max-width: 680px;
    margin-inline: auto;
    padding: clamp(1.75rem, 4.5vw, 3rem);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow:
        0 1px 2px rgba(11, 15, 26, .04),
        0 34px 70px -40px rgba(var(--brand-rgb), .4);
}

body.marketing .fm-lost-art {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: -.25rem auto 1.25rem;
}

body.marketing .fm-lost-card h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    margin-bottom: .6rem;
}

body.marketing .fm-lost-card .lead { color: var(--ink-body); margin-bottom: .85rem; }
body.marketing .fm-lost-card > p:not(.lead) { color: var(--ink-faint); }

body.marketing .fm-lost-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    margin: 0;
}

@media (max-width: 575.98px) {
    body.marketing .fm-lost-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
    body.marketing .fm-hero-art img,
    body.marketing .fm-signin-art img {
        animation: fm-float 7s ease-in-out infinite;
    }

    @keyframes fm-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing .fm-submit .btn:hover,
    body.marketing .fm-submit .btn:hover i,
    body.marketing .fm-links a:hover::after { transform: none; }
}

/* ---------------------------------------------------------------- print */

@media print {
    body.marketing .fm-hero-art,
    body.marketing .fm-signin-art,
    body.marketing .fm-thanks-art,
    body.marketing .fm-lost-art { display: none !important; }

    body.marketing .fm-legal,
    body.marketing .fm-form { box-shadow: none; border: 0; padding: 0; }
}