/* =====================================================================
   Logistics ERP — 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: #1558d6;
    --brand-strong: #0f3f9e;
    --brand-soft: #e8f0fe;
    --brand-contrast: #ffffff;

    --accent: #00897b;
    --accent-soft: #e0f2f1;

    /* Surfaces */
    --bg: #ffffff;
    --bg-sunken: #f6f8fc;
    --surface: #ffffff;
    --border: #dadce0;
    --field-outline: #747775;   /* Material outline: darker than a card border, as on Google forms */
    --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);

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

    --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: #8ab4f8;
        --brand-strong: #aecbfa;
        --brand-soft: #1b2a45;
        --brand-contrast: #0b1220;

        --accent: #4db6ac;
        --accent-soft: #14312e;

        --bg: #131416;
        --bg-sunken: #1b1c1f;
        --surface: #1e1f22;
        --border: #3c4043;
        --field-outline: #8e918f;
        --border-soft: #2d2e32;

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

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

        --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: #8ab4f8;
    --brand-strong: #aecbfa;
    --brand-soft: #1b2a45;
    --brand-contrast: #0b1220;
    --accent: #4db6ac;
    --accent-soft: #14312e;
    --bg: #131416;
    --bg-sunken: #1b1c1f;
    --surface: #1e1f22;
    --border: #3c4043;
    --field-outline: #8e918f;
    --border-soft: #2d2e32;
    --text: #e8eaed;
    --text-muted: #9aa0a6;
    --text-faint: #80868b;
    --ok-soft: #12291a;
    --warn-soft: #2e2205;
    --danger-soft: #2d1513;
}

/* ------------------------------------------------------------------ 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; }

/* Blazor's FocusOnNavigate moves focus to the page's <h1> (tabindex -1) after each
   navigation, for screen readers. It is not a control, so it gets no ring. */
h1[tabindex="-1"]:focus { outline: none; }

/* The UA's [hidden] rule loses to any class that sets display, so a hidden
   .notice (display: flex) rendered as an empty coloured box on /signin. */
[hidden] { display: none !important; }

.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 */

/* The design's bar (DesignPages/index.html, 2026-10-16): dark on every page, in Geist, with the
   Solutions menu. Its colours are the design's own, not the theme tokens: the bar does not
   follow light / dark mode, the marketing pages below it are dark either way. */
.site-header {
    --hdr-bg: #0A0F1A; --hdr-line: #1C2638; --hdr-fg: #E8EDF5; --hdr-link: #C9D4E5;
    --hdr-dim: #7F8DA5; --hdr-panel: #111A2B; --hdr-panel-line: #22304A; --hdr-hover: rgba(255, 255, 255, .06);
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    display: flex; align-items: center;
    background: var(--hdr-bg); color: var(--hdr-fg);
    border-bottom: 1px solid var(--hdr-line);
    font-family: "Geist", var(--font);
    max-width: 100%;
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; max-width: 1280px; padding-inline: 32px; }
@media (max-width: 560px) { .site-header .wrap { padding-inline: var(--gutter); } }

.brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-weight: 600; font-size: 17px; letter-spacing: -.01em;
    color: #fff; text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* The logo grid (Shared/BrandMark.razor): an inline SVG, sized here. */
.brand-mark { width: 34px; height: 26px; flex: none; display: block; }

