/* Page styles for the product site: features. Loaded after marketing.css. Colours come from brand.css tokens only - no blue. */

/*
 * Features (/features) and Safety & security (/safety).
 *
 * Every rule is scoped to body.marketing .fx-page, the wrapper those two views
 * put around their content, so nothing here can reach another page even
 * though this file is loaded on all of them.
 *
 * The idea: each subject gets its own drawing and its own colour. A section
 * sets a tone (orange for the laboratory, red for prescribing, amber for
 * billing, plum for records, green for access), which tints its background,
 * its label and its jump link; each row or card keeps the module accent it
 * already had (--acc / --acc-soft from brand.css) for its icon and edges.
 */

/* ---------------------------------------------------------------- tones */

body.marketing .fx-page .fx-tone-orange  { --tone: var(--accent-600); --tone-bright: var(--accent); --tone-soft: var(--accent-50); }
body.marketing .fx-page .fx-tone-red     { --tone: var(--red-600);    --tone-bright: var(--red);    --tone-soft: var(--red-50); }
body.marketing .fx-page .fx-tone-amber   { --tone: var(--warn);       --tone-bright: var(--accent); --tone-soft: var(--acc-finance-soft); }
body.marketing .fx-page .fx-tone-plum    { --tone: var(--brand);      --tone-bright: var(--brand-500); --tone-soft: var(--brand-50); }
body.marketing .fx-page .fx-tone-green   { --tone: var(--green-600);  --tone-bright: var(--green);  --tone-soft: var(--green-50); }
body.marketing .fx-page .fx-tone-neutral { --tone: var(--ink-body);   --tone-bright: var(--ink-dim); --tone-soft: var(--surface-3); }

/* ---------------------------------------------------------------- hero */

body.marketing .fx-page .fx-hero {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    background:
        radial-gradient(46rem 26rem at 6% -12%, var(--brand-50) 0%, transparent 62%),
        radial-gradient(40rem 26rem at 100% 0%, var(--accent-50) 0%, transparent 60%),
        radial-gradient(30rem 20rem at 70% 110%, var(--red-50) 0%, transparent 60%),
        linear-gradient(180deg, var(--canvas) 0%, #fff 100%);
}

body.marketing .fx-page .fx-hero-grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

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

body.marketing .fx-page .fx-hero h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.35rem);
    line-height: 1.08;
    margin-bottom: 1.1rem;
}

body.marketing .fx-page .fx-hero .lead { margin-bottom: 0; }

body.marketing .fx-page .fx-hero-art { position: relative; }

body.marketing .fx-page .fx-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin-inline: auto;
}

@media (max-width: 991.98px) {
    body.marketing .fx-page .fx-hero-art img { max-width: 440px; }
}

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

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

/* --- on-this-page links ---------------------------------------------------- */

body.marketing .fx-page .fx-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.75rem;
}

body.marketing .fx-page .fx-jump-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem .4rem .45rem;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

body.marketing .fx-page .fx-jump-link i {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone);
    font-size: .82rem;
}

body.marketing .fx-page .fx-jump-link:hover {
    color: var(--tone);
    border-color: var(--brand-300);
    border-color: color-mix(in srgb, var(--tone) 35%, #fff);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------- sections */

body.marketing .fx-page .fx-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    scroll-margin-top: 84px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--tone-soft) 0%, #fff 380px);
}

/* A soft pool of the section's colour in one corner, so the band has depth
   rather than a flat tint. Decoration only. */
body.marketing .fx-page .fx-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12rem;
    right: -10rem;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--tone-soft), transparent 72%);
    opacity: .9;
    pointer-events: none;
}

body.marketing .fx-page .fx-section:nth-of-type(odd)::before { right: auto; left: -12rem; }

body.marketing .fx-page .section-head h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
}

/* The kicker becomes a labelled pill in the section's colour. */
body.marketing .fx-page .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .9rem;
    margin-bottom: .95rem;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--tone, var(--brand));
    border: 1px solid var(--brand-100);
    border: 1px solid color-mix(in srgb, var(--tone, var(--brand)) 22%, #fff);
    box-shadow: var(--shadow-xs);
}

body.marketing .fx-page .section-kicker i { font-size: .9rem; }

/* ---------------------------------------------------------------- feature rows
 *
 * Text and drawing side by side, alternating which side the drawing is on.
 * The text comes first in the markup so a screen reader meets the heading
 * first; on a narrow screen the drawing is lifted above the text.
 */

body.marketing .fx-page .fx-rows {
    display: grid;
    gap: clamp(3.25rem, 7vw, 6rem);
}

body.marketing .fx-page .fx-row {
    display: grid;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
}

body.marketing .fx-page .fx-row-art { order: -1; }

@media (min-width: 992px) {
    body.marketing .fx-page .fx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.marketing .fx-page .fx-row.fx-row-flip .fx-row-art { order: 1; }
}

