/* ============================================================
   LAB SITE — the public front of LabSureX
   ------------------------------------------------------------
   labsurex.com: what the product is, what it costs, and two
   ways to ask for it. Loaded by Views/Site/_SiteLayout.cshtml
   and by nothing else — the application's own shell
   (lab-shell.css) is a different job with different density,
   and neither should have to accommodate the other.

   It sits on top of lab-theme.css for the fonts and the ink
   colours, so the marketing page and the product a customer
   then signs into look like the same company made them. What
   it adds is the part a landing page needs and an operator's
   screen does not: air, big type, and the blues out of the
   logo rather than the teal the chrome uses.
   ============================================================ */

:root {
    /*  Straight off the mark. The flask is a deep navy going to a
        mid blue and the swoosh ends in cyan, so those are the
        three and nothing else was invented to sit between them. */
    --site-navy: #0a1730;
    --site-navy-2: #10254a;
    --site-navy-3: #16325f;
    --site-blue: #1565d8;
    --site-blue-2: #2996f3;
    --site-cyan: #4fc9f0;

    --site-ink: #0f1c2e;
    --site-ink-2: #3c4f66;
    --site-ink-3: #64748b;
    --site-ink-faint: #94a3b8;

    --site-bg: #ffffff;
    --site-bg-soft: #f5f8fc;
    --site-border: #e4eaf3;
    --site-border-2: #cfdaea;

    --site-radius: 16px;
    --site-radius-sm: 10px;

    --site-shadow: 0 1px 2px rgba(10, 23, 48, .05), 0 12px 32px -18px rgba(10, 23, 48, .28);
    --site-shadow-lg: 0 24px 70px -30px rgba(10, 23, 48, .45);

    /*  One measure for the whole page. Sections that each choose
        their own width are sections whose headings do not line
        up, and it shows on a long page more than anywhere. */
    --site-max: 1200px;
    --site-pad: 24px;
}

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */

.site-body {
    font-family: var(--lab-font);
    color: var(--site-ink-2);
    background: var(--site-bg);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

.site-body * { box-sizing: border-box; }

.site-body h1, .site-body h2, .site-body h3, .site-body h4 {
    color: var(--site-ink);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0;
    font-weight: 650;
}

.site-body p { margin: 0; }

/*  Every button on this page is a link, so a blanket colour on `a` outranks
    every one of the button rules below — `.site-body a` is two classes and an
    element, `.btn-on-dark` is one class. The white call to action on the navy
    hero came out in link blue on white, which is close enough to legible to
    survive a glance and wrong enough to notice on the second one.

    Excluded here rather than fought with specificity in six places. */
.site-body a:not(.btn) { color: var(--site-blue); text-decoration: none; }
.site-body a:not(.btn):hover { text-decoration: underline; }

/*  Anchored sections land under a sticky bar otherwise, with the
    heading they were aimed at hidden behind it. */
.site-body [id] { scroll-margin-top: 88px; }

.wrap {
    width: 100%;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-pad);
}

.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-soft { background: var(--site-bg-soft); }

.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-blue);
    background: rgba(41, 150, 243, .09);
    border: 1px solid rgba(41, 150, 243, .18);
    border-radius: 999px;
    padding: 5px 13px;
    margin-bottom: 18px;
}

.eyebrow svg, .eyebrow i { width: 13px; height: 13px; }

.section-head h2 { font-size: 40px; margin-bottom: 16px; }
.section-head .lead { font-size: 17.5px; color: var(--site-ink-3); }

/* ------------------------------------------------------------
   2. Buttons
   ------------------------------------------------------------ */

/*  Two things to know before touching these.

    `lab-theme.css` carries an unscoped `.btn { text-transform: capitalize }` —
    the one rule kept from the template it replaced — so without the reset below
    every button on this page reads "Book A Demo" and "Start A Free Trial". It
    is undone here rather than there because inside the application that casing
    is deliberate and 108 views depend on it.

    And the theme's `.btn-primary` sets its background with `!important`, which
    no amount of specificity beats. So the accent button is `.btn-brand` — a
    name of its own rather than a fight this file cannot win. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    /*  Every button here is an <a>, and the rule above that clears the
        underline now skips buttons on purpose — which handed them straight back
        to the browser default. Cleared here instead, where it belongs. */
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease,
                border-color .18s ease, color .18s ease;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--site-blue); outline-offset: 2px; }
.btn svg, .btn i { width: 16px; height: 16px; }

.btn-brand {
    color: #fff;
    background: linear-gradient(180deg, var(--site-blue-2) 0%, var(--site-blue) 100%);
    box-shadow: 0 1px 2px rgba(21, 101, 216, .35), 0 10px 22px -12px rgba(21, 101, 216, .9);
}