.nav { display: flex; align-items: center; gap: 8px; margin-left: 20px; }
.nav > a, .nav-menu > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--hdr-link); font-size: 15px; font-weight: 500;
}
.nav > a:hover, .nav-menu > a:hover { background: var(--hdr-hover); color: #fff; text-decoration: none; }
.nav > a.active, .nav-menu > a.active { color: #fff; }

/* The Solutions menu: opens on hover and on keyboard focus of any link in it, no script.
   The link itself goes to the overview, so a tap on a touch screen still leads somewhere. */
.nav-menu { position: relative; }
.nav-menu .menu {
    display: none; position: absolute; top: calc(100% + 10px); left: -8px; z-index: 50;
    width: min(880px, calc(100vw - 48px));
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px;
    padding: 18px 18px 14px;
    background: var(--hdr-panel); border: 1px solid var(--hdr-panel-line); border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
/* An invisible bridge over the gap between the link and the panel, so the pointer can cross it. */
.nav-menu .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-menu:hover .menu, .nav-menu:focus-within .menu { display: grid; }
/* The About menu: one column of three links. */
.nav-menu .menu--compact { width: min(340px, calc(100vw - 48px)); grid-template-columns: 1fr; gap: 2px; padding: 10px; }

.menu-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-title {
    padding: 6px 10px 8px; font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--hdr-dim);
}
.menu-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 9px; color: var(--hdr-fg);
}
.menu-item strong { font-weight: 600; font-size: 15px; color: #fff; }
.menu-item span { font-size: 13px; line-height: 1.4; color: #93A2B9; }
.menu-item:hover { background: var(--hdr-hover); text-decoration: none; }
.menu-foot {
    grid-column: 1 / -1; margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--hdr-panel-line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.menu-foot .menu-item { flex: 1 1 320px; }
.menu-all { padding: 8px 10px; font-size: 14px; font-weight: 600; color: #9CBAFF; white-space: nowrap; }
.menu-all:hover { color: #fff; text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* The language menu (2026-10-30): the header's hover / focus menu, opening to the left, two columns of names. */
.lang-menu > a span { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.nav-menu .menu--lang {
    left: auto; right: -8px; width: min(360px, calc(100vw - 48px));
    grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px;
}
.menu--lang a { padding: 7px 10px; border-radius: 9px; color: var(--hdr-fg); font-size: 14px; }
.menu--lang a:hover { background: var(--hdr-hover); color: #fff; text-decoration: none; }
.menu--lang a[aria-current] { color: #fff; font-weight: 600; background: var(--hdr-hover); }
.site-header .btn--quiet { color: var(--hdr-link); font-size: 15px; font-weight: 500; }
.site-header .btn--quiet:hover { background: var(--hdr-hover); color: #fff; }

.nav-toggle {
    display: none; margin-left: auto;
    background: none; border: 1px solid var(--hdr-panel-line);
    border-radius: var(--radius-sm); padding: 8px 10px;
    color: var(--hdr-fg); 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; }

@media (max-width: 960px) {
    .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(--hdr-bg); border-bottom: 1px solid var(--hdr-panel-line);
        padding: 10px var(--gutter) 16px;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
        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;
    }
    /* The Solutions menu is simply listed, under its link. */
    .nav-menu .menu {
        display: grid; position: static; width: auto;
        grid-template-columns: 1fr; gap: 0;
        padding: 0 0 8px 12px; border: 0; background: transparent; box-shadow: none;
    }
    .nav-menu .menu::before { display: none; }
    .menu-item span { display: none; }
    .menu-foot { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-menu .menu--lang { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .header-actions {
        margin-top: 10px; padding-top: 12px;
        border-top: 1px solid var(--hdr-panel-line);
    }
    .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); }

/* The design's buttons on a dark ground (header, /solutions): white, and outlined. */
.btn--light { background: #fff; color: #0A0F1A; border-radius: 9px; padding: 11px 18px; min-height: 44px; font-size: 15px; }
.btn--light:hover { background: #E8EDF5; }
.btn--outline { background: transparent; color: #E8EDF5; border-color: #2E3B55; border-radius: 9px; padding: 11px 18px; min-height: 44px; font-size: 15px; font-weight: 500; }
.btn--outline:hover { border-color: #7EA6FF; color: #fff; }

.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; }

/* --------------------------------------------------------------- pricing */

.price-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }

.plan {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 28px; position: relative;
}
.plan--featured { border-color: var(--brand); box-shadow: var(--shadow-2); }
.plan__flag {
    position: absolute; top: -12px; left: 28px;
    background: var(--brand); color: var(--brand-contrast);
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--radius-pill);
}
.plan h3 { font-size: 1.15rem; }
.plan__tagline { color: var(--text-muted); font-size: .92rem; min-height: 3em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; flex-wrap: wrap; }
.plan__amount { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; }
.plan__unit { color: var(--text-muted); font-size: .9rem; }
.plan__note { color: var(--text-faint); font-size: .82rem; min-height: 1.5em; }
.plan__features { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.plan__features li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .91rem; color: var(--text-muted); align-items: start; }
.plan__features svg { width: 16px; height: 16px; color: var(--ok); margin-top: 4px; }
.plan__cta { margin-top: auto; }

/* AI Credits packs: smaller cards under the plans, the same type as a plan's price. */
.pack-section { margin-top: 64px; display: grid; gap: 24px; }
.pack-section .lede { max-width: 62ch; }
.pack-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pack { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; }
.pack h3, .pack h4 { font-size: 1rem; margin: 0; }
.pack .plan__price { margin-top: 8px; }
.pack form { margin-top: 12px; }

/* /products (2026-10-16): the price cards above, then one section per product (Marketing/ProductCatalog.cs),
   text on the left and a sticky price box with the second Subscribe button on the right. */
.plan__more {
    display: inline-flex; gap: 6px; margin-top: 12px; width: 100%; justify-content: center;
    font-size: .88rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.plan__more:hover { text-decoration: underline; }
.subscribe__note { margin-top: 8px; font-size: .8rem; color: var(--text-faint); text-align: center; }
.subscribe__country { display: grid; gap: 6px; margin-bottom: 10px; font-size: .85rem; color: var(--text-muted); }
.subscribe__country select { width: 100%; }

.products-intro { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 3vw, 40px); border-top: 1px solid var(--border-soft); }

.product { padding-block: clamp(48px, 6vw, 88px); scroll-margin-top: var(--header-height); }
.product--sunken { background: var(--bg-sunken); }
.product__layout { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.product h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: .4em; }
.product__lede { color: var(--text-muted); font-size: 1.05rem; max-width: 64ch; }
.product__subhead { font-size: 1.05rem; margin: 36px 0 18px; }

.product__facts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 28px 0 0; }
.product__facts div { border-top: 2px solid var(--brand); padding-top: 12px; }
.product__facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.product__facts dd { margin: 0; font-size: .93rem; color: var(--text-muted); }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.feature-list svg { width: 18px; height: 18px; color: var(--ok); margin-top: 3px; }
.feature-list strong { display: block; font-weight: 600; margin-bottom: 2px; }
.feature-list p { margin: 0; color: var(--text-muted); font-size: .93rem; }

.product__aside {
    position: sticky; top: calc(var(--header-height) + 24px);
    display: grid; gap: 4px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
    padding: 24px; box-shadow: var(--shadow-1);
}
.product__aside-name { font-weight: 700; margin: 0; }
.product__aside .plan__price { margin-top: 6px; }
.product__aside .subscribe { margin-top: 14px; }
.product__see { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.product__see p { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.product__see ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.product__see a { font-size: .92rem; color: var(--brand); text-decoration: none; }
.product__see a:hover { text-decoration: underline; }
.product .pack-section { margin-top: 40px; }
.product--sunken .pack { background: var(--surface); }

/* The full feature list under the key features (ProductDetail.FeatureGroups, 2026-10-30). */
.all-features { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--border); scroll-margin-top: var(--header-height); }
.all-features__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.all-features__head h3 { font-size: 1.35rem; margin: 0; }
.all-features__count { color: var(--text-faint); font-size: .9rem; }
.fg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.fg-nav a { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .86rem; color: var(--text); background: var(--surface); }
.fg-nav a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.fg-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.fg { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: calc(var(--header-height) + 16px); }
.fg h4 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin: 0 0 14px; }
.fg__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.fg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fg li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: .92rem; color: var(--text-muted); line-height: 1.5; }
.fg li > svg { color: var(--ok); margin-top: 2px; }
.fg li strong { color: var(--text); font-weight: 600; }

@media (max-width: 520px) {
    .fg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .product__layout { grid-template-columns: 1fr; }
    .product__aside { position: static; }
}

.faq { max-width: 760px; margin: 32px 0 0; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-faint); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; color: var(--text-muted); font-size: .95rem; }

.interval-switch {
    display: inline-flex; padding: 4px; gap: 4px;
    background: var(--bg-sunken); border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
}
.interval-switch a, .interval-switch button {
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .9rem; font-weight: 600;
    padding: 8px 20px; border-radius: var(--radius-pill);
    color: var(--text-muted); text-decoration: none;
}
.interval-switch .is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

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

/* Outlined text fields, the Google (Material) way: a 4px box whose label sits inside it
   and floats onto the top border once the field has focus or a value. CSS only, through
   :has(), so every form keeps the plain markup label, control, message. An input needs
   placeholder=" " for :placeholder-shown to tell empty from filled; one without keeps
   its label floated, which still reads correctly. A select always has a value. */

.field { position: relative; display: grid; gap: 4px; align-content: start; margin-bottom: 18px; }
.field > label { font-size: .88rem; font-weight: 600; }
.field .hint { font-size: .78rem; color: var(--text-faint); padding-inline: 14px; }

/* InputText renders <input> with no type attribute at all, hence :not([type]). */
input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, select {
    width: 100%; height: 46px; padding: 0 14px;
    font: inherit; font-size: .95rem;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--field-outline); border-radius: 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
:is(input, textarea, select):hover:not(:focus) { border-color: var(--text); }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);       /* a 2px border without moving anything */
}
textarea { height: auto; min-height: 140px; padding: 13px 14px; resize: vertical; }

/* Blazor marks a field that failed validation with .invalid. */
:is(input, textarea, select).invalid { border-color: var(--danger); }
:is(input, textarea, select).invalid:focus { box-shadow: inset 0 0 0 1px var(--danger); }

.field:has(> :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)) > label {
    position: absolute; z-index: 1; left: 10px; top: 23px; transform: translateY(-50%);
    max-width: calc(100% - 28px); padding: 0 4px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    background: var(--surface); color: var(--text-muted);
    font-size: .95rem; font-weight: 400; line-height: 1.2;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.field:has(> :is(input:focus, input:not(:placeholder-shown), input:autofill, select, textarea:focus, textarea:not(:placeholder-shown))) > label {
    top: 0; font-size: .75rem;
}
.field:has(> :is(input, select, textarea):focus) > label { color: var(--brand); }
.field:has(> :is(input, select, textarea).invalid) > label { color: var(--danger); }

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

.validation-message { color: var(--danger); font-size: .78rem; padding-inline: 14px; }

/* 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)); }

/* Company licence: one tile per ERP product, lit when the feature flag is on. */
.feature-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft); background: var(--bg-sunken); color: var(--text-muted);
}
.feature svg { flex: none; margin-top: 2px; }
.feature--on { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.feature--on svg { color: var(--ok); }

/* Add user: three or four fields in a row on a wide screen, stacked on a narrow one. */
.user-form { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 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); }

/* ----------------------------------------------------------------- admin */

/* Wide tables scroll inside their card instead of pushing the page sideways. */
.table-scroll { overflow-x: auto; }
.cell-sub { font-weight: 400; font-size: .85rem; color: var(--text-muted); }
.cell-of { font-weight: 400; color: var(--text-faint); }
.stat__value .cell-of { font-size: 1rem; }

.admin-search { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.admin-search input { width: min(280px, 60vw); height: 40px; }

.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Admin forms: a readable width rather than the whole page, three fields to a row. */
.admin-form { max-width: 920px; }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-card h3 { margin-bottom: 20px; }

.detail-grid { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; }
.detail-grid dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; }
.detail-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; }

/* A one-time setup code (SetupCodePanel, and the Users card on /account): shown once, big enough to read out. */
.setup-code { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--brand-soft); }
.setup-code code { font-size: 1rem; }
.setup-code .setup-code__code { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; color: var(--brand-strong); }
.setup-code p { margin: 16px 0 0; font-size: .9rem; color: var(--text-muted); }
.setup-code .btn-row { margin-top: 14px; }

/* A company Admin's user list on /download (Send link to their own user accounts). */
.member-picks { list-style: none; margin: 14px 0 16px; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }
.member-picks li + li { border-top: 1px solid var(--border-soft); }
.member-picks label { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; }
.member-picks label.is-off { cursor: default; color: var(--text-faint); }
.member-picks input { width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.member-picks .cell-sub { margin-left: auto; text-align: right; overflow-wrap: anywhere; }

/* Sign-in: ERP login or e-mail/Google. Two links, so each is a plain page load. */
.signin-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--bg-sunken); border-radius: var(--radius-pill); }
.signin-tabs a { flex: 1; text-align: center; padding: 8px 10px; border-radius: var(--radius-pill); color: var(--text-muted); font-size: .9rem; font-weight: 600; }
.signin-tabs a:hover { text-decoration: none; color: var(--text); }
.signin-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* Credential browser: one row per stored field. Values can be long ids or JSON, so
   they wrap anywhere rather than widen the table. */
.field-table td { vertical-align: top; padding-block: 9px; }
.field-table td:first-child { white-space: nowrap; }
.field-table td:last-child { overflow-wrap: anywhere; min-width: 240px; }
.field-text { white-space: pre-wrap; }
.field-json summary { cursor: pointer; color: var(--brand); }
.field-json pre {
    margin: 8px 0 0; padding: 12px 14px; max-height: 420px; overflow: auto;
    background: var(--bg-sunken); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    font-size: .82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Admin actions. A <details> is the confirmation step for anything that ends or
   deletes: nothing happens on the first click, and no script is needed for it. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.admin-tabs a { padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); color: var(--text-muted); font-size: .9rem; }
.admin-tabs a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.admin-tabs a[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.btn--sm { padding: 5px 12px; font-size: .84rem; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { box-shadow: var(--shadow-2); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.row-actions form { margin: 0; }

/* AI usage on /account: the month against its limit, 30 daily bars, and two small tables. */
.ai-usage { display: grid; gap: 22px; }
.ai-limit { display: grid; gap: 8px; }
.ai-meter { height: 10px; border-radius: var(--radius-pill); background: var(--bg-sunken); border: 1px solid var(--border-soft); overflow: hidden; }
.ai-meter > i { display: block; height: 100%; background: var(--brand); }
.ai-meter--high > i { background: var(--warn); }
.ai-meter--full > i { background: var(--danger); }
.ai-days { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding-bottom: 1px; border-bottom: 1px solid var(--border); }
.ai-days__bar { flex: 1 1 0; min-width: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.ai-days__bar--none { height: 2px !important; background: var(--border-soft); }
.ai-days__axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .78rem; color: var(--text-faint); }
.ai-split { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.ai-split table.data th, .ai-split table.data td { padding-inline: 12px; }
.ai-cap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ai-cap input { height: 38px; }

/* The second row of tabs under "AI costs": smaller and closer, so it reads as part of the first. */
.admin-tabs + .admin-tabs--sub { margin-top: -10px; }
.admin-tabs--sub a { padding: 4px 12px; font-size: .84rem; border-color: transparent; }

/* AI rate card: a wide table of small number fields, and the two effect tables side by side. */
.rate-table th, .rate-table td { padding-inline: 14px; white-space: nowrap; }
.rate-table th:first-child, .rate-table td:first-child { padding-left: 24px; }
.rate-table--edit th, .rate-table--edit td { padding-inline: 6px; vertical-align: top; }
.rate-table--edit th { white-space: normal; }
.rate-table--edit input, .rate-table--edit select { height: 38px; padding: 0 8px; min-width: 4.75rem; }
.rate-table--edit select { min-width: 6.5rem; }
.rate-table--edit input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.rate-table--edit input.rate-id { display: block; min-width: 13rem; }
.rate-table--edit input.rate-id + input.rate-id, .rate-table--edit code + input.rate-id { margin-top: 6px; }
.rate-effects { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.rate-effects > * { min-width: 0; }
.rate-effects table.data th, .rate-effects table.data td { padding-inline: 14px; }
.rate-effects table.data td.num { white-space: nowrap; }
.feature-table td { vertical-align: top; }
.feature-table td:first-child { min-width: 260px; max-width: 360px; }
.feature-table select, .feature-table input { height: 38px; padding: 0 8px; }
.confirm summary { cursor: pointer; list-style: none; color: var(--danger); font-size: .88rem; font-weight: 600; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm form { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.confirm label { font-size: .88rem; color: var(--text-muted); display: flex; gap: 8px; align-items: flex-start; }
.danger-zone .data-card__body { display: grid; gap: 22px; }
.danger-zone p { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }

/* 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; } }

/* ----------------------------------------------------------------- trust */

/* /trust: a long read with anchors, a heading column beside a list, and numbered
   disclaimers. Everything else on the page is the shared cards, tables and notices. */
.hero--compact { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); }
.reviewed { margin: 22px 0 0; font-size: .84rem; color: var(--text-faint); }
.anchor { scroll-margin-top: var(--header-height); }
.section-head { max-width: 68ch; margin-bottom: 36px; }

.toc { border-block: 1px solid var(--border-soft); }
.toc .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 14px; }
.toc strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-right: 6px; }
.toc a { padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); color: var(--text-muted); font-size: .88rem; }
.toc a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }

.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks--spaced { margin-top: 24px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--text-muted); font-size: .96rem; }
.checks li strong { color: var(--text); font-weight: 600; }
.checks svg { width: 18px; height: 18px; color: var(--ok); margin-top: 4px; }

.trust-table td { vertical-align: top; }
.trust-table td:first-child { font-weight: 600; }
.trust-table .cell-sub { display: block; }
.trust-note { margin: 20px 0 0; }

/* "Check a file yourself": a real sequence, hence the numbers. */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: .95rem; color: var(--text-muted); }
.steps li::before {
    content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .85rem;
}
.steps strong { color: var(--text); }
.sig-sample { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: .88rem; }
.sig-sample__title { padding: 8px 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--border-soft); color: var(--text-muted); font-size: .8rem; }
.sig-sample dl { margin: 0; padding: 12px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.sig-sample dt { color: var(--text-faint); }
.sig-sample dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.card p.sig-warning { margin-top: 16px; font-size: .9rem; }

/* Disclaimers: numbered clauses, the convention of a legal text. */
.clauses { counter-reset: clause; list-style: none; padding: 0; margin: 0; max-width: 78ch; }
.clauses li { counter-increment: clause; display: grid; grid-template-columns: 44px 1fr; padding-block: 20px; border-top: 1px solid var(--border-soft); }
.clauses li:last-child { border-bottom: 1px solid var(--border-soft); }
.clauses li::before { content: counter(clause) "."; grid-row: span 2; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.clauses h3 { font-size: 1.02rem; margin-bottom: .3em; }
.clauses p { color: var(--text-muted); font-size: .95rem; }

.contact-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 28px;
}
.contact-card > div:first-child { min-width: 0; max-width: 62ch; }
.contact-card p { color: var(--text-muted); }
.contact-address { font-weight: 600; }

/* /privacy and /terms: long-form legal text in one readable column, numbered by hand in
   the headings so a clause can be quoted ("clause 9.2") whatever the page's markup. */
.legal { max-width: 78ch; }
.legal h2 { font-size: 1.35rem; margin: 2.4em 0 .6em; scroll-margin-top: var(--header-height); }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.5em 0 .35em; }
.legal p, .legal li { color: var(--text-muted); }
.legal ul, .legal ol { padding-left: 1.3em; margin: .4em 0 1em; }
.legal li + li { margin-top: .4em; }
.legal strong { color: var(--text); }
.legal .data-card { margin: 1em 0 1.5em; }
.legal-toc { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 44px; }
.legal-toc strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 10px; }
.legal-toc ol { columns: 2 240px; column-gap: 32px; margin: 0; padding-left: 1.4em; }
.legal-toc li { break-inside: avoid; font-size: .92rem; }
.legal-toc li + li { margin-top: .3em; }
.legal-meta { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border-soft); font-size: .9rem; }

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

