/* =====================================================================
   KCI Smart Import Export - design system

   Hand-written on purpose. There is no Node toolchain on the build
   machine, and a site of this size does not need one: the whole
   stylesheet is smaller than a framework's reset alone, and it ships
   fingerprinted and pre-compressed via MapStaticAssets.

   Fonts are the platform UI stack. A web font would cost a DNS lookup,
   a TLS handshake and a render-blocking download before the first word
   appears, precisely the first-paint budget this site protects.
   ===================================================================== */


:root {
    /* Brand */
    --brand: #2671c6;
    --brand-strong: #1b569b;
    --brand-soft: #e7f0fb;
    --brand-contrast: #ffffff;

    --accent: #2f9e6a;
    --accent-soft: #e4f5ec;

    /* Surfaces */
    --bg: #ffffff;
    --bg-sunken: #f6f8fc;
    --surface: #ffffff;
    --border: #dadce0;
    --border-soft: #e8eaed;

    /* Text */
    --text: #1f1f1f;
    --text-muted: #5f6368;
    --text-faint: #80868b;

    /* State */
    --ok: #1e8e3e;
    --ok-soft: #e6f4ea;
    --warn: #e37400;
    --warn-soft: #fef7e0;
    --danger: #d93025;
    --danger-soft: #fce8e6;

    /* Shape */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .06);
    --shadow-2: 0 1px 3px rgba(60, 64, 67, .12), 0 4px 8px 3px rgba(60, 64, 67, .08);
    --shadow-3: 0 4px 8px rgba(60, 64, 67, .12), 0 8px 24px 4px rgba(60, 64, 67, .10);

    /* Home-page sections (see "home modules" at the end): navy ink, steel, sea,
       and a yellow signal accent. --slab is a filled panel that carries white
       text in both themes. */
    --ink: #13293d;
    --steel: #3e5c76;
    --sea: #1d6f8c;
    --paper: #f4f6f7;
    --line: #d5dde3;
    --signal: #f2b705;
    --signal-soft: #fdf3cf;
    --slab: #13293d;
    --slab-muted: #c9d6e0;
    --radius-xs: 6px;

    /* Rhythm */
    --gutter: 24px;
    --max-width: 1180px;
    --header-height: 64px;

    --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand: #7fb3f0;
        --brand-strong: #a9cbf6;
        --brand-soft: #172a41;
        --brand-contrast: #0b1220;

        --accent: #5cc48f;
        --accent-soft: #143324;

        --bg: #0f1720;
        --bg-sunken: #161f2a;
        --surface: #18222e;
        --border: #3c4043;
        --border-soft: #2d2e32;

        --text: #e8eaed;
        --text-muted: #9aa0a6;
        --text-faint: #80868b;

        --ok-soft: #12291a;
        --warn-soft: #2e2205;
        --danger-soft: #2d1513;

        --ink: #e3eaf0;
        --steel: #9fb3c3;
        --sea: #6cb8d6;
        --paper: #161f2a;
        --line: #2c3b4a;
        --signal-soft: #3a2f0c;
        --slab: #1a3048;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow-2: 0 2px 6px rgba(0, 0, 0, .55);
        --shadow-3: 0 8px 28px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --brand: #7fb3f0;
    --brand-strong: #a9cbf6;
    --brand-soft: #172a41;
    --brand-contrast: #0b1220;
    --accent: #5cc48f;
    --accent-soft: #143324;
    --bg: #0f1720;
    --bg-sunken: #161f2a;
    --surface: #18222e;
    --border: #3c4043;
    --border-soft: #2d2e32;
    --text: #e8eaed;
    --text-muted: #9aa0a6;
    --text-faint: #80868b;
    --ok-soft: #12291a;
    --warn-soft: #2e2205;
    --danger-soft: #2d1513;
    --ink: #e3eaf0;
    --steel: #9fb3c3;
    --sea: #6cb8d6;
    --paper: #161f2a;
    --line: #2c3b4a;
    --signal-soft: #3a2f0c;
    --slab: #1a3048;
}

/* ------------------------------------------------------------------ base */

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

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--brand); color: var(--brand-contrast);
    padding: 10px 18px; border-radius: var(--radius-sm);
    transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */

.shell { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1; }

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

.section { padding-block: clamp(48px, 7vw, 96px); }
.section--sunken { background: var(--bg-sunken); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }

.lede { font-size: 1.15rem; color: var(--text-muted); max-width: 62ch; }
.eyebrow {
    text-transform: uppercase; letter-spacing: .1em;
    font-size: .78rem; font-weight: 700; color: var(--brand); margin-bottom: .6em;
}
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------------------------------------------------------------- header */

.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; }

.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
    color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: .8rem;
}

/* The header lockup is a size smaller than the footer's: a 34px mark, a lighter product line. */
.site-header .brand { gap: 11px; font-size: 1rem; }
.site-header .brand-mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--shadow-1); }
.site-header .brand-sub { font-size: .6rem; letter-spacing: .16em; margin-top: 3px; }

/* The wrap and the nav run the full header height so the active underline can sit on
   the header's bottom edge, over its border. */
.site-header .wrap { align-self: stretch; }
.nav { display: flex; align-items: stretch; gap: 4px; margin-left: auto; align-self: stretch; }
.nav a {
    position: relative; display: flex; align-items: center; padding: 0 12px;
    color: var(--text-muted); font-size: .9rem; font-weight: 500;
    transition: color .15s ease;
}
.nav a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
    border-radius: 2px; background: var(--brand);
    transform: scaleX(0); transition: transform .2s ease;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a:hover::after { transform: scaleX(.5); }
.nav a.active { color: var(--text); }
.nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: 14px; }

/* Compact rather than the page buttons' 44px pill; the arrow says it opens another site. */
.header-actions .btn {
    height: 36px; padding: 0 14px 0 16px; gap: 6px;
    border-radius: 10px; font-size: .86rem;
}
.header-actions .btn svg { width: 14px; height: 14px; flex: none; }

