/* ==========================================================================
   ATP Spedition - design tokens & primitives
   Aesthetic: clean operational data-tool (Linear shell + Stripe density).
   Brand: blue #185898 (logo), navy #184070 (ink), primary #1F4E9E. Light + dark, WCAG 2.2 AA.
   Load once per host: <link href="_content/ATP.Shared/atp.css" />.
   ========================================================================== */

/* ---- brand + primitive ramps (theme-independent) ---- */
:root {
    /* brand (owner brand pack v3.0, docs/brand/README.md) */
    --atp-brand: #185898;          /* logo A */
    --atp-navy: #184070;           /* wordmark ink */
    --atp-navy-700: #12325A;
    --atp-navy-900: #0F2747;
    /* Ink that must NOT follow the theme, because the surface under it never inverts: white on the navy app bar and
       on filled primary chips, the amber ink that keeps AA on --atp-warn-soft, and the near-black of a viewfinder,
       which is a camera frame rather than a page. Declared here because a hex value belongs in the token file. */
    --atp-on-navy: #FFFFFF;
    --atp-warn-ink: #8A5A00;
    --atp-camera-ink: #0B0D11;
    /* The line-art route plate (AtpMktRouteMap, drawn on the Website Home master beside the booking card and used
       again as the client map fallback). It is a picture of a daylight city, so like the hero photograph it does
       not invert with the theme: a dark plate would be a different drawing from the one the owner approved. */
    --atp-mktmap-ground: #EDEFF2;
    --atp-mktmap-road: #FFFFFF;
    --atp-mktmap-park: #DCEBD6;
    --atp-mktmap-route: #1F4E9E;
    --atp-mktmap-glass: #C9D8EC;
    --atp-mktmap-pin-dot: #FFFFFF;
    --atp-primary-base: #1F4E9E;   /* primary button */
    --atp-primary-base-hover: #17417F;
    --atp-heading-ink: #1A2E5A;
    --atp-azure: var(--atp-brand);
    --atp-azure-600: var(--atp-primary-base-hover);
    --atp-azure-700: #12325A;
    --atp-azure-400: #4C93D6;
    --atp-azure-300: #7DB2E2;

    /* fixed accents used for the on-brand focus ring / selection */
    --atp-focus: rgba(24, 88, 152, 0.45);

    /* Safe areas. In the installed app the WebView extends under the status bar and the home indicator (the page
       paints those bands itself, so they are seamless in both themes); in a browser every edge is 0. ONE token per
       edge: every fixed or sticky bar pads from these, never from env() directly, so a host (Android insets) or a
       layout test can set them. */
    --atp-safe-top: env(safe-area-inset-top, 0px);
    --atp-safe-right: env(safe-area-inset-right, 0px);
    --atp-safe-bottom: env(safe-area-inset-bottom, 0px);
    --atp-safe-left: env(safe-area-inset-left, 0px);

    /* spacing - 4pt scale */
    --atp-space-0: 0;
    --atp-space-1: 4px;
    --atp-space-2: 8px;
    --atp-space-3: 12px;
    --atp-space-4: 16px;
    --atp-space-5: 20px;
    --atp-space-6: 24px;
    --atp-space-8: 32px;
    --atp-space-10: 40px;
    --atp-space-12: 48px;
    --atp-space-16: 64px;

    /* radius */
    --atp-radius-sm: 5px;
    --atp-radius-md: 8px;
    --atp-radius-lg: 12px;
    --atp-radius-xl: 14px;
    --atp-radius-btn: 10px;
    --atp-radius-pill: 999px;

    /* type */
    --atp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, system-ui, sans-serif;
    --atp-font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, Menlo,
        Consolas, monospace;

    --atp-text-xs: 11px;
    --atp-text-sm: 12px;
    --atp-text-base: 13px;   /* dense but legible operational baseline */
    --atp-text-md: 14px;
    --atp-text-lg: 16px;
    --atp-text-xl: 20px;
    --atp-text-2xl: 26px;
    --atp-text-3xl: 34px;

    --atp-weight-normal: 400;
    --atp-weight-medium: 500;
    --atp-weight-semibold: 600;

    --atp-leading-tight: 1.25;
    --atp-leading-normal: 1.5;

    /* motion */
    --atp-ease: cubic-bezier(0.2, 0, 0, 1);
    --atp-dur-fast: 120ms;
    --atp-dur: 180ms;

    /* layout metrics */
    --atp-sidebar-w: 232px;
    --atp-logo-h: 56px;
    --atp-symbol-h: 34px;
    --atp-mkt-gutter: clamp(var(--atp-space-4), 3.4vw, var(--atp-space-12));
    --atp-topbar-h: 52px;
    --atp-measure: 68ch;
}

/* ---- semantic tokens: LIGHT (default) ---- */
:root,
[data-theme="light"] {
    color-scheme: light;

    --atp-bg: #F4F7FB;
    --atp-surface: #FFFFFF;
    --atp-surface-2: #EEF2F8;
    --atp-surface-3: #E3E8F0;
    --atp-overlay: rgba(19, 23, 32, 0.42);

    --atp-border: #E3E8F0;
    --atp-border-strong: #C9D3E1;

    --atp-text: #131720;
    --atp-text-muted: #5B6B85;
    --atp-text-subtle: #7F8CA3;

    --atp-primary: var(--atp-primary-base);
    --atp-primary-hover: var(--atp-primary-base-hover);
    --atp-primary-active: var(--atp-azure-700);
    --atp-primary-contrast: #FFFFFF;
    --atp-primary-soft: rgba(31, 78, 158, 0.10);
    --atp-link: var(--atp-primary-base);

    --atp-heading: var(--atp-heading-ink);

    --atp-success: #1E9E5A;
    --atp-success-soft: #E8F7EF;
    --atp-warn: #D98A0B;
    --atp-warn-soft: #FFF6E5;
    --atp-danger: #D33B3B;
    --atp-danger-soft: #FDECEC;
    --atp-danger-contrast: #FFFFFF;
    --atp-info: var(--atp-brand);
    --atp-info-soft: #EAF2FC;

    --atp-shadow-sm: 0 1px 2px rgba(19, 23, 32, 0.06), 0 1px 1px rgba(19, 23, 32, 0.04);
    --atp-shadow-md: 0 4px 12px rgba(19, 23, 32, 0.10), 0 1px 2px rgba(19, 23, 32, 0.06);
    --atp-shadow-lg: 0 16px 40px rgba(19, 23, 32, 0.18), 0 2px 8px rgba(19, 23, 32, 0.08);
}

/* ---- semantic tokens: DARK ---- */
[data-theme="dark"] {
    color-scheme: dark;

    --atp-bg: #0E1116;
    --atp-surface: #161B22;
    --atp-surface-2: #1C222B;
    --atp-surface-3: #232B36;
    --atp-overlay: rgba(3, 6, 10, 0.62);

    --atp-border: #262D38;
    --atp-border-strong: #3A4451;

    --atp-text: #E6EAF0;
    --atp-text-muted: #A2ACBA;
    --atp-text-subtle: #6E7887;

    --atp-primary: var(--atp-azure-400);
    --atp-primary-hover: var(--atp-azure-300);
    --atp-primary-active: var(--atp-azure-300);
    --atp-primary-contrast: #0E1116;
    --atp-primary-soft: rgba(76, 147, 214, 0.16);
    --atp-link: var(--atp-azure-300);

    --atp-heading: #DCE6F2;

    --atp-success: #4ADE80;
    --atp-success-soft: rgba(74, 222, 128, 0.14);
    --atp-warn: #F1C15A;
    --atp-warn-soft: rgba(241, 193, 90, 0.14);
    --atp-danger: #F87171;
    --atp-danger-soft: rgba(248, 113, 113, 0.14);
    --atp-danger-contrast: #14181F;
    --atp-info: var(--atp-azure-300);
    --atp-info-soft: rgba(76, 147, 214, 0.14);

    --atp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --atp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
    --atp-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62);
}

/* system-preference dark, unless the user has explicitly chosen light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --atp-bg: #0E1116;
        --atp-surface: #161B22;
        --atp-surface-2: #1C222B;
        --atp-surface-3: #232B36;
        --atp-overlay: rgba(3, 6, 10, 0.62);

        --atp-border: #262D38;
        --atp-border-strong: #3A4451;

        --atp-text: #E6EAF0;
        --atp-text-muted: #A2ACBA;
        --atp-text-subtle: #6E7887;

        --atp-primary: var(--atp-azure-400);
        --atp-primary-hover: var(--atp-azure-300);
        --atp-primary-active: var(--atp-azure-300);
        --atp-primary-contrast: #0E1116;
        --atp-primary-soft: rgba(76, 147, 214, 0.16);
        --atp-link: var(--atp-azure-300);
        --atp-heading: #DCE6F2;
        --atp-info: var(--atp-azure-300);
        --atp-info-soft: rgba(76, 147, 214, 0.14);

        --atp-success: #4ADE80;
        --atp-success-soft: rgba(74, 222, 128, 0.14);
        --atp-warn: #F1C15A;
        --atp-warn-soft: rgba(241, 193, 90, 0.14);
        --atp-danger: #F87171;
        --atp-danger-soft: rgba(248, 113, 113, 0.14);
        --atp-danger-contrast: #14181F;

        --atp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
        --atp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
        --atp-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62);
    }
}

/* ---- base ---- */
.atp-root,
.atp-app {
    font-family: var(--atp-font-sans);
    font-size: var(--atp-text-base);
    line-height: var(--atp-leading-normal);
    color: var(--atp-text);
    background: var(--atp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Proportional figures for prose; data contexts (tables, money, KPIs) opt
       into tabular-nums explicitly so columns still align. */
    font-feature-settings: "cv05" 1, "ss01" 1;
}

/* The document canvas carries the theme background: the status-bar band an app WebView extends under, and any
   overscroll, is painted like the page (never white). margin 0 and no extra in-flow chrome, so a page whose content
   fits the viewport has nothing to scroll. */
html { background: var(--atp-bg); }
body { margin: 0; min-height: 100%; background: var(--atp-bg); }

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

::selection { background: var(--atp-primary-soft); color: var(--atp-heading); }

/* focus ring - consistent, on-brand, keyboard-visible.
   Baseline outline for links / nav / generic controls; primitives with a
   bespoke ring (buttons, inputs) opt out below so we never double-ring. */
.atp-root :focus-visible {
    outline: 2px solid var(--atp-primary);
    outline-offset: 2px;
    border-radius: var(--atp-radius-sm);
}

/* Headings are the programmatic focus target of <FocusOnNavigate Selector="h1">
   (moves focus to the top of new page content so screen readers announce it).
   They are NOT interactive - never paint the keyboard focus box on them. */
.atp-root h1:focus,
.atp-root h1:focus-visible,
.atp-root h2:focus,
.atp-root h2:focus-visible,
.atp-root h3:focus,
.atp-root h3:focus-visible,
.atp-root [tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* Primitives own their focus ring (see below) - suppress the generic outline. */
.atp-root .atp-btn:focus-visible,
.atp-root .atp-iconbtn:focus-visible,
.atp-root .atp-input:focus-visible,
.atp-root .atp-select:focus-visible,
.atp-root .atp-linkbtn:focus-visible {
    outline: none;
}

/* ---- typography helpers ---- */
.atp-h1 { font-size: var(--atp-text-3xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); letter-spacing: -0.02em; margin: 0; }
.atp-h2 { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); letter-spacing: -0.015em; margin: 0; }
.atp-h3 { font-size: var(--atp-text-xl); font-weight: var(--atp-weight-semibold); line-height: var(--atp-leading-tight); color: var(--atp-heading); margin: 0; }
.atp-eyebrow { font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-muted { color: var(--atp-text-muted); }
.atp-subtle { color: var(--atp-text-subtle); }
.atp-mono { font-family: var(--atp-font-mono); font-variant-numeric: tabular-nums; }
.atp-measure { max-width: var(--atp-measure); }

/* The base anchor colour belongs to the design system, not to a host stylesheet. The web host's project-template
   app.css used to declare `a { color: #006bb7 }`, a raw hex that overrode the token purely because that file is
   linked after this one, while the installed-app host declared nothing and fell back to the browser's own link
   blue. One token, both hosts, and it follows the theme. */
a { color: var(--atp-link); }
a.atp-link, .atp-link { color: var(--atp-link); text-decoration: none; }
a.atp-link:hover, .atp-link:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.atp-btn {
    --_bg: transparent;
    --_fg: var(--atp-text);
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    height: 32px;
    padding: 0 var(--atp-space-3);
    font-family: inherit;
    font-size: var(--atp-text-md);
    font-weight: var(--atp-weight-medium);
    line-height: 1;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: var(--atp-radius-btn);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;   /* anchor-styled buttons (<a class="atp-btn">) must not underline */
    transition: background var(--atp-dur-fast) var(--atp-ease),
        border-color var(--atp-dur-fast) var(--atp-ease),
        color var(--atp-dur-fast) var(--atp-ease);
    user-select: none;
}
.atp-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.atp-btn--sm { height: 26px; padding: 0 var(--atp-space-2); font-size: var(--atp-text-sm); }
.atp-btn--lg { height: 38px; padding: 0 var(--atp-space-5); font-size: var(--atp-text-lg); }
.atp-btn--block { width: 100%; }

/* consistent, on-brand focus ring - a soft azure halo (not a hard box) */
.atp-btn:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus); }