body.marketing .fx-page .fx-row-art {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 580px;
    justify-self: center;
    padding: clamp(.5rem, 1.6vw, 1.1rem);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 90% at 18% 8%, var(--acc-soft, var(--tone-soft)) 0%, #fff 64%);
    border: 1px solid var(--line);
    border: 1px solid color-mix(in srgb, var(--acc, var(--tone, var(--brand))) 16%, var(--line));
    box-shadow: var(--shadow);
    transition: box-shadow .35s ease;
}

/* A dotted corner behind each drawing panel, on the side away from the text. */
body.marketing .fx-page .fx-row-art::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 132px;
    height: 132px;
    left: -22px;
    bottom: -22px;
    border-radius: 18px;
    background-image: radial-gradient(color-mix(in srgb, var(--acc, var(--tone, var(--brand))) 42%, transparent) 1.5px, transparent 1.8px);
    background-size: 14px 14px;
    pointer-events: none;
}

body.marketing .fx-page .fx-row-flip .fx-row-art::before { left: auto; right: -22px; top: -22px; bottom: auto; }

body.marketing .fx-page .fx-row-art img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/*
 * The lift is on the drawing, not the panel: a transform on the panel would
 * make it a stacking context and pull its dotted corner (z-index -1) inside.
 */
body.marketing .fx-page .fx-row:hover .fx-row-art { box-shadow: var(--shadow-md); }
body.marketing .fx-page .fx-row:hover .fx-row-art img { transform: translateY(-4px); }

body.marketing .fx-page .fx-row-body { min-width: 0; }

body.marketing .fx-page .fx-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .75rem;
    margin-bottom: 1rem;
}

body.marketing .fx-page .fx-row-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--acc, var(--brand));
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 12px 24px -12px var(--acc, var(--brand));
}

body.marketing .fx-page .plan-trial.fx-plan {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .8rem;
    border: 1px solid var(--brand-100);
    font-size: .68rem;
}

body.marketing .fx-page .fx-plan i { font-size: .8rem; color: var(--brand-500); }

body.marketing .fx-page .fx-row h3 {
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    margin-bottom: .55rem;
}

body.marketing .fx-page .fx-row-summary {
    font-size: clamp(1.05rem, 1.4vw, 1.15rem);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.55;
    margin-bottom: 1.35rem;
}

body.marketing .fx-page .fx-row-summary:last-child { margin-bottom: 0; }

body.marketing .fx-page .fx-points { gap: .75rem; font-size: 1rem; }

/* "Where it stops": the limit sits in the row, in the row's own colour. */
body.marketing .fx-page .fx-limit {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1.4rem 0 0;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--acc, var(--brand));
    box-shadow: var(--shadow-xs);
    font-size: .94rem;
    line-height: 1.6;
    color: var(--ink-body);
}

body.marketing .fx-page .fx-limit > i {
    flex: 0 0 auto;
    margin-top: .12rem;
    color: var(--acc, var(--brand));
    font-size: 1.05rem;
}

body.marketing .fx-page .fx-limit strong { color: var(--ink); }

/* ---------------------------------------------------------------- "every module" */

body.marketing .fx-page .fx-more {
    background: var(--canvas);
    border-top: 1px solid var(--line);
}

body.marketing .fx-page .fx-more-card {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

body.marketing .fx-page .fx-more-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--brand-gradient);
}

body.marketing .fx-page .fx-more-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.4rem;
}

body.marketing .fx-page .fx-more-icons span {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--acc-soft);
    color: var(--acc);
    font-size: 1.2rem;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .03);
}

body.marketing .fx-page .fx-more-icons span:nth-child(even) { transform: translateY(6px); }

body.marketing .fx-page .fx-more-card .section-head { margin-bottom: 1.6rem; }

body.marketing .fx-page .fx-more-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ---------------------------------------------------------------- CTA band */

body.marketing .fx-page .fx-cta-wrap {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: #fff;
}

body.marketing .fx-page .fx-more { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

body.marketing .fx-page .fx-more + .fx-cta-wrap {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(180deg, var(--canvas) 0%, #fff 70%);
}

body.marketing .fx-page .fx-cta {
    isolation: isolate;
    border-radius: var(--r-xl);
    padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 4rem);
    background:
        radial-gradient(40rem 22rem at 100% 0%, rgba(var(--accent-rgb), .38), transparent 60%),
        var(--brand-gradient-deep);
    box-shadow: 0 34px 70px -34px rgba(var(--brand-rgb), .7);
}

/* Two soft rings in the corners; the band's own ::before adds light pools. */
body.marketing .fx-page .fx-cta::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 440px;
    height: 440px;
    left: -170px;
    bottom: -250px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .06);
    box-shadow: 820px -330px 0 -150px rgba(255, 255, 255, .05);
    pointer-events: none;
}

body.marketing .fx-page .fx-cta > * { position: relative; z-index: 1; }

body.marketing .fx-page .fx-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* ---------------------------------------------------------------- illustrated cards (safety) */

body.marketing .fx-page .feature-card.fx-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

body.marketing .fx-page .fx-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