.btn-brand:hover { color: #fff; filter: brightness(1.06); }

.btn-ghost {
    color: var(--site-ink);
    background: #fff;
    border-color: var(--site-border-2);
}

.btn-ghost:hover { color: var(--site-ink); border-color: var(--site-blue); background: #fff; }

/*  On the navy hero and the navy call-to-action band. */
.btn-on-dark {
    color: var(--site-navy);
    background: #fff;
}

.btn-on-dark:hover { color: var(--site-navy); filter: brightness(.96); }

.btn-outline-light {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .35);
}

.btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.btn-lg { font-size: 16px; padding: 15px 26px; }
.btn-sm { font-size: 13.5px; padding: 9px 15px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------
   3. The bar
   ------------------------------------------------------------ */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--site-border);
}

.site-nav .wrap {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 72px;
}

/*  The lockup carries its own wordmark and its own tagline, so
    nothing is typed beside it. Height is set and the width
    follows, which is what keeps it in proportion whatever it is
    replaced with — and it will be replaced, the day the
    designer's vector file arrives. */
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { height: 40px; width: auto; display: block; }
.site-brand:hover { text-decoration: none; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    flex: 1 1 auto;
}

/*  `.site-body` on every rule below that colours a link, for the same reason the
    footer carries it: the base rule is `.site-body a:not(.btn)`, which is two
    classes and an element, so a bare `.nav-links a` loses to it and the whole
    menu comes out in link blue. Anything here that sets a link colour has to
    out-specify that rule — check it when adding one. */
.site-body .nav-links a {
    font-size: 14.5px;
    font-weight: 550;
    color: var(--site-ink-2);
    padding: 8px 13px;
    border-radius: 8px;
}

.site-body .nav-links a:hover { color: var(--site-ink); background: var(--site-bg-soft); text-decoration: none; }

/*  The referring doctor's door, set apart from the section anchors it sits
    among. `margin-left:auto` pushes it to the right end of the row on desktop,
    up against the action buttons; the mobile menu is a column with
    align-items:stretch, which ignores it, so the pill becomes a full-width row
    like the rest of the panel. An outlined pill in the brand blue, so it reads
    as a door rather than one more link. */
.site-body .nav-links a.nav-portal {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--site-blue);
    font-weight: 600;
    border: 1px solid var(--site-border-2);
    padding: 7px 13px;
    /*  The label is three words now — "Ref. Doctor login", so a laboratory's
        own doctor does not read a bare "Doctor login" as theirs — and a flex
        row will wrap it onto three lines the moment the bar is tight. It is one
        pill, so it stays on one line and does not shrink. */
    white-space: nowrap;
    flex: 0 0 auto;
}

.site-body .nav-links a.nav-portal svg { width: 16px; height: 16px; flex: 0 0 auto; }

/*  A second portal pill (Hospital login) sits next to the first (Ref. Doctor
    login). The first keeps `margin-left:auto` and pushes the pair to the right;
    the second must not also take auto, or the two auto margins split the free
    space and spread the pills apart — so it gets a fixed small gap instead. */
.site-body .nav-links a.nav-portal + a.nav-portal { margin-left: 6px; }

.site-body .nav-links a.nav-portal:hover {
    color: #fff;
    background: var(--site-blue);
    border-color: var(--site-blue);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/*  Sign in is a link and not a button on purpose: the two things
    this page is for are booking a demonstration and asking to be
    signed up. A laboratory that already has an account knows
    where the door is. */
/*  `a.nav-signin`, with the element, and not for decoration: two classes alone
    is 0-2-0 and the base rule is 0-2-1, so a class-only selector still lost and
    Sign in stayed link blue. The element takes it to 0-2-1, which ties, and this
    file is read after the base rule. */
.site-body a.nav-signin {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--site-ink);
    padding: 9px 14px;
    border-radius: 8px;
}

.site-body a.nav-signin:hover { background: var(--site-bg-soft); text-decoration: none; }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-border-2);
    border-radius: 9px;
    background: #fff;
    color: var(--site-ink);
    cursor: pointer;
}

.nav-toggle svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------
   4. Hero
   ------------------------------------------------------------ */

/*  White, on purpose, and it changed the whole page.

    The hero was navy — the sign-in page's panel, borrowed. That
    reads as "application chrome", which is the right note once
    somebody has bought this and the wrong one before they have:
    a landing page's first job is to feel open, and a dark slab is
    the opposite. Everything on it is dark-on-light now and the
    blues do the work instead of the background. */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(78% 62% at 84% 6%, rgba(79, 201, 240, .16) 0%, transparent 62%),
        radial-gradient(62% 58% at 4% 92%, rgba(21, 101, 216, .10) 0%, transparent 66%),
        #fff;
    color: var(--site-ink-2);
    padding: 80px 0 92px;
}

/*  The graph-paper wash, inverted for a light ground. It is a
    laboratory report sheet, and it is the one thing that says
    this is clinical software before a word is read. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(21, 101, 216, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 216, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(95% 75% at 62% 34%, #000 18%, transparent 100%);
            mask-image: radial-gradient(95% 75% at 62% 34%, #000 18%, transparent 100%);
    pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 48px;
    align-items: center;
}

.hero h1 {
    font-size: 54px;
    letter-spacing: -0.034em;
    margin-bottom: 20px;
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(96deg, var(--site-blue) 0%, var(--site-blue-2) 55%, var(--site-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--site-ink-3);
    max-width: 52ch;
    margin-bottom: 30px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 13.5px;
    color: var(--site-ink-3);
}

.hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes svg { width: 15px; height: 15px; color: var(--site-blue); flex: 0 0 auto; }

/* ============================================================
   The hero illustration
   ------------------------------------------------------------
   Drawn, not photographed and not the logo scaled up.

   Two things ruled out the obvious answers. A screenshot would
   put a real patient's name and a real result on a public page,
   and a blurred one looks like something is being hidden. And the
   logo artwork is a 440x374 bitmap: at the size this space wants
   it would be visibly soft, which is the one thing on a landing
   page everybody notices. Tracing it to SVG was tried and it came
   back a different logo — the flask's liquid gradient and the
   swoosh's navy-to-cyan sweep do not survive it.

   So this is a scene in the brand's own language rather than a
   copy of the mark: the flask that the logo is built on, the
   sweep behind it, and three artefacts the product actually
   produces — a tube label with a real barcode, the bench queue,
   and the turnaround figure. It is pure SVG and markup, so it is
   sharp at any size, and the real lockup stays in the bar above
   where its resolution is right.
   ============================================================ */
.hero-art {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    aspect-ratio: 560 / 520;
}

.hero-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/*  The artefacts are markup, not paths: they carry real text at
    real weights, and text drawn as an SVG path stops being text —
    it cannot be selected, read aloud, or re-flowed. */
.art-card {
    position: absolute;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid var(--site-border);
    border-radius: 13px;
    box-shadow: 0 2px 6px rgba(10, 23, 48, .05), 0 18px 42px -22px rgba(10, 23, 48, .45);
    padding: 11px 13px;
    animation: art-float 7s ease-in-out infinite;
}

@keyframes art-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -9px, 0); }
}

/*  The bubbles come off the neck. Slow, small and slightly out of
    step with the cards, so the picture breathes rather than
    pulses — three things moving on one beat reads as a loading
    spinner. */
.lsBubbles circle { animation: ls-rise 5.5s ease-in-out infinite; transform-origin: center; }
.lsBubbles circle:nth-child(2) { animation-delay: -1.4s; }
.lsBubbles circle:nth-child(3) { animation-delay: -2.8s; }
.lsBubbles circle:nth-child(4) { animation-delay: -4.1s; }

@keyframes ls-rise {
    0%, 100% { transform: translateY(0); opacity: .95; }
    50%      { transform: translateY(-12px); opacity: .6; }
}

/* ---- the tube label ---- */
.art-label { top: 6%; left: -4%; width: 40%; animation-delay: -1.2s; }

.art-label .cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--site-ink-faint);
    margin-bottom: 7px;
}

.art-label .cap b { color: var(--site-blue); font-weight: 700; }
.art-label svg { display: block; width: 100%; height: 34px; }

.art-label .code {
    display: block;
    text-align: center;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .16em;
    color: var(--site-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 5px;
}

.art-label .sub {
    display: block;
    text-align: center;
    font-size: 9.5px;
    color: var(--site-ink-faint);
    margin-top: 2px;
}

/* ---- the bench queue ---- */
.art-queue { bottom: 3%; right: -3%; width: 56%; padding: 12px 14px; animation-delay: -3.6s; }

.art-queue .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--site-ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--site-border);
}

.art-queue .hd span { font-size: 9px; font-weight: 600; color: var(--site-ink-faint); }

.art-queue .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 11px;
    color: var(--site-ink-2);
}

.art-queue .row + .row { border-top: 1px solid #f2f6fb; }

/* ---- the turnaround chip ---- */
.art-tat {
    top: 30%; right: -2%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 11px;
    animation-delay: -5.1s;
}

.art-tat .ring { width: 34px; height: 34px; flex: 0 0 auto; }
.art-tat b { display: block; font-size: 15px; color: var(--site-ink); letter-spacing: -.02em; line-height: 1.1; }
.art-tat span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--site-ink-faint); }

.pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pill-ok { background: #dcfce7; color: #15803d; }
.pill-run { background: #dbeafe; color: #1d4ed8; }
.pill-wait { background: #fef3c7; color: #b45309; }

/* ------------------------------------------------------------
   5. Trust strip
   ------------------------------------------------------------ */

.strip {
    border-bottom: 1px solid var(--site-border);
    background: #fff;
    padding: 26px 0;
}

.strip .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 48px;
    flex-wrap: wrap;
}

.strip-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--site-ink-2);
}

.strip-item svg { width: 18px; height: 18px; color: var(--site-blue); flex: 0 0 auto; }
.strip-item b { color: var(--site-ink); font-weight: 650; }

/* ------------------------------------------------------------
   6. The daily round — the seven steps
   ------------------------------------------------------------ */

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: step;
}

.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 22px 20px 20px;
    box-shadow: var(--site-shadow);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -13px;
    left: 20px;
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--site-blue-2), var(--site-blue));
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 10px -4px rgba(21, 101, 216, .8);
}

.step .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(41, 150, 243, .1);
    color: var(--site-blue);
    margin: 10px 0 13px;
}

.step .ic svg { width: 19px; height: 19px; }
.step h3 { font-size: 16px; margin-bottom: 7px; }
.step p { font-size: 13.8px; color: var(--site-ink-3); line-height: 1.6; }

/*  The one line on each card that is the reason the step exists.
    Kept visually apart because it is the sentence a laboratory
    manager repeats back. */
.step .note {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--site-border-2);
    font-size: 12.5px;
    color: var(--site-blue);
    font-weight: 550;
}

/* ------------------------------------------------------------
   7. Modules
   ------------------------------------------------------------ */

.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.module {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 22px 20px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.module:hover {
    border-color: var(--site-border-2);
    transform: translateY(-2px);
    box-shadow: var(--site-shadow);
}

.module .ic {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--site-navy-2), var(--site-blue));
    color: #fff;
    margin-bottom: 14px;
}

.module .ic svg { width: 19px; height: 19px; }
.module h3 { font-size: 16.5px; margin-bottom: 8px; }
.module p { font-size: 13.8px; color: var(--site-ink-3); line-height: 1.6; }

/* ------------------------------------------------------------
   8. Why — the claims that are actually true
   ------------------------------------------------------------ */

.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.reason {
    background: #fff;
    border: 1px solid var(--site-border);
    border-left: 3px solid var(--site-blue);
    border-radius: var(--site-radius-sm);
    padding: 24px 22px;
}

.reason h3 { font-size: 17px; margin-bottom: 9px; }
.reason p { font-size: 14.2px; color: var(--site-ink-3); }

.reason .tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--site-blue);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------
   9. Plans
   ------------------------------------------------------------ */

.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--site-border-2);
    border-radius: 999px;
    margin: 0 auto 12px;
}

.billing-toggle button {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--site-ink-3);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.billing-toggle button.on { background: var(--site-navy); color: #fff; }
.billing-toggle button:focus-visible { outline: 2px solid var(--site-blue); outline-offset: 2px; }

.billing-note { font-size: 13px; color: var(--site-ink-3); }
.billing-note b { color: var(--site-blue); }

.plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 26px 22px;
    position: relative;
}

.plan.is-popular {
    border-color: var(--site-blue);
    box-shadow: 0 0 0 1px var(--site-blue), var(--site-shadow);
}

.plan-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, var(--site-blue-2), var(--site-blue));
    border-radius: 999px;
    padding: 4px 13px;
    white-space: nowrap;
}

.plan h3 { font-size: 19px; margin-bottom: 6px; }
.plan .for { font-size: 13.2px; color: var(--site-ink-3); min-height: 42px; line-height: 1.5; }

.plan-price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-price .amount { font-size: 34px; font-weight: 700; color: var(--site-ink); letter-spacing: -.03em; }
.plan-price .per { font-size: 13.5px; color: var(--site-ink-3); }
.plan-price .quote { font-size: 26px; font-weight: 650; color: var(--site-ink); letter-spacing: -.02em; }

.plan-sub { font-size: 12.5px; color: var(--site-ink-faint); min-height: 34px; }
.plan-sub .save { color: #15803d; font-weight: 650; }

.plan .btn { margin: 16px 0 18px; }

.plan-limits {
    display: flex;
    gap: 8px;
    padding: 11px 0;
    margin-bottom: 14px;
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--site-ink-2);
}

.plan-limits span { display: inline-flex; align-items: center; gap: 6px; }
.plan-limits svg { width: 14px; height: 14px; color: var(--site-blue); flex: 0 0 auto; }
.plan-limits em { font-style: normal; color: var(--site-ink-faint); }

.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.plan li {
    display: flex;
    gap: 9px;
    font-size: 13.6px;
    line-height: 1.5;
    color: var(--site-ink-2);
}

.plan li svg { width: 15px; height: 15px; color: var(--site-blue); flex: 0 0 auto; margin-top: 3px; }

/* ---- comparison table ---- */

.compare-wrap {
    margin-top: 56px;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    /*  Nine hundred pixels of table on a telephone has to go
        somewhere, and the page itself must never scroll sideways. */
    overflow-x: auto;
}

table.compare { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }

table.compare th, table.compare td { padding: 12px 16px; text-align: left; }

table.compare thead th {
    position: sticky;
    top: 0;
    background: var(--site-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

table.compare thead th:first-child { border-top-left-radius: var(--site-radius); }
table.compare thead th:last-child { border-top-right-radius: var(--site-radius); }
table.compare thead th:not(:first-child) { text-align: center; }

table.compare tbody td:not(:first-child) { text-align: center; }

table.compare tbody tr { border-top: 1px solid var(--site-border); }
table.compare tbody tr:hover { background: var(--site-bg-soft); }

table.compare td:first-child { color: var(--site-ink-2); }

table.compare tr.group td {
    background: var(--site-bg-soft);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--site-ink-3);
    padding: 9px 16px;
}

.tick { color: #15803d; font-weight: 700; }
.cross { color: var(--site-ink-faint); }
.value { font-weight: 600; color: var(--site-ink); font-size: 13.2px; }

.compare-foot {
    padding: 14px 16px;
    border-top: 1px solid var(--site-border);
    font-size: 12.5px;
    color: var(--site-ink-3);
}

/* ------------------------------------------------------------
   10. Questions
   ------------------------------------------------------------ */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }

.faq details {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    padding: 4px 20px;
}

.faq details[open] { border-color: var(--site-border-2); }

.faq summary {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--site-ink);
    cursor: pointer;
    padding: 15px 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--site-ink-faint);
    border-bottom: 2px solid var(--site-ink-faint);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq .answer { padding: 0 0 18px; font-size: 14.5px; color: var(--site-ink-3); line-height: 1.7; }

/* ------------------------------------------------------------
   11. Call to action
   ------------------------------------------------------------ */

.cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 88% 0%, rgba(41, 150, 243, .4) 0%, transparent 60%),
        linear-gradient(150deg, var(--site-navy) 0%, var(--site-navy-3) 100%);
    color: #fff;
    padding: 74px 0;
    text-align: center;
}

.cta h2 { color: #fff; font-size: 36px; margin-bottom: 14px; }
.cta p { font-size: 17px; color: rgba(255, 255, 255, .8); max-width: 60ch; margin: 0 auto 28px; }
.cta .buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------ */

.site-foot { background: var(--site-navy); color: rgba(255, 255, 255, .68); padding: 56px 0 0; font-size: 14px; }

.foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 36px;
    padding-bottom: 40px;
}

.foot-brand img { height: 46px; width: auto; display: block; margin-bottom: 16px; }
.foot-brand p { font-size: 13.8px; line-height: 1.65; max-width: 34ch; }

.site-foot h4 {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

/*  Scoped with `.site-body`, and it has to be.

    The generic link rule at the top is `.site-body a:not(.btn)` — two classes
    and an element — so a bare `.site-foot a` loses to it and every link down
    here came out in link blue on navy. Legible enough to pass a glance and
    nowhere near a contrast anybody should ship. */
.site-body .site-foot a { color: rgba(255, 255, 255, .72); font-size: 13.8px; }
.site-body .site-foot a:hover { color: #fff; text-decoration: underline; }

.foot-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; }
.foot-contact svg { width: 15px; height: 15px; color: var(--site-cyan); flex: 0 0 auto; margin-top: 3px; }

/*  Who made it, said properly rather than as a credit line. The
    laboratory buying this is buying from a company, and the
    company's name, mark and address are the three things that
    make it possible to come back and ask for something. */
.foot-maker {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.foot-maker .by { display: flex; align-items: center; gap: 14px; }

.foot-maker .by .lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/*  The KeyCode lockup stacks its mark above the words, so it
    needs height to stay readable — at the 26px a horizontal logo
    would take, "TECHNOLOGY" is a smudge. */
.foot-maker .by img { height: 56px; width: auto; display: block; }
.foot-maker .legal { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.site-body .foot-maker .legal a { color: rgba(255, 255, 255, .72); font-size: 12.5px; }

/*  The four documents, on the maker line. They wrap onto their own row on a
    narrow screen rather than being hidden — a footer that drops its privacy
    link on a phone is a footer that drops it for most visitors. */
.foot-maker .foot-legal {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-left: 18px;
}

/*  There is deliberately no drawn separator in front of this group. A middle
    dot written as a ::before belongs to the group, so it wraps with it — and
    on a narrow footer that put a dot alone at the start of the link row with
    nothing before it. The margin says the same thing and cannot end up on a
    line of its own. */

/* ------------------------------------------------------------
   13. Forms — signup, demo
   ------------------------------------------------------------ */

.form-page { background: var(--site-bg-soft); padding: 56px 0 80px; min-height: 70vh; }

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 36px;
    align-items: start;
}

.form-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 32px;
    box-shadow: var(--site-shadow);
}

.form-card h1 { font-size: 30px; margin-bottom: 10px; }
.form-card .sub { font-size: 15px; color: var(--site-ink-3); margin-bottom: 26px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }

/*  `>` and inline-block, both deliberately.

    The "— optional" marker is a sibling of the label rather than inside it,
    because Html.LabelFor writes the whole element and there is nowhere to put
    it. A block label pushes that marker onto a line of its own, where it reads
    as a value rather than as a note about the field above it. Inline-block puts
    them back on one line and the input below still starts its own, because the
    input is a block.

    The child combinator keeps this off `.plan-pick label`, which is a flex row
    holding a radio and two lines of text. */
.field > label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--site-ink);
    margin-bottom: 6px;
}