.nav-toggle {
    display: none; margin-left: auto;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 10px;
    color: var(--text); cursor: pointer;
}

/* On desktop the wrapper is transparent to layout: nav and header-actions take part
   in the header's own flex row as if it were not there. */
.header-panel { display: contents; }

/* Six links and two buttons need about 1070px on one row; below that a link label
   would wrap onto a second line inside the header. */
@media (max-width: 1100px) {
    .nav-toggle { display: grid; place-items: center; }

    /* On mobile the wrapper becomes the dropdown — ONE positioned box holding both
       the links and the buttons. Positioning them separately put the buttons at a
       negative offset, overlapping the header. */
    .header-panel {
        display: none;
        position: absolute; top: var(--header-height); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--bg); border-bottom: 1px solid var(--border);
        padding: 10px var(--gutter) 16px;
        box-shadow: var(--shadow-2);
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
    }
    .site-header:has(#nav-toggle:checked) .header-panel { display: flex; }

    .nav, .header-actions {
        flex-direction: column; align-items: stretch;
        gap: 4px; margin: 0; padding: 0;
    }
    /* In the dropdown a link is a row with a filled chip for the active page; the
       underline belongs to the desktop row. */
    .nav a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: .95rem; }
    .nav a::after { content: none; }
    .nav a:hover { background: var(--bg-sunken); }
    .nav a.active { color: var(--brand); background: var(--brand-soft); }
    .header-actions .btn { height: 44px; }
    .header-actions {
        margin-top: 10px; padding-top: 12px;
        border-top: 1px solid var(--border-soft);
    }
    .header-actions form { display: contents; }
    .header-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--radius-pill);
    font-size: .95rem; font-weight: 600; font-family: inherit;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--brand); color: var(--brand-contrast); }
.btn--primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-2); }

.btn--ghost { background: transparent; color: var(--brand); border-color: var(--border); }
.btn--ghost:hover { background: var(--brand-soft); border-color: var(--brand); }

.btn--quiet { background: transparent; color: var(--text-muted); padding-inline: 14px; }
.btn--quiet:hover { background: var(--bg-sunken); color: var(--text); }

.btn--block { width: 100%; }
.btn--lg { padding: 14px 30px; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* ----------------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 26px;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card--hover:hover { box-shadow: var(--shadow-2); border-color: var(--border); transform: translateY(-2px); }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--text-muted); font-size: .95rem; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.icon-badge {
    width: 44px; height: 44px; border-radius: var(--radius);
    display: grid; place-items: center; margin-bottom: 16px;
    background: var(--brand-soft); color: var(--brand);
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge--accent { background: var(--accent-soft); color: var(--accent); }

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

.hero {
    padding-block: clamp(56px, 8vw, 112px);
    background:
        radial-gradient(1000px 420px at 12% -8%, var(--brand-soft), transparent 62%),
        radial-gradient(760px 380px at 96% 0%, var(--accent-soft), transparent 60%);
}
.hero h1 { max-width: 20ch; }
.hero .lede { font-size: 1.22rem; margin-block: 1.1em 1.8em; }

.hero-grid { display: grid; gap: 44px; align-items: center; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.trust-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; color: var(--text-muted); font-size: .88rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* ---------------------------------------------------------------- tables */

.data-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.data-card__head { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.data-card__head h3 { margin: 0; }
.data-card__body { padding: 24px; }

table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th, table.data td { padding: 13px 24px; text-align: left; }
table.data th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-faint); font-weight: 700; border-bottom: 1px solid var(--border-soft);
}
table.data td { border-bottom: 1px solid var(--border-soft); }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- chips */

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px; border-radius: var(--radius-pill);
    font-size: .78rem; font-weight: 650;
    background: var(--bg-sunken); color: var(--text-muted);
    border: 1px solid var(--border-soft);
}
.chip--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.chip--brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ----------------------------------------------------------------- forms */

.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: .88rem; font-weight: 600; }
.field .hint { font-size: .82rem; color: var(--text-faint); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
    width: 100%; padding: 11px 14px;
    font: inherit; font-size: .95rem;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
textarea { min-height: 140px; resize: vertical; }

.form-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 30px; }
.form-narrow { max-width: 460px; margin-inline: auto; }

.validation-message { color: var(--danger); font-size: .84rem; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but not positioned ones. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- notices */

.notice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: var(--radius);
    font-size: .92rem; margin-bottom: 18px; border: 1px solid transparent;
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.notice--info { background: var(--brand-soft); color: var(--text); }
.notice--ok { background: var(--ok-soft); color: var(--ok); }
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.notice--danger { background: var(--danger-soft); color: var(--danger); }

/* --------------------------------------------------------------- account */

.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.account-head h1 { font-size: 1.9rem; margin: 0; }
.account-head p { color: var(--text-muted); margin: .3em 0 0; }

.stat-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px 20px; }
.stat__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; }
.stat__value { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 52px 24px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty h3 { color: var(--text); }

/* Placeholder while an interactive component boots. Sized to match the real
   content so nothing shifts when it arrives. */
.skeleton {
    background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border-soft) 50%, var(--bg-sunken) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.3s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--bg-sunken); border-top: 1px solid var(--border-soft); padding-block: 52px 32px; font-size: .92rem; }
/* Explicit tracks, as on the Logistics ERP site. `1.5fr repeat(auto-fit, ...)` is invalid CSS (auto-fit
   cannot sit beside a flexible track), so the browser dropped it and the footer stacked into one column. */
.footer-grid { display: grid; gap: 32px 40px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.footer-brand p { color: var(--text-muted); margin-top: 14px; max-width: 34ch; }
.site-footer address { font-style: normal; color: var(--text-muted); line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
.site-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--brand); }
.footer-base {
    margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border-soft);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    color: var(--text-faint); font-size: .86rem;
}

/* -------------------------------------------------------------- blazor UI */

#blazor-error-ui {
    display: none;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
    background: var(--warn-soft); color: var(--text);
    padding: 14px var(--gutter); box-shadow: var(--shadow-3);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; font-size: 1.3rem; line-height: 1; }

.blazor-error-boundary { background: var(--danger-soft); color: var(--danger); padding: 16px 20px; border-radius: var(--radius); }

/* ================================================================ KCI additions */

/* Brand lockup: name on top, product line underneath. */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-sub { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
/* The KC mark, same as the Client Portal's (images/kci-mark.png: blue K, red C on white, scaled from its kci.jpg). */
img.brand-mark { display: block; flex: none; background: #fff; border: 1px solid var(--line); object-fit: cover; }

/* Home hero: dark, so the page opens like the current site does, without paying
   for a hero photograph on the critical path. Image can be layered in later via
   background-image on this class; the gradient stays as the fallback. */
.hero--dark {
    background:
        radial-gradient(900px 460px at 85% -10%, rgba(38, 113, 198, .55), transparent 60%),
        radial-gradient(700px 380px at 0% 100%, rgba(47, 158, 106, .35), transparent 60%),
        linear-gradient(160deg, #0f1720 0%, #16324f 60%, #1d4a75 100%);
    color: #ffffff;
}
.hero--dark h1 { color: #ffffff; max-width: 16ch; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); }
.hero--dark .lede { color: rgba(255, 255, 255, .84); max-width: 60ch; }
.eyebrow--light {
    display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .14); color: #ffffff; letter-spacing: .08em;
}
.trust-row--light { color: rgba(255, 255, 255, .8); }
.trust-row--light svg { color: #8fe3b6; }

/* Audience switcher on the home hero: three pills, one per audience, linking to
   the matching section further down. Pure anchors, no script. */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-pill);
    font-weight: 650; font-size: .95rem; text-decoration: none;
    border: 1px solid transparent; transition: transform .1s ease, box-shadow .15s ease;
}
.pill:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.pill--import { background: #ffffff; color: #16324f; }
.pill--export { background: #16324f; color: #ffffff; border-color: rgba(255, 255, 255, .28); }
.pill--agent { background: var(--accent); color: #ffffff; }

/* Tick lists used for the three promises per audience. */
.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--text); }
.checks svg { width: 18px; height: 18px; color: var(--ok); margin-top: 4px; }
.hero--dark .checks li { color: rgba(255, 255, 255, .9); }

/* Numbered steps in the audience aside. */
.card--panel { box-shadow: var(--shadow-3); }
.steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 12px; color: var(--text-muted); font-size: .95rem; }
.steps li::marker { color: var(--brand); font-weight: 700; }
.steps strong { color: var(--text); }

/* Contact details with a leading icon. */
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.contact-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.contact-list svg { width: 18px; height: 18px; color: var(--brand); margin-top: 3px; }

/* Importers page: the margin chain, drawn like a product screen (a panel of parties with initials,
   what each adds per unit, and a floating card with the margin you keep), then "we do it for you" cards. */
.mc { position: relative; }
.mc-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: .95rem; }
.mc-group { padding: 14px 22px 18px; }
.mc-group + .mc-group { border-top: 1px solid var(--border-soft); }
.mc-group--kc { background: var(--brand-soft); }
.mc-label { display: flex; justify-content: space-between; gap: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.mc-group--kc .mc-label > span:first-child { color: var(--brand); }
.mc-label-ok { color: var(--ok); }
.mc-rows { list-style: none; margin: 0; padding: 0; }
.mc-rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 7px 0; }
.mc-rows li + li { border-top: 1px dashed var(--border-soft); }
.mc-group--kc .mc-rows li + li { border-top-color: rgba(38, 113, 198, .2); }
.mc-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.mc-av--mf { background: #0f766e; }
.mc-av--ex { background: #7c3aed; }
.mc-av--wh { background: #c2410c; }
.mc-av--tr { background: #b91c1c; }
.mc-av--kc { background: var(--brand); }
.mc-av--ca { background: #334155; }
.mc-rows--status li { grid-template-columns: 32px minmax(0, 1fr) auto; }
.mc-add--ok { color: var(--ok); }
.mc-float .mc-float-big--sm { font-size: 1.15rem; color: #fff; margin: 6px 0; }

/* A numbered, connected flow of steps (exporters page). */
.phase-flow { list-style: none; counter-reset: phase; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.phase-flow li { counter-increment: phase; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; }
.phase-flow li::before { content: counter(phase); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: .85rem; position: relative; z-index: 1; }
.phase-flow li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--brand-soft); }
.phase-flow b { font-size: 1rem; padding-top: 4px; }
.phase-flow span { color: var(--text-muted); font-size: .95rem; margin-top: 2px; }
.mc-who { display: flex; flex-direction: column; font-weight: 600; font-size: .92rem; line-height: 1.25; min-width: 0; }
.mc-who small { font-weight: 400; font-size: .76rem; color: var(--text-muted); }
.mc-add { font-size: .78rem; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.mc-add--up { color: var(--danger); }
.mc-add em { display: block; font-style: normal; font-size: .7rem; font-weight: 700; opacity: .8; text-align: right; }
.mc-total small { display: block; font-size: .74rem; font-weight: 500; opacity: .85; }
.mc-price { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; }
.mc-total b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mc-total--bad { background: var(--danger-soft); color: var(--danger); }
.mc-total--good { background: var(--ok-soft); color: var(--ok); }
/* in the flow, pulled up into the panel's empty bottom padding only (14px of its 18px), so it never covers a total */
.mc-float { position: relative; z-index: 1; margin: -14px 0 0 -28px; width: min(300px, 80%); padding: 16px 18px; border-radius: var(--radius); background: var(--slab); color: #fff; box-shadow: var(--shadow-3); border: 1px solid rgba(255, 255, 255, .12); }
.mc-float-top { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slab-muted); }
.mc-float-big { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 4px 0 6px; color: #7ee2a8; font-variant-numeric: tabular-nums; }
.mc-float p { margin: 0; font-size: .85rem; color: var(--slab-muted); }
.mc-float b { color: #fff; }
.mc-float-big span { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(126, 226, 168, .16); font-size: .75rem; font-weight: 700; letter-spacing: 0; }
@media (max-width: 900px) {
    .mc-float { width: auto; margin: 14px 0 0; }
}
.dfy p { color: var(--text-muted); }
.dfy .dfy-q { color: var(--text); font-style: italic; font-size: 1.02rem; margin: 4px 0 14px; }
.dfy-alone { margin: 0 0 16px; padding-left: 1.2em; color: var(--text-muted); font-size: .94rem; display: grid; gap: 4px; }
.dfy .checks { margin-top: 10px; }

/* Contact page: the two ways to reach us, portal first. */
.channels { display: grid; gap: 28px; align-self: start; }
.channel + .channel { padding-top: 28px; border-top: 1px solid var(--border-soft); }
.channel h2 { font-size: 1.3rem; margin: 0; }
.channel p { color: var(--text-muted); margin: 8px 0 0; }
.channel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.channel .contact-list { margin-top: 18px; }
.channel .contact-list b { color: var(--text); }
.channel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Side-by-side fields that stack on narrow screens. */
.field-row { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .field-row, .field-row--3 { grid-template-columns: 1fr; } }
input[type="tel"], input[type="date"] {
    width: 100%; padding: 11px 14px;
    font: inherit; font-size: .95rem;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Wide tables scroll sideways on a phone instead of breaking the layout. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data { min-width: 760px; }

/* ================================================================ home modules

   The Importers, Exporters and F/Agent sections below the home hero, after the
   one-page design (kci-smart-import-export.html). Squarer and more editorial than
   the rest of the site: navy ink, 6px corners, rules rather than cards, a yellow
   signal accent. Everything that shares a name with the site's own classes (.btn,
   .lede, headings) is overridden only inside .part, so the other pages keep their
   look. The design's Archivo font is not loaded: the system stack stays, per the
   note at the top of this file. */

.part { padding-block: 72px 88px; color: var(--ink); scroll-margin-top: var(--header-height); }
.part + .part { border-top: 1px solid var(--line); position: relative; }
.part + .part::before {
    content: ""; position: absolute; top: -1px; height: 3px; width: 56px; background: var(--signal);
    left: max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
}

.part h2, .part h3, .part h4 { margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.part .display { font-weight: 800; font-size: clamp(34px, 5.2vw, 60px); letter-spacing: -.025em; max-width: 16ch; }
.part .lede { font-size: 1.1875rem; color: var(--steel); max-width: 56ch; margin: 20px 0 28px; }
.block-title { font-weight: 750; font-size: clamp(24px, 3vw, 32px); max-width: 24ch; }

.part .btn { border-radius: var(--radius-xs); border: 2px solid var(--ink); padding: 12px 22px; font-size: 1rem; font-weight: 700; }
.part .btn--primary { background: var(--ink); color: var(--bg); }
.part .btn--primary:hover { background: var(--steel); border-color: var(--steel); box-shadow: none; }
.part .btn--ghost { background: transparent; color: var(--ink); }
.part .btn--ghost:hover { background: var(--paper); border-color: var(--ink); }

.part-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.part-hero--end { align-items: end; }
.part-hero--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; }

/* --- importers: trader price against landed cost */

.price-compare { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 28px; background: var(--paper); }
.price-compare h4 { margin-bottom: 18px; font-size: .9375rem; font-weight: 600; color: var(--steel); letter-spacing: 0; }
.bar-row { margin-bottom: 22px; }
.bar-row:last-of-type { margin-bottom: 8px; }
.bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; margin-bottom: 6px; }
.bar { display: flex; height: 42px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.seg { height: 100%; flex: none; }
.seg--trader { background: var(--ink); }
.seg--goods { background: var(--steel); }
.seg--freight { background: var(--sea); }
.seg--duty { background: #7fa7bd; }
.seg--keep { background: repeating-linear-gradient(135deg, var(--signal) 0 10px, #f7cb3d 10px 20px); }
.bar-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--steel); margin-top: 14px; }
.bar-key span::before {
    content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px;
    margin-right: 6px; vertical-align: -1px;
}
.bar-key--goods::before { background: var(--steel); }
.bar-key--freight::before { background: var(--sea); }
.bar-key--duty::before { background: #7fa7bd; }
.bar-key--keep::before { background: var(--signal); }
.keep-callout { margin: 18px 0 0; font-size: 1.0625rem; }
.keep-callout b { background: var(--signal-soft); padding: 1px 6px; border-radius: 3px; }

/* --- importers: margin calculator (a GET form; the server does the sums) */

.calc {
    margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden;
    scroll-margin-top: calc(var(--header-height) + 16px);
}
.calc-inputs { padding: 36px; }
.calc-inputs > p { color: var(--steel); margin: 10px 0 26px; max-width: 48ch; }
.calc-inputs .btn { margin-top: 24px; }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.calc-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.calc-field small { display: block; font-weight: 400; color: var(--steel); font-size: .8125rem; }
.calc-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.calc-input:focus-within { border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent); }
.calc-input span { padding-inline: 10px; color: var(--steel); font-size: .9375rem; }
.calc-input input[type="number"], .calc-input input[type="number"]:focus {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: 11px 10px; min-width: 0; font-size: 1.0625rem; color: var(--ink);
}
.calc-result {
    background: var(--slab); color: #ffffff; padding: 36px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.calc-big { font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--signal); }
.calc-big-label { font-size: 1rem; color: var(--slab-muted); margin-top: 10px; }
.calc-result dl {
    margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-size: .9375rem;
    border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 18px;
}
.calc-result dt { color: var(--slab-muted); }
.calc-result dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-note { font-size: .8125rem; color: #9fb3c3; margin: 0; }

.hook {
    margin-top: 64px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start;
    padding-block: 28px; border-block: 1px solid var(--line);
}
.hook-when { font-weight: 800; font-size: 1.625rem; line-height: 1.1; }
.hook p { margin: 0; max-width: 70ch; }
.hook p + p { margin-top: 10px; color: var(--steel); }

.svc-list { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; }
.svc-list dl { margin: 0; }
.svc-list dl > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; padding-block: 18px; border-top: 1px solid var(--line); }
.svc-list dl > div:last-child { border-bottom: 1px solid var(--line); }
.svc-list dt { font-weight: 700; }
.svc-list dd { margin: 0; color: var(--steel); }

/* --- five numbered steps (FlowSteps.razor) */

.flow { margin-top: 72px; }
.flow ol { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; }
.flow li { counter-increment: step; padding-right: 20px; position: relative; }
.flow li::before {
    content: counter(step); display: block; position: relative; z-index: 1;
    width: 40px; height: 40px; line-height: 36px; text-align: center; margin-bottom: 14px;
    font-weight: 800; font-size: 1.25rem;
    border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
.flow li::after { content: ""; position: absolute; top: 19px; left: 40px; right: 0; height: 2px; background: var(--line); }
.flow li:last-child::after { display: none; }
.flow b { display: block; margin-bottom: 4px; }
.flow span { color: var(--steel); font-size: .9375rem; }

.closing {
    margin-top: 72px; background: var(--paper); border-radius: var(--radius-xs); padding: 40px;
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.closing p { margin: 8px 0 0; color: var(--steel); max-width: 52ch; }
.closing .closing-contact { margin-top: 14px; font-size: .9375rem; max-width: none; }

/* --- exporters */

.mode-compare { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 28px; }
.mode-compare h4 { margin-bottom: 4px; font-size: 1.125rem; }
.mode-compare-sub { margin: 0 0 20px; color: var(--steel); font-size: .875rem; }
.mrow { display: grid; grid-template-columns: 120px 1fr 84px; align-items: center; gap: 12px; margin-bottom: 12px; font-size: .9375rem; }
.mrow-track { height: 26px; background: var(--paper); border-radius: 3px; overflow: hidden; }
.mrow-fill { height: 100%; background: var(--sea); }
.mrow--courier .mrow-fill { background: #9aa9b5; }
.mrow-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrow-amt small { display: block; font-size: .75rem; font-weight: 400; color: var(--steel); }
.mode-compare-foot { font-size: .8125rem; color: var(--steel); margin: 16px 0 0; }

.reasons { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.reason { padding-block: 26px; border-top: 1px solid var(--line); }
.reason h4 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 750; }
.reason p { margin: 0; color: var(--steel); max-width: 52ch; }
.countries { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.countries li {
    font-size: .8125rem; font-weight: 600; padding: 3px 10px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill);
}

/* --- quick quote (QuoteDemo.razor): how it works in the Client Portal, as a looping
       animation. Nothing here is a form. Without the animation (reduced motion) the
       frame rests on the last step, which is why that state is the unanimated one. */

.qd {
    margin-top: 64px; border: 2px solid var(--slab); border-radius: var(--radius-xs); overflow: hidden;
    scroll-margin-top: calc(var(--header-height) + 16px);
}
.qd-head {
    background: var(--slab); color: #ffffff; padding: 20px 28px;
    display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: baseline;
}
.qd-head h3 { font-weight: 750; font-size: 1.5rem; }
.qd-head p { margin: 0; color: var(--slab-muted); font-size: .9375rem; }
.qd-body { padding: 28px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; }

.qd-list { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: qd; }
.qd-list li { counter-increment: qd; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding-block: 9px; }
.qd-list li + li { border-top: 1px solid var(--line); }
.qd-list li::before {
    content: counter(qd); grid-row: span 2; align-self: start; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
    background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.qd-list b { font-weight: 700; }
.qd-list span { color: var(--steel); font-size: .9375rem; }
.qd-note { margin: 16px 0 0; font-size: .8125rem; color: var(--steel); max-width: 46ch; }

.qd-screen {
    --qd-loop: 24s;
    position: relative; min-width: 0; overflow: hidden; font-size: .8125rem; line-height: 1.4;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-2);
}
.qd-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.qd-dots { display: flex; gap: 5px; }
.qd-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.qd-bar-title { flex: 1; min-width: 0; font-weight: 600; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-tag { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--signal-soft); color: var(--ink); font-size: .6875rem; font-weight: 700; }

.qd-stepper { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 12px 12px 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.qd-stepper span { position: relative; padding: 5px 2px; text-align: center; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 5); border-radius: var(--radius-pill); background: var(--signal-soft); box-shadow: inset 0 0 0 1px var(--signal); transform: translateX(400%); }

.qd-stage { display: grid; padding: 14px 12px 16px; }
.qd-scene { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; }
.qd-scene--last { opacity: 1; }
.qd-scene-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.qd-scene-head b { font-size: .9375rem; }
.qd-scene-head span { color: var(--steel); }

.qd-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qd-field { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qd-field--wide { grid-column: span 2; }
.qd-field--full { grid-column: 1 / -1; }
.qd-field > span { font-size: .6875rem; font-weight: 600; color: var(--steel); }
.qd-field > b { display: block; min-height: 34px; padding: 7px 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The box stays put; only the value inside it comes and goes. */
.qd-field { position: relative; }
.qd-field::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; border: 1px solid var(--line); border-radius: 4px; pointer-events: none; }

.qd-next { padding-top: 4px; display: flex; justify-content: flex-end; }
.qd-btn { display: inline-block; padding: 6px 12px; border-radius: 4px; background: var(--ink); color: var(--bg); font-weight: 700; white-space: nowrap; }
.qd-btn--go { background: var(--brand); color: var(--brand-contrast); }

.qd-rate { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.qd-logo { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); font-weight: 800; color: var(--steel); }
.qd-rate-main { min-width: 0; display: flex; flex-direction: column; }
.qd-rate-main small { color: var(--steel); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-price { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qd-price small { margin-left: 4px; font-weight: 600; color: var(--steel); font-size: .6875rem; }
.qd-pick { border-color: var(--sea); box-shadow: inset 3px 0 0 var(--sea); }

.qd-detail { padding: 8px 10px 10px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); }
.qd-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); overflow: hidden; }
.qd-tabs span { padding-bottom: 5px; font-weight: 600; color: var(--steel); white-space: nowrap; }
.qd-tabs .is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sea); }
.qd-detail dl { margin: 6px 0 8px; }
.qd-detail dl > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 2px; }
.qd-detail dt { color: var(--steel); }
.qd-detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.qd-detail-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
.qd-done { padding: 7px 10px; border-radius: 4px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }

.qd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sea); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: no-preference) {
    /* Every animation shares one loop length, so a start delay (--d) places a part on
       the timeline and it keeps its place on every round. */
    .qd-scene { animation: qd-scene var(--qd-loop) linear var(--d, 0s) infinite backwards; }
    .qd-scene--last { animation-name: qd-scene-last; }
    .qd-pop { animation: qd-pop var(--qd-loop) linear var(--d, 0s) infinite backwards; }
    .qd-press { animation: qd-press var(--qd-loop) linear var(--d, 0s) infinite backwards; }
    .qd-pick { animation: qd-pop var(--qd-loop) linear var(--d, 0s) infinite backwards, qd-pick var(--qd-loop) linear var(--p, 0s) infinite backwards; }
    .qd-thumb { animation: qd-thumb var(--qd-loop) cubic-bezier(.4, 0, .2, 1) infinite; }
    .qd-progress { animation: qd-progress var(--qd-loop) linear infinite; }
    .qd-screen:hover * { animation-play-state: paused; }
}

/* A step is on stage for 3.5s of the 24s loop; the last one for 10s. */
@keyframes qd-scene {
    0% { opacity: 0; transform: translateX(14px); }
    1.4%, 13.4% { opacity: 1; transform: none; }
    14.58%, 100% { opacity: 0; transform: translateX(-14px); }
}
@keyframes qd-scene-last {
    0% { opacity: 0; transform: translateX(14px); }
    1.4%, 40.4% { opacity: 1; transform: none; }
    41.67%, 100% { opacity: 0; transform: none; }
}
/* Shown for half a loop: longer than any step lasts, and gone again well before the
   step comes back. */
@keyframes qd-pop {
    0% { opacity: 0; transform: translateY(5px); }
    1.4%, 50% { opacity: 1; transform: none; }
    51%, 100% { opacity: 0; transform: none; }
}
@keyframes qd-press {
    0%, 3.2%, 100% { transform: none; filter: none; }
    1.6% { transform: scale(.93); filter: brightness(1.35); }
}
@keyframes qd-pick {
    0% { border-color: var(--line); box-shadow: inset 0 0 0 var(--sea); }
    1.4%, 50% { border-color: var(--sea); box-shadow: inset 3px 0 0 var(--sea); }
    51%, 100% { border-color: var(--line); box-shadow: inset 0 0 0 var(--sea); }
}
@keyframes qd-thumb {
    0%, 13.4% { transform: translateX(0); }
    14.58%, 28% { transform: translateX(100%); }
    29.17%, 42.6% { transform: translateX(200%); }
    43.75%, 57.2% { transform: translateX(300%); }
    58.33%, 100% { transform: translateX(400%); }
}
@keyframes qd-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- forwarding agents */

.fa-from { font-size: .9375rem; color: var(--steel); margin: 0 0 18px; }
.fa-from b { color: var(--ink); }
.fa-block { padding-top: 80px; }
.fa-block .flow { margin-top: 0; }

.fa-map { margin: 0; padding: 12px 8px 4px; background: var(--paper); border-radius: var(--radius-xs); }
.fa-map svg { width: 100%; }
.fa-map .ring { fill: none; stroke: var(--line); stroke-width: 1.2; }
.fa-map .ringlabel { font-size: 10.5px; font-weight: 600; fill: var(--steel); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.fa-map .spoke { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; }
.fa-map .c circle { fill: var(--sea); stroke: var(--surface); stroke-width: 2; }
.fa-map .c text { font-size: 12.5px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
/* The hub is yellow in both themes, so its ring and label stay dark navy. */
.fa-map .hub { fill: var(--signal); stroke: #13293d; stroke-width: 2.5; }
.fa-map .hubt { font-size: 11px; font-weight: 800; fill: #13293d; }
.fa-map .hubs { font-size: 9px; fill: #13293d; }
.fa-map figcaption { font-size: .8125rem; color: var(--steel); padding: 4px 12px 10px; }

.gateways { margin-top: 48px; border-block: 1px solid var(--line); }
.gateways .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gw { padding: 22px 24px 22px 0; }
.gw + .gw { border-left: 1px solid var(--line); padding-left: 24px; }
.gw b { display: block; margin-bottom: 4px; font-size: .9375rem; font-weight: 600; color: var(--steel); }
.gw span { font-weight: 750; font-size: 1.1875rem; }

.promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.promise-statement { background: var(--slab); color: #ffffff; border-radius: var(--radius-xs); padding: 40px; }
.promise-statement .block-title { color: var(--signal); font-weight: 800; font-size: clamp(26px, 3.2vw, 36px); }
.promise-statement p { color: #d3dee6; margin: 16px 0 0; max-width: 46ch; }
.promise ul { list-style: none; margin: 0; padding: 0; }
.promise li { padding-block: 18px; border-top: 1px solid var(--line); }
.promise li:last-child { border-bottom: 1px solid var(--line); }
.promise li b { display: block; margin-bottom: 4px; font-size: 1.125rem; }
.promise li span { color: var(--steel); }

.svc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 32px; }
.svc-cols h4 { font-size: 1.375rem; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.svc-dir { font-size: .9375rem; color: var(--steel); margin: 10px 0 4px; }
.svc-cols dl { margin: 0; }
.svc-cols dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.svc-cols dt { font-weight: 700; }
.svc-cols dd { margin: 0; color: var(--steel); }

.fa-portal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.fa-portal p { color: var(--steel); max-width: 50ch; margin: 16px 0 0; }
.tracker { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 24px; font-size: .9375rem; }
.tracker-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tracker-head b { font-size: 1.0625rem; }
.tracker-head span { color: var(--steel); font-size: .875rem; text-align: right; }
.tracker ol { list-style: none; margin: 0; padding: 0; }
.tracker li { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: start; padding-bottom: 14px; position: relative; }
.tracker li::before { content: ""; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--sea); }
.tracker li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 19px; bottom: 0; width: 2px; background: var(--sea); }
.tracker li.is-now b { justify-self: start; padding: 0 4px; border-radius: 3px; background: var(--signal-soft); }
.tracker li.is-next { color: var(--steel); }
.tracker li.is-next::before { background: var(--surface); border: 2px solid var(--line); }
.tracker li.is-next::after { background: var(--line); }
.tracker em { font-style: normal; font-size: .8125rem; color: var(--steel); white-space: nowrap; }

@media (max-width: 900px) {
    .part-hero, .part-hero--map, .calc, .svc-list, .reasons, .promise, .svc-cols, .fa-portal { grid-template-columns: 1fr; }
    .part-hero, .part-hero--map { gap: 36px; }
    .hook { grid-template-columns: 1fr; gap: 10px; }
    .svc-list dl > div, .svc-cols dl > div { grid-template-columns: 1fr; gap: 4px; }
    .flow ol { grid-template-columns: 1fr; gap: 20px; }
    .flow li { display: grid; grid-template-columns: 52px 1fr; padding: 0; }
    .flow li::before { grid-row: span 2; margin: 0; }
    .flow li::after { display: none; }
    .qd-body { grid-template-columns: 1fr; gap: 28px; }
    .gateways .wrap { grid-template-columns: 1fr; }
    .gw, .gw + .gw { padding: 16px 0; border-left: 0; }
    .gw + .gw { border-top: 1px solid var(--line); }
    .fa-block { padding-top: 56px; }
}

@media (max-width: 560px) {
    .part { padding-block: 56px 64px; }
    .calc-fields { grid-template-columns: 1fr; }
    .calc-inputs, .calc-result, .closing, .price-compare, .mode-compare, .promise-statement { padding: 22px; }
    .mrow { grid-template-columns: 84px 1fr 70px; }
    .qd-head, .qd-body { padding-inline: 18px; }
    .qd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qd-field--wide { grid-column: 1 / -1; }
    .qd-stepper span { font-size: .6875rem; }
}

/* ======================================================================== news

   /news and /news/{slug}. The classes inside .news-body (key-takeaways, rate-table,
   rate-up, rate-down, shipper-impact) are the ones the ERP's editor and the Claude
   prompt produce; the sanitizer lets no other class through. */

/* The column is narrower than the page but starts at the same left edge as the
   heading above it, so the limit is on what is inside the wrap, not on the wrap. */
.news > * { max-width: 860px; }

.hero--compact { padding-block: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 32px); }
.hero--compact .lede { margin-bottom: 0; }

.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.news-filter a {
    padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .9rem; font-weight: 600;
}
.news-filter a:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.news-filter a[aria-current="true"] { background: var(--brand-soft); border-color: transparent; color: var(--brand); }

.news-meta { color: var(--text-faint); font-size: .86rem; margin: 0 0 6px; }
.news-meta a { color: var(--text-muted); font-weight: 600; }
.news-summary { color: var(--text-muted); }

.news-card { padding-block: 22px; border-bottom: 1px solid var(--border-soft); }
.news-card:first-of-type { padding-top: 0; }
.news-card h2 { font-size: 1.3rem; letter-spacing: -.01em; margin: 0 0 6px; }
.news-card h2 a { color: var(--text); }
.news-card h2 a:hover { color: var(--brand); }

.news-pager {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    margin-top: 30px; font-size: .9rem; color: var(--text-muted);
}
.news-pager > :first-child { justify-self: start; }
.news-pager > :last-child { justify-self: end; }

.news-article h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); margin-top: 10px; }
.news-article .news-summary { font-size: 1.15rem; margin-bottom: 28px; }

.news-body { overflow-wrap: anywhere; }
.news-body h2 { font-size: 1.35rem; margin-top: 1.8em; }
.news-body h3 { font-size: 1.1rem; margin-top: 1.4em; }
.news-body ul, .news-body ol { padding-left: 1.3em; margin: 0 0 1em; }
.news-body li { margin-bottom: .3em; }
.news-body blockquote { margin: 1.2em 0; padding: .2em 1.1em; border-left: 3px solid var(--border); color: var(--text-muted); }
.news-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .94rem; font-variant-numeric: tabular-nums; }
.news-body th, .news-body td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.news-body th { background: var(--bg-sunken); font-weight: 650; }
.news-body .key-takeaways {
    border-left: 4px solid var(--signal); background: var(--signal-soft);
    padding: 14px 18px; margin: 0 0 1.4em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.news-body .key-takeaways ul { margin: 0; }
.news-body .rate-up { color: var(--danger); font-weight: 650; }
.news-body .rate-down { color: var(--ok); font-weight: 650; }
.news-body .shipper-impact { background: var(--brand-soft); padding: 16px 20px; margin-top: 1.8em; border-radius: var(--radius); }
.news-body .shipper-impact > :first-child { margin-top: 0; }

/* A rate table is wider than a phone: it scrolls sideways inside the article
   instead of pushing the page wider. */
@media (max-width: 640px) {
    .news-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.news-tags { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.news-sources { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: .9rem; }
.news-sources h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 10px; }
.news-sources ul { padding-left: 1.2em; margin: 0; display: grid; gap: 4px; }
/* ================================================================= rates frame

   RatesFrame.razor on /fagents: the lane picker on a navy slab, a card per route,
   and the panel of the open carrier. Every state is a link, so nothing here depends
   on script; rates-live.js only adds .rf-flash to cells whose price just changed. */

.rf-sec { scroll-margin-top: var(--header-height); }
.rf { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }

.rf-head { background: var(--slab); color: #ffffff; padding: 24px 28px; display: grid; gap: 18px; }
.rf-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.rf-title h2 { font-size: 1.6rem; margin: 0; color: #ffffff; }
.rf-title p { margin: 0; color: var(--slab-muted); font-size: .94rem; }

.rf-lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.rf-lane label { display: grid; gap: 6px; min-width: 0; }
.rf-lane label span { font-size: .84rem; font-weight: 600; color: var(--slab-muted); }
.rf-lane select { border-color: transparent; }
.rf-lane .btn { background: var(--signal); color: #13293d; }
.rf-lane .btn:hover { box-shadow: var(--shadow-2); }

.rf-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
    padding: 12px 28px; border-bottom: 1px solid var(--border-soft); font-size: .88rem; color: var(--text-muted);
}
.rf-live { display: inline-flex; align-items: center; gap: 8px; }
.rf-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

.rf-cards { display: grid; gap: 18px; padding: 20px; }
.rf-card { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; min-width: 0; scroll-margin-top: calc(var(--header-height) + 12px); }

.rf-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--bg-sunken); border-bottom: 1px solid var(--border-soft); }
.rf-meta > div { padding: 11px 16px; min-width: 0; }
.rf-meta > div + div { border-left: 1px solid var(--border-soft); }
.rf-meta span { display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.rf-meta b { font-weight: 650; overflow-wrap: anywhere; }

.rf-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.rf-table th, .rf-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.rf-table th {
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700; border-bottom: 1px solid var(--border-soft);
}
.rf-table td { border-bottom: 1px solid var(--border-soft); }
.rf-table > tbody > tr:last-child > td { border-bottom: 0; }
.rf-table .num { text-align: right; }
.rf-table tr.is-open { background: var(--brand-soft); }
.rf-neg { color: var(--danger); }

.rf-carrier { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.rf-carrier:hover { color: var(--brand); text-decoration: none; }
.rf-chev {
    width: 7px; height: 7px; flex: none;
    border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
    transform: rotate(-45deg); transition: transform .15s ease;
}
.is-open .rf-chev { transform: rotate(45deg); border-color: var(--brand); }
.rf-logo { height: 20px; width: auto; max-width: 96px; object-fit: contain; }

.rf-flash { animation: rf-flash 2.6s ease-out; }
@keyframes rf-flash { from { background: var(--signal-soft); } to { background: transparent; } }

/* The open carrier's panel is a row of the card's table, directly under its carrier.
   When the table is wider than the card and scrolls sideways, the panel keeps the
   card's width and stays in view instead of scrolling away with the columns. */
.rf-card > .table-scroll { container-type: inline-size; }
.rf-table td.rf-detail-cell { padding: 0; white-space: normal; }
.rf-detail {
    position: sticky; left: 0; width: 100cqw;
    background: var(--bg-sunken); padding: 18px; display: grid; gap: 14px; min-width: 0;
}
.rf-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.rf-detail-head h3 { margin: 0; font-size: 1.08rem; }
.rf-detail-head p { margin: 2px 0 0; font-size: .88rem; color: var(--text-muted); }
.rf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-tabs a {
    padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-muted); font-size: .9rem; font-weight: 600;
}
.rf-tabs a:hover { color: var(--text); text-decoration: none; }
.rf-tabs a[aria-current="true"] { background: var(--brand-soft); border-color: transparent; color: var(--brand); }

.rf-sub { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.rf-sub .rf-table { font-size: .89rem; }
.rf-total td { font-weight: 700; border-top: 1px solid var(--border); }
.rf-cy { margin-left: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--brand); }
.rf-note { margin: 0; font-size: .88rem; color: var(--text-muted); }
.rf-note a { font-weight: 600; }
.rf-sent { margin: 0; }

/* Weekly updates: the button is the summary of a <details>, so it opens the form
   without script. */
.rf-weekly { justify-self: end; max-width: 100%; }
.rf-weekly[open] { justify-self: stretch; }
.rf-weekly summary { list-style: none; }
.rf-weekly summary::-webkit-details-marker { display: none; }
.rf-weekly[open] summary { display: none; }
.rf-weekly form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 16px; align-items: start;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 16px;
}
.rf-weekly form > p { grid-column: 1 / -1; font-size: .88rem; color: var(--text-muted); margin-bottom: 14px; }
.rf-weekly form > p b { display: block; color: var(--text); font-size: .98rem; }
.rf-weekly .field { margin-bottom: 0; }
.rf-weekly form > .btn { margin-top: 27px; }

.rf-empty { margin: 20px; padding: 40px 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); }
.rf-empty h3 { color: var(--text); }
.rf-empty .btn { margin-top: 18px; }

.rf-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
    padding: 18px 28px; border-top: 1px solid var(--border-soft);
}
.rf-foot p { margin: 0; font-size: .84rem; color: var(--text-muted); max-width: 72ch; }

@media (max-width: 720px) {
    .rf-head, .rf-bar, .rf-foot { padding-inline: 18px; }
    .rf-cards { padding: 12px; }
    .rf-lane, .rf-weekly form { grid-template-columns: 1fr; }
    .rf-weekly form { gap: 14px; }
    .rf-weekly form > p { margin-bottom: 0; }
    .rf-weekly form > .btn { margin-top: 0; }
    .rf-meta { grid-template-columns: 1fr; }
    .rf-meta > div + div { border-left: 0; border-top: 1px solid var(--border-soft); }
}

/* The general rule gives every scrolling table a 760px floor; these set their own. */
.table-scroll .rf-table { min-width: 560px; }