/* primary: azure with a subtle vertical sheen + hairline inset highlight for depth */
.atp-btn--primary {
    --_fg: var(--atp-primary-contrast); --_bd: var(--atp-primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-primary) 86%, #FFFFFF), var(--atp-primary));
    box-shadow: var(--atp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.atp-btn--primary:hover:not(:disabled) {
    --_bd: var(--atp-primary-hover);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-primary-hover) 90%, #FFFFFF), var(--atp-primary-hover));
}
.atp-btn--primary:active:not(:disabled) {
    --_bd: var(--atp-primary-active);
    background: var(--atp-primary-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}
.atp-btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

.atp-btn--ghost { --_bg: transparent; --_fg: var(--atp-text); --_bd: var(--atp-border-strong); box-shadow: var(--atp-shadow-sm); }
.atp-btn--ghost:hover:not(:disabled) { --_bg: var(--atp-surface-2); --_bd: var(--atp-border-strong); }
.atp-btn--ghost:active:not(:disabled) { --_bg: var(--atp-surface-3); box-shadow: none; }

.atp-btn--subtle { --_bg: var(--atp-surface-2); --_fg: var(--atp-text); --_bd: transparent; }
.atp-btn--subtle:hover:not(:disabled) { --_bg: var(--atp-surface-3); }

.atp-btn--danger {
    --_fg: var(--atp-danger-contrast); --_bd: var(--atp-danger);
    background: linear-gradient(180deg, color-mix(in srgb, var(--atp-danger) 88%, #FFFFFF), var(--atp-danger));
    box-shadow: var(--atp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.atp-btn--danger:hover:not(:disabled) { filter: brightness(0.95); }
.atp-btn--danger:active:not(:disabled) { filter: brightness(0.88); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20); }
.atp-btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--atp-danger-soft), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

/* ==========================================================================
   Card / surfaces
   ========================================================================== */
.atp-card {
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    box-shadow: var(--atp-shadow-sm);
}
.atp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5);
    border-bottom: 1px solid var(--atp-border);
}
.atp-card__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-card__body { padding: var(--atp-space-5); }
.atp-card__footer { padding: var(--atp-space-4) var(--atp-space-5); border-top: 1px solid var(--atp-border); }
.atp-card--flush .atp-card__body { padding: 0; }

/* ==========================================================================
   Badge & KPI tile
   ========================================================================== */
.atp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--atp-space-1);
    height: 20px;
    padding: 0 var(--atp-space-2);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-medium);
    border-radius: var(--atp-radius-sm);
    background: var(--atp-surface-2);
    color: var(--atp-text-muted);
    border: 1px solid var(--atp-border);
}
.atp-badge--primary { background: var(--atp-primary-soft); color: var(--atp-link); border-color: transparent; }
.atp-badge--success { background: var(--atp-success-soft); color: var(--atp-success); border-color: transparent; }
.atp-badge--warn { background: var(--atp-warn-soft); color: var(--atp-warn); border-color: transparent; }
.atp-badge--danger { background: var(--atp-danger-soft); color: var(--atp-danger); border-color: transparent; }

.atp-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-2);
    padding: var(--atp-space-5);
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    box-shadow: var(--atp-shadow-sm);
}
.atp-kpi__label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); font-weight: var(--atp-weight-medium); }
.atp-kpi__value { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.atp-kpi__foot { display: flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-sm); color: var(--atp-text-subtle); }
.atp-kpi__delta--up { color: var(--atp-success); }
.atp-kpi__delta--down { color: var(--atp-danger); }

/* ==========================================================================
   Status pill  (colors map from ATP.Contracts.JobStatusProjections.StatusPill)
   ========================================================================== */
.atp-pill {
    --_bg: var(--atp-surface-2);
    --_fg: var(--atp-text-muted);
    --_dot: var(--atp-text-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 var(--atp-space-2) 0 var(--atp-space-2);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.01em;
    border-radius: var(--atp-radius-pill);
    background: var(--_bg);
    color: var(--_fg);
    white-space: nowrap;
}
.atp-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); flex: none; }

/* status-pill hues - palette tokens (light + dark), referenced by the .atp-pill--* rules */
:root {
    --atp-pill-slate-bg: #EEF1F5; --atp-pill-slate-fg: #47536A; --atp-pill-slate-dot: #64748B;
    --atp-pill-gray-bg: #EFF0F2; --atp-pill-gray-fg: #4B5563; --atp-pill-gray-dot: #6B7280;
    --atp-pill-amber-bg: #FBF0D9; --atp-pill-amber-fg: #8A5A00; --atp-pill-amber-dot: #D08700;
    --atp-pill-blue-bg: #E4EFFB; --atp-pill-blue-fg: #175487; --atp-pill-blue-dot: #2A78C2;
    --atp-pill-indigo-bg: #E9E9FC; --atp-pill-indigo-fg: #3B3B9A; --atp-pill-indigo-dot: #5B5BD6;
    --atp-pill-violet-bg: #F0E8FB; --atp-pill-violet-fg: #6428A8; --atp-pill-violet-dot: #8B46D6;
    --atp-pill-green-bg: #E4F5EA; --atp-pill-green-fg: #1B7A3D; --atp-pill-green-dot: #22A155;
    --atp-pill-teal-bg: #DDF3F1; --atp-pill-teal-fg: #10726C; --atp-pill-teal-dot: #17948C;
    --atp-pill-red-bg: #FBE7E7; --atp-pill-red-fg: #B32424; --atp-pill-red-dot: #DC3B3B;
}
[data-theme="dark"] {
    --atp-pill-slate-bg: rgba(100,116,139,0.20); --atp-pill-slate-fg: #A9B6CC; --atp-pill-slate-dot: #8595AE;
    --atp-pill-gray-bg: rgba(107,114,128,0.20); --atp-pill-gray-fg: #B0B6C0; --atp-pill-gray-dot: #8A909B;
    --atp-pill-amber-bg: rgba(208,135,0,0.18); --atp-pill-amber-fg: #F1C15A; --atp-pill-amber-dot: #E0A429;
    --atp-pill-blue-bg: rgba(42,120,194,0.20); --atp-pill-blue-fg: #7DB2E2; --atp-pill-blue-dot: #4C93D6;
    --atp-pill-indigo-bg: rgba(91,91,214,0.22); --atp-pill-indigo-fg: #A9A9F0; --atp-pill-indigo-dot: #7C7CE6;
    --atp-pill-violet-bg: rgba(139,70,214,0.22); --atp-pill-violet-fg: #C6A2EC; --atp-pill-violet-dot: #A97CE0;
    --atp-pill-green-bg: rgba(34,161,85,0.20); --atp-pill-green-fg: #5BD98A; --atp-pill-green-dot: #34C46E;
    --atp-pill-teal-bg: rgba(23,148,140,0.20); --atp-pill-teal-fg: #4FCFC5; --atp-pill-teal-dot: #23A79E;
    --atp-pill-red-bg: rgba(220,59,59,0.20); --atp-pill-red-fg: #F5908F; --atp-pill-red-dot: #E85D5D;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --atp-pill-slate-bg: rgba(100,116,139,0.20); --atp-pill-slate-fg: #A9B6CC; --atp-pill-slate-dot: #8595AE;
        --atp-pill-gray-bg: rgba(107,114,128,0.20); --atp-pill-gray-fg: #B0B6C0; --atp-pill-gray-dot: #8A909B;
        --atp-pill-amber-bg: rgba(208,135,0,0.18); --atp-pill-amber-fg: #F1C15A; --atp-pill-amber-dot: #E0A429;
        --atp-pill-blue-bg: rgba(42,120,194,0.20); --atp-pill-blue-fg: #7DB2E2; --atp-pill-blue-dot: #4C93D6;
        --atp-pill-indigo-bg: rgba(91,91,214,0.22); --atp-pill-indigo-fg: #A9A9F0; --atp-pill-indigo-dot: #7C7CE6;
        --atp-pill-violet-bg: rgba(139,70,214,0.22); --atp-pill-violet-fg: #C6A2EC; --atp-pill-violet-dot: #A97CE0;
        --atp-pill-green-bg: rgba(34,161,85,0.20); --atp-pill-green-fg: #5BD98A; --atp-pill-green-dot: #34C46E;
        --atp-pill-teal-bg: rgba(23,148,140,0.20); --atp-pill-teal-fg: #4FCFC5; --atp-pill-teal-dot: #23A79E;
        --atp-pill-red-bg: rgba(220,59,59,0.20); --atp-pill-red-fg: #F5908F; --atp-pill-red-dot: #E85D5D;
    }
}

.atp-pill--slate { --_bg: var(--atp-pill-slate-bg); --_fg: var(--atp-pill-slate-fg); --_dot: var(--atp-pill-slate-dot); }
.atp-pill--gray { --_bg: var(--atp-pill-gray-bg); --_fg: var(--atp-pill-gray-fg); --_dot: var(--atp-pill-gray-dot); }
.atp-pill--amber { --_bg: var(--atp-pill-amber-bg); --_fg: var(--atp-pill-amber-fg); --_dot: var(--atp-pill-amber-dot); }
.atp-pill--blue { --_bg: var(--atp-pill-blue-bg); --_fg: var(--atp-pill-blue-fg); --_dot: var(--atp-pill-blue-dot); }
.atp-pill--indigo { --_bg: var(--atp-pill-indigo-bg); --_fg: var(--atp-pill-indigo-fg); --_dot: var(--atp-pill-indigo-dot); }
.atp-pill--violet { --_bg: var(--atp-pill-violet-bg); --_fg: var(--atp-pill-violet-fg); --_dot: var(--atp-pill-violet-dot); }
.atp-pill--green { --_bg: var(--atp-pill-green-bg); --_fg: var(--atp-pill-green-fg); --_dot: var(--atp-pill-green-dot); }
.atp-pill--teal { --_bg: var(--atp-pill-teal-bg); --_fg: var(--atp-pill-teal-fg); --_dot: var(--atp-pill-teal-dot); }
.atp-pill--red { --_bg: var(--atp-pill-red-bg); --_fg: var(--atp-pill-red-fg); --_dot: var(--atp-pill-red-dot); }

/* ==========================================================================
   Form fields
   ========================================================================== */
.atp-field { display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-field__label { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); color: var(--atp-text); }
.atp-field__req { color: var(--atp-danger); margin-left: 2px; }
.atp-field__hint { font-size: var(--atp-text-xs); color: var(--atp-text-subtle); }
/* Board 00 screen 01: the eye that reveals the password, inside the field's own box.

   The room a control drawn INSIDE the box needs is declared on the WRAP, as an inherited custom property, and never
   as a padding rule on the box itself. A shell that restates the box's padding writes a shorthand
   (`.atp-cl .atp-input { padding: 0 var(--atp-space-4) }`), and a shorthand resets padding but cannot reset a
   variable. Written the other way round - `.atp-field__wrap--icon .atp-input { padding-inline-start: 46px }` - the
   two rules were the same specificity (0,2,0), the client sheet is linked after this one, and every iconed field in
   the client app drew its glyph on top of its own text. Both shells now read the same two variables, so a shell
   chooses only what a field with NOTHING inside its box is inset by. */
.atp-field__wrap { position: relative; display: block; }
/* 14px inset + a 20px glyph + 12px of air. */
.atp-field__wrap--icon { --atp-field-lead: 46px; }
.atp-field__wrap--reveal { --atp-field-trail: 48px; }
/* The client boards draw a glyph inside the leading edge of the box; the text starts clear of it. */
.atp-field__icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--atp-text-subtle); pointer-events: none; }
.atp-field__icon svg { width: 20px; height: 20px; }
.atp-field__reveal {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--atp-text-muted);
    cursor: pointer;
}
.atp-field__reveal svg { width: 20px; height: 20px; }
.atp-field__error { font-size: var(--atp-text-xs); color: var(--atp-danger); }

.atp-input, .atp-select {
    width: 100%;
    height: 32px;
    padding-block: 0;
    /* The insets the field's own wrap asks for; a box with nothing drawn inside it gets the console's own. */
    padding-inline: var(--atp-field-lead, var(--atp-space-3)) var(--atp-field-trail, var(--atp-space-3));
    font-family: inherit;
    font-size: var(--atp-text-md);
    color: var(--atp-text);
    background: var(--atp-surface);
    border: 1px solid var(--atp-border-strong);
    border-radius: var(--atp-radius-md);
    transition: border-color var(--atp-dur-fast) var(--atp-ease), box-shadow var(--atp-dur-fast) var(--atp-ease);
}
.atp-select { appearance: none; padding-right: var(--atp-space-8);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23838D9C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right var(--atp-space-3) center; }
.atp-input::placeholder { color: var(--atp-text-subtle); }
.atp-input:focus, .atp-select:focus {
    outline: none;
    border-color: var(--atp-primary);
    box-shadow: 0 0 0 3px var(--atp-focus);
}
.atp-input:disabled, .atp-select:disabled { background: var(--atp-surface-2); color: var(--atp-text-subtle); cursor: not-allowed; }
.atp-input--invalid, .atp-select--invalid { border-color: var(--atp-danger); }
.atp-input--invalid:focus, .atp-select--invalid:focus { box-shadow: 0 0 0 3px var(--atp-danger-soft); }

/* ==========================================================================
   Data table
   ========================================================================== */
.atp-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--atp-radius-lg); }
.atp-table { width: 100%; border-collapse: collapse; font-size: var(--atp-text-base); }
.atp-table th, .atp-table td {
    text-align: left;
    padding: var(--atp-space-2) var(--atp-space-4);
    border-bottom: 1px solid var(--atp-border);
    vertical-align: middle;
}
.atp-table thead th {
    position: sticky; top: 0;
    background: var(--atp-surface-2);
    color: var(--atp-text-muted);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 36px;
    white-space: nowrap;
    z-index: 1;
}
.atp-table tbody tr { background: var(--atp-surface); transition: background var(--atp-dur-fast) var(--atp-ease); }
.atp-table tbody tr:hover { background: var(--atp-surface-2); }
.atp-table tbody tr:last-child td { border-bottom: none; }
.atp-table td.atp-num, .atp-table th.atp-num { text-align: right; font-variant-numeric: tabular-nums; }
.atp-table tbody tr.atp-tr--risk { background: var(--atp-danger-soft); box-shadow: inset 3px 0 0 var(--atp-danger); }
.atp-table tbody tr.atp-tr--risk:hover { background: color-mix(in srgb, var(--atp-danger-soft) 75%, var(--atp-surface-2)); }

.atp-th-sort {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: inherit; cursor: pointer;
}
.atp-th-sort:hover { color: var(--atp-text); }
.atp-th-sort__arrow { font-size: 9px; line-height: 1; opacity: 0.9; }
.atp-th-sort[aria-sort="none"] .atp-th-sort__arrow { opacity: 0; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.atp-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-12) var(--atp-space-6);
    color: var(--atp-text-muted);
}
.atp-empty__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: var(--atp-radius-lg);
    background: var(--atp-surface-2); color: var(--atp-text-subtle);
}
.atp-empty__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-text); }
.atp-empty__desc { font-size: var(--atp-text-sm); max-width: 42ch; }

/* ==========================================================================
   App shell
   ========================================================================== */
.atp-shell {
    display: grid;
    grid-template-columns: var(--atp-sidebar-w) 1fr;
    grid-template-rows: 100vh; grid-template-rows: 100dvh;
    min-height: 100vh; min-height: 100dvh;
    background: var(--atp-bg);
}
.atp-sidebar {
    grid-row: 1;
    display: flex; flex-direction: column;
    background: var(--atp-surface);
    border-right: 1px solid var(--atp-border);
    overflow-y: auto;
}
.atp-sidebar__brand {
    display: flex; align-items: center; gap: var(--atp-space-2);
    height: calc(var(--atp-topbar-h) + var(--atp-safe-top)); padding: var(--atp-safe-top) var(--atp-space-4) 0;
    border-bottom: 1px solid var(--atp-border);
    font-weight: var(--atp-weight-semibold); color: var(--atp-heading);
}
.atp-sidebar__brand { --atp-logo-h: 40px; }

/* ---- brand (immutable artwork only, rendered by <AtpLogo>) ---- */
.atp-brand { display: inline-flex; align-items: center; gap: var(--atp-space-2); text-decoration: none; color: inherit; min-width: 0; }
.atp-brand__logo { height: var(--atp-logo-h); width: auto; display: block; flex: none; }
.atp-brand__symbol { height: var(--atp-symbol-h); width: auto; display: block; flex: none; }
.atp-sidebar__nav { padding: var(--atp-space-3) var(--atp-space-2); display: flex; flex-direction: column; gap: 2px; }
.atp-sidebar__group-label {
    padding: var(--atp-space-3) var(--atp-space-3) var(--atp-space-1);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--atp-text-subtle);
}
.atp-navlink {
    display: flex; align-items: center; gap: var(--atp-space-2);
    padding: var(--atp-space-2) var(--atp-space-3);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted); border-radius: var(--atp-radius-md);
    text-decoration: none; cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-navlink:hover { background: var(--atp-surface-2); color: var(--atp-text); }
.atp-navlink.active { background: var(--atp-primary-soft); color: var(--atp-link); }
.atp-navlink__icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.atp-sidebar__foot { margin-top: auto; padding: var(--atp-space-3); border-top: 1px solid var(--atp-border); }

.atp-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.atp-topbar {
    display: flex; align-items: center; gap: var(--atp-space-3);
    height: calc(var(--atp-topbar-h) + var(--atp-safe-top)); padding: var(--atp-safe-top) var(--atp-space-5) 0;
    background: var(--atp-surface); border-bottom: 1px solid var(--atp-border);
    flex: none;
}
.atp-topbar__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-topbar__spacer { flex: 1; }
.atp-content { flex: 1; overflow-y: auto; padding: var(--atp-space-6); }
.atp-content__inner { width: 100%; display: flex; flex-direction: column; gap: var(--atp-space-6); }

.atp-iconbtn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--atp-radius-md);
    background: transparent; border: 1px solid transparent; color: var(--atp-text-muted);
    cursor: pointer; transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-iconbtn:hover { background: var(--atp-surface-2); color: var(--atp-text); }
.atp-iconbtn:active { background: var(--atp-surface-3); }
.atp-iconbtn:focus-visible { box-shadow: 0 0 0 3px var(--atp-focus); color: var(--atp-text); }

/* mobile nav trigger + scrim - inert above the md breakpoint */
.atp-navtoggle { display: none; }
.atp-scrim { display: none; }

/* topbar identity chip collapses first on narrow screens (nav toggle + title keep priority).
   Scoped to .atp-topbar so it wins over the later unconditional .atp-user definition. */
@media (max-width: 560px) { .atp-topbar .atp-user { display: none; } }

@media (max-width: 860px) {
    /* Sidebar becomes an off-canvas drawer; main is the sole in-flow column. */
    .atp-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .atp-sidebar {
        position: fixed; inset: 0 auto 0 0;
        grid-row: auto; grid-column: 1;
        width: min(272px, 84vw); z-index: 70;
        border-right: 1px solid var(--atp-border);
        transform: translateX(-100%);
        transition: transform var(--atp-dur) var(--atp-ease);
    }
    .atp-shell--nav-open .atp-sidebar { transform: none; box-shadow: var(--atp-shadow-lg); }
    .atp-scrim {
        display: block; position: fixed; inset: 0; z-index: 65;
        background: var(--atp-overlay);
        opacity: 0; visibility: hidden;
        transition: opacity var(--atp-dur) var(--atp-ease), visibility var(--atp-dur) var(--atp-ease);
    }
    .atp-shell--nav-open .atp-scrim { opacity: 1; visibility: visible; }
    .atp-main { grid-column: 1; height: 100vh; height: 100dvh; }
    .atp-navtoggle { display: inline-grid; margin-left: calc(var(--atp-space-2) * -1); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .atp-sidebar, .atp-scrim { transition: none; }
}

/* ==========================================================================
   Drawer (right-side detail)
   ========================================================================== */
.atp-drawer-overlay {
    position: fixed; inset: 0; background: var(--atp-overlay);
    display: flex; justify-content: flex-end; z-index: 60;
    animation: atp-fade var(--atp-dur) var(--atp-ease);
}
.atp-drawer {
    width: min(480px, 100vw); height: 100%;
    background: var(--atp-surface); border-left: 1px solid var(--atp-border);
    box-shadow: var(--atp-shadow-lg);
    display: flex; flex-direction: column;
    animation: atp-slide-in var(--atp-dur) var(--atp-ease);
}
.atp-drawer__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5); border-bottom: 1px solid var(--atp-border);
}
.atp-drawer__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-drawer__body { padding: var(--atp-space-5); overflow-y: auto; flex: 1; }
.atp-drawer__footer { padding: var(--atp-space-4) var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; gap: var(--atp-space-2); justify-content: flex-end; }

@keyframes atp-slide-in { from { transform: translateX(16px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes atp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Wizard (multi-step)
   ========================================================================== */
.atp-wizard { display: flex; flex-direction: column; gap: var(--atp-space-6); }
.atp-steps { display: flex; align-items: center; gap: var(--atp-space-2); flex-wrap: wrap; }
.atp-step { display: flex; align-items: center; gap: var(--atp-space-2); color: var(--atp-text-subtle); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); }
.atp-step__num {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--atp-surface-2); color: var(--atp-text-subtle);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); border: 1px solid var(--atp-border);
}
.atp-step--active { color: var(--atp-text); }
.atp-step--active .atp-step__num { background: var(--atp-primary); color: var(--atp-primary-contrast); border-color: var(--atp-primary); }
.atp-step--done .atp-step__num { background: var(--atp-primary-soft); color: var(--atp-link); border-color: transparent; }
.atp-step__bar { flex: 1 1 16px; min-width: 16px; height: 1px; background: var(--atp-border-strong); }
.atp-wizard__actions { display: flex; justify-content: space-between; gap: var(--atp-space-3); }

/* ==========================================================================
   Toasts
   ========================================================================== */
.atp-toaster {
    position: fixed; bottom: calc(var(--atp-space-6) + var(--atp-safe-bottom)); right: calc(var(--atp-space-6) + var(--atp-safe-right));
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    z-index: 80; max-width: min(380px, calc(100vw - 32px));
}
.atp-toast {
    display: flex; align-items: flex-start; gap: var(--atp-space-3);
    padding: var(--atp-space-3) var(--atp-space-4);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-text-subtle);
    border-radius: var(--atp-radius-md); box-shadow: var(--atp-shadow-md);
    animation: atp-slide-in var(--atp-dur) var(--atp-ease);
}
.atp-toast--success { border-left-color: var(--atp-success); }
.atp-toast--warn { border-left-color: var(--atp-warn); }
.atp-toast--danger { border-left-color: var(--atp-danger); }
.atp-toast--info { border-left-color: var(--atp-primary); }
.atp-toast__body { flex: 1; min-width: 0; }
.atp-toast__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-text); }
.atp-toast__msg { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
/* A toast is dismissed with a finger, so its close is a real 44px target like every other control the
   carrier taps. It measured 21px, which is what the capture gate now fails a screen for. */
.atp-toast__close {
    background: none; border: none; color: var(--atp-text-subtle); cursor: pointer;
    padding: 0; line-height: 1; font-size: 15px; flex: none;
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.atp-toast__close:hover { color: var(--atp-text); }

/* ==========================================================================
   Proof48 footer attribution
   ========================================================================== */
.atp-proof48 {
    font-size: var(--atp-text-xs);
    color: var(--atp-text-subtle);
    letter-spacing: 0.01em;
}
.atp-proof48 a {
    color: var(--atp-text-muted);
    font-weight: var(--atp-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid var(--atp-border-strong);
    transition: color var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-proof48 a:hover { color: var(--atp-link); border-bottom-color: var(--atp-link); }

/* utilities */
.atp-row { display: flex; align-items: center; gap: var(--atp-space-3); }
.atp-col { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--atp-space-4); }
.atp-spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .atp-drawer, .atp-drawer-overlay, .atp-toast { animation: none; }
    .atp-btn, .atp-navlink, .atp-input, .atp-select, .atp-iconbtn, .atp-table tbody tr { transition: none; }
}

/* ==========================================================================
   Ops console - page scaffolding (login, page headers, split, forms, detail)
   ========================================================================== */

/* page header row: title left, actions right */
.atp-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--atp-space-4); flex-wrap: wrap;
}

/* two-column split: primary form/content + secondary rail; stacks on narrow */
.atp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--atp-space-6); align-items: start; }
@media (max-width: 980px) { .atp-split { grid-template-columns: 1fr; } }

/* paired fields on one row */
.atp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atp-space-3); align-items: end; }
@media (max-width: 560px) { .atp-form-row { grid-template-columns: 1fr; } }

/* checkbox row */
.atp-check { display: inline-flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-md); color: var(--atp-text); cursor: pointer; user-select: none; }
.atp-check input { width: 16px; height: 16px; accent-color: var(--atp-primary); }

/* definition list (job overview) */
.atp-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--atp-space-2) var(--atp-space-5); margin: 0; }
.atp-dl dt { color: var(--atp-text-muted); font-size: var(--atp-text-sm); }
.atp-dl dd { margin: 0; color: var(--atp-text); font-size: var(--atp-text-md); text-align: right; }

/* quote totals block */
.atp-totals { display: flex; flex-direction: column; gap: var(--atp-space-1); margin-left: auto; min-width: 200px; }
.atp-totals > div { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-4); font-size: var(--atp-text-md); }
.atp-totals__grand { border-top: 1px solid var(--atp-border); margin-top: var(--atp-space-1); padding-top: var(--atp-space-2); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* wizard headline price */
.atp-price { display: flex; align-items: baseline; gap: var(--atp-space-3); }
.atp-price__value { font-size: var(--atp-text-2xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

.atp-danger { color: var(--atp-danger); }

/* topbar user identity chip */
.atp-user { display: inline-flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-sm); color: var(--atp-text-muted); }

/* market / language segmented control (topbar + public bars) */
.atp-langswitch {
    display: inline-flex; align-items: center; gap: 2px; flex: none;
    padding: 2px; background: var(--atp-surface-2);
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md);
}
.atp-langswitch__opt {
    display: inline-grid; place-items: center; min-width: 30px; height: 24px;
    padding: 0 var(--atp-space-2); font: inherit; font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold); letter-spacing: 0.04em;
    color: var(--atp-text-subtle); background: transparent; border: none;
    border-radius: var(--atp-radius-sm); cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-langswitch__opt:hover { color: var(--atp-text); }
.atp-langswitch__opt--on { background: var(--atp-surface); color: var(--atp-heading); box-shadow: var(--atp-shadow-sm); }
.atp-langswitch__opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--atp-focus); color: var(--atp-text); }
@media (prefers-reduced-motion: reduce) { .atp-langswitch__opt { transition: none; } }

/* ==========================================================================
   Customer booking (/book) + public tracking (/track)
   ========================================================================== */
.atp-book, .atp-track { display: flex; flex-direction: column; gap: var(--atp-space-5); }
.atp-book__head { display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-book__done { align-items: flex-start; text-align: left; gap: var(--atp-space-3); }
.atp-book__done-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--atp-radius-pill);
    background: var(--atp-success-soft); color: var(--atp-success);
}