.field > .opt,
.field label .opt { font-size: 13px; font-weight: 500; color: var(--site-ink-faint); }

.field .hint { display: block; font-size: 12.2px; color: var(--site-ink-faint); margin-top: 5px; }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field input[type=date],
.field select,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--site-ink);
    background: #fff;
    border: 1px solid var(--site-border-2);
    border-radius: 9px;
    padding: 11px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { resize: vertical; min-height: 92px; line-height: 1.6; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: #aeb9cb; }

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--site-blue);
    box-shadow: 0 0 0 3.5px rgba(41, 150, 243, .15);
}

.field .field-validation-error { display: block; font-size: 12.5px; color: var(--lab-danger); margin-top: 5px; }
.field input.input-validation-error,
.field select.input-validation-error,
.field textarea.input-validation-error { border-color: var(--lab-danger); }

/*  A choice of four with a sentence each does not fit a dropdown,
    and the plan is the one thing on this form worth thinking
    about before answering. */
.plan-pick { display: grid; gap: 10px; }

.plan-pick label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--site-border-2);
    border-radius: var(--site-radius-sm);
    padding: 13px 15px;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
    transition: border-color .15s ease, background .15s ease;
}

.plan-pick label:hover { border-color: #aeb9cb; background: var(--site-bg-soft); }
.plan-pick input { margin-top: 3px; accent-color: var(--site-blue); flex: 0 0 auto; }
.plan-pick label:has(input:checked) { border-color: var(--site-blue); background: rgba(41, 150, 243, .05); }
.plan-pick .nm { display: block; font-size: 14.5px; font-weight: 650; color: var(--site-ink); }
.plan-pick .ds { display: block; font-size: 12.8px; color: var(--site-ink-3); line-height: 1.5; }
.plan-pick .pr { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--site-blue); white-space: nowrap; }

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--lab-danger-soft);
    border: 1px solid rgba(185, 28, 28, .22);
    color: var(--lab-danger);
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.form-alert svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.form-alert ul { margin: 0; padding-left: 18px; }

/* ---- the panel beside the form ---- */

.form-aside { display: grid; gap: 16px; position: sticky; top: 92px; }

.aside-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 22px;
}

.aside-card.dark {
    background: linear-gradient(155deg, var(--site-navy) 0%, var(--site-navy-3) 100%);
    border-color: transparent;
    color: rgba(255, 255, 255, .8);
}

.aside-card.dark h3 { color: #fff; }
.aside-card h3 { font-size: 16px; margin-bottom: 12px; }
.aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.aside-card li { display: flex; gap: 10px; font-size: 13.8px; line-height: 1.55; }
.aside-card li svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--site-blue); }
.aside-card.dark li svg { color: var(--site-cyan); }

.site-body .aside-card .ring {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.aside-card .ring svg { width: 16px; height: 16px; color: var(--site-cyan); }

/* ------------------------------------------------------------
   14. Thank you
   ------------------------------------------------------------ */

.thanks { padding: 84px 0 96px; text-align: center; }
.thanks-card { max-width: 640px; margin: 0 auto; }

.thanks .tick-circle {
    width: 68px; height: 68px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(170deg, var(--site-blue-2), var(--site-blue));
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(21, 101, 216, .9);
}

.thanks .tick-circle svg { width: 32px; height: 32px; }
.thanks h1 { font-size: 34px; margin-bottom: 14px; }
.thanks p { font-size: 16.5px; color: var(--site-ink-3); margin-bottom: 12px; }
.thanks .next { margin: 28px auto 0; max-width: 460px; text-align: left; }

/* ------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 42px; }
    .hero h1 { font-size: 44px; }
    /* one column now, so it centres rather than hugging the right edge */
    .hero-art { margin: 0 auto; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr; }
    .form-aside { position: static; }
}

@media (max-width: 860px) {
    /*  The links collapse into a panel under the bar. Sign in and
        Book a demo stay in the bar itself — they are what somebody
        came for, and a call to action behind a hamburger is a call
        to action nobody makes. */
    .nav-links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border-bottom: 1px solid var(--site-border);
        padding: 10px var(--site-pad) 16px;
        box-shadow: var(--site-shadow);
    }

    .nav-links.open { display: flex; }
    .nav-links a { padding: 11px 12px; font-size: 15px; }

    /*  In the dropdown panel the pill is a full-width row like the others, with
        a rule above it to keep it apart from the section links. The desktop
        `margin-left:auto` has nothing to push against in a stretched column,
        but it is reset here so nothing about it can surprise a future edit. */
    .nav-links a.nav-portal {
        margin-left: 0;
        margin-top: 6px;
        padding-top: 15px;
        border: 0;
        border-top: 1px solid var(--site-border);
        border-radius: 0;
        justify-content: flex-start;
    }

    .nav-toggle { display: inline-flex; }
    .site-nav .wrap { gap: 12px; }
    .site-brand img { height: 34px; }

    /*  The portal pills stretch like every other row here, and until now the
        first one did not. `.nav-portal` carries `margin-left: auto` to push the
        pair to the right end of the *desktop* row, and the rule beside it says
        the mobile column ignores that because it stretches — which is not what
        a flex column does: an auto side margin overrides `stretch`, so the item
        shrinks to its content and sits against the right edge. The second pill
        has a fixed `margin-left: 6px` instead, so it stretched, and the two
        doors in one menu were aligned differently from each other. Both zeroed
        here, where the row is a column and there is nothing to push against. */
    .site-body .nav-links a.nav-portal,
    .site-body .nav-links a.nav-portal + a.nav-portal { margin-left: 0; }

    /*  Sign in used to be `display: none` here, and it lived outside the menu —
        so on a phone the laboratory's own staff had no Login in the bar at all.
        It is inside `.nav-links` now, which is what makes it a row in the mobile
        panel; all this rule has to do is undo the desktop pill padding so it
        matches the anchors above it. It keeps its weight and ink, because it is
        the door and not one more section link. */
    .site-body .nav-links a.nav-signin {
        padding: 11px 12px;
        font-size: 15px;
        border-radius: 8px;
    }
}

@media (max-width: 720px) {
    :root { --site-pad: 18px; }

    .section { padding: 64px 0; }
    .section-head { margin-bottom: 38px; }
    .section-head h2 { font-size: 30px; }
    .section-head .lead { font-size: 16px; }

    .hero { padding: 56px 0 68px; }
    .hero h1 { font-size: 34px; }
    .hero .lead { font-size: 16.5px; }
    .hero-cta .btn { flex: 1 1 100%; }

    /*  The illustration is three cards floating over a drawing, and the
        cards do not shrink with the box — their height comes from the
        text in them. At 375px the box was 315 tall and the cards needed
        380 between them, so the turnaround chip sat on top of the bench
        queue. Taller box, smaller cards, and they clear each other
        again. Measured, not guessed. */
    .hero-art { aspect-ratio: 400 / 470; max-width: 400px; }
    .art-card { padding: 9px 11px; border-radius: 11px; }
    .art-label { top: 1%; left: 0; width: 47%; }
    .art-label svg { height: 28px; }
    .art-tat { top: 25%; right: 0; padding: 8px 12px 8px 9px; }
    .art-tat .ring { width: 28px; height: 28px; }
    .art-tat b { font-size: 13.5px; }
    .art-queue { bottom: 0; right: 0; width: 74%; }

    .steps, .modules, .plans, .reasons, .foot-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .form-card { padding: 24px 20px; }
    .cta h2 { font-size: 27px; }
    .thanks h1 { font-size: 27px; }
    .foot-maker { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .site-body *, .site-body *::before, .site-body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/*  Nothing on this page is meant for paper, but somebody will
    print the plans to take into a meeting. */
/* ==========================================================================
   16. The legal pages — privacy, terms, refund, contact

   One column of prose, and the width is the whole design: 68 characters is
   what a person reads without losing the line, and a policy nobody finishes
   is a policy nobody has agreed to. Everything else here is there to make it
   navigable — a document like this is *scanned* for one clause far more often
   than it is read through, so every section has an id and a heading heavy
   enough to be found while scrolling.

   These pages print. A laboratory that is about to sign will print the terms,
   and a gateway's reviewer saves them to PDF, so the print block below is not
   decoration.
   ========================================================================== */
.legal-page { padding: 44px 0 72px; background: var(--site-bg); }

.legal-page .wrap { max-width: 860px; }

.legal-head { margin-bottom: 34px; }

.legal-head h1 {
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -.6px;
    color: var(--site-ink);
    margin: 0 0 10px;
}

.legal-head .legal-sub {
    font-size: 16px;
    color: var(--site-ink-3);
    margin: 0 0 14px;
    max-width: 62ch;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--site-ink-faint);
    padding-top: 14px;
    border-top: 1px solid var(--site-border);
}

/*  The other three documents, from each of them. Somebody who has found the
    privacy policy is one click from the refund terms, which is the pair a
    person actually wants to read together. */
.legal-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
}

.legal-jump a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--site-ink-2);
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    padding: 7px 15px;
    text-decoration: none;
}

.legal-jump a:hover { color: var(--site-blue); border-color: var(--site-blue); }
.legal-jump a[aria-current="page"] {
    color: #fff;
    background: var(--site-navy-3);
    border-color: var(--site-navy-3);
}

.legal-body { font-size: 15.5px; line-height: 1.72; color: var(--site-ink-2); }

.legal-body section { scroll-margin-top: 90px; }

.legal-body h2 {
    font-size: 21px;
    line-height: 1.3;
    color: var(--site-ink);
    margin: 38px 0 12px;
    padding-top: 8px;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
    font-size: 16.5px;
    color: var(--site-ink);
    margin: 24px 0 8px;
}

.legal-body p { margin: 0 0 14px; max-width: 68ch; }

.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.legal-body li { margin-bottom: 8px; }

.legal-body strong { color: var(--site-ink); font-weight: 600; }

.legal-body a { color: var(--site-blue); }

/*  A table of who holds what. It is the one part of the privacy policy that
    is genuinely a table — everything else is prose and would be worse as one. */
.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14.5px;
}

.legal-body th, .legal-body td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid var(--site-border);
}

.legal-body th { color: var(--site-ink); font-weight: 600; background: var(--site-bg-soft); }

/*  A wide table on a narrow phone scrolls inside its own box rather than
    widening the page — the same rule the product's own screens follow. */
.legal-scroll { overflow-x: auto; }

/*  What the reader must not miss. Used sparingly and never for emphasis:
    the two places it appears are "we are the processor, your laboratory is
    the controller" and "a report cannot be deleted from the audit trail". */
.legal-note {
    border-left: 3px solid var(--site-blue);
    background: #fff;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 0 0 20px;
    max-width: 68ch;
}

.legal-note p:last-child { margin-bottom: 0; }

/*  The contact block. Printed on all four pages, and it disappears entirely
    when the address has not been filled in — an empty heading over nothing is
    worse than no heading, and on a legal page it reads as an omission. */
.legal-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 26px 0 0;
}

.legal-card h3 { margin-top: 0; }
.legal-card address { font-style: normal; white-space: pre-line; margin-bottom: 12px; }
.legal-card .legal-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 14.5px; }
.legal-card .legal-kv dt { color: var(--site-ink-3); }
.legal-card .legal-kv dd { margin: 0; color: var(--site-ink); }

@media (max-width: 720px) {
    .legal-head h1 { font-size: 27px; }
    .legal-body { font-size: 15px; }
    .legal-card .legal-kv { grid-template-columns: 1fr; gap: 2px; }
    .legal-card .legal-kv dd { margin-bottom: 10px; }
}

@media print {
    .site-nav, .hero-mock, .cta, .nav-toggle, .billing-toggle { display: none !important; }
    .site-body { font-size: 12px; }
    .hero, .site-foot { background: #fff !important; color: #000 !important; }
    .hero h1, .cta h2 { color: #000 !important; }
    .plan, .step, .module, .compare-wrap { break-inside: avoid; box-shadow: none; }

    /*  A laboratory prints the terms before signing and a gateway's reviewer
        saves them to PDF, so these have to come out as a document rather than
        as a web page with its furniture on it. */
    .legal-jump { display: none !important; }
    .legal-page { padding: 0; }
    .legal-body { font-size: 11pt; line-height: 1.5; color: #000; }
    .legal-body h2, .legal-body h3, .legal-head h1 { color: #000; break-after: avoid; }
    .legal-body p, .legal-body li { max-width: none; }
    .legal-note, .legal-card { border: 1px solid #999; break-inside: avoid; }
}