body.marketing .fx-page .fx-card-art {
    margin: 0;
    padding: .9rem .9rem .35rem;
    background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%);
    border-bottom: 1px solid var(--line-soft);
}

body.marketing .fx-page .fx-card-art img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

body.marketing .fx-page .fx-card:hover .fx-card-art img { transform: scale(1.035); }

body.marketing .fx-page .fx-card-body {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 1.5rem 1.6rem;
}

body.marketing .fx-page .fx-card-icon {
    position: absolute;
    top: -23px;
    left: 1.4rem;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--acc, var(--tone, var(--brand)));
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 0 0 4px #fff, 0 12px 22px -10px var(--acc, var(--tone, var(--brand)));
}

body.marketing .fx-page .fx-card-body h3 { font-size: 1.14rem; margin-bottom: .45rem; }

/* --- compact cards: icon beside text -------------------------------------- */

body.marketing .fx-page .feature-card.fx-card-compact {
    display: flex;
    align-items: flex-start;
    gap: 1.05rem;
    padding: 1.4rem 1.45rem;
    box-shadow: var(--shadow-xs);
}

body.marketing .fx-page .fx-card-compact > i {
    flex: 0 0 auto;
    margin-bottom: 0;
}

body.marketing .fx-page .fx-card-compact > div { min-width: 0; }
body.marketing .fx-page .fx-card-compact h3 { font-size: 1.08rem; margin-bottom: .4rem; }
body.marketing .fx-page .fx-card-compact p + p { margin-top: .5rem; }

/* --- "Where it stops" under the clinical cards ------------------------------ */

body.marketing .fx-page .fx-limits {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.35rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--tone, var(--brand));
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

body.marketing .fx-page .fx-limits h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

body.marketing .fx-page .fx-limits h3 i { color: var(--tone, var(--brand)); }

body.marketing .fx-page .fx-limits ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem 2rem;
}

@media (min-width: 992px) {
    body.marketing .fx-page .fx-limits ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.marketing .fx-page .fx-limits li {
    position: relative;
    padding-left: 1.35rem;
    font-size: .96rem;
    color: var(--ink-body);
}

body.marketing .fx-page .fx-limits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone, var(--brand));
}

/* --- drawing beside a stack of cards ----------------------------------------- */

body.marketing .fx-page .fx-split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 992px) {
    body.marketing .fx-page .fx-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    body.marketing .fx-page .fx-split-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    body.marketing .fx-page .fx-split-flip .fx-split-art { order: 1; }
}

body.marketing .fx-page .fx-split-art {
    margin: 0;
    width: 100%;
    max-width: 540px;
    justify-self: center;
    padding: clamp(.5rem, 1.6vw, 1.1rem);
    border-radius: var(--r-xl);
    background: radial-gradient(120% 90% at 20% 10%, var(--tone-soft) 0%, #fff 64%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

body.marketing .fx-page .fx-split-art img { display: block; width: 100%; height: auto; }

body.marketing .fx-page .fx-stack { display: grid; gap: 1rem; }

/* "What we do not claim" is deliberately plain: warm neutrals, no accent. */
body.marketing .fx-page .fx-claim {
    --acc: var(--ink-body);
    --acc-soft: var(--surface-3);
    padding: 1.5rem;
}

body.marketing .fx-page .fx-claim h3 { font-size: 1.08rem; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 575.98px) {
    body.marketing .fx-page .fx-jump-link { font-size: .84rem; }
    body.marketing .fx-page .fx-row-art::before { display: none; }
    body.marketing .fx-page .fx-limit { padding: .9rem 1rem; }
    body.marketing .fx-page .feature-card.fx-card-compact { padding: 1.2rem; gap: .9rem; }
    body.marketing .fx-page .fx-card-compact > i { width: 42px; height: 42px; font-size: 1.15rem; }
    body.marketing .fx-page .fx-more-icons span { width: 40px; height: 40px; font-size: 1.05rem; }
    body.marketing .fx-page .fx-cta { border-radius: var(--r-lg); }
    body.marketing .fx-page .fx-cta .cta-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- motion, print */

@media (prefers-reduced-motion: reduce) {
    body.marketing .fx-page .fx-hero-art img,
    body.marketing .fx-page .fx-row:hover .fx-row-art img,
    body.marketing .fx-page .fx-card:hover,
    body.marketing .fx-page .fx-card:hover .fx-card-art img,
    body.marketing .fx-page .fx-jump-link:hover {
        animation: none !important;
        transform: none !important;
    }
}

@media print {
    body.marketing .fx-page .fx-hero-art,
    body.marketing .fx-page .fx-jump,
    body.marketing .fx-page .fx-more-icons,
    body.marketing .fx-page .fx-section::before,
    body.marketing .fx-page .fx-row-art::before { display: none !important; }

    body.marketing .fx-page .fx-row,
    body.marketing .fx-page .fx-card,
    body.marketing .fx-page .fx-limits { break-inside: avoid; }

    body.marketing .fx-page .fx-row-art { max-width: 320px; box-shadow: none; }
}