.atp-track__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--atp-space-5); align-items: start; }
@media (max-width: 860px) { .atp-track__grid { grid-template-columns: 1fr; } }
.atp-track__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atp-space-3); }
.atp-track__job { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-track__eta { display: flex; flex-direction: column; gap: var(--atp-space-1); padding-top: var(--atp-space-2); border-top: 1px solid var(--atp-border); }
.atp-track__eta p { margin: 0; color: var(--atp-text); }
.atp-track__map {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atp-space-3);
    min-height: 220px; border-radius: var(--atp-radius-md); color: var(--atp-text-subtle);
    background:
        linear-gradient(var(--atp-border) 1px, transparent 1px) 0 0 / 100% 28px,
        linear-gradient(90deg, var(--atp-border) 1px, transparent 1px) 0 0 / 28px 100%,
        var(--atp-surface-2);
    text-align: center; padding: var(--atp-space-6);
}
.atp-track__mapframe {
    width: 100%; min-height: 260px; border: 0; border-radius: var(--atp-radius-md);
    background: var(--atp-surface-2); display: block;
}
.atp-track__mapmeta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3);
    flex-wrap: wrap; font-size: var(--atp-text-sm);
}

/* ---- vertical stage timeline (tracking) ---- */
.atp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atp-timeline__item {
    position: relative; display: flex; align-items: center; gap: var(--atp-space-3);
    padding: var(--atp-space-2) 0 var(--atp-space-2) var(--atp-space-1); min-height: 34px; color: var(--atp-text-subtle);
}
.atp-timeline__item::before {
    content: ""; position: absolute; left: 6px; top: 24px; bottom: -10px; width: 2px; background: var(--atp-border-strong);
}
.atp-timeline__item:last-child::before { display: none; }
.atp-timeline__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--atp-surface-3); border: 2px solid var(--atp-border-strong); z-index: 1; }
.atp-timeline__label { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); }
.atp-timeline__item--done { color: var(--atp-text); }
.atp-timeline__item--done .atp-timeline__dot { background: var(--atp-primary); border-color: var(--atp-primary); }
.atp-timeline__item--done::before { background: var(--atp-primary); }
.atp-timeline__item--current { color: var(--atp-heading); font-weight: var(--atp-weight-semibold); }
.atp-timeline__item--current .atp-timeline__dot { box-shadow: 0 0 0 4px var(--atp-primary-soft); }

/* ==========================================================================
   Driver app (offline-first shell)
   ========================================================================== */
.atp-driver { display: flex; flex-direction: column; gap: var(--atp-space-4); width: 100%; }
.atp-driver__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atp-space-3); }
.atp-driver__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); }
.atp-driver__back { align-self: flex-start; }

.atp-linkbtn {
    display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0;
    font: inherit; font-size: var(--atp-text-sm); color: var(--atp-link); cursor: pointer; text-decoration: none;
}
.atp-linkbtn:hover { text-decoration: underline; }

/* shift toggle */
.atp-switch { display: inline-flex; align-items: center; gap: var(--atp-space-2); cursor: pointer; user-select: none; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.atp-switch__track { position: relative; width: 40px; height: 22px; border-radius: var(--atp-radius-pill); background: var(--atp-surface-3); border: 1px solid var(--atp-border-strong); transition: background var(--atp-dur) var(--atp-ease); flex: none; }
.atp-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--atp-surface); box-shadow: var(--atp-shadow-sm); transition: transform var(--atp-dur) var(--atp-ease); }
.atp-switch input:checked + .atp-switch__track { background: var(--atp-primary); border-color: var(--atp-primary); }
.atp-switch input:checked + .atp-switch__track .atp-switch__thumb { transform: translateX(18px); }
.atp-switch input:focus-visible + .atp-switch__track { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

/* offline / pending banner */
.atp-offline {
    display: flex; align-items: center; gap: var(--atp-space-2);
    padding: var(--atp-space-2) var(--atp-space-3); border-radius: var(--atp-radius-md);
    background: var(--atp-warn-soft); color: var(--atp-warn); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium);
    border: 1px solid transparent;
}
.atp-offline--pending { background: var(--atp-primary-soft); color: var(--atp-link); }
.atp-offline__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.atp-offline__count { margin-left: var(--atp-space-2); font-variant-numeric: tabular-nums; }

/* job row (route list) */
.atp-stoplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-jobrow {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); width: 100%;
    padding: var(--atp-space-4); background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm); cursor: pointer; text-align: left;
    transition: border-color var(--atp-dur-fast) var(--atp-ease), background var(--atp-dur-fast) var(--atp-ease);
}
.atp-jobrow:hover { border-color: var(--atp-border-strong); background: var(--atp-surface-2); }
.atp-jobrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-jobrow__num { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-jobrow__sub { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-jobrow__end { display: flex; align-items: center; gap: var(--atp-space-2); flex: none; }
.atp-jobrow__chevron { color: var(--atp-text-subtle); }

/* stop cards (job detail steps) */
.atp-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-stopcard {
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    padding: var(--atp-space-4); background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-border-strong); border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-stopcard--active { border-left-color: var(--atp-primary); }
.atp-stopcard--done { border-left-color: var(--atp-success); opacity: 0.85; }
.atp-stopcard__head { display: flex; align-items: flex-start; gap: var(--atp-space-3); }
.atp-stopcard__seq { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--atp-surface-2); color: var(--atp-text-muted); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); }
.atp-stopcard--active .atp-stopcard__seq { background: var(--atp-primary); color: var(--atp-primary-contrast); }
.atp-stopcard__addr { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.atp-stopcard__line1 { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text); }
.atp-stopcard__note { font-size: var(--atp-text-sm); color: var(--atp-text-subtle); font-style: italic; }
.atp-stopcard__actions { display: flex; gap: var(--atp-space-2); flex-wrap: wrap; padding-left: calc(26px + var(--atp-space-3)); }

/* proof-of-delivery capture */
.atp-pod { display: flex; flex-direction: column; gap: var(--atp-space-3); padding: var(--atp-space-4); background: var(--atp-surface-2); border-radius: var(--atp-radius-md); }
.atp-pod__captures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--atp-space-3); }
@media (max-width: 480px) { .atp-pod__captures { grid-template-columns: 1fr; } }
.atp-capture {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atp-space-2);
    min-height: 96px; padding: var(--atp-space-4); cursor: pointer; text-align: center;
    background: var(--atp-surface); color: var(--atp-text-muted); font-size: var(--atp-text-sm);
    border: 1.5px dashed var(--atp-border-strong); border-radius: var(--atp-radius-md);
    transition: border-color var(--atp-dur-fast) var(--atp-ease), color var(--atp-dur-fast) var(--atp-ease);
}
.atp-capture:hover { border-color: var(--atp-primary); color: var(--atp-text); }
.atp-capture--set { border-style: solid; border-color: var(--atp-primary); color: var(--atp-link); background: var(--atp-primary-soft); }

/* ---- customer public layout ---- */
.atp-public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--atp-bg); }
.atp-public__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); height: calc(var(--atp-topbar-h) + var(--atp-safe-top)); padding: var(--atp-safe-top) var(--atp-space-5) 0; background: var(--atp-surface); border-bottom: 1px solid var(--atp-border); }
.atp-public__brand { display: flex; align-items: center; gap: var(--atp-space-2); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); text-decoration: none; }
.atp-public__brand { --atp-logo-h: 44px; }
.atp-public__brand:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; border-radius: var(--atp-radius-sm); }
.atp-public__main { flex: 1; width: 100%; padding: var(--atp-space-8) var(--atp-space-5); }
.atp-public__foot { padding: var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; justify-content: center; }

/* ==========================================================================
   App-shell loading (auth bootstrap) - calm centered spinner, no layout jump
   ========================================================================== */
.atp-shell-loading {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--atp-bg);
}
.atp-shell-loading::after {
    content: ""; width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--atp-border-strong); border-top-color: var(--atp-primary);
    animation: atp-spin 0.7s linear infinite;
}
@keyframes atp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .atp-shell-loading::after { animation-duration: 1.6s; } }

/* A session that died mid-work: the shell is gone, so the panel centres on its own page and takes the room it
   needs at any width instead of stopping at a measure chosen for someone else's monitor. */
.atp-shell-expired {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
    padding: var(--atp-space-6); background: var(--atp-bg);
}
.atp-shell-expired > * { width: 100%; }

/* ==========================================================================
   Blazor error UI
   Hidden by default; the Blazor runtime sets `display:block` inline on a real
   unhandled error. This rule was missing from the host, which left the
   "An unhandled error has occurred. Reload" bar visible on every page.
   (Reconnect UI is handled separately by the <ReconnectModal> dialog.)
   ========================================================================== */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: var(--atp-space-3) var(--atp-space-10) var(--atp-space-3) var(--atp-space-5);
    font-family: var(--atp-font-sans); font-size: var(--atp-text-md);
    color: var(--atp-danger-contrast);
    background: var(--atp-danger);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}
#blazor-error-ui .reload {
    color: inherit; font-weight: var(--atp-weight-semibold);
    text-decoration: underline; text-underline-offset: 2px; margin-left: var(--atp-space-2);
}
#blazor-error-ui .dismiss {
    cursor: pointer; position: absolute; right: var(--atp-space-4); top: 50%; transform: translateY(-50%);
    line-height: 1; opacity: 0.85;
}
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* ==========================================================================
   Marketing landing (public "/") - built on the same tokens as the ops tool.
   Full-bleed sections; larger, editorial type; light + dark; WCAG 2.2 AA.
   ========================================================================== */
.atp-mkt {
    min-height: 100vh; min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--atp-bg);
    overflow-x: clip;              /* the page body must never scroll sideways */
}

/* keyboard skip link - off-screen until focused */
.atp-mkt__skip {
    position: absolute; left: 50%; top: var(--atp-space-2); transform: translate(-50%, -160%);
    z-index: 60; padding: var(--atp-space-2) var(--atp-space-4);
    background: var(--atp-primary); color: var(--atp-primary-contrast);
    border-radius: var(--atp-radius-md); font-weight: var(--atp-weight-medium);
    text-decoration: none; box-shadow: var(--atp-shadow-md);
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-mkt__skip:focus-visible { transform: translate(-50%, 0); }

/* ops-console skip link - mirrors the marketing one, scoped to the app shell */
.atp-skip {
    position: absolute; left: var(--atp-space-4); top: var(--atp-space-2); transform: translateY(-160%);
    z-index: 90; padding: var(--atp-space-2) var(--atp-space-4);
    background: var(--atp-primary); color: var(--atp-primary-contrast);
    border-radius: var(--atp-radius-md); font-weight: var(--atp-weight-medium);
    text-decoration: none; box-shadow: var(--atp-shadow-md);
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-skip:focus-visible { transform: translateY(0); }

/* --- sticky top bar --- */
.atp-mkt__bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--atp-space-3) var(--atp-space-4); flex-wrap: wrap;
    min-height: calc(var(--atp-topbar-h) + var(--atp-safe-top));
    padding: calc(var(--atp-space-2) + var(--atp-safe-top)) clamp(var(--atp-space-4), 4vw, var(--atp-space-10)) var(--atp-space-2);
    background: color-mix(in srgb, var(--atp-surface) 88%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt__brand { display: inline-flex; align-items: center; gap: var(--atp-space-2); text-decoration: none; color: var(--atp-heading); font-weight: var(--atp-weight-semibold); min-width: 0; }
.atp-mkt__brand:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; border-radius: var(--atp-radius-sm); }
.atp-mkt__bar-actions { display: flex; align-items: center; gap: var(--atp-space-2) var(--atp-space-3); flex-wrap: wrap; justify-content: flex-end; }
.atp-mkt__track-cta { text-decoration: none; }
.atp-mkt__login {
    color: var(--atp-text-muted); text-decoration: none; font-size: var(--atp-text-md);
    font-weight: var(--atp-weight-medium); padding: var(--atp-space-1) var(--atp-space-2);
    border-radius: var(--atp-radius-sm); white-space: nowrap;
}
.atp-mkt__login:hover { color: var(--atp-text); text-decoration: underline; text-underline-offset: 3px; }
.atp-mkt__login:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

.atp-mkt__main { flex: 1; width: 100%; }
.atp-mkt__foot { padding: var(--atp-space-6) var(--atp-space-5); border-top: 1px solid var(--atp-border); display: flex; justify-content: center; background: var(--atp-surface); }

/* --- shared section shell ---
   Every marketing page renders the SAME section as the Website Home master: the title column on the left behind a
   hairline, the content filling the rest of the band. It used to be a centred head capped at 56ch above a
   full-width grid, which at 1920 measured 405px marooned in the middle of a 1920px band with the grid under it
   running edge to edge: one page, two width regimes, which is the defect the fluid-layout rule names.

   The :has() guard is what lets one rule reach every page without ten copies of a wrapper class in markup: a
   shell that carries a head becomes the two-column row, a shell that carries a split or a CTA inner is left
   alone. */
.atp-mkt-shell { width: 100%; padding-inline: var(--atp-mkt-gutter); }
.atp-mkt-section { padding-block: clamp(var(--atp-space-6), 2.6vw, var(--atp-space-10)); border-bottom: 1px solid var(--atp-border); }
.atp-mkt-section--alt { background: var(--atp-bg); }
.atp-mkt-shell:has(> .atp-mkt-section__head) {
    display: grid; grid-template-columns: minmax(min(210px, 100%), 0.72fr) minmax(0, 4fr);
    gap: var(--atp-space-6); align-items: center;
}
.atp-mkt-section__head {
    margin: 0; text-align: left; display: flex; flex-direction: column; gap: var(--atp-space-2);
    align-self: stretch; justify-content: center;
    padding-right: var(--atp-space-6); border-right: 1px solid var(--atp-border);
}
.atp-mkt-section__head .atp-mkt-h2 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.atp-mkt-section__head .atp-mkt-lead { font-size: var(--atp-text-md); line-height: 1.45; }
@media (max-width: 860px) {
    .atp-mkt-shell:has(> .atp-mkt-section__head) { grid-template-columns: 1fr; gap: var(--atp-space-4); }
    .atp-mkt-section__head { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--atp-border); padding-bottom: var(--atp-space-3); }
}

.atp-mkt-eyebrow { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--atp-primary); margin: 0; }
.atp-mkt-eyebrow--onbrand { color: rgba(255, 255, 255, 0.82); }
.atp-mkt-h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: var(--atp-weight-semibold); line-height: 1.12; letter-spacing: -0.02em; color: var(--atp-heading); margin: 0; }
.atp-mkt-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- on-brand (dark gradient) context: hero + final band --- */
.atp-mkt-onbrand {
    position: relative;
    background: linear-gradient(135deg, var(--atp-navy) 0%, var(--atp-azure-600) 52%, var(--atp-azure) 100%);
    color: #fff; isolation: isolate;
}
.atp-mkt-onbrand .atp-btn--primary {
    --_fg: var(--atp-navy); --_bd: #fff;
    background: #fff; box-shadow: var(--atp-shadow-md);
}
.atp-mkt-onbrand .atp-btn--primary:hover:not(:disabled) { --_bd: #eef2f7; background: #eef2f7; }
.atp-mkt-onbrand .atp-btn--primary:active:not(:disabled) { background: #e2e8f0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); }
.atp-mkt-onbrand .atp-btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }
.atp-mkt-onbrand .atp-btn--ghost {
    --_fg: #fff; --_bg: transparent; --_bd: rgba(255, 255, 255, 0.55); box-shadow: none;
}
.atp-mkt-onbrand .atp-btn--ghost:hover:not(:disabled) { --_bg: rgba(255, 255, 255, 0.14); --_bd: rgba(255, 255, 255, 0.8); }
.atp-mkt-onbrand .atp-btn--ghost:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }

/* --- hero --- */
.atp-mkt-hero { position: relative; overflow: clip; padding-block: clamp(var(--atp-space-16), 12vw, 132px); }
.atp-mkt-hero__bg { position: absolute; inset: 0; z-index: -1; }
.atp-mkt-hero__bg svg { width: 100%; height: 100%; display: block; }
.atp-mkt-hero__inner { position: relative; width: 100%; padding-inline: clamp(var(--atp-space-5), 5vw, var(--atp-space-12)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-5); }
.atp-mkt-hero__title { font-size: clamp(2.1rem, 6vw, 3.5rem); font-weight: var(--atp-weight-semibold); line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin: 0; max-width: 18ch; }
.atp-mkt-hero__sub { font-size: clamp(1.02rem, 1.9vw, 1.28rem); line-height: 1.55; color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 60ch; }
.atp-mkt-hero__cta { display: flex; flex-wrap: wrap; gap: var(--atp-space-3); justify-content: center; margin-top: var(--atp-space-2); }
.atp-mkt-hero__chips { list-style: none; margin: var(--atp-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--atp-space-2); justify-content: center; }
.atp-mkt-hero__chips li {
    font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); color: #fff;
    padding: var(--atp-space-1) var(--atp-space-3);
    background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--atp-radius-pill);
}

/* --- services cards --- */
.atp-mkt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--atp-space-5); }
/* The card is an <a>, so without this reset the browser underlines its title AND its description and app.css
   paints them link blue: three cards that read as a wall of links instead of the cards the design system draws. */
.atp-mkt-card {
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    color: var(--atp-text); text-decoration: none;
    transition: transform var(--atp-dur) var(--atp-ease), border-color var(--atp-dur) var(--atp-ease), box-shadow var(--atp-dur) var(--atp-ease);
}
.atp-mkt-card:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; }
.atp-mkt-card:hover { transform: translateY(-3px); border-color: var(--atp-border-strong); box-shadow: var(--atp-shadow-md); }
.atp-mkt-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--atp-radius-md); background: var(--atp-primary-soft); color: var(--atp-primary); }
.atp-mkt-card__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-card__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- split (visibility / platform) --- */
.atp-mkt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--atp-space-6), 3vw, var(--atp-space-10)); align-items: center; }
.atp-mkt-split__copy { display: flex; flex-direction: column; gap: var(--atp-space-4); }
.atp-mkt-split__copy .atp-mkt-eyebrow, .atp-mkt-split__copy .atp-mkt-h2, .atp-mkt-split__copy .atp-mkt-lead { text-align: left; }
.atp-mkt-featlist { list-style: none; margin: var(--atp-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-mkt-featlist li { display: flex; align-items: flex-start; gap: var(--atp-space-3); font-size: var(--atp-text-md); color: var(--atp-text); line-height: var(--atp-leading-normal); }
.atp-mkt-featlist svg { flex: none; margin-top: 2px; color: var(--atp-primary); }
/* The illustration is a supporting mark, not a hero: without a height it grew with the column and at 1920 became
   a 700px plate carrying a small line drawing. It still fills the column's width; only the drawing is bounded. */
.atp-mkt-viz { border-radius: var(--atp-radius-lg); background: var(--atp-surface-2); border: 1px solid var(--atp-border); box-shadow: var(--atp-shadow-sm); padding: var(--atp-space-4); display: flex; }
.atp-mkt-viz svg { width: 100%; height: auto; max-height: 260px; display: block; }

/* --- coverage --- */
.atp-mkt-coverage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--atp-space-4); }
.atp-mkt-coverage__item {
    display: flex; align-items: center; gap: var(--atp-space-3);
    padding: var(--atp-space-4) var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-coverage__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--atp-text-subtle); }
.atp-mkt-coverage__dot--active { background: var(--atp-success); box-shadow: 0 0 0 4px var(--atp-success-soft); }
.atp-mkt-coverage__dot--soon { background: var(--atp-warn); box-shadow: 0 0 0 4px var(--atp-warn-soft); }
.atp-mkt-coverage__name { flex: 1; font-weight: var(--atp-weight-medium); color: var(--atp-text); }

/* --- why ATP --- */
.atp-mkt-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--atp-space-5); }
.atp-mkt-value { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--atp-radius-md); background: var(--atp-primary-soft); color: var(--atp-primary); margin-bottom: var(--atp-space-1); }
.atp-mkt-value__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-value__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- final CTA band ---
   The same shape as the master's "Ready to move?" card: copy on the left, the action on the right, the band
   filled edge to edge. It used to be a centred column whose title was capped at 20ch and marooned in the middle
   of a full-width band. */
.atp-mkt-cta-band { padding-block: clamp(var(--atp-space-8), 3.2vw, var(--atp-space-12)); }
.atp-mkt-cta-band__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--atp-space-5); align-items: center; text-align: left; }
.atp-mkt-cta-band__title { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; color: #fff; margin: 0; grid-column: 1; }
.atp-mkt-cta-band__sub { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0; grid-column: 1; grid-row: 2; }
.atp-mkt-cta-band__inner > .atp-btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
@media (max-width: 860px) {
    .atp-mkt-cta-band__inner { grid-template-columns: 1fr; }
    .atp-mkt-cta-band__inner > .atp-btn { grid-column: 1; grid-row: auto; justify-self: stretch; }
}

/* --- public track lookup (/track) --- */
.atp-track-lookup { width: 100%; margin: clamp(var(--atp-space-6), 6vw, var(--atp-space-16)) 0 0; }
.atp-track-lookup__head { display: flex; flex-direction: column; gap: var(--atp-space-2); text-align: center; align-items: center; margin-bottom: var(--atp-space-3); }
.atp-track-lookup__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--atp-radius-lg); background: var(--atp-primary-soft); color: var(--atp-primary); margin-bottom: var(--atp-space-1); }
.atp-track-lookup__hint { font-size: var(--atp-text-sm); line-height: var(--atp-leading-normal); text-align: center; margin: 0; }

/* --- responsive --- */
@media (max-width: 860px) {
    .atp-mkt-split { grid-template-columns: 1fr; }
    .atp-mkt-split__media { order: -1; }
}
@media (max-width: 560px) {
    .atp-mkt__bar-actions { gap: var(--atp-space-2); }
    .atp-mkt__track-cta span { display: none; }   /* keep the parcel icon, drop the label to save width */
    .atp-mkt__track-cta { padding-inline: var(--atp-space-2); }
}

@media (prefers-reduced-motion: reduce) {
    .atp-mkt__skip, .atp-mkt-card { transition: none; }
    .atp-mkt-card:hover { transform: none; }
}

/* =====================================================================
   MARKETING - NEW COMPONENTS (multi-page)
   Appended by the css-foundation agent. Reuses --atp-* tokens only so
   light + dark auto-adapt. Nothing above this line is modified.
   ===================================================================== */

/* --- anchor offset: keep #section targets clear of the sticky bar --- */
.atp-mkt-anchor { scroll-margin-top: calc(var(--atp-topbar-h) + var(--atp-space-4)); }

/* --- desktop inline nav (lives inside the sticky .atp-mkt__bar) --- */
.atp-mkt__nav { display: flex; align-items: center; gap: var(--atp-space-1); flex-wrap: nowrap; }
.atp-mkt__navlink {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: var(--atp-space-2) var(--atp-space-3);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted); text-decoration: none;
    border-radius: var(--atp-radius-sm);
    transition: color var(--atp-dur-fast) var(--atp-ease), background var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__navlink:hover { color: var(--atp-text); background: var(--atp-surface-2); }
.atp-mkt__navlink:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__navlink--active { color: var(--atp-primary); font-weight: var(--atp-weight-semibold); }
.atp-mkt__navlink--active:hover { color: var(--atp-primary); }

/* --- bar CTA ("Book a courier") - compact primary --- */
.atp-mkt__cta {
    display: inline-flex; align-items: center; gap: var(--atp-space-2); white-space: nowrap;
    padding: var(--atp-space-2) var(--atp-space-4);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); line-height: 1;
    color: var(--atp-primary-contrast); background: var(--atp-primary);
    border: 1px solid var(--atp-primary); border-radius: var(--atp-radius-md);
    text-decoration: none; box-shadow: var(--atp-shadow-sm);
    transition: background var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__cta:hover { background: var(--atp-primary-hover); border-color: var(--atp-primary-hover); }
.atp-mkt__cta:active { background: var(--atp-primary-active); border-color: var(--atp-primary-active); }
.atp-mkt__cta:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

/* --- mobile hamburger button (hidden on desktop) --- */
/* the app's back arrow in the bar (hidden on the web, which has the browser's): the menu button's look, always shown */
.atp-mkt__back { display: inline-flex; }
.atp-mkt__menu-btn, .atp-mkt__back {
    align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    color: var(--atp-text); background: transparent;
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md);
    cursor: pointer;
    transition: background var(--atp-dur-fast) var(--atp-ease), border-color var(--atp-dur-fast) var(--atp-ease);
}
.atp-mkt__menu-btn { display: none; }
.atp-mkt__menu-btn:hover, .atp-mkt__back:hover { background: var(--atp-surface-2); border-color: var(--atp-border-strong); }
.atp-mkt__menu-btn:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__menu-btn svg { display: block; width: 22px; height: 22px; }

/* --- mobile drawer: collapsed by default, no display:none jump --- */
.atp-mkt__drawer {
    display: flex; flex-direction: column;
    width: 100%; flex-basis: 100%; order: 99;
    max-height: 0; opacity: 0; overflow: hidden;
    visibility: hidden; pointer-events: none;
    transition: max-height var(--atp-dur) var(--atp-ease),
        opacity var(--atp-dur) var(--atp-ease),
        visibility var(--atp-dur) var(--atp-ease);
}
.atp-mkt__drawer--open {
    max-height: 80vh; opacity: 1;
    visibility: visible; pointer-events: auto;
    padding-top: var(--atp-space-2);
    margin-top: var(--atp-space-2);
    border-top: 1px solid var(--atp-border);
    overflow-y: auto;
}
.atp-mkt__drawer-link {
    display: flex; align-items: center;
    padding: var(--atp-space-3) var(--atp-space-2);
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-medium);
    color: var(--atp-text); text-decoration: none;
    border-radius: var(--atp-radius-sm);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt__drawer-link:last-child { border-bottom: 0; }
.atp-mkt__drawer-link:hover { background: var(--atp-surface-2); color: var(--atp-primary); }
.atp-mkt__drawer-link:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-mkt__drawer-link.atp-mkt__navlink--active { color: var(--atp-primary); font-weight: var(--atp-weight-semibold); }

/* --- subhero: compact page header, left-aligned, neutral surface --- */
.atp-mkt-subhero {
    background: var(--atp-surface-2);
    border-bottom: 1px solid var(--atp-border);
    padding-block: clamp(var(--atp-space-10), 7vw, var(--atp-space-16));
}
.atp-mkt-subhero__inner {
    width: 100%;
    padding-inline: clamp(var(--atp-space-5), 5vw, var(--atp-space-12));
    display: flex; flex-direction: column; gap: var(--atp-space-3);
    text-align: left;
}
.atp-mkt-subhero__title {
    font-size: clamp(1.9rem, 4.4vw, 2.85rem); font-weight: var(--atp-weight-semibold);
    line-height: 1.1; letter-spacing: -0.025em; color: var(--atp-heading); margin: 0;
    max-width: 20ch;
}
.atp-mkt-subhero__sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: var(--atp-leading-normal);
    color: var(--atp-text-muted); margin: 0; max-width: 60ch;
}

/* --- steps: numbered, 1 -> 2 -> 4 columns, optional connector --- */
.atp-mkt-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--atp-space-6);
}
.atp-mkt-step {
    position: relative;
    display: flex; flex-direction: column; gap: var(--atp-space-2);
}
.atp-mkt-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold);
    color: var(--atp-primary-contrast); background: var(--atp-primary);
    border-radius: var(--atp-radius-pill);
    box-shadow: 0 0 0 4px var(--atp-primary-soft);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-step__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-step__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- feature grid: denser than cards, 1 -> 2 -> 3 columns --- */
.atp-mkt-features {
    display: grid; grid-template-columns: 1fr; gap: var(--atp-space-4);
}
.atp-mkt-feature {
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-feature__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--atp-radius-md);
    background: var(--atp-primary-soft); color: var(--atp-primary);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-feature__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-mkt-feature__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- capabilities: TRUE facts styled as labels (not fabricated counters) --- */
.atp-mkt-caps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--atp-space-4);
}
.atp-mkt-cap {
    display: flex; flex-direction: column; gap: var(--atp-space-1);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    text-align: left;
}
.atp-mkt-cap__k {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: var(--atp-weight-semibold);
    line-height: 1.15; letter-spacing: -0.01em; color: var(--atp-heading); margin: 0;
}
.atp-mkt-cap__v { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }

/* --- callout: tinted bordered panel (compliance note) --- */
.atp-mkt-callout {
    display: grid; grid-template-columns: auto 1fr; gap: var(--atp-space-2) var(--atp-space-4);
    align-items: start;
    padding: clamp(var(--atp-space-5), 4vw, var(--atp-space-8));
    background: var(--atp-primary-soft);
    border: 1px solid var(--atp-border);
    border-left: 3px solid var(--atp-primary);
    border-radius: var(--atp-radius-lg);
}
.atp-mkt-callout__icon {
    grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    color: var(--atp-primary); background: var(--atp-surface);
    border-radius: var(--atp-radius-md); box-shadow: var(--atp-shadow-sm);
}
.atp-mkt-callout__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; align-self: center; }
.atp-mkt-callout__desc { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text); margin: 0; }

/* --- map: Europe SVG wrapper + legend + pin helper --- */
.atp-mkt-map { display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-5); }
.atp-mkt-map__svg { width: 100%; }
.atp-mkt-map__svg svg { width: 100%; height: auto; display: block; }
.atp-mkt-map__legend {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--atp-space-3) var(--atp-space-6);
}
.atp-mkt-map__legend li {
    display: inline-flex; align-items: center; gap: var(--atp-space-2);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text);
}
.atp-mkt-map__pin { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--atp-text-subtle); }
.atp-mkt-map__pin--active { background: var(--atp-success); box-shadow: 0 0 0 4px var(--atp-success-soft); }
.atp-mkt-map__pin--soon { background: var(--atp-warn); box-shadow: 0 0 0 4px var(--atp-warn-soft); }

/* --- FAQ: native <details>/<summary> accordion --- */
.atp-mkt-faq { display: flex; flex-direction: column; gap: var(--atp-space-3); width: 100%; }
.atp-mkt-faq__item {
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    overflow: hidden;
}
.atp-mkt-faq__item[open] { border-color: var(--atp-border-strong); }
.atp-mkt-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-4);
    padding: var(--atp-space-4) var(--atp-space-5);
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold);
    color: var(--atp-heading); cursor: pointer; list-style: none;
}
.atp-mkt-faq__q::-webkit-details-marker { display: none; }
.atp-mkt-faq__q::after {
    content: ""; flex: none; width: 12px; height: 12px; margin-left: auto;
    border-right: 2px solid var(--atp-text-subtle); border-bottom: 2px solid var(--atp-text-subtle);
    transform: rotate(45deg); transform-origin: center;
    transition: transform var(--atp-dur) var(--atp-ease);
}
.atp-mkt-faq__item[open] .atp-mkt-faq__q::after { transform: rotate(-135deg); }
.atp-mkt-faq__q:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: -2px; }
.atp-mkt-faq__q:hover { color: var(--atp-primary); }
.atp-mkt-faq__a {
    padding: 0 var(--atp-space-5) var(--atp-space-5);
    font-size: var(--atp-text-md); line-height: var(--atp-leading-normal);
    color: var(--atp-text-muted); margin: 0;
}
.atp-mkt-faq__a p { margin: 0 0 var(--atp-space-3); }
.atp-mkt-faq__a p:last-child { margin-bottom: 0; }

/* --- contact: responsive grid of contact cards --- */
.atp-mkt-contact {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--atp-space-5);
}
/* Like .atp-mkt-card this is an <a>, so it needs the reset or the browser underlines the whole card. */
.atp-mkt-contact__card {
    display: flex; flex-direction: column; gap: var(--atp-space-2);
    padding: var(--atp-space-5);
    background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm);
    color: var(--atp-text); text-decoration: none;
}
.atp-mkt-contact__card:hover { border-color: var(--atp-border-strong); }
.atp-mkt-contact__card:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 3px; }
.atp-mkt-contact__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--atp-radius-md);
    background: var(--atp-primary-soft); color: var(--atp-primary);
    margin-bottom: var(--atp-space-1);
}
.atp-mkt-contact__k { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-mkt-contact__v { font-size: var(--atp-text-lg); color: var(--atp-text); margin: 0; word-break: break-word; }
a.atp-mkt-contact__v { color: var(--atp-link); text-decoration: none; }
a.atp-mkt-contact__v:hover { text-decoration: underline; text-underline-offset: 3px; }
a.atp-mkt-contact__v:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }

/* --- facts: definition-style list (company / legal facts) --- */
.atp-mkt-facts {
    margin: 0; padding: 0; width: 100%;
    display: flex; flex-direction: column;
    border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg);
    background: var(--atp-surface); box-shadow: var(--atp-shadow-sm);
    overflow: hidden;
}
.atp-mkt-fact {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--atp-space-4);
    padding: var(--atp-space-4) var(--atp-space-5);
    border-bottom: 1px solid var(--atp-border);
}
.atp-mkt-fact:last-child { border-bottom: 0; }
.atp-mkt-fact__k { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-text-muted); margin: 0; }
.atp-mkt-fact__v { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; text-align: right; }

/* --- prose: readable long-form for legal pages --- */
.atp-mkt-prose { max-width: 68ch; color: var(--atp-text); font-size: var(--atp-text-lg); line-height: var(--atp-leading-normal); }
.atp-mkt-prose > :first-child { margin-top: 0; }
.atp-mkt-prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: var(--atp-weight-semibold); line-height: 1.2; letter-spacing: -0.015em; color: var(--atp-heading); margin: var(--atp-space-10) 0 var(--atp-space-3); }
.atp-mkt-prose h3 { font-size: var(--atp-text-xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: var(--atp-space-8) 0 var(--atp-space-2); }
.atp-mkt-prose p { margin: 0 0 var(--atp-space-4); }
.atp-mkt-prose ul, .atp-mkt-prose ol { margin: 0 0 var(--atp-space-4); padding-left: var(--atp-space-6); display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-prose li { line-height: var(--atp-leading-normal); }
.atp-mkt-prose a { color: var(--atp-link); text-decoration: underline; text-underline-offset: 2px; }
.atp-mkt-prose a:hover { text-decoration-thickness: 2px; }
.atp-mkt-prose a:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }
.atp-mkt-prose strong { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* --- rich footer --- */
.atp-mkt-footer { background: var(--atp-surface); border-top: 1px solid var(--atp-border); }
.atp-mkt-footer__inner {
    width: 100%;
    padding: clamp(var(--atp-space-10), 6vw, var(--atp-space-16)) var(--atp-mkt-gutter) var(--atp-space-8);
    display: grid; grid-template-columns: 1fr; gap: clamp(var(--atp-space-8), 5vw, var(--atp-space-12));
}
.atp-mkt-footer__brand { display: flex; flex-direction: column; gap: var(--atp-space-3); max-width: 34ch; }
.atp-mkt-footer__brand p { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); color: var(--atp-text-muted); margin: 0; }
.atp-mkt-footer__cols {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--atp-space-8) var(--atp-space-6);
}
.atp-mkt-footer__col { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-mkt-footer__title { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--atp-text-subtle); margin: 0; }
.atp-mkt-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-mkt-footer__link { font-size: var(--atp-text-md); color: var(--atp-text-muted); text-decoration: none; }
.atp-mkt-footer__link:hover { color: var(--atp-text); text-decoration: underline; text-underline-offset: 3px; }
.atp-mkt-footer__link:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; border-radius: var(--atp-radius-sm); }
.atp-mkt-footer__bottom {
    width: 100%;
    padding: var(--atp-space-5) var(--atp-mkt-gutter);
    border-top: 1px solid var(--atp-border);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--atp-space-3) var(--atp-space-5);
    font-size: var(--atp-text-sm); color: var(--atp-text-muted);
}

/* --- responsive scaling for the new components --- */
@media (min-width: 600px) {
    .atp-mkt-steps { grid-template-columns: repeat(2, 1fr); }
    .atp-mkt-features { grid-template-columns: repeat(2, 1fr); }
    .atp-mkt-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
    .atp-mkt-steps { grid-template-columns: repeat(4, 1fr); }
    .atp-mkt-features { grid-template-columns: repeat(3, 1fr); }
    .atp-mkt-footer__inner { grid-template-columns: minmax(240px, 1.2fr) 2fr; align-items: start; }
    /* connector line between step numbers on the 4-col row */
    .atp-mkt-step:not(:last-child) .atp-mkt-step__num::after {
        content: ""; position: absolute; top: 20px; left: 48px; right: calc(-1 * var(--atp-space-6));
        height: 2px; background: var(--atp-border); z-index: 0;
    }
    .atp-mkt-step__num { position: relative; z-index: 1; }
}

/* below 900px: hide inline nav + the BAR's CTA (the drawer keeps its own), expose hamburger */
@media (max-width: 899px) {
    .atp-mkt__nav { display: none; }
    .atp-mkt__bar-actions .atp-mkt__cta { display: none; }
    .atp-mkt__menu-btn { display: inline-flex; }
}
/* the drawer's book CTA stays a full-width primary button on mobile */
.atp-mkt__drawer .atp-mkt__cta { display: flex; justify-content: center; margin-top: var(--atp-space-2); }
/* on desktop the drawer is never shown */
@media (min-width: 900px) {
    .atp-mkt__drawer, .atp-mkt__menu-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .atp-mkt__navlink, .atp-mkt__cta, .atp-mkt__menu-btn, .atp-mkt__drawer,
    .atp-mkt-faq__q::after { transition: none; }
}

/* centred error pages (404 / 500) on the marketing shell */
.atp-mkt-error__inner {
    text-align: center;
    width: 100%;
    padding-block: var(--atp-space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--atp-space-4);
}
.atp-mkt-error__code {
    font-family: var(--atp-font-mono);
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    font-weight: 700;
    color: var(--atp-navy);
    letter-spacing: -0.02em;
    margin: 0;
}
:root[data-theme="dark"] .atp-mkt-error__code { color: var(--atp-azure-300); }
.atp-mkt-error__inner .atp-mkt-hero__cta { margin-top: var(--atp-space-2); }

/* no-JS fallback banner (Blazor Server needs a live circuit) */
.atp-noscript {
    margin: 0;
    padding: var(--atp-space-4) var(--atp-space-6);
    background: var(--atp-navy);
    color: #fff;
    text-align: center;
    font: 500 var(--atp-text-base) / 1.5 var(--atp-font-sans);
}
.atp-noscript a { color: #fff; text-decoration: underline; }

/* inline callout / note box (ops console) - e.g. the freight e-Transport notice */
.atp-callout {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    margin-top: var(--atp-space-3);
    padding: var(--atp-space-3) var(--atp-space-4);
    background: var(--atp-surface-2);
    border: 1px solid var(--atp-border);
    border-inline-start: 3px solid var(--atp-azure);
    border-radius: var(--atp-radius-md);
    font-size: var(--atp-text-base);
    color: var(--atp-text);
}

/* --- reports (analytics / BI) --- */
.atp-reports-range { align-items: flex-end; gap: var(--atp-space-3); flex-wrap: wrap; }
.atp-reports-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--atp-space-4);
    margin-top: var(--atp-space-4);
    margin-bottom: var(--atp-space-4);
}
.atp-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 30%) 1fr auto;
    align-items: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-1) 0;
}
.atp-bar-label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-bar-track {
    display: block;
    height: 10px;
    background: var(--atp-surface-3);
    border-radius: var(--atp-radius-pill);
    overflow: hidden;
}
.atp-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--atp-primary);
    border-radius: var(--atp-radius-pill);
}
.atp-bar-fill--alt { background: var(--atp-success); }
.atp-bar-value { font-size: var(--atp-text-sm); color: var(--atp-text); text-align: end; min-width: 2ch; }

/* ==========================================================================
   Website Home (owner master ATP-WEBSITE-HOME-MASTER-DESKTOP-1440-v1.0)
   Fluid, full-width: every block spans the gutter-to-gutter width (RULE ZERO).
   ========================================================================== */
.atp-mkt__bar { background: var(--atp-surface); backdrop-filter: none; -webkit-backdrop-filter: none; min-height: calc(64px + var(--atp-safe-top)); padding-block: calc(var(--atp-space-1) + var(--atp-safe-top)) var(--atp-space-1); padding-inline: var(--atp-mkt-gutter); }
.atp-mkt__brand { --atp-logo-h: 54px; }
.atp-mkt__nav { gap: var(--atp-space-2); }
.atp-mkt__navlink { font-size: var(--atp-text-md); }
.atp-mkt__login { color: var(--atp-primary); border: 1px solid var(--atp-primary); border-radius: var(--atp-radius-btn); padding: 0 var(--atp-space-4); height: 38px; display: inline-flex; align-items: center; }
.atp-mkt__login:hover { background: var(--atp-primary-soft); text-decoration: none; color: var(--atp-primary); }
.atp-mkt__cta { height: 38px; padding-inline: var(--atp-space-5); }
.atp-mkt__lang .atp-langswitch { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; }
.atp-mkt__lang .atp-langswitch__opt { padding: var(--atp-space-1) var(--atp-space-1); font-weight: var(--atp-weight-medium); color: var(--atp-text-muted); background: transparent; }
.atp-mkt__lang .atp-langswitch__opt--on { color: var(--atp-heading); background: transparent; font-weight: var(--atp-weight-semibold); }
.atp-mkt__lang .atp-langswitch__opt + .atp-langswitch__opt::before { content: "/"; color: var(--atp-border-strong); margin-right: var(--atp-space-1); }
.atp-mkt__lang { display: inline-flex; align-items: center; gap: var(--atp-space-1); white-space: nowrap; }
.atp-mkt__lang .atp-langswitch { display: inline-flex; flex-wrap: nowrap; }
.atp-mkt__lang .atp-langswitch__opt { display: inline-flex; align-items: center; }
.atp-mkt__lang svg { color: var(--atp-text-muted); }

/* --- hero --- */
/* The hero photo is a light daylight scene in every theme, so the copy on it uses fixed light-scheme ink
   (not the theme text tokens) and a stronger scrim; otherwise dark mode paints white text on a white sky. */
.atp-home-hero { position: relative; isolation: isolate; background: #F4F7FB; overflow: clip; --atp-hero-ink: #1A2E5A; --atp-hero-text: #2B3A55; --atp-hero-scrim: 244, 247, 251; }
.atp-home-hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.66fr) minmax(0, 0.95fr);
    gap: 0; align-items: center; min-height: 340px;
}
.atp-home-hero__photo { position: absolute; inset: 0; z-index: -1; }
.atp-home-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.atp-home-hero__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(var(--atp-hero-scrim), 0.98) 0%, rgba(var(--atp-hero-scrim), 0.94) 30%, rgba(var(--atp-hero-scrim), 0.35) 48%, rgba(var(--atp-hero-scrim), 0) 62%);
}
.atp-home-hero__copy { grid-column: 1; padding: clamp(var(--atp-space-8), 4vw, var(--atp-space-12)) var(--atp-space-6) clamp(var(--atp-space-8), 4vw, var(--atp-space-12)) var(--atp-mkt-gutter); display: flex; flex-direction: column; gap: var(--atp-space-4); }
/* The master breaks the title after the comma and the sub into three lines. Both are reading measures in ch on
   the two sibling blocks of the copy column, never a cap on the column itself: the column keeps filling its
   grid track at every width. */
.atp-home-hero__title { font-size: clamp(1.7rem, 2.7vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--atp-hero-ink); margin: 0; max-width: 20ch; }
.atp-home-hero__sub { font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.5; color: var(--atp-hero-text); margin: 0; max-width: 45ch; }
.atp-home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--atp-space-3); margin-top: var(--atp-space-2); }
.atp-home-hero__cta .atp-btn--cta { padding-inline: var(--atp-space-5); font-size: var(--atp-text-md); white-space: nowrap; }
.atp-home-hero__card { grid-column: 3; z-index: 1; margin-inline: var(--atp-space-2) calc(-1 * var(--atp-space-8)); }
.atp-home-hero__map { grid-column: 4; align-self: stretch; position: relative; background: #F1EFE8; }
.atp-home-hero__map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.atp-home-hero__mobilephoto { display: none; }

/* CTA buttons (brand: 48px tall, radius 10, chevron on primary) */
.atp-btn--cta { height: 48px; padding-inline: var(--atp-space-6); font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); gap: var(--atp-space-4); border-radius: var(--atp-radius-btn); }
.atp-btn--outline { --_bg: var(--atp-surface); --_fg: var(--atp-primary); --_bd: var(--atp-primary); }
.atp-btn--outline:hover:not(:disabled) { --_bg: var(--atp-primary-soft); }
.atp-btn--outline:active:not(:disabled) { --_bg: var(--atp-surface-3); }
.atp-btn--onnavy { --_bg: #FFFFFF; --_fg: var(--atp-primary); --_bd: #FFFFFF; }
.atp-btn--onnavy:hover:not(:disabled) { --_bg: var(--atp-surface-2); }
.atp-btn--onnavy-outline { --_bg: transparent; --_fg: #FFFFFF; --_bd: rgba(255, 255, 255, 0.8); }
.atp-btn--onnavy-outline:hover:not(:disabled) { --_bg: rgba(255, 255, 255, 0.12); }

/* booking preview card */
.atp-bookcard {
    background: var(--atp-surface); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-xl);
    box-shadow: var(--atp-shadow-lg); padding: var(--atp-space-4); display: flex; flex-direction: column; gap: var(--atp-space-3);
}
.atp-bookcard__row { display: grid; grid-template-columns: 22px 1fr; gap: var(--atp-space-2) var(--atp-space-3); align-items: start; padding-block: var(--atp-space-1); }
.atp-bookcard__row svg { color: var(--atp-primary); margin-top: 2px; }
.atp-bookcard__k { display: block; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-bookcard__v { display: block; font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); color: var(--atp-heading); }
.atp-bookcard__sep { border: 0; border-top: 1px solid var(--atp-border); margin: 0; }
.atp-bookcard__label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-bookcard__vehicle { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: var(--atp-space-3); }
.atp-bookcard__vehicle img { width: 56px; height: 36px; object-fit: contain; display: block; }
.atp-bookcard__select { width: 100%; height: 38px; border: 1px solid var(--atp-border); border-radius: var(--atp-radius-md); background: var(--atp-surface); color: var(--atp-heading); font: inherit; font-weight: var(--atp-weight-medium); padding: 0 var(--atp-space-2); }
.atp-bookcard__select:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 1px; }
.atp-bookcard__quote { display: flex; align-items: baseline; justify-content: space-between; gap: var(--atp-space-3); }
.atp-bookcard__price { font-size: var(--atp-text-2xl); font-weight: 700; color: var(--atp-heading); letter-spacing: -0.01em; }
.atp-bookcard .atp-btn { width: 100%; justify-content: space-between; }

/* --- section shell: left title column + content, hairline divider --- */
.atp-home-section { padding-block: clamp(var(--atp-space-6), 2.2vw, var(--atp-space-8)); padding-inline: var(--atp-mkt-gutter); border-bottom: 1px solid var(--atp-border); background: var(--atp-surface); }
.atp-home-section--tint { background: var(--atp-bg); }
.atp-home-row { display: grid; grid-template-columns: minmax(200px, 0.72fr) minmax(0, 4fr); gap: var(--atp-space-6); align-items: center; }
.atp-home-head { display: flex; flex-direction: column; gap: var(--atp-space-2); padding-right: var(--atp-space-6); border-right: 1px solid var(--atp-border); align-self: stretch; justify-content: center; }
.atp-home-head__title { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; color: var(--atp-heading); margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
.atp-home-head__sub { font-size: var(--atp-text-md); line-height: 1.45; color: var(--atp-text-muted); margin: 0; }

/* steps strip (How ATP Works, Client/Carrier experience)
   A strip column is sized by the LONGEST WORD it has to carry, never by a fixed count of tracks. Four or seven
   equal 1fr tracks crush their columns below that word at the master's own proportions, and the browser then
   splits the word with no hyphen ("Confidenția / litate"); Chromium ships no Romanian hyphenation dictionary, so
   hyphens: auto cannot rescue the language that carries the pack's longest words. auto-fit at a floor that fits
   the word drops a COLUMN instead of shrinking one, so every break falls on a space.
   Each floor below is that word measured in the design system's own type, in the widest of RO / ES / EN, plus the
   item's own icon column and padding. The numbers are re-measured by the capture run, which fails when any word
   outgrows its own text box (docs/brand/screens/website/capture_website.py). */
.atp-flows { --atp-strip-floor: 136px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--atp-strip-floor), 100%), 1fr)); gap: var(--atp-space-2); align-items: start; }
/* min-width: 0 is what actually lets a strip column shrink: minmax(<floor>, 1fr) sets the TRACK minimum, but a
   grid item keeps min-width: auto and overflows the track instead, which is how two Romanian labels came to print
   over each other in the Trust panel at 1440. */
.atp-flow { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); padding-right: var(--atp-space-6); }
.atp-flow__row { display: flex; min-width: 0; gap: var(--atp-space-3); align-items: flex-start; }
.atp-flow:not(:last-child)::after {
    content: ""; position: absolute; right: var(--atp-space-2); top: 14px; width: 9px; height: 9px;
    border-right: 2px solid var(--atp-border-strong); border-top: 2px solid var(--atp-border-strong); transform: rotate(45deg);
}
.atp-flow__num { display: flex; align-items: flex-start; line-height: 1.3; gap: var(--atp-space-2); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); font-size: var(--atp-text-md); }
.atp-flow__num b { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--atp-primary); color: #fff; font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); }
.atp-flow__icon { color: var(--atp-primary); display: block; }
.atp-flow__icon svg { width: 34px; height: 34px; display: block; }
.atp-flow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The strips are narrow columns and Romanian carries the pack's longest words ("Confidențialitate",
   "transportatorul"). The track floor above is what keeps a word inside its own box, and it is the whole fix:
   forcing hyphenation off over the same sweep still breaks nothing. Hyphenation was tried here as a "net" and
   removed, because it is not inert - the browser hyphenates opportunistically to fill a line, not only under
   duress, so it split 385 ordinary Spanish and English words in these same labels ("Respuestas al ins-tante",
   "Review and ac-cept the job") on the very band this rule exists to protect. The capture run cannot see that:
   it fails when a word is WIDER than its box, and a hyphenated word never is. No hyphenation here. */
.atp-flow__title { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-flow__desc { font-size: var(--atp-text-sm); line-height: 1.45; color: var(--atp-text-muted); margin: 0; }
.atp-flows--stacked { --atp-strip-floor: 104px; gap: 0; }
.atp-flows--stacked .atp-flow { text-align: center; align-items: center; padding-inline: var(--atp-space-3) var(--atp-space-4); }
.atp-flows--stacked .atp-flow__row { flex-direction: column; align-items: center; gap: var(--atp-space-1); }
.atp-flows--stacked .atp-flow__title { font-size: var(--atp-text-sm); }
.atp-flows--stacked .atp-flow__desc { font-size: var(--atp-text-xs); line-height: 1.35; }
.atp-flows--stacked .atp-flow__icon svg { width: 30px; height: 30px; }
.atp-flows--stacked .atp-flow:not(:last-child)::after { right: 2px; top: 12px; width: 7px; height: 7px; }
/* Trust & Safety on the master: the same icon-above-label row, but the four are guarantees rather than a
   sequence, so there is no chevron between them and the copy stays left aligned like the panel beside it. */
.atp-flows--tiles { --atp-strip-floor: 108px; }
.atp-flows--tiles .atp-flow { padding-inline: 0 var(--atp-space-3); }
.atp-flows--tiles .atp-flow__icon { align-self: flex-start; }
.atp-flows--tiles .atp-flow__row { flex-direction: column; align-items: stretch; gap: var(--atp-space-2); }
.atp-flows--tiles .atp-flow__icon svg { width: 28px; height: 28px; }
.atp-flows--tiles .atp-flow__title { font-size: var(--atp-text-sm); }
.atp-flows--tiles .atp-flow__desc { font-size: var(--atp-text-xs); line-height: 1.4; }
.atp-flows--tiles .atp-flow:not(:last-child)::after { display: none; }

/* vehicle category cards */
.atp-vehicles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-vehicle { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-2); padding: var(--atp-space-3); background: var(--atp-surface); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg); box-shadow: var(--atp-shadow-sm); }
.atp-vehicle img { width: 100%; max-width: 140px; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
.atp-vehicle span { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }

/* why ATP navy band */
.atp-band { margin-inline: var(--atp-mkt-gutter); margin-block: var(--atp-space-4) var(--atp-space-2); border-radius: var(--atp-radius-xl); background: var(--atp-primary); color: #fff; padding: var(--atp-space-5) var(--atp-space-6); display: grid; grid-template-columns: minmax(120px, 0.55fr) minmax(0, 5fr); gap: var(--atp-space-6); align-items: center; }
.atp-band__title { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; margin: 0; }
.atp-band__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--atp-space-4); }
.atp-band__item { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--atp-space-3); align-items: start; }
.atp-band__item svg { width: 30px; height: 30px; display: block; color: #fff; }
.atp-band__item h3 { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); margin: 0; color: #fff; }
.atp-band__item p { font-size: var(--atp-text-sm); line-height: 1.4; margin: 0; color: rgba(255, 255, 255, 0.85); }

/* two-column card row (client / carrier experience) + three-card row.
   The fr ratios are the master's own, measured off ATP-WEBSITE-HOME-MASTER-DESKTOP-1440-v1.0.png and converted
   to CSS px at 1440 (the image is 1536 wide, so x0.9375):
     experience row (y=760): client 594px : carrier 792px  ->  3 : 4
     three-card row (y=930): AI 662px : trust 474px : CTA 236px  ->  2.8 : 2 : 1
   The carrier card carries seven steps against the client card's five, which is why the master gives it the
   larger share; at 1:1 its labels wrap to three lines and the board does not draw them that way. */
.atp-home-cards { padding-inline: var(--atp-mkt-gutter); padding-block: var(--atp-space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: var(--atp-space-4); background: var(--atp-bg); }
.atp-home-cards--split { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
.atp-home-cards--3 { grid-template-columns: minmax(0, 2.8fr) minmax(0, 2fr) minmax(0, 1fr); padding-bottom: var(--atp-space-6); }
/* The master sets every panel title inside a narrow head column, drawn at a type size no legible product could
   use (measured on the master: the "Carrier assignment" label is 70 CSS px wide, about an 8px face). The
   composition is reproduced and the type stays the design system's: the head is the master's narrow column with a
   150px minimum, and it takes more only when its own longest word needs more. */
.atp-panel { background: var(--atp-surface); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-xl); box-shadow: var(--atp-shadow-sm); padding: var(--atp-space-4); display: grid; grid-template-columns: minmax(min-content, 0.8fr) minmax(0, 4fr); gap: var(--atp-space-4); align-items: center; }
/* min-content as the track floor, 150px as the head's own minimum: a DEFINITE track floor is never grown by the
   item's minimum contribution, so at 1728 "transportatorului" printed 156px of word into a 150px head. */
.atp-panel__head { min-width: 150px; display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-panel__title { font-size: clamp(1rem, 1.12vw, 1.28rem); font-weight: 700; color: var(--atp-heading); margin: 0; line-height: 1.2; }
.atp-panel__sub { font-size: var(--atp-text-sm); line-height: 1.45; color: var(--atp-text-muted); margin: 0; }
.atp-panel__langs { display: flex; gap: var(--atp-space-2); margin-top: var(--atp-space-1); }
.atp-panel__langs span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 24px; padding-inline: var(--atp-space-2); border-radius: var(--atp-radius-sm); border: 1px solid var(--atp-primary); color: var(--atp-primary); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); }
.atp-panel__langs span:first-child { background: var(--atp-primary); color: #fff; }
/* The master sets the AI Support features as ONE row of four and draws them at roughly an 8px face. At the design
   system's 12px the longest label word in the pack ("actualizaciones", 88.7px) plus the 26px icon and its 8px gap
   needs a 124px column, so four of them need 532px of strip: the AI card carries that from 1920 up and drops to
   two or three columns below it. Four crushed columns is what split the words, so the count follows the floor. */
.atp-features { --atp-strip-floor: 124px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--atp-strip-floor), 100%), 1fr)); gap: var(--atp-space-3); align-items: start; }
.atp-feature { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--atp-space-2); align-items: start; }
.atp-feature svg { width: 26px; height: 26px; display: block; color: var(--atp-primary); }
.atp-feature h3 { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); margin: 0; }
.atp-feature p { font-size: var(--atp-text-xs); line-height: 1.4; color: var(--atp-text-muted); margin: 0; }
.atp-panel--cta { grid-template-columns: 1fr; background: var(--atp-primary); border-color: var(--atp-primary); color: #fff; gap: var(--atp-space-4); align-content: center; }
.atp-panel--cta .atp-panel__title, .atp-panel--cta .atp-panel__sub { color: #fff; }
.atp-panel--cta .atp-panel__sub { color: rgba(255, 255, 255, 0.85); }
/* The master's two final-CTA buttons share the card's width in equal halves, so they stretch rather than hug.
   In the master they fit on one row inside a 236px card because it is drawn at an ~8px face; at the design
   system's type the pair needs about 287px, so below that they wrap and each takes the full width. The board
   conflict is logged in docs/brand/FOLLOWUPS.md rather than resolved by shrinking the card the master sized. */
.atp-panel__actions { display: flex; flex-wrap: wrap; gap: var(--atp-space-3); }
.atp-panel__actions .atp-btn { flex: 1 1 auto; }

/* navy footer */
.atp-mkt__foot { padding: 0; border: 0; display: block; background: var(--atp-navy-900); }
.atp-footer { background: var(--atp-navy-900); color: rgba(255, 255, 255, 0.85); display: grid; grid-template-columns: minmax(200px, 0.9fr) minmax(0, 3.2fr) auto; align-items: center; gap: var(--atp-space-6); padding-right: var(--atp-mkt-gutter); }
.atp-footer__brand { background: var(--atp-navy-700); display: flex; align-items: center; justify-content: center; padding: var(--atp-space-5) var(--atp-space-6); align-self: stretch; }
.atp-footer__brand .atp-brand__logo { --atp-logo-h: 80px; opacity: 0.9; }
.atp-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--atp-space-4); padding-block: var(--atp-space-5); }
.atp-footer__col { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-footer__col h2 { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: #fff; margin: 0 0 var(--atp-space-1); }
.atp-footer__col a { font-size: var(--atp-text-md); color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.atp-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.atp-footer__col a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--atp-radius-sm); }
.atp-footer__lang { display: inline-flex; align-items: center; gap: var(--atp-space-2); color: #fff; }
.atp-footer__lang > svg { width: 18px; height: 18px; flex: none; }
.atp-footer__lang .atp-langswitch__opt { color: rgba(255, 255, 255, 0.72); }
.atp-footer__lang .atp-langswitch__opt--on { color: #fff; }
.atp-footer__lang .atp-langswitch__opt + .atp-langswitch__opt::before { color: rgba(255, 255, 255, 0.4); }
.atp-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--atp-space-2) var(--atp-space-5); padding: var(--atp-space-3) var(--atp-mkt-gutter); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--atp-text-sm); color: rgba(255, 255, 255, 0.7); }
.atp-footer__bottom .atp-proof48 { color: rgba(255, 255, 255, 0.7); }
.atp-footer__bottom .atp-proof48 a { color: #fff; }

/* register choice */
.atp-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--atp-space-5); }
.atp-choice__card { background: var(--atp-surface); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-xl); box-shadow: var(--atp-shadow-sm); padding: var(--atp-space-6); display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-choice__card h2 { font-size: var(--atp-text-xl); font-weight: 700; color: var(--atp-heading); margin: 0; }
.atp-choice__card p { font-size: var(--atp-text-md); line-height: 1.5; color: var(--atp-text-muted); margin: 0; flex: 1; }
.atp-choice__card .atp-btn { justify-content: space-between; }
.atp-callout-band { margin-inline: var(--atp-mkt-gutter); margin-block: var(--atp-space-5); padding: var(--atp-space-4) var(--atp-space-5); border-radius: var(--atp-radius-lg); background: var(--atp-info-soft); border: 1px solid var(--atp-border); color: var(--atp-heading); font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); }

/* responsive */
/* The master's three-card row is 2.8 : 2 : 1 and the master is drawn at 1440, so the row holds those proportions
   at 1440 and above: three cards side by side with the closing navy card compact inside the row, the way the
   board draws it. The tiles inside Trust & Safety take as many columns as their own floor allows (two at 1440,
   three at 1920, four from 2560), which is the master's type-scale conflict, not a row that stops being the master's.
   Below the master's own width the row drops to AI | Trust with the closing card across the foot. */
@media (max-width: 1439.98px) {
    .atp-home-cards--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .atp-home-cards--3 .atp-panel--cta { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
    .atp-home-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.7fr); }
    .atp-home-hero__card { grid-column: 3; margin-inline: 0 var(--atp-space-4); }
    .atp-home-hero__map { display: none; }
    .atp-home-cards--split { grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); }
    /* the strips read at the larger type below the desktop regime, so their floors grow with it */
    .atp-flows { --atp-strip-floor: 210px; }
    .atp-features { --atp-strip-floor: 200px; }
    .atp-feature h3 { font-size: var(--atp-text-md); }
    .atp-feature p { font-size: var(--atp-text-sm); }
    .atp-flow:not(:last-child)::after { display: none; }
}
@media (max-width: 860px) {
    /* No photo behind the copy on mobile, so the hero follows the active theme again. */
    .atp-home-hero { background: var(--atp-surface-2); --atp-hero-ink: var(--atp-heading); --atp-hero-text: var(--atp-text); }
    .atp-home-hero__grid { grid-template-columns: 1fr; min-height: 0; }
    .atp-home-hero__photo { display: none; }
    .atp-home-hero__copy { grid-column: 1; padding: var(--atp-space-8) var(--atp-mkt-gutter) var(--atp-space-5); }
    /* The mobile art-direction board draws PORTRAIT crops, and it draws them for 390 and 430. Above the phone
       widths the stacked hero keeps the wide hero photograph instead of stretching a phone crop into a
       near-square block (at 768 that used to be 787px tall). */
    .atp-home-hero__mobilephoto { display: block; grid-column: 1; width: 100%; aspect-ratio: 16 / 7; }
    .atp-home-hero__mobilephoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
    .atp-home-cards--split, .atp-home-cards { grid-template-columns: 1fr; }
    .atp-features { grid-template-columns: 1fr; }
    .atp-home-hero__card { grid-column: 1; margin: calc(-1 * var(--atp-space-6)) var(--atp-mkt-gutter) var(--atp-space-6); }
    .atp-home-hero__cta .atp-btn { width: 100%; }
    .atp-home-row { grid-template-columns: 1fr; gap: var(--atp-space-4); }
    .atp-home-head { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--atp-border); padding-bottom: var(--atp-space-3); }
    .atp-band { grid-template-columns: 1fr; margin-block: var(--atp-space-4); }
    .atp-panel { grid-template-columns: 1fr; }
    .atp-home-cards--3 { grid-template-columns: 1fr; }
    .atp-footer { grid-template-columns: 1fr; padding-right: 0; gap: 0; }
    .atp-footer__cols { padding-inline: var(--atp-mkt-gutter); }
    .atp-footer__lang { padding: 0 var(--atp-mkt-gutter) var(--atp-space-4); }
    .atp-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atp-flows, .atp-flows--stacked { grid-template-columns: 1fr; gap: var(--atp-space-4); }
    .atp-flows--stacked .atp-flow { text-align: left; align-items: stretch; padding-inline: 0; }
    .atp-flows--stacked .atp-flow__row { flex-direction: row; align-items: flex-start; gap: var(--atp-space-3); }
    .atp-flows--stacked .atp-flow__title { font-size: var(--atp-text-md); }
    .atp-flows--stacked .atp-flow__desc { font-size: var(--atp-text-sm); }
    .atp-flows--tiles .atp-flow__row { flex-direction: row; align-items: flex-start; gap: var(--atp-space-3); }
    .atp-flows--tiles .atp-flow__title { font-size: var(--atp-text-md); }
    .atp-flows--tiles .atp-flow__desc { font-size: var(--atp-text-sm); }
    .atp-flow { padding-right: 0; }
    .atp-mkt__login, .atp-mkt__cta { height: 34px; }
}
@media (max-width: 899px) {
    .atp-mkt__bar-actions .atp-mkt__login { display: none; }
    .atp-mkt__drawer .atp-mkt__login { display: inline-flex; justify-content: center; margin-top: var(--atp-space-2); }
}
@media (max-width: 560px) {
    /* the phone widths the mobile board art-directs: its portrait crop, at its own ratio */
    .atp-home-hero__mobilephoto { aspect-ratio: 39 / 40; }
}
@media (max-width: 480px) {
    .atp-mkt__brand { --atp-logo-h: 44px; }
    .atp-mkt__bar-actions .atp-mkt__lang { display: none; }
}
.atp-choice__card > svg { width: 36px; height: 36px; color: var(--atp-primary); }
.atp-mkt-subhero__inner { padding-inline: var(--atp-mkt-gutter); }

/* ---- real map (AtpMap, MapLibre) ---- */
.atp-map { position: relative; width: 100%; height: 220px; border-radius: var(--atp-radius-lg); overflow: hidden; background: var(--atp-surface-2); border: 1px solid var(--atp-border); }
.atp-map--tall { height: 320px; }
.atp-map--flush { border-radius: 0; border: 0; }
/* MapLibre adds .maplibregl-map to this element and its own stylesheet is injected AFTER ours, so it wins the
   position declaration and turns this box back into position:relative. inset:0 then does nothing, which is why
   the size has to come from width/height: the parent .atp-map carries a definite height precisely so these
   percentages resolve. Leave both in place: without them MapLibre measures a zero-tall container at startup and
   the map stays a thin strip for the rest of the session. */
.atp-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atp-map__error { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: var(--atp-danger-soft); color: var(--atp-danger); font-size: 12px; }
.atp-map__marker { width: 18px; height: 18px; border-radius: 50%; background: var(--atp-primary); border: 3px solid var(--atp-surface); box-shadow: 0 1px 4px rgba(0,0,0,.35); display: grid; place-items: center; color: var(--atp-surface); font: 700 10px Inter, system-ui, sans-serif; }
.atp-map__marker--me, .atp-map__marker--driver { background: var(--atp-success); }
.atp-map__marker--pickup { background: var(--atp-primary); width: 24px; height: 24px; }
.atp-map__marker--dropoff { background: var(--atp-success); width: 24px; height: 24px; }
.atp-map__marker--order { background: var(--atp-primary); }
.atp-map__marker--exception { background: var(--atp-danger); }
.atp-map__marker--stop { background: var(--atp-heading); }
.atp-map__marker--pin { background: var(--atp-danger); width: 26px; height: 26px; cursor: grab; }
.atp-map__marker.is-stale { opacity: .45; }
.atp-map .maplibregl-ctrl-attrib { font-size: 10px; }
.atp-cl-addrsearch { position: relative; }
.atp-cl-addrsearch__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.atp-cl-addrsearch__hit { width: 100%; text-align: left; display: flex; gap: 8px; align-items: center; padding: 10px 12px; min-height: 44px; border: 1px solid var(--atp-border); border-radius: 10px; background: var(--atp-surface); color: var(--atp-heading); font: inherit; cursor: pointer; }
.atp-cl-addrsearch__hit:hover, .atp-cl-addrsearch__hit:focus-visible { border-color: var(--atp-primary); }