.site-footer { background: var(--bg-sunken); border-top: 1px solid var(--border-soft); padding-block: 52px 32px; font-size: .92rem; }
/* Explicit tracks. `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 everywhere. */
.footer-grid { display: grid; gap: 32px 40px; grid-template-columns: minmax(0, 1.6fr) repeat(4, 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; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: repeat(4, 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); }

/* ---------------------------------------------------------- design pages */

/* The home page and /solutions/* are the design tool's exports (DesignPages/*.html), rendered as
   they were built: against the browser's own defaults, with their own stylesheet scoped under #dp
   by Marketing/DesignPageParser.cs. Nothing above may reach inside them (both sides have .wrap,
   .btn, .card, .nav, .hero), so the wrapper and everything in it revert to the user-agent
   stylesheet first and the page's own rules, every one prefixed #dp, apply on top. An id, not a
   class, so it outranks every compound selector in this file (.card p, .nav a:hover) without
   naming them. Custom properties are not part of `all`, so the page's own tokens survive.
   Not on an <svg> or inside one: there `all: revert` also beats the presentation attributes (fill,
   stroke, font-size), so every icon lost its stroke and the home page's network map drew black
   (2026-10-23). The one global svg rule above (img, svg) is undone for them by hand instead. */
#dp, #dp *:not(svg, svg *), #dp *::before, #dp *::after { all: revert; }
#dp svg { display: revert; max-width: revert; height: revert; }
/* The revert above also undid the h1[tabindex="-1"]:focus rule: FocusOnNavigate's focus on the
   hero's <h1> drew the browser's focus ring around the title on every solution page. */
#dp h1[tabindex="-1"]:focus { outline: none; }
/* The home page's dotted background (index.html, the first child of #top) fills #top with `slice`,
   but the export's #top wraps the whole page, not only the 1080px hero it was drawn for: the SVG
   scaled to ~6000px tall and drew every dot and lane about 5.5x too large (2026-10-25). Fixed here,
   not in the export, so the next export keeps it. */
#dp #top > svg[preserveAspectRatio="xMidYMid slice"]:first-child { bottom: auto !important; height: 1080px !important; }
/* A section head (.sec-head: eyebrow + h2, then a lead) put the lead in a column of its own on the right,
   bottom-aligned with the heading; readers asked whether it belonged to the text below or stood apart
   (user, 2026-10-30). Stacked here, under the heading and left-aligned, on every design page; `body`
   outranks the export's own `#dp .sec-head`, so the next export keeps it. */
body #dp .sec-head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 20px; }
body #dp .sec-head > div, body #dp .sec-head > p { flex: none; }
body #dp .sec-head > p { max-width: 680px; }
/* The home page's rate management cards (.rm-card: visual, number, title, "no more", text, and on 06 a
   link) started their number at whatever height their visual ended, so 01 / 02 / 03 sat at three heights
   (user, 2026-10-30). Each card is a subgrid of six rows of its grid, so every row of cards shares the
   height of its visual, title and lines. 03's four outputs are made smaller so its visual fits the others. */
body #dp .rm-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 10px; }
body #dp .rm-card > a { justify-self: start; }
body #dp .rm-out { padding: 4px 10px; }
/* Solution heroes, topics on top (user, 2026-10-30). The four pages on the shared hero template (rate-engine,
   excel-addin, rate-publisher, client-portal) had their 6-7 topic tabs under the hero and the button under
   "How it works": on a laptop both were below the fold, and the slides changed with nothing on screen to say
   why. Their markup now has the tabs first in `.hero-grid.tabs-top` and "How it works" (`.hero-how`) after
   the buttons; the layout is here, so a page re-exported without that markup simply keeps the old one. The
   home page does the same in its own stylesheet (index.html, `.hx`), without its badge.
   - The badge stays above the headline (user, 2026-10-30): smaller on short laptop screens, and on a phone
     under the facts, where it no longer pushes the button off the screen.
   - The tab's line is the active tab's underline and its progress; tabs already shown are not underlined.
   - Every slide's headline and text share one grid cell, so the block is as tall as the tallest slide and the
     button never jumps; on a phone only the shown slide takes room, so the button sits under its text.
   - Short laptop screens get a smaller headline; below 900px the tabs scroll sideways (the page's script keeps
     the active one in view). Checked at 1920x960, 1440x790, 1366x657, 768x954, 393x660 and 360x600. */
body #dp .hero:has(.tabs-top) .top { padding-block: 14px; }
body #dp .hero-grid.tabs-top { padding-block: 8px 48px; row-gap: 36px; }
body #dp .tabs-top > .tabs { flex: 1 1 100%; min-width: 0; padding: 0; gap: 6px 18px; flex-wrap: nowrap; border-bottom: 1px solid #1C2638; }
body #dp .tabs-top .tab { flex: 1 1 auto; min-height: 48px; gap: 12px; flex-direction: column-reverse; justify-content: flex-start; }
body #dp .tabs-top .tab .lbl { gap: 9px; white-space: nowrap; min-width: 0; }
body #dp .tabs-top .tab .n { font-size: 12px; }
body #dp .tabs-top .tab .t { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
body #dp .tabs-top .tab[aria-pressed="true"] .n { color: #2DD4BF; }
body #dp .tabs-top .tab .track { margin-bottom: -1px; background: transparent; border-radius: 0; }
body #dp .tabs-top .tab[aria-pressed="false"] .fill { width: 0 !important; }
body #dp .tabs-top .copy-stage { display: grid; min-height: 0; }
body #dp .tabs-top .copy-stage > .tp { grid-area: 1 / 1; display: flex !important; flex-direction: column; gap: 22px; }
body #dp .tabs-top .copy-stage > .tp[hidden] { visibility: hidden; }
body #dp .tabs-top .tp > h2 { font-size: clamp(38px, 4.2vw, 56px); }
body #dp .tabs-top .meta { gap: 6px 18px; }
body #dp .tabs-top .meta span::before { content: "✓"; color: #2DD4BF; margin-right: 6px; font-weight: 600; }
body #dp .tabs-top .hero-how { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
@media (min-width: 901px) and (max-height: 900px) {
    body #dp .hero-grid.tabs-top { row-gap: 22px; }
    body #dp .tabs-top .hero-copy { gap: 22px; }
    body #dp .tabs-top .pill { padding: 5px 12px 5px 9px; font-size: 13px; margin-bottom: -6px; }
    body #dp .tabs-top .copy-stage > .tp { gap: 16px; }
    body #dp .tabs-top .tp > h2 { font-size: clamp(34px, 3.5vw, 50px); }
    body #dp .tabs-top .lead { font-size: 16.5px; line-height: 1.55; }
}
@media (max-width: 900px) {
    body #dp .hero-grid.tabs-top { row-gap: 24px; }
    body #dp .tabs-top > .tabs { gap: 0 22px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    body #dp .tabs-top > .tabs::-webkit-scrollbar { display: none; }
    body #dp .tabs-top .tab { flex: none; scroll-snap-align: start; }
    body #dp .tabs-top .tab:last-child { padding-right: 48px; }
    body #dp .tabs-top .tab .t { font-size: 14.5px; }
}
@media (max-width: 560px) {
    body #dp .tabs-top .copy-stage > .tp[hidden] { display: none !important; }
    body #dp .tabs-top .tp > h2 { font-size: clamp(31px, 8.6vw, 38px); }
    body #dp .tabs-top .lead { font-size: 16px; line-height: 1.55; }
    body #dp .tabs-top .hero-copy > div:has(> .btn-p) { width: 100%; }
    body #dp .tabs-top .hero-copy > div:has(> .btn-p) > .btn { flex: 1 1 100%; justify-content: center; }
    body #dp .tabs-top .meta { font-size: 13px; gap: 6px 14px; }
    /* the badge goes under the facts, so it does not push the button off a phone screen */
    body #dp .tabs-top .pill { order: 1; font-size: 13px; }
    body #dp .tabs-top .hero-how { order: 2; }
}

/* One h1 per page (search engines, 2026-10-30). The home page and the four heroes above showed a headline per
   slide, each an h1 (5-7 per page), and none said what the product is. The slides' headlines are h2 now (their
   style moved with them) and one short line above the hero is the page's h1, in the search terms buyers use
   ("freight forwarding software", "instant freight quoting"). A plain kicker, so it never competes with the
   slide's headline. */
body #dp h1.seo-h1 { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; letter-spacing: .01em; color: #7EA6FF; max-width: 62ch; text-wrap: balance; }
@media (min-width: 901px) and (max-height: 900px) {
    body #dp h1.seo-h1 { font-size: 14px; margin-bottom: -6px; }
}
@media (max-width: 560px) {
    body #dp h1.seo-h1 { font-size: 13.5px; }
}

/* Japanese headings (2026-10-30, the translated pages): Japanese has no spaces, so a heading broke anywhere, even
   mid-phrase ("ポータルで / も"). auto-phrase breaks between phrases where the browser knows how (Chrome); elsewhere
   the line breaks as before. */
body :lang(ja) :is(h1, h2, h3), body #dp :lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }

/* -------------------------------------------------- solutions overview */

/* /solutions, in the design's idiom: the dark ground, Geist, the home page's card. */
.sol { background: #0A0F1A; color: #E8EDF5; font-family: "Geist", var(--font); }
.sol .wrap { max-width: 1280px; padding-inline: 32px; }
.sol .eyebrow { color: #7EA6FF; font-weight: 600; letter-spacing: .08em; }
.sol .lede { color: #B4C0D3; font-size: 18px; line-height: 1.6; max-width: 60ch; }
.sol h1 { color: #fff; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; max-width: 18ch; margin-bottom: .4em; }
.sol h2 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; font-weight: 600; margin-bottom: 20px; }

.sol-hero { padding: 64px 0 24px; }
.sol-group { padding: 28px 0; }
.sol-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sol-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 22px 24px 20px; border-radius: 16px;
    background: rgba(17, 26, 43, .7); border: 1px solid #22304A;
    color: #E8EDF5; transition: border-color .15s ease, transform .15s ease;
}
.sol-card:hover { border-color: #4A6BB5; transform: translateY(-2px); text-decoration: none; }
.sol-card h3 { margin: 0; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.sol-card p { margin: 0; color: #93A2B9; font-size: 15px; line-height: 1.55; }
.sol-card .more { margin-top: auto; padding-top: 8px; color: #9CBAFF; font-size: 14px; font-weight: 600; }

.sol-cta { margin-top: 36px; padding: 56px 0 72px; border-top: 1px solid #1C2638; }
.sol-cta .lede { margin-bottom: 24px; }
@media (max-width: 560px) { .sol .wrap { padding-inline: var(--gutter); } .sol-hero { padding-top: 40px; } }
/* The overview's one card ("One stack") takes the row, text beside the heading. */
.sol-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 40px; align-items: start; }
.sol-card--wide p { grid-column: 2; }
.sol-card--wide .more { grid-column: 2; padding-top: 0; }
@media (max-width: 700px) { .sol-card--wide { display: flex; } }

/* ----------------------------------------------------- about, partners */

/* /about and /partners: the overview's dark idiom (.sol) with a few blocks of their own. */
.about-hero h1 { max-width: 16ch; }
/* Three cards fill the row (the overview's auto-fill would leave a fourth track empty). */
.about .sol-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.about-band { padding: 40px 0; margin: 24px 0 8px; border-block: 1px solid #1C2638; background: #0D1422; }
.about-split { display: grid; gap: 24px 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }
.about-prose p { color: #B4C0D3; font-size: 17px; line-height: 1.65; margin: 0 0 1em; max-width: 64ch; }
.about-prose p:last-child { color: #fff; font-weight: 500; margin-bottom: 0; }

.about-vision { padding: 48px 0 24px; }
.about-vision blockquote {
    margin: 0 0 24px; padding: 4px 0 4px 24px; border-left: 3px solid #4A7DFF; max-width: 34ch;
    color: #fff; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.3; letter-spacing: -.02em; font-weight: 500;
}

.about-card { gap: 12px; }
.about-num { color: #7EA6FF; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.about-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.about-card li { position: relative; padding-left: 18px; color: #93A2B9; font-size: 15px; line-height: 1.5; }
.about-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #4A7DFF; }

.about-lede { margin: -8px 0 20px; }
.about-table { overflow-x: auto; border: 1px solid #22304A; border-radius: 16px; background: rgba(17, 26, 43, .7); }
.about-table table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.about-table th, .about-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid #1C2638; line-height: 1.5; }
.about-table thead th { border-top: 0; color: #7F8DA5; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.about-table tbody th { color: #fff; font-weight: 600; white-space: nowrap; }
.about-table td { color: #93A2B9; }
.about-table td:last-child { color: #E8EDF5; }
.about-note { margin: 14px 0 0; color: #7F8DA5; font-size: 14px; }
.sol a:not(.btn, .sol-card) { color: #9CBAFF; }

.about-principles { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.about-principles > div { padding-top: 16px; border-top: 1px solid #22304A; }
.about-principles h3 { margin: 0 0 8px; color: #fff; font-size: 17px; font-weight: 600; }
.about-principles p { margin: 0; color: #93A2B9; font-size: 15px; line-height: 1.55; }

.partner-card:hover { transform: none; border-color: #22304A; }
.partner-kind { color: #7EA6FF; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.about-prose .partner-sub { margin: 20px 0 10px; color: #7F8DA5; font-size: 14px; font-weight: 500; }
.about-prose h3.partner-sub { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.partner-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.partner-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid #22304A; background: #111A2B; color: #E8EDF5; font-size: 14px; }
.partner-chips .partner-chip--more { border-style: dashed; color: #7F8DA5; background: transparent; }
.partner-legal { margin-top: 28px; max-width: 70ch; }
.partner-checks { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.partner-checks li { position: relative; padding-left: 26px; color: #B4C0D3; font-size: 16px; line-height: 1.55; }
.partner-checks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid #4ADE80; border-bottom: 2px solid #4ADE80; transform: rotate(-45deg); }
.partner-checks strong { color: #fff; font-weight: 600; }

/* Label / value pairs on an admin review page (/admin/requests/{id}). */
.kv { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }