/* =============================================================================
   ZEEKR Experience Hub - stylesheet entry point
   -----------------------------------------------------------------------------
   Hand-written CSS with the M1 semantic tokens inlined. When the design-system
   build is ported, replace the :root block with the generated token file and
   import the component layers here:

     @import "./tokens.css";
     @import "./primitives.css";

   Keep component selectors prefixed `zk-` so tokens stay the single source of
   truth for colour, type, spacing and motion.
   ========================================================================== */

:root {
    /* Public Experience — graphite / black / white (not teal SaaS) */
    --zk-color-bg: #f3f2f0;
    --zk-color-bg-subtle: #ebe9e6;
    --zk-color-surface: #ffffff;
    --zk-color-fg: #0a0a0a;
    --zk-color-fg-muted: #5c5c5c;
    --zk-color-fg-secondary: #2a2a2a;
    --zk-color-accent: #0a0a0a;
    --zk-color-accent-hover: #2a2a2a;
    --zk-color-accent-fg: #f7f7f5;
    --zk-color-border: #d8d5d0;
    --zk-color-border-strong: #9a9690;
    --zk-color-danger: #b42318;
    --zk-color-success: #067647;
    --zk-color-focus: #0a0a0a;
    --zk-color-ink: #0a0a0a;
    --zk-color-paper: #f7f7f5;
    --zk-color-graphite: #1a1a1a;
    --zk-color-mist: #e8e6e2;

    /* Type — legally deployable system stack (no proprietary ZEEKR fonts) */
    --zk-font-display: "Bahnschrift", "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
    --zk-font-sans: "Segoe UI", "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --zk-font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
    --zk-text-sm: 0.875rem;
    --zk-text-base: 1rem;
    --zk-text-lg: 1.125rem;
    --zk-text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
    --zk-text-2xl: clamp(2rem, 1.55rem + 2.2vw, 3rem);
    --zk-text-display: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
    --zk-leading-display: 0.98;
    --zk-leading-body: 1.55;
    --zk-tracking-display: -0.03em;
    --zk-tracking-label: 0.12em;

    /* Spacing (4px base) */
    --zk-space-1: 0.25rem;
    --zk-space-2: 0.5rem;
    --zk-space-3: 0.75rem;
    --zk-space-4: 1rem;
    --zk-space-5: 1.25rem;
    --zk-space-6: 1.5rem;
    --zk-space-8: 2rem;
    --zk-space-12: 3rem;
    --zk-space-section: clamp(3.5rem, 9vw, 7rem);
    --zk-gutter: clamp(1rem, 4vw, 2.5rem);
    --zk-content-max: 72rem;

    /* Radius + motion — restrained, not pill-heavy */
    --zk-radius-sm: 0.125rem;
    --zk-radius-md: 0.25rem;
    --zk-duration-fast: 140ms;
    --zk-duration-base: 280ms;
    --zk-easing: cubic-bezier(0.2, 0, 0, 1);
    --zk-shadow-sm: 0 1px 2px rgb(10 10 10 / 0.06);
    --zk-header-h: 4rem;
}

/* Opt-in dark band only — do not auto-flip the whole site. */
.zk-surface-dark,
[data-surface="dark"] {
    --zk-color-bg: #070a0d;
    --zk-color-bg-subtle: #111820;
    --zk-color-surface: #111820;
    --zk-color-fg: #e8eef4;
    --zk-color-fg-muted: #8b9aab;
    --zk-color-fg-secondary: #b0bdc9;
    --zk-color-accent: #3d9b7f;
    --zk-color-accent-hover: #4aaf90;
    --zk-color-accent-fg: #06120e;
    --zk-color-border: #243040;
    --zk-color-border-strong: #3a4d63;
    --zk-color-focus: #3d9b7f;
}

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--zk-color-bg);
    color: var(--zk-color-fg);
    font-family: var(--zk-font-sans);
    font-size: var(--zk-text-base);
    line-height: var(--zk-leading-body);
    overflow-x: clip;
}

/* Accessibility ---------------------------------------------------------- */

.zk-skip-link {
    position: absolute;
    left: -9999px;
}

.zk-skip-link:focus {
    left: var(--zk-space-4);
    top: var(--zk-space-4);
    z-index: 10;
    padding: var(--zk-space-2) var(--zk-space-3);
    background: var(--zk-color-accent);
    color: var(--zk-color-accent-fg);
    border-radius: var(--zk-radius-sm);
}

:focus-visible {
    outline: 2px solid var(--zk-color-focus);
    outline-offset: 2px;
}

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

/* Layout ----------------------------------------------------------------- */

.zk-header,
.zk-admin-header {
    display: flex;
    align-items: center;
    gap: var(--zk-space-6);
    padding: var(--zk-space-4) var(--zk-gutter);
    min-height: 3.75rem;
    background: color-mix(in srgb, var(--zk-color-surface) 92%, transparent);
    border-bottom: 1px solid var(--zk-color-border);
    backdrop-filter: blur(8px);
}

.zk-header__brand,
.zk-admin-header__brand {
    font-family: var(--zk-font-display);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
}

.zk-header__nav {
    display: flex;
    gap: var(--zk-space-4);
}

.zk-header__nav a,
.zk-admin-nav a,
.zk-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--zk-duration-fast) var(--zk-easing);
}

.zk-header__nav a:hover,
.zk-link:hover {
    border-bottom-color: currentColor;
}

.zk-locale-switch {
    display: flex;
    gap: var(--zk-space-2);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    font-size: var(--zk-text-sm);
}

.zk-locale-switch a {
    color: var(--zk-color-fg-muted);
    text-decoration: none;
}

.zk-locale-switch a[aria-current="true"] {
    color: var(--zk-color-fg);
    font-weight: 600;
}

.zk-main,
.zk-admin-main {
    max-width: var(--zk-content-max);
    margin: 0 auto;
    padding: var(--zk-space-section) var(--zk-gutter);
}

.zk-footer {
    padding: var(--zk-space-6);
    border-top: 1px solid var(--zk-color-border);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

/* Components ------------------------------------------------------------- */

.zk-hero__eyebrow {
    margin: 0 0 var(--zk-space-2);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
    letter-spacing: var(--zk-tracking-label);
    text-transform: uppercase;
}

.zk-hero__title,
.zk-shell__title {
    margin: 0 0 var(--zk-space-4);
    font-family: var(--zk-font-display);
    font-size: var(--zk-text-2xl);
    line-height: var(--zk-leading-display);
    letter-spacing: var(--zk-tracking-display);
}

.zk-hero__lead,
.zk-shell__lead {
    margin: 0 0 var(--zk-space-8);
    max-width: 48ch;
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-lg);
}

.zk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zk-space-3);
}

.zk-catalog {
    margin-top: var(--zk-space-8);
    padding-top: var(--zk-space-8);
    border-top: 1px solid var(--zk-color-border);
}

.zk-catalog__heading {
    margin: 0 0 var(--zk-space-4);
    font-family: var(--zk-font-display);
    font-size: var(--zk-text-xl);
    letter-spacing: var(--zk-tracking-display);
}

.zk-catalog__empty,
.zk-catalog__note {
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-catalog__tabs {
    display: flex;
    gap: var(--zk-space-2);
    overflow-x: auto;
    padding-bottom: var(--zk-space-1);
    margin-bottom: var(--zk-space-6);
    scrollbar-width: thin;
}

.zk-catalog__tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: var(--zk-space-2) var(--zk-space-4);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    background: var(--zk-color-surface);
    color: var(--zk-color-fg);
    text-decoration: none;
    font-size: var(--zk-text-sm);
    font-weight: 600;
    transition:
        border-color var(--zk-duration-fast) var(--zk-easing),
        background-color var(--zk-duration-fast) var(--zk-easing),
        color var(--zk-duration-fast) var(--zk-easing);
}

.zk-catalog__tab:hover {
    border-color: var(--zk-color-border-strong);
}

.zk-catalog__tab.is-active,
.zk-catalog__tab[aria-selected="true"] {
    border-color: var(--zk-color-accent);
    background: var(--zk-color-accent);
    color: var(--zk-color-accent-fg);
}

.zk-catalog__panel {
    padding: var(--zk-space-6);
    background: var(--zk-color-surface);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-md);
    box-shadow: var(--zk-shadow-sm);
}

.zk-catalog__code {
    margin: 0 0 var(--zk-space-1);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
    letter-spacing: var(--zk-tracking-label);
    text-transform: uppercase;
}

.zk-catalog__name {
    margin: 0 0 var(--zk-space-3);
    font-family: var(--zk-font-display);
    font-size: var(--zk-text-xl);
    letter-spacing: var(--zk-tracking-display);
}

.zk-catalog__badge {
    display: inline-block;
    margin: 0 0 var(--zk-space-4);
    padding: var(--zk-space-1) var(--zk-space-2);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    color: var(--zk-color-fg-secondary);
    font-size: var(--zk-text-sm);
    letter-spacing: var(--zk-tracking-label);
    text-transform: uppercase;
}

.zk-catalog__identity {
    margin-bottom: var(--zk-space-4);
}

.zk-catalog__media {
    margin: 0 0 var(--zk-space-6);
    overflow: hidden;
    border-radius: var(--zk-radius-md);
    background: linear-gradient(
        145deg,
        var(--zk-color-surface-elevated, #1a1a1a) 0%,
        var(--zk-color-surface) 55%,
        var(--zk-color-border) 100%
    );
    aspect-ratio: 16 / 9;
}

.zk-catalog__media--empty {
    min-height: 12rem;
}

.zk-catalog__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    margin-bottom: var(--zk-space-6);
}

.zk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--zk-space-3) var(--zk-space-6);
    border: 1px solid var(--zk-color-accent);
    border-radius: var(--zk-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition:
        opacity var(--zk-duration-fast) var(--zk-easing),
        background-color var(--zk-duration-fast) var(--zk-easing),
        border-color var(--zk-duration-fast) var(--zk-easing);
}

.zk-button--primary {
    background: var(--zk-color-accent);
    color: var(--zk-color-accent-fg);
}

.zk-button--primary:hover {
    background: var(--zk-color-accent-hover);
    border-color: var(--zk-color-accent-hover);
}

.zk-button--secondary {
    background: transparent;
    color: var(--zk-color-fg);
}

.zk-button--disabled,
.zk-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.zk-button:hover {
    opacity: 0.92;
}

.zk-button--disabled:hover,
.zk-button[aria-disabled="true"]:hover {
    opacity: 0.45;
}

.zk-shell__note,
.zk-meta {
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-meta code {
    font-family: var(--zk-font-mono);
}

/* Admin shell ------------------------------------------------------------ */

.zk-body--admin {
    /* High-contrast Control Center tokens (override public light + dark band). */
    --zk-color-bg: #080c10;
    --zk-color-bg-subtle: #121a22;
    --zk-color-surface: #141c26;
    --zk-color-fg: #f3f6f9;
    --zk-color-fg-muted: #b4c0cc;
    --zk-color-fg-secondary: #d7dde4;
    --zk-color-accent: #4ec9a8;
    --zk-color-accent-hover: #6ad8b8;
    --zk-color-accent-fg: #04140f;
    --zk-color-border: #2f3f51;
    --zk-color-border-strong: #4d647c;
    --zk-color-focus: #6ad8b8;
    --zk-color-danger: #f07167;
    --zk-color-success: #6bdc9a;
    background: var(--zk-color-bg);
    color: var(--zk-color-fg);
}

.zk-body--admin a:not(.zk-button) {
    color: #9fe0cb;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color 0.18s ease,
        border-color 0.18s ease;
}

.zk-body--admin a:not(.zk-button):hover {
    color: #c9f3e6;
    border-bottom-color: currentColor;
}

.zk-body--admin .zk-meta,
.zk-body--admin .zk-field__hint,
.zk-body--admin .zk-admin-breadcrumb,
.zk-body--admin .zk-admin-header__user,
.zk-body--admin .zk-datalist dt,
.zk-body--admin .zk-media-card__meta {
    color: var(--zk-color-fg-muted);
}

.zk-body--admin h1,
.zk-body--admin h2,
.zk-body--admin h3,
.zk-body--admin .zk-panel__title,
.zk-body--admin .zk-panel__subtitle {
    color: var(--zk-color-fg);
}

.zk-body--admin .zk-admin-header {
    background: rgb(16 22 30 / 0.94);
    border-bottom-color: var(--zk-color-border);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
}

.zk-admin-nav-toggle {
    display: none;
    background: #1a2430;
    color: var(--zk-color-fg);
    border: 1px solid var(--zk-color-border-strong);
    border-radius: 0.25rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.zk-admin-nav-toggle:hover {
    background: #243040;
    border-color: var(--zk-color-accent);
}

.zk-admin-shell {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    min-height: calc(100vh - 4rem);
}

.zk-admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-4);
    padding: var(--zk-space-5) var(--zk-space-3);
    background: #0c1218;
    border-right: 1px solid var(--zk-color-border);
}

.zk-admin-nav__section-label {
    margin: 0 0 var(--zk-space-2);
    padding: 0 var(--zk-space-2);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aabbc;
}

.zk-admin-nav a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 0.25rem;
    color: #d5dee7 !important;
    border-bottom: 0 !important;
    font-size: var(--zk-text-sm);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.zk-admin-nav a:hover,
.zk-admin-nav a.is-active {
    background: rgb(78 201 168 / 0.14);
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}

.zk-admin-nav a.is-active {
    box-shadow: inset 2px 0 0 var(--zk-color-accent);
}

.zk-admin-main {
    max-width: none;
    margin: 0;
    padding: var(--zk-space-6) var(--zk-space-6);
}

.zk-admin-breadcrumb {
    margin: 0 0 var(--zk-space-4);
    font-size: var(--zk-text-sm);
}

.zk-admin-header__user {
    margin-left: auto;
    font-size: var(--zk-text-sm);
}

.zk-admin-header__logout {
    margin: 0;
}

.zk-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--zk-space-3);
    margin: 0 0 var(--zk-space-6);
}

.zk-stat-card {
    display: block;
    padding: var(--zk-space-4);
    background: linear-gradient(180deg, #18222d 0%, #121a22 100%);
    border: 1px solid var(--zk-color-border);
    border-radius: 0.35rem;
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--zk-color-border) !important;
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

a.zk-stat-card:hover {
    border-color: var(--zk-color-accent) !important;
    color: inherit !important;
    transform: translateY(-1px);
}

.zk-stat-card__value {
    font-family: var(--zk-font-display);
    font-size: 1.75rem;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 600;
}

.zk-stat-card__label {
    margin-top: var(--zk-space-1);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--zk-space-2);
}

.zk-alert-list a {
    display: block;
    padding: var(--zk-space-3);
    background: #241810;
    border: 1px solid #7a4a34;
    border-radius: 0.35rem;
    color: #ffd7c2 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #7a4a34 !important;
}

.zk-table-wrap {
    overflow-x: auto;
}

.zk-body--admin .zk-panel {
    background: var(--zk-color-surface);
    border-color: var(--zk-color-border);
    border-radius: 0.4rem;
}

.zk-body--admin .zk-field__label {
    color: var(--zk-color-fg-secondary);
}

.zk-body--admin .zk-field__input,
.zk-body--admin .zk-table,
.zk-body--admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.zk-body--admin select,
.zk-body--admin textarea {
    background: #0d141c;
    color: var(--zk-color-fg);
    border-color: var(--zk-color-border-strong);
}

.zk-body--admin .zk-table th {
    color: var(--zk-color-fg-muted);
    border-color: var(--zk-color-border);
    background: #101820;
}

.zk-body--admin .zk-table td {
    color: var(--zk-color-fg);
    border-color: var(--zk-color-border);
}

.zk-body--admin .zk-badge {
    background: #1a2430;
    border-color: var(--zk-color-border-strong);
    color: #e8eef4;
}

.zk-body--admin .zk-alert {
    background: #18222d;
    border-color: var(--zk-color-border-strong);
    color: var(--zk-color-fg);
}

.zk-body--admin .zk-alert--danger {
    background: #2a1414;
    border-color: #a33b35;
    color: #ffb4ae;
}

.zk-body--admin .zk-alert--warning {
    background: #2a2210;
    border-color: #b8892d;
    color: #f3d59a;
}

.zk-body--admin .zk-alert--success {
    background: #10241a;
    border-color: #2f8a55;
    color: #9fe0b8;
}

/* Admin buttons — modern, readable, consistent */
.zk-body--admin .zk-button,
.zk-body--admin button.zk-button,
.zk-body--admin a.zk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border-radius: 0.3rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.zk-body--admin .zk-button--sm {
    min-height: 2.15rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
}

.zk-body--admin .zk-button--primary {
    background: linear-gradient(180deg, #5fd4b2 0%, #3db894 100%);
    border: 1px solid #2f9a7a;
    color: #04140f !important;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 8px 18px rgb(0 0 0 / 0.28);
}

.zk-body--admin .zk-button--primary:hover {
    background: linear-gradient(180deg, #74dfc0 0%, #48c4a2 100%);
    border-color: #4ec9a8;
    color: #04140f !important;
    transform: translateY(-1px);
}

.zk-body--admin .zk-button--secondary {
    background: #1a2430;
    border: 1px solid #4a6078;
    color: #f3f6f9 !important;
    box-shadow: none;
}

.zk-body--admin .zk-button--secondary:hover {
    background: #243344;
    border-color: #6ad8b8;
    color: #ffffff !important;
}

.zk-body--admin .zk-button--danger {
    background: #2a1616;
    border: 1px solid #c2554f;
    color: #ffc4bf !important;
}

.zk-body--admin .zk-button--danger:hover {
    background: #3a1c1c;
    border-color: #f07167;
    color: #ffffff !important;
}

.zk-body--admin .zk-button:active {
    transform: translateY(0);
}

.zk-body--admin .zk-button:focus-visible {
    outline: 2px solid var(--zk-color-focus);
    outline-offset: 2px;
}

/* Custom file picker — full-width hi-tech control */
.zk-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.85rem 1rem;
    margin: 0;
    border: 1px dashed #4d647c;
    border-radius: 0.35rem;
    background:
        linear-gradient(135deg, rgb(78 201 168 / 0.08), transparent 42%),
        #0d141c;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.zk-file:hover,
.zk-file:focus-within {
    border-color: var(--zk-color-accent);
    background:
        linear-gradient(135deg, rgb(78 201 168 / 0.14), transparent 50%),
        #121a22;
    box-shadow: 0 0 0 1px rgb(78 201 168 / 0.2);
}

.zk-file__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    border: 0;
    background: transparent;
}

.zk-file__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.3rem;
    border: 1px solid #3d9b7f;
    background: rgb(78 201 168 / 0.12);
    color: #9fe0cb;
    font-size: 1.1rem;
    line-height: 1;
}

.zk-file__copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    pointer-events: none;
}

.zk-file__title {
    color: #f3f6f9;
    font-size: 0.875rem;
    font-weight: 600;
}

.zk-file__hint {
    color: var(--zk-color-fg-muted);
    font-size: 0.75rem;
}

.zk-file__name {
    color: #9fe0cb;
    font-size: 0.75rem;
    word-break: break-all;
}

.zk-file__name:empty {
    display: none;
}

.zk-form--media-upload {
    display: grid;
    gap: 0.85rem;
    max-width: 36rem;
    margin-top: 0.5rem;
}

.zk-form--media-upload .zk-button--primary {
    justify-self: start;
    min-width: 10rem;
}

.zk-header__admin {
    font-weight: 600;
    color: var(--zk-color-accent);
}

.zk-badge--warn {
    background: #5c3a2a;
    color: #f0d2c0;
}

.zk-badge--ok {
    background: #1a5c4a44;
    color: #9ddec8;
}

.zk-pipeline {
    display: flex;
    gap: var(--zk-space-2);
    overflow-x: auto;
    padding-bottom: var(--zk-space-2);
}

.zk-pipeline__col {
    min-width: 12rem;
    background: var(--zk-color-surface);
    border: 1px solid var(--zk-color-border);
    border-radius: 0.35rem;
    padding: var(--zk-space-3);
}

.zk-pipeline__col h3 {
    margin: 0 0 var(--zk-space-2);
    font-size: var(--zk-text-sm);
    color: var(--zk-color-fg);
}

.zk-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--zk-space-3);
}

.zk-media-grid img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border-radius: var(--zk-radius-sm);
    background: #0d1319;
}

.zk-admin-header__brand {
    letter-spacing: 0.06em;
    color: var(--zk-color-fg);
}

@media (max-width: 900px) {
    .zk-admin-nav-toggle {
        display: inline-block;
    }

    .zk-admin-shell {
        grid-template-columns: 1fr;
    }

    .zk-admin-nav {
        display: none;
        border-right: 0;
        border-bottom: 1px solid var(--zk-color-border);
    }

    .zk-admin-nav.is-open {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zk-body--admin .zk-button,
    .zk-stat-card,
    .zk-file,
    .zk-admin-nav a {
        transition: none;
    }

    .zk-body--admin .zk-button--primary:hover,
    a.zk-stat-card:hover {
        transform: none;
    }
}

.zk-panel {
    margin: 0 0 var(--zk-space-6);
    padding: var(--zk-space-6);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-md);
}

.zk-panel__title {
    margin: 0 0 var(--zk-space-3);
    font-size: var(--zk-text-lg);
}

.zk-datalist {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--zk-space-2) var(--zk-space-4);
    margin: 0;
}

.zk-datalist dt {
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-datalist dd {
    margin: 0;
}

.zk-list {
    margin: 0;
    padding-left: var(--zk-space-4);
}

/* Long permission lists read as columns instead of one tall stack. */
.zk-list--columns {
    columns: 16rem auto;
    column-gap: var(--zk-space-6);
    padding-left: var(--zk-space-4);
}

.zk-badge {
    display: inline-block;
    padding: 0 var(--zk-space-2);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    font-size: var(--zk-text-sm);
}

.zk-badge--muted {
    color: var(--zk-color-fg-muted);
}

.zk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--zk-text-sm);
}

.zk-table__caption {
    text-align: left;
    padding-bottom: var(--zk-space-2);
    color: var(--zk-color-fg-muted);
}

.zk-table th,
.zk-table td {
    padding: var(--zk-space-2) var(--zk-space-3);
    border-bottom: 1px solid var(--zk-color-border);
    text-align: left;
    vertical-align: top;
}

.zk-pagination {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    margin-top: var(--zk-space-4);
}

/* Identity screens ------------------------------------------------------- */

.zk-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--zk-space-8) var(--zk-space-4);
    background: var(--zk-color-bg-subtle);
}

.zk-auth__card {
    width: 100%;
    max-width: 26rem;
    padding: var(--zk-space-8);
    background: var(--zk-color-bg);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-md);
}

.zk-auth__brand {
    display: inline-block;
    margin-bottom: var(--zk-space-6);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
}

.zk-auth__title {
    margin: 0 0 var(--zk-space-2);
    font-size: var(--zk-text-xl);
}

.zk-auth__lead,
.zk-auth__note {
    margin: 0 0 var(--zk-space-6);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-auth__links {
    margin: var(--zk-space-4) 0 0;
    font-size: var(--zk-text-sm);
}

.zk-locale-switch--auth {
    margin: var(--zk-space-6) 0 0;
}

.zk-form {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-4);
}

.zk-field {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-1);
}

.zk-field__label {
    font-size: var(--zk-text-sm);
    font-weight: 600;
}

.zk-field__input {
    min-height: 44px;
    padding: var(--zk-space-2) var(--zk-space-3);
    background: var(--zk-color-bg);
    color: var(--zk-color-fg);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    font: inherit;
}

.zk-field__hint {
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-button--block {
    width: 100%;
}

.zk-button--sm {
    min-height: 32px;
    padding: var(--zk-space-1) var(--zk-space-3);
    font-size: var(--zk-text-sm);
}

.zk-alert {
    margin: 0 0 var(--zk-space-4);
    padding: var(--zk-space-3);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    background: var(--zk-color-bg-subtle);
    font-size: var(--zk-text-sm);
}

.zk-alert--danger {
    border-color: var(--zk-color-danger);
    color: var(--zk-color-danger);
}

.zk-alert--warning {
    border-color: #b8892d;
    color: #8a6418;
    background: #fbf6ea;
}

.zk-alert--success {
    border-color: #2f6b45;
    color: #1f4d30;
}

/* Conversion flows (test drive / offer) ---------------------------------- */

.zk-flow,
.zk-success,
.zk-manage {
    max-width: 44rem;
}

.zk-flow__title,
.zk-success__title,
.zk-manage__title {
    margin: 0 0 var(--zk-space-2);
    font-family: var(--zk-font-display);
    font-size: var(--zk-text-2xl);
    line-height: var(--zk-leading-display);
    letter-spacing: var(--zk-tracking-display);
}

.zk-flow__lead,
.zk-success__lead {
    margin: 0 0 var(--zk-space-6);
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-lg);
}

.zk-flow__heading {
    margin: var(--zk-space-6) 0 var(--zk-space-3);
    font-size: var(--zk-text-lg);
}

.zk-flow__summary {
    margin-bottom: var(--zk-space-6);
}

.zk-flow__actions,
.zk-flow__back {
    margin-top: var(--zk-space-4);
}

/* Step indicator - horizontal on desktop, scrollable on small screens. */
.zk-steps {
    margin: 0 0 var(--zk-space-6);
}

.zk-steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zk-space-2) var(--zk-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--zk-text-sm);
}

.zk-steps__item {
    color: var(--zk-color-fg-muted);
    border-bottom: 2px solid transparent;
    padding-bottom: var(--zk-space-1);
}

.zk-steps__item[data-state="done"] {
    color: var(--zk-color-fg);
    border-bottom-color: var(--zk-color-border);
}

.zk-steps__item[data-state="current"] {
    color: var(--zk-color-fg);
    font-weight: 600;
    border-bottom-color: var(--zk-color-accent);
}

.zk-steps__count {
    margin: var(--zk-space-2) 0 0;
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
}

.zk-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-3);
    margin: 0 0 var(--zk-space-6);
    padding: 0;
    border: 0;
}

.zk-fieldset__legend {
    padding: 0;
    margin-bottom: var(--zk-space-2);
    font-size: var(--zk-text-lg);
    font-weight: 600;
}

/* Slot grids get more columns than the single-column selection lists. */
.zk-fieldset--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.zk-fieldset--grid .zk-fieldset__legend {
    grid-column: 1 / -1;
}

/* Whole-row targets: a 44px tap area, not just the radio dot. */
.zk-choice,
.zk-check {
    display: flex;
    align-items: flex-start;
    gap: var(--zk-space-3);
    min-height: 44px;
    padding: var(--zk-space-3);
    border: 1px solid var(--zk-color-border);
    border-radius: var(--zk-radius-sm);
    cursor: pointer;
    transition:
        border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-choice:hover,
.zk-check:hover {
    border-color: var(--zk-color-accent);
}

.zk-choice:has(input:checked) {
    border-color: var(--zk-color-accent);
    background: var(--zk-color-bg-subtle);
    color: var(--zk-color-ink, #1a1a18);
}

.zk-choice:has(input:focus-visible),
.zk-check:has(input:focus-visible) {
    outline: 2px solid var(--zk-color-focus);
    outline-offset: 2px;
}

.zk-choice input,
.zk-check input {
    margin-top: 0.2rem;
    accent-color: var(--zk-color-accent);
}

.zk-choice:focus-within {
    border-color: var(--zk-color-accent);
}

.zk-choice--slot {
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.zk-choice__label {
    font-weight: 600;
}

.zk-choice__meta {
    display: block;
    color: var(--zk-color-fg-muted);
    font-size: var(--zk-text-sm);
    font-weight: 400;
}

.zk-check {
    font-size: var(--zk-text-sm);
    font-weight: 400;
}

.zk-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--zk-space-4);
}

.zk-form--inline {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--zk-space-3);
    margin-bottom: var(--zk-space-4);
}

.zk-success__reference {
    margin: 0 0 var(--zk-space-6);
    font-size: var(--zk-text-lg);
}

.zk-success__reference code {
    font-family: var(--zk-font-mono);
    letter-spacing: 0.08em;
}

/* Errors ----------------------------------------------------------------- */

.zk-error {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--zk-space-12) var(--zk-space-6);
    text-align: center;
}

.zk-error h1 {
    margin: 0 0 var(--zk-space-2);
    font-size: var(--zk-text-2xl);
}

/* Dealer directory (Find your ZEEKR) ------------------------------------ */

.zk-dealer-directory {
    list-style: none;
    margin: var(--zk-space-8) 0 0;
    padding: 0;
    display: grid;
    gap: var(--zk-space-6);
}

.zk-dealer-card {
    padding: var(--zk-space-6) 0;
    border-top: 1px solid var(--zk-color-border);
}

.zk-dealer-card__title {
    margin: 0 0 var(--zk-space-3);
    font-size: var(--zk-text-xl);
    letter-spacing: 0.02em;
}

.zk-dealer-card__contact {
    margin: 0 0 var(--zk-space-2);
}

.zk-dealer-card__locations {
    list-style: none;
    margin: var(--zk-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--zk-space-3);
}

.zk-dealer-card__locations li {
    display: grid;
    gap: var(--zk-space-1);
}

.zk-shell__actions {
    margin-top: var(--zk-space-8);
}

/* Mobile-first breakpoints ---------------------------------------------- */

@media (max-width: 768px) {
    .zk-header {
        flex-wrap: wrap;
        gap: var(--zk-space-3);
    }

    /* Two name fields side by side is too tight on a phone. */
    .zk-field-row {
        grid-template-columns: 1fr;
    }

    .zk-form--inline {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   PUBLIC EXPERIENCE � immersive vehicle-first layer (M0�M8 preserved)
   Admin cockpit styles above remain denser / technical.
   ========================================================================== */

.zk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zk-body--experience .zk-main--bleed {
    max-width: none;
    padding: 0;
    width: 100%;
}

.zk-site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--zk-header-h);
    background: rgb(247 247 245 / 0.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--zk-duration-base) var(--zk-easing), border-color var(--zk-duration-base) var(--zk-easing);
}

.zk-site-header.is-solid {
    background: rgb(247 247 245 / 0.96);
    border-bottom-color: var(--zk-color-border);
}

.zk-site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--zk-space-4);
    max-width: 90rem;
    margin: 0 auto;
    padding: 0.85rem var(--zk-gutter);
}

.zk-site-header__brand {
    font-family: var(--zk-font-display);
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-decoration: none;
    color: var(--zk-color-fg);
    font-weight: 600;
}

.zk-site-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-left: auto;
    margin-right: var(--zk-space-4);
}

.zk-site-header__nav a {
    text-decoration: none;
    color: var(--zk-color-fg-secondary);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.zk-site-header__nav a:hover,
.zk-site-header__nav a[aria-current="page"] {
    color: var(--zk-color-fg);
}

.zk-site-header__admin {
    font-weight: 600;
}

.zk-site-header__menu {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--zk-color-border);
    background: transparent;
    cursor: pointer;
}

.zk-site-header__menu span:not(.zk-visually-hidden) {
    display: block;
    width: 1.1rem;
    height: 2px;
    margin: 0 auto;
    background: var(--zk-color-fg);
    box-shadow: 0 5px 0 var(--zk-color-fg), 0 -5px 0 var(--zk-color-fg);
}

.zk-locale-switch {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.zk-locale-switch a {
    text-decoration: none;
    color: var(--zk-color-fg-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.45rem;
}

.zk-locale-switch a[aria-current="true"] {
    color: var(--zk-color-fg);
    border-bottom: 1px solid var(--zk-color-fg);
}

.zk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 2px;
    text-decoration: none !important;
    font-family: var(--zk-font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s ease;
}

a.zk-btn:hover {
    border-bottom-color: transparent;
}

.zk-btn--primary {
    background: var(--zk-color-ink);
    color: #f7f7f5 !important;
    border-color: var(--zk-color-ink);
}

.zk-btn--primary:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
    color: #fff !important;
    transform: translateY(-1px);
}

.zk-btn--secondary {
    background: transparent;
    color: var(--zk-color-fg) !important;
    border-color: var(--zk-color-border-strong);
}

.zk-btn--secondary:hover {
    background: var(--zk-color-bg-subtle);
    border-color: var(--zk-color-ink);
    color: var(--zk-color-ink) !important;
    transform: translateY(-1px);
}

.zk-xp-hero .zk-btn--primary,
.zk-xp-sticky .zk-btn--primary {
    background: #fff;
    color: #0a0a0a !important;
    border-color: #fff;
}

.zk-xp-hero .zk-btn--primary:hover,
.zk-xp-sticky .zk-btn--primary:hover {
    background: #f3f2f0;
    color: #0a0a0a !important;
}

.zk-xp-hero .zk-btn--ghost,
.zk-xp-hero .zk-btn--secondary,
.zk-xp-sticky .zk-btn--ghost,
.zk-xp-sticky .zk-btn--secondary {
    background: transparent;
    color: #fff !important;
    border-color: rgb(255 255 255 / 0.55);
}

.zk-xp-hero .zk-btn--ghost:hover,
.zk-xp-hero .zk-btn--secondary:hover,
.zk-xp-sticky .zk-btn--ghost:hover,
.zk-xp-sticky .zk-btn--secondary:hover {
    background: #fff;
    color: #0a0a0a !important;
    border-color: #fff;
}

.zk-xp-convert .zk-btn--ghost,
.zk-xp-dealers .zk-btn--ghost {
    color: var(--zk-color-fg) !important;
    border-color: var(--zk-color-fg);
}

.zk-btn--compact {
    min-height: 2.5rem;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
}

.zk-xp-hero {
    position: relative;
    min-height: 78vh;
    display: grid;
    align-items: end;
    color: #f7f7f5;
    overflow: hidden;
}

.zk-xp-hero__media {
    position: absolute;
    inset: 0;
}

.zk-xp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 40%;
}

.zk-xp-hero__fallback {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(80% 60% at 70% 30%, #3a3a3a 0%, transparent 55%),
        linear-gradient(160deg, #111 0%, #2a2a2a 45%, #0a0a0a 100%);
    display: grid;
    place-items: center;
}

.zk-xp-hero__fallback-mark {
    font-family: var(--zk-font-display);
    letter-spacing: 0.35em;
    opacity: 0.35;
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.zk-xp-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.35) 42%, rgb(0 0 0 / 0.15) 100%),
        linear-gradient(0deg, rgb(0 0 0 / 0.55) 0%, transparent 42%);
}

.zk-xp-hero__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    padding: clamp(5rem, 12vh, 7rem) var(--zk-gutter) clamp(2.5rem, 6vh, 4rem);
}

.zk-xp-eyebrow,
.zk-xp-badge {
    text-transform: uppercase;
    letter-spacing: var(--zk-tracking-label);
    font-size: 0.75rem;
    margin: 0 0 1rem;
}

.zk-xp-badge {
    display: inline-block;
    border: 1px solid rgb(255 255 255 / 0.45);
    padding: 0.35rem 0.65rem;
}

.zk-xp-hero__title {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: var(--zk-text-display);
    line-height: var(--zk-leading-display);
    letter-spacing: var(--zk-tracking-display);
    font-weight: 600;
}

.zk-xp-hero__tagline {
    margin: 1rem 0 0;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    max-width: 28rem;
    color: rgb(247 247 245 / 0.88);
}

.zk-xp-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
}

.zk-xp-metrics__value {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1;
}

.zk-xp-metrics__label {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: rgb(247 247 245 / 0.72);
    letter-spacing: 0.04em;
}

.zk-xp-metrics__unit,
.zk-xp-metrics__prelim,
.zk-xp-specs__prelim {
    display: block;
    opacity: 0.8;
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.zk-xp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.zk-xp-hero__note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: rgb(247 247 245 / 0.7);
}

.zk-xp-section__head {
    max-width: 40rem;
    padding: 0 var(--zk-gutter);
    margin: 0 auto var(--zk-space-8);
    text-align: center;
}

.zk-xp-section__head h2 {
    margin: 0 0 0.75rem;
    font-family: var(--zk-font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
    letter-spacing: var(--zk-tracking-display);
}

.zk-xp-section__head p {
    margin: 0;
    color: var(--zk-color-fg-muted);
}

.zk-xp-rail {
    padding: var(--zk-space-section) 0;
    background: var(--zk-color-paper);
}

.zk-xp-rail__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 var(--zk-gutter) 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.zk-xp-rail__card {
    flex: 0 0 min(78vw, 18rem);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    background: #fff;
    transition: border-color var(--zk-duration-fast) var(--zk-easing), transform var(--zk-duration-base) var(--zk-easing);
}

.zk-xp-rail__card.is-active {
    border-color: var(--zk-color-ink);
}

.zk-xp-rail__visual {
    display: block;
    aspect-ratio: 16 / 10;
    background: #1a1a1a;
    overflow: hidden;
}

.zk-xp-rail__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zk-xp-rail__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #222, #444);
}

.zk-xp-rail__meta {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1rem 1.15rem;
}

.zk-xp-rail__name {
    font-family: var(--zk-font-display);
    font-size: 1.1rem;
}

.zk-xp-rail__status {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zk-color-fg-muted);
}

.zk-xp-story {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    padding: var(--zk-space-section) var(--zk-gutter);
    max-width: 90rem;
    margin: 0 auto;
    align-items: center;
}

.zk-xp-story__copy h2 {
    margin: 0.5rem 0 1rem;
    font-family: var(--zk-font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    letter-spacing: var(--zk-tracking-display);
}

.zk-xp-story__text {
    font-size: 1.05rem;
    color: var(--zk-color-fg-secondary);
    max-width: 36rem;
}

.zk-xp-disclaimer {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--zk-color-fg-muted);
}

.zk-xp-story__media img,
.zk-xp-story__fallback {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #1a1a1a;
}

.zk-xp-specs {
    padding: var(--zk-space-section) 0;
    background: var(--zk-color-graphite);
    color: #f7f7f5;
}

.zk-xp-section__head--light h2,
.zk-xp-section__head--light p {
    color: #f7f7f5;
}

.zk-xp-section__head--light p {
    color: rgb(247 247 245 / 0.7);
}

.zk-xp-specs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1.5rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--zk-gutter);
}

.zk-xp-specs__value {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    letter-spacing: -0.03em;
    line-height: 1;
}

.zk-xp-specs__label {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: rgb(247 247 245 / 0.7);
}

.zk-xp-gallery {
    padding: var(--zk-space-section) 0;
}

.zk-xp-gallery__stage {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--zk-gutter);
}

.zk-xp-gallery__main {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
    transition: opacity var(--zk-duration-base) var(--zk-easing);
}

.zk-xp-gallery__thumbs {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    max-width: 90rem;
    margin: 1rem auto 0;
    padding: 0 var(--zk-gutter);
}

.zk-xp-gallery__thumb {
    flex: 0 0 7.5rem;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.zk-xp-gallery__thumb.is-active {
    border-color: var(--zk-color-ink);
}

.zk-xp-gallery__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.zk-xp-convert {
    padding: var(--zk-space-section) var(--zk-gutter);
}

.zk-xp-convert__panel {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: #fff;
    border: 1px solid var(--zk-color-border);
}

.zk-xp-convert__panel h2 {
    margin: 0 0 0.75rem;
    font-family: var(--zk-font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}

.zk-xp-convert__panel .zk-xp-hero__actions {
    justify-content: center;
}

.zk-xp-dealers {
    padding: 0 0 var(--zk-space-section);
}

.zk-xp-dealers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--zk-gutter);
}

.zk-xp-dealer {
    padding: 1.5rem 0;
    border-top: 1px solid var(--zk-color-border);
}

.zk-xp-dealer h3 {
    margin: 0 0 0.5rem;
    font-family: var(--zk-font-display);
    font-size: 1.25rem;
}

.zk-xp-dealer__city,
.zk-xp-dealer__addr {
    margin: 0.25rem 0;
    color: var(--zk-color-fg-muted);
    font-size: 0.95rem;
}

.zk-xp-dealers__more {
    text-align: center;
    margin: 2rem 0 0;
}

.zk-xp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0.75rem var(--zk-gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: rgb(10 10 10 / 0.92);
    color: #fff;
    transform: translateY(110%);
    transition: transform var(--zk-duration-base) var(--zk-easing);
}

.zk-xp-sticky.is-visible {
    transform: translateY(0);
}

.zk-xp-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.zk-xp-sticky__model {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: 0.95rem;
}

.zk-xp-sticky__actions {
    display: flex;
    gap: 0.5rem;
}

.zk-site-footer {
    background: #0a0a0a;
    color: #f7f7f5;
    padding: clamp(3rem, 7vw, 5rem) var(--zk-gutter) 2rem;
}

.zk-site-footer a {
    color: rgb(247 247 245 / 0.78);
    text-decoration: none;
}

.zk-site-footer a:hover {
    color: #fff;
}

.zk-site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
    max-width: 90rem;
    margin: 0 auto 2.5rem;
}

.zk-site-footer__logo {
    font-family: var(--zk-font-display);
    letter-spacing: 0.28em;
    margin: 0 0 0.75rem;
}

.zk-site-footer__tag,
.zk-site-footer__legal {
    color: rgb(247 247 245 / 0.55);
    font-size: 0.9rem;
}

.zk-site-footer__heading {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    margin: 0 0 1rem;
    color: rgb(247 247 245 / 0.55);
}

.zk-site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.zk-site-footer__legal {
    max-width: 90rem;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.zk-xp-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.55s var(--zk-easing), transform 0.55s var(--zk-easing);
}

.zk-xp-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Flow polish � keep logic, upgrade surfaces */
.zk-body--experience .zk-flow,
.zk-flow {
    max-width: 42rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--zk-gutter) 4rem;
}

.zk-flow__title {
    font-family: var(--zk-font-display);
    font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.75rem);
    letter-spacing: var(--zk-tracking-display);
}

.zk-flow__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    margin: 0 0 0.35rem;
}

.zk-flow__header .zk-flow__title {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.zk-flow__reset {
    flex: 0 0 auto;
    margin: 0.35rem 0 0;
}

.zk-flow-reset {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.4rem 0.7rem;
    margin: 0;
    border: 1px solid #d4d4d0;
    border-radius: 2px;
    background: transparent;
    color: #5c5c58;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-flow-reset:hover {
    color: #1a1a18;
    border-color: #1a1a18;
    background: #f6f6f3;
}

.zk-flow-reset:focus-visible {
    outline: 2px solid var(--zk-color-focus, #1a1a18);
    outline-offset: 3px;
}

.zk-flow-reset:active {
    transform: scale(0.98);
}

@media (max-width: 420px) {
    .zk-flow__header {
        flex-wrap: wrap;
        align-items: center;
    }

    .zk-flow__reset {
        margin: 0;
    }
}

.zk-choice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--zk-color-border);
    background: #fff;
    color: #1a1a18;
    margin-bottom: 0.65rem;
    min-height: 3.25rem;
    border-radius: 2px;
    transition:
        border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.22s ease;
}

.zk-choice:hover {
    border-color: #9a9a96;
    background: #fafaf8;
}

.zk-choice:has(input:checked) {
    border-color: #1a1a18;
    background: #f3f2ee;
    color: #1a1a18;
    box-shadow:
        inset 3px 0 0 #1a1a18,
        0 10px 24px rgb(10 10 10 / 0.07);
    animation: zk-choice-select 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-choice:has(input:checked) .zk-choice__label,
.zk-choice:has(input:checked) .zk-choice__copy {
    color: #1a1a18;
}

.zk-choice:has(input:checked) .zk-choice__meta,
.zk-choice:has(input:checked) .zk-choice__desc {
    color: #5c5c58;
}

.zk-choice:active {
    transform: scale(0.992);
}

.zk-check:has(input:checked) {
    border-color: #1a1a18;
    background: #f6f5f1;
    color: #1a1a18;
}

.zk-progress {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1.75rem;
}

.zk-progress__step {
    flex: 1;
    height: 2px;
    background: var(--zk-color-border);
}

.zk-progress__step.is-done,
.zk-progress__step.is-current {
    background: var(--zk-color-ink);
}

.zk-success {
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) var(--zk-gutter);
}

.zk-success__title {
    font-family: var(--zk-font-display);
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}

.zk-dealer-directory {
    display: grid;
    gap: 0;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 var(--zk-gutter) var(--zk-space-section);
}

.zk-dealer-card {
    border: 0;
    border-top: 1px solid var(--zk-color-border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 1.75rem 0;
}

.zk-shell__header {
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) var(--zk-gutter) 2rem;
    text-align: center;
}

.zk-shell__title {
    font-family: var(--zk-font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    letter-spacing: var(--zk-tracking-display);
}

@media (min-width: 900px) {
    .zk-xp-story {
        grid-template-columns: 1fr 1.1fr;
    }

    .zk-xp-rail__card {
        flex-basis: 16.5rem;
    }

    .zk-xp-rail__card:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 767px) {
    .zk-xp-hero {
        min-height: 72vh;
    }

    .zk-xp-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .zk-site-header__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .zk-site-header__nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.5rem var(--zk-gutter) 1rem;
        background: #f7f7f5;
        border-bottom: 1px solid var(--zk-color-border);
    }

    .zk-nav-open .zk-site-header__nav {
        display: flex;
    }

    .zk-site-header__nav a {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--zk-color-border);
    }

    .zk-site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .zk-body--experience {
        padding-bottom: 4.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zk-xp-reveal,
    .zk-xp-sticky,
    .zk-xp-gallery__main,
    .zk-xp-rail__card {
        transition: none !important;
    }
}

.zk-steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.zk-steps__item {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zk-color-fg-muted);
}

.zk-steps__item[data-state="current"] {
    color: var(--zk-color-fg);
    font-weight: 600;
}

.zk-steps__item[data-state="done"] {
    color: var(--zk-color-fg-secondary);
}

.zk-steps__count {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: var(--zk-color-fg-muted);
}

@media (max-width: 767px) {
    .zk-steps__list {
        display: none;
    }
}

.zk-choice--media {
    align-items: center;
}

.zk-choice__media {
    flex: 0 0 5.5rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
}

.zk-choice__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Choose-your-model wireframe composition */
.zk-xp-intro {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--zk-gutter) 1.5rem;
    text-align: center;
}

.zk-xp-intro__title {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
    letter-spacing: var(--zk-tracking-display);
    line-height: 1.05;
}

.zk-xp-intro__lead {
    margin: 1rem auto 0;
    max-width: 34rem;
    color: var(--zk-color-fg-muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.zk-xp-feature {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--zk-gutter) 1.5rem;
}

.zk-xp-feature__media {
    background: #111;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.zk-xp-feature__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.zk-xp-feature__fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
    color: rgb(255 255 255 / 0.35);
    letter-spacing: 0.35em;
    font-family: var(--zk-font-display);
}

.zk-xp-feature__body {
    padding: 1.5rem 0 0;
    text-align: center;
}

.zk-xp-badge--ink {
    color: var(--zk-color-fg);
    border-color: var(--zk-color-border-strong);
}

.zk-xp-feature__name {
    margin: 0.35rem 0 0.75rem;
    font-family: var(--zk-font-display);
    font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);
    letter-spacing: var(--zk-tracking-display);
}

.zk-xp-feature__specs {
    margin: 0 auto;
    max-width: 40rem;
    color: var(--zk-color-fg-secondary);
    letter-spacing: 0.02em;
    font-size: 0.98rem;
}

.zk-xp-feature__prelim-note,
.zk-xp-feature__note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--zk-color-fg-muted);
}

.zk-xp-feature__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.zk-xp-chips {
    padding: 0.5rem 0 2.5rem;
}

.zk-xp-chips__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding: 0 var(--zk-gutter);
}

.zk-xp-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    min-height: 3rem;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    color: var(--zk-color-fg);
    border: 1px solid var(--zk-color-border);
    background: #fff;
    letter-spacing: 0.04em;
}

.zk-xp-chip.is-active {
    border-color: var(--zk-color-ink);
    background: var(--zk-color-ink);
    color: #fff;
}

.zk-xp-chip__code {
    font-family: var(--zk-font-display);
    font-size: 1rem;
}

.zk-xp-chip__soon {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.zk-xp-chip.is-soon:not(.is-active) {
    border-style: dashed;
}

@media (min-width: 900px) {
    .zk-xp-feature__media {
        aspect-ratio: 21 / 9;
    }
}

/* ===== Conversion-first homepage ===== */
.zk-body--home .zk-site-header { position: sticky; }
.zk-cv {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem var(--zk-gutter) 2rem;
}
.zk-cv__intro { margin: 0 0 1rem; }
.zk-cv__title {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem);
  letter-spacing: var(--zk-tracking-display);
  line-height: 1.08;
}
.zk-cv__lead {
  margin: 0.45rem 0 0;
  color: var(--zk-color-fg-muted);
  font-size: 0.98rem;
  max-width: 34rem;
}
.zk-cv__empty { color: var(--zk-color-fg-muted); }

.zk-cv-rail {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 0.75rem;
  margin: 0 0 0.85rem;
  -webkit-overflow-scrolling: touch;
}
.zk-cv-rail__item {
  flex: 0 0 min(42vw, 9.5rem);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--zk-color-border);
  background: #fff;
  min-width: 7.5rem;
}
.zk-cv-rail__item.is-active { border-color: var(--zk-color-ink); box-shadow: inset 0 0 0 1px var(--zk-color-ink); }
.zk-cv-rail__visual {
  display: block;
  aspect-ratio: 16/10;
  background: #1a1a1a;
  overflow: hidden;
}
.zk-cv-rail__visual.is-empty {
  aspect-ratio: 16/7;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#222,#111);
}
.zk-cv-rail__visual img { width:100%; height:100%; object-fit:cover; }
.zk-cv-rail__mark { font-family: var(--zk-font-display); letter-spacing:0.2em; font-size:0.7rem; color:rgb(255 255 255 / 0.4); }
.zk-cv-rail__meta { display:grid; gap:0.15rem; padding:0.45rem 0.5rem 0.55rem; }
.zk-cv-rail__name { font-family: var(--zk-font-display); font-size:0.82rem; line-height:1.2; }
.zk-cv-rail__badge { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--zk-color-fg-muted); }
.zk-cv-rail__item.is-soon:not(.is-active) { border-style: dashed; }

.zk-cv-panel {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.zk-cv-panel__media {
  background: #111;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.zk-cv-panel--compact .zk-cv-panel__media,
.zk-cv-panel__media.is-empty {
  aspect-ratio: auto;
  min-height: 4.5rem;
  max-height: 7rem;
}
.zk-cv-panel__media img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.zk-cv-panel__fallback {
  min-height: 4.5rem;
  display:grid;
  place-items:center;
  background: linear-gradient(160deg,#1c1c1c,#0a0a0a);
  color: rgb(255 255 255 / 0.55);
  font-family: var(--zk-font-display);
  letter-spacing: 0.06em;
  padding: 1rem;
  text-align: center;
}
.zk-cv-panel__name {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: var(--zk-tracking-display);
}
.zk-cv-panel__tagline { margin: 0.35rem 0 0; color: var(--zk-color-fg-secondary); font-size: 0.95rem; }
.zk-cv-status {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--zk-color-border-strong);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.zk-cv-specs {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0.55rem;
}
.zk-cv-specs li { display:grid; gap:0.15rem; }
.zk-cv-specs strong {
  font-family: var(--zk-font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.zk-cv-specs span { font-size: 0.72rem; color: var(--zk-color-fg-muted); }
.zk-cv-specs--wide { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.zk-cv-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}
.zk-cv-panel__note { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--zk-color-fg-muted); }
.zk-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--zk-color-fg-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 2.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.zk-cv-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0 0.25rem;
  border-top: 1px solid var(--zk-color-border);
  margin-top: 0.5rem;
}
.zk-cv-find h2 {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: 1.05rem;
}
.zk-cv-find p { margin: 0.2rem 0 0; color: var(--zk-color-fg-muted); font-size: 0.88rem; }
.zk-cv-find__count { opacity: 0.7; }

.zk-site-footer--compact .zk-site-footer__grid {
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.zk-site-footer--compact .zk-site-footer__tag { display: none; }
.zk-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
}
.zk-site-footer--compact { padding: 1.75rem var(--zk-gutter) 1.25rem; }

.zk-model { max-width: 72rem; margin: 0 auto; padding: 1rem var(--zk-gutter) 3rem; }
.zk-model__back { margin: 0 0 1rem; }
.zk-model__back a {
  color: var(--zk-color-fg-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.zk-model__back a:hover { color: var(--zk-color-fg); }

.zk-model__hero {
  position: relative;
  margin: 0 calc(-1 * var(--zk-gutter)) 2rem;
  background: #0a0a0a;
  overflow: hidden;
  min-height: clamp(18rem, 52vw, 32rem);
}
.zk-model__hero img {
  width: 100%;
  height: 100%;
  min-height: clamp(18rem, 52vw, 32rem);
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.zk-model__hero--compact {
  min-height: 14rem;
}
.zk-model__hero--compact .zk-model__fallback,
.zk-model__hero--compact .zk-media-fallback--hero {
  min-height: 14rem;
}
.zk-model__fallback {
  min-height: 14rem;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #222, #0a0a0a);
  color: rgb(255 255 255 / 0.35);
  letter-spacing: 0.3em;
  font-family: var(--zk-font-display);
}

.zk-model__hero-copy {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(3.5rem, 10vw, 5.5rem) var(--zk-gutter) 1.35rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(0 0 0 / 0.55) 42%,
    rgb(0 0 0 / 0.92) 100%
  );
  color: #f7f7f5;
}

.zk-model__hero-copy > div:first-child {
  min-width: min(100%, 16rem);
  flex: 1 1 14rem;
}

.zk-model__hero-copy .zk-cv-status {
  margin: 0 0 0.35rem;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.zk-model__hero-copy h1 {
  margin: 0;
  color: #ffffff;
  font-family: var(--zk-font-display);
  font-size: clamp(1.85rem, 1.35rem + 2vw, 3rem);
  letter-spacing: var(--zk-tracking-display);
  line-height: 1.05;
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.35);
}

.zk-model__hero-copy > p {
  margin: 0.45rem 0 0;
  max-width: 34rem;
  color: rgb(255 255 255 / 0.78);
  font-size: 0.95rem;
}

.zk-model__hero-copy .zk-cv-panel__actions {
  margin: 0;
  flex: 0 1 auto;
  align-self: flex-end;
}

.zk-model__hero .zk-btn--primary {
  background: #fff;
  color: #0a0a0a !important;
  border-color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
}

.zk-model__hero .zk-btn--primary:hover {
  background: #f3f2f0;
  color: #0a0a0a !important;
  border-color: #f3f2f0;
}

.zk-model__hero .zk-btn--secondary {
  background: rgb(255 255 255 / 0.06);
  color: #fff !important;
  border-color: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(6px);
}

.zk-model__hero .zk-btn--secondary:hover {
  background: #fff;
  color: #0a0a0a !important;
  border-color: #fff;
}

.zk-model__specs,
.zk-model__story {
  margin: 2rem 0;
}
.zk-model__specs h2,
.zk-model__story h2 {
  margin: 0 0 0.75rem;
  font-family: var(--zk-font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
}
.zk-model__story p {
  max-width: 40rem;
  color: var(--zk-color-fg-secondary);
  line-height: 1.65;
}

@media (max-width: 639px) {
  .zk-model__hero-copy .zk-cv-panel__actions {
    width: 100%;
  }
  .zk-model__hero-copy .zk-btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.35rem);
  }
}

@media (min-width: 900px) {
  .zk-cv-panel {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 1.5rem;
  }
  .zk-cv-panel__media { order: 2; aspect-ratio: 4/3; }
  .zk-cv-panel__body { order: 1; }
  .zk-cv-rail__item { flex-basis: 10.5rem; }
  .zk-site-footer--compact .zk-site-footer__grid {
    grid-template-columns: 1.2fr 2fr auto;
    align-items: center;
  }
  .zk-site-footer--compact .zk-site-footer__tag { display: block; }
}

@media (max-width: 767px) {
  .zk-cv { padding-top: 0.35rem; padding-bottom: 1.25rem; }
  .zk-cv-specs { grid-template-columns: 1fr 1fr; }
  .zk-cv-specs li:nth-child(3) { grid-column: 1 / -1; }
  .zk-body--home { padding-bottom: 4.25rem; }
  .zk-site-header__inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}

/* Intent-first homepage — premium automotive-tech panels */
.zk-intent {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.85rem var(--zk-gutter) 2rem;
}
.zk-intent__eyebrow {
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--zk-color-fg-muted);
}
.zk-intent__title {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.5rem);
  letter-spacing: var(--zk-tracking-display);
  line-height: 1.08;
  max-width: 22ch;
}
.zk-intent__lead {
  margin: 0.55rem 0 1.15rem;
  color: var(--zk-color-fg-muted);
  font-size: 0.98rem;
  max-width: 34rem;
}
.zk-intent__actions {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}
.zk-intent-panel {
  --zk-intent-ink: #f4f6f8;
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  min-height: 14.5rem;
  color: var(--zk-intent-ink);
  background: #0b0d10;
  border: 1px solid rgb(255 255 255 / 0.06);
}
.zk-intent-panel__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.zk-intent-panel__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 80% at 78% 28%, rgb(70 82 96 / 0.28) 0%, transparent 55%),
    radial-gradient(70% 60% at 12% 88%, rgb(28 32 38 / 0.9) 0%, transparent 50%),
    linear-gradient(145deg, #171b21 0%, #0d1014 46%, #080a0c 100%);
}
.zk-intent-panel--offer .zk-intent-panel__base {
  background:
    radial-gradient(75% 70% at 82% 22%, rgb(62 74 88 / 0.22) 0%, transparent 52%),
    radial-gradient(55% 50% at 18% 80%, rgb(24 28 34 / 0.95) 0%, transparent 48%),
    linear-gradient(210deg, #14181e 0%, #0b0e12 52%, #07090b 100%);
}
.zk-intent-art {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: zk-intent-enter 1.1s ease-out 0.15s forwards;
}
@keyframes zk-intent-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Depth layers — staggered parallax speeds */
.zk-intent-art__layer--bg {
  animation: zk-td-depth-bg 13.2s ease-in-out infinite alternate;
  transform-origin: 90% 18%;
}
.zk-intent-art__layer--mid {
  animation: zk-td-depth-mid 10.4s ease-in-out infinite alternate;
  transform-origin: 85% 30%;
}
.zk-intent-art__layer--fg {
  animation: zk-td-depth-fg 8.4s ease-in-out infinite alternate;
  transform-origin: 80% 40%;
}
@keyframes zk-td-depth-bg {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4px, 3px, 0); }
}
@keyframes zk-td-depth-mid {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-8px, 5px, 0); }
}
@keyframes zk-td-depth-fg {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-12px, 6px, 0); }
}

/* —— TEST DRIVE motion —— */
.zk-intent-art__streak {
  stroke-linecap: round;
  stroke-dasharray: 120 560;
  animation: zk-td-streak 11.7s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.zk-intent-art__streak--wide {
  animation-duration: 13.2s;
  stroke-dasharray: 180 720;
  animation-delay: -2.1s;
}
.zk-intent-art__streak--mid {
  animation-duration: 10.4s;
  animation-delay: -4.6s;
  stroke-dasharray: 100 600;
}
.zk-intent-art__streak--core {
  animation-duration: 8.4s;
  animation-delay: -1.2s;
  stroke-dasharray: 90 480;
}
.zk-intent-art__streak--thin {
  animation-duration: 9.6s;
  animation-delay: -5.8s;
  stroke-dasharray: 70 520;
}
.zk-intent-art__streak--pass {
  animation-name: zk-td-pass;
  animation-duration: 12.8s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.15, 1);
  animation-iteration-count: infinite;
  animation-delay: -3.4s;
  stroke-dasharray: 60 900;
}
.zk-intent-art__dash {
  stroke-dasharray: 8 22;
  animation: zk-td-lane 7.8s linear infinite;
}
.zk-intent-art__dash--2 { animation-duration: 8.6s; animation-delay: -1.8s; }
.zk-intent-art__dash--3 { animation-duration: 9.4s; animation-delay: -3.5s; }
.zk-intent-art__dash--4 { animation-duration: 10.2s; animation-delay: -5.1s; }
.zk-intent-art__hint {
  animation: zk-td-hint 11.2s ease-in-out infinite alternate;
}
.zk-intent-art__hint--soft {
  animation-duration: 13s;
  animation-delay: -1.5s;
}
.zk-intent-art__taillight {
  animation: zk-td-light 4.8s ease-in-out infinite;
}
.zk-intent-art__taillight--r {
  animation-delay: -0.35s;
  animation-duration: 5.2s;
}
.zk-intent-art__spark {
  animation: zk-td-spark 9.8s ease-in-out infinite;
}
.zk-intent-art__spark--b {
  animation-duration: 11.4s;
  animation-delay: -3.2s;
}

@keyframes zk-td-streak {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -680; }
}
@keyframes zk-td-pass {
  0%, 62% { stroke-dashoffset: 0; opacity: 0; }
  68% { opacity: 0.45; }
  82% { opacity: 0.2; }
  100% { stroke-dashoffset: -960; opacity: 0; }
}
@keyframes zk-td-lane {
  from { stroke-dashoffset: 0; opacity: 0.4; }
  50% { opacity: 0.18; }
  to { stroke-dashoffset: -60; opacity: 0.4; }
}
@keyframes zk-td-hint {
  from { transform: translate3d(0, 0, 0); opacity: 0.2; }
  to { transform: translate3d(6px, -2px, 0); opacity: 0.3; }
}
@keyframes zk-td-light {
  0%, 100% { opacity: 0.25; }
  45% { opacity: 0.7; }
  55% { opacity: 0.4; }
}
@keyframes zk-td-spark {
  0%, 100% { opacity: 0.15; transform: translate3d(0, 0, 0); }
  35% { opacity: 0.55; }
  70% { opacity: 0.25; transform: translate3d(-18px, 10px, 0); }
}

.zk-intent-panel--td:hover .zk-intent-art__streak--core,
.zk-intent-panel--td:focus-within .zk-intent-art__streak--core {
  animation-duration: 7.2s;
}
.zk-intent-panel--td:hover .zk-intent-art__layer--fg,
.zk-intent-panel--td:focus-within .zk-intent-art__layer--fg {
  opacity: 1;
  filter: brightness(1.06);
}

/* —— OFFER precision —— */
.zk-intent-art__pgrid {
  animation: zk-of-grid 14.6s ease-in-out infinite alternate;
}
.zk-intent-art__frame-box {
  stroke-dasharray: 970;
  stroke-dashoffset: 0;
  animation: zk-of-frame 12.4s ease-in-out infinite;
}
.zk-intent-art__ring {
  animation: zk-of-ring 9.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.zk-intent-art__ring--inner {
  animation-duration: 7.6s;
  animation-direction: reverse;
  animation-delay: -1.8s;
}
.zk-intent-art__scan {
  animation: zk-of-scan 11.7s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.zk-intent-art__trace {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: zk-of-trace 10.8s ease-in-out infinite;
}
.zk-intent-art__trace--a { animation-delay: 0s; }
.zk-intent-art__trace--b { animation-delay: -1.4s; }
.zk-intent-art__trace--e { animation-delay: -2.6s; }
.zk-intent-art__trace--c { animation-delay: -4.1s; }
.zk-intent-art__trace--d { animation-delay: -5.3s; }
.zk-intent-art__node {
  animation: zk-of-node 8.4s ease-in-out infinite;
}
.zk-intent-art__node--b { animation-delay: -1.2s; }
.zk-intent-art__node--c { animation-delay: -2.8s; }
.zk-intent-art__node--d { animation-delay: -4s; }
.zk-intent-art__node--active {
  animation: zk-of-select 9.6s ease-in-out infinite;
}
.zk-intent-art__lock {
  animation: zk-of-lock 9.6s ease-in-out infinite;
}

@keyframes zk-of-grid {
  from { opacity: 0.22; }
  to { opacity: 0.4; }
}
@keyframes zk-of-frame {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.36; }
  40% { stroke-dashoffset: 48; opacity: 0.48; }
  55% { stroke-dashoffset: 18; opacity: 0.42; }
}
@keyframes zk-of-ring {
  0%, 100% { transform: scale(1); opacity: 0.38; }
  50% { transform: scale(1.025); opacity: 0.58; }
}
@keyframes zk-of-scan {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 0.45; }
  55% { opacity: 0.22; }
  90% { transform: translate3d(0, 188px, 0); opacity: 0.08; }
  100% { transform: translate3d(0, 195px, 0); opacity: 0; }
}
@keyframes zk-of-trace {
  0% { stroke-dashoffset: 100; opacity: 0.1; }
  18% { stroke-dashoffset: 0; opacity: 0.65; }
  62% { stroke-dashoffset: 0; opacity: 0.35; }
  100% { stroke-dashoffset: -12; opacity: 0.1; }
}
@keyframes zk-of-node {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.7; }
}
@keyframes zk-of-select {
  0%, 55%, 100% { opacity: 0.35; transform: scale(1); }
  62%, 78% { opacity: 1; transform: scale(1.15); }
}
@keyframes zk-of-lock {
  0%, 55%, 100% { opacity: 0.12; }
  62%, 78% { opacity: 0.55; }
}

.zk-intent-panel--offer:hover .zk-intent-art__node--active,
.zk-intent-panel--offer:focus-within .zk-intent-art__node--active {
  opacity: 1;
}
.zk-intent-panel--offer:hover .zk-intent-art__lock,
.zk-intent-panel--offer:focus-within .zk-intent-art__lock {
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .zk-intent-art {
    opacity: 1;
    animation: none !important;
  }
  .zk-intent-art--motion *,
  .zk-intent-art--precision * {
    animation: none !important;
    filter: none !important;
  }
  .zk-intent-art__layer--bg,
  .zk-intent-art__layer--mid,
  .zk-intent-art__layer--fg {
    transform: none !important;
  }
  .zk-intent-art__streak,
  .zk-intent-art__trace,
  .zk-intent-art__frame-box {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .zk-intent-art__streak--wide { opacity: 0.35; }
  .zk-intent-art__streak--core { opacity: 0.55; }
  .zk-intent-art__scan { opacity: 0.2; transform: translate3d(0, 90px, 0); }
  .zk-intent-art__node { opacity: 0.45; }
  .zk-intent-art__node--active { opacity: 0.75; }
  .zk-intent-art__lock { opacity: 0.35; }
  .zk-intent-art__dash { opacity: 0.3; }
  .zk-intent-art__hint { opacity: 0.28; }
  .zk-intent-art__spark { opacity: 0.35; }
}

/* Calm reading zone — motion lives on the visual side */
.zk-intent-panel__calm {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      rgb(7 9 12 / 0.95) 0%,
      rgb(7 9 12 / 0.86) 30%,
      rgb(7 9 12 / 0.32) 55%,
      rgb(7 9 12 / 0.06) 100%
    ),
    linear-gradient(
      180deg,
      rgb(7 9 12 / 0.12) 0%,
      rgb(7 9 12 / 0.2) 48%,
      rgb(7 9 12 / 0.84) 100%
    );
}
.zk-intent-panel--td .zk-intent-panel__calm {
  background:
    linear-gradient(
      110deg,
      rgb(7 9 12 / 0.96) 0%,
      rgb(7 9 12 / 0.88) 28%,
      rgb(7 9 12 / 0.3) 52%,
      rgb(7 9 12 / 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgb(7 9 12 / 0.1) 0%,
      rgb(7 9 12 / 0.16) 50%,
      rgb(7 9 12 / 0.82) 100%
    );
}
.zk-intent-panel--offer .zk-intent-panel__calm {
  background:
    linear-gradient(
      104deg,
      rgb(7 9 12 / 0.94) 0%,
      rgb(7 9 12 / 0.84) 32%,
      rgb(7 9 12 / 0.34) 56%,
      rgb(7 9 12 / 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgb(7 9 12 / 0.14) 0%,
      rgb(7 9 12 / 0.22) 52%,
      rgb(7 9 12 / 0.85) 100%
    );
}
.zk-intent-panel__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 22rem;
  padding: 1.4rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
}
.zk-intent-panel__brand {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(244 246 248 / 0.55);
}
.zk-intent-panel__heading {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: clamp(1.4rem, 1.2rem + 1.15vw, 1.95rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.35);
}
.zk-intent-panel__copy {
  margin: 0;
  color: rgb(230 235 240 / 0.82);
  font-size: 0.93rem;
  line-height: 1.4;
  max-width: 28rem;
}
.zk-btn--intent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  min-height: 2.7rem;
  padding: 0.72rem 1.3rem;
  border: 1px solid #f4f6f8;
  background: #f4f6f8;
  color: #0a0c0f;
  text-decoration: none;
  font-family: var(--zk-font-display);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.zk-btn--intent::after {
  content: "";
  width: 0.7rem;
  height: 1px;
  background: currentColor;
  transform: translateX(0);
  transition: transform 0.25s ease, width 0.25s ease;
  opacity: 0.7;
}
.zk-btn--intent:hover,
.zk-btn--intent:focus-visible {
  background: transparent;
  color: #f4f6f8;
  border-color: #f4f6f8;
  transform: translateY(-1px);
  outline: none;
}
.zk-btn--intent:focus-visible {
  box-shadow: 0 0 0 2px rgb(7 9 12 / 0.9), 0 0 0 4px #f4f6f8;
}
.zk-btn--intent:hover::after,
.zk-btn--intent:focus-visible::after {
  width: 1rem;
  transform: translateX(3px);
}
.zk-intent-panel--offer .zk-btn--intent {
  background: transparent;
  color: #f4f6f8;
  border-color: rgb(244 246 248 / 0.9);
}
.zk-intent-panel--offer .zk-btn--intent:hover,
.zk-intent-panel--offer .zk-btn--intent:focus-visible {
  background: #f4f6f8;
  color: #0a0c0f;
}
.zk-intent-panel--offer .zk-btn--intent:focus-visible {
  box-shadow: 0 0 0 2px rgb(7 9 12 / 0.9), 0 0 0 4px #f4f6f8;
}
.zk-intent-explore {
  margin: 0 0 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--zk-color-border);
}
.zk-intent-explore__head {
  margin-bottom: 0.75rem;
}
.zk-intent-explore__head h2 {
  margin: 0;
  font-family: var(--zk-font-display);
  font-size: 1.2rem;
}
.zk-intent-explore__head p {
  margin: 0.35rem 0 0;
  color: var(--zk-color-fg-muted);
  font-size: 0.9rem;
}
.zk-body--intent { padding-bottom: 0; }

.zk-vehicle-intent__grid {
  display: grid;
  gap: 0.65rem;
}
.zk-choice--intent {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
}
.zk-choice--intent input { margin-top: 0.15rem; }
.zk-choice__copy { display: grid; gap: 0.2rem; }
.zk-choice__desc {
  font-size: 0.82rem;
  color: var(--zk-color-fg-muted);
}
.zk-choice__media--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#222,#111);
  color: rgb(255 255 255 / 0.4);
  font-family: var(--zk-font-display);
  letter-spacing: 0.18em;
  font-size: 0.65rem;
  aspect-ratio: 16/10;
}

@media (min-width: 900px) {
  .zk-intent__actions {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
  }
  .zk-intent-panel {
    min-height: 21rem;
  }
  .zk-intent-panel__body {
    padding: 2rem 1.7rem 1.8rem;
    max-width: 21rem;
  }
  .zk-intent-panel__heading {
    max-width: 13ch;
  }
  .zk-vehicle-intent__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .zk-intent { padding-top: 0.35rem; }
  .zk-intent-panel {
    min-height: 13.25rem;
  }
  .zk-intent-panel__calm {
    background:
      linear-gradient(
        180deg,
        rgb(7 9 12 / 0.42) 0%,
        rgb(7 9 12 / 0.62) 40%,
        rgb(7 9 12 / 0.92) 100%
      ),
      linear-gradient(
        90deg,
        rgb(7 9 12 / 0.82) 0%,
        rgb(7 9 12 / 0.32) 52%,
        rgb(7 9 12 / 0.12) 100%
      );
  }
  .zk-intent-panel__body {
    padding: 1.2rem 1.05rem 1.15rem;
    max-width: none;
  }
  /* Mobile: keep depth + limited streaks / one selection sequence */
  .zk-intent-art__streak--wide,
  .zk-intent-art__streak--pass,
  .zk-intent-art__dash--3,
  .zk-intent-art__dash--4,
  .zk-intent-art__spark--b,
  .zk-intent-art__hint--soft {
    display: none;
  }
  .zk-intent-art__layer--bg { animation-duration: 16s; }
  .zk-intent-art__layer--mid,
  .zk-intent-art__layer--fg { animation: none; }
  .zk-intent-art__pgrid { opacity: 0.24; }
  .zk-intent-art__trace--c,
  .zk-intent-art__trace--d,
  .zk-intent-art__node--c,
  .zk-intent-art__node--d {
    display: none;
  }
  .zk-intent-art__scan { animation-duration: 14s; opacity: 0.35; }
  .zk-btn--intent::after { display: none; }
  .zk-intent-panel--td:hover .zk-intent-art__layer--fg,
  .zk-intent-panel--offer:hover .zk-intent-art__lock {
    filter: none;
    opacity: inherit;
  }
}

@media (hover: none) {
  .zk-intent-panel--td:hover .zk-intent-art__streak--core {
    animation-duration: 8.4s;
  }
  .zk-intent-panel--td:hover .zk-intent-art__layer--fg {
    filter: none;
  }
}

/* Branded media fallbacks (no black empty holes) ------------------------- */
.zk-media-fallback {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.65rem;
  text-align: center;
  background:
    radial-gradient(70% 80% at 30% 20%, #3a3a3a 0%, transparent 55%),
    linear-gradient(155deg, #2a2a2a 0%, #141414 48%, #0c0c0c 100%);
  color: rgb(255 255 255 / 0.72);
  box-sizing: border-box;
}
.zk-media-fallback__mark {
  font-family: var(--zk-font-display);
  letter-spacing: 0.28em;
  font-size: 0.68rem;
  color: rgb(255 255 255 / 0.45);
}
.zk-media-fallback__label,
.zk-media-fallback__hint {
  font-family: var(--zk-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  max-width: 12rem;
}
.zk-media-fallback--tile {
  aspect-ratio: 16/10;
  min-height: 3.5rem;
}
.zk-media-fallback--hero {
  min-height: 7.5rem;
  aspect-ratio: 16/7;
}
.zk-media-fallback--intent {
  min-height: 100%;
}

.zk-cv-rail__visual {
  background: #1c1c1c;
}
.zk-cv-rail__visual--fallback,
.zk-cv-rail__visual.is-empty {
  aspect-ratio: 16/10;
  background: transparent;
}
.zk-cv-rail__visual--fallback .zk-media-fallback {
  aspect-ratio: 16/10;
}

.zk-choice__media {
  background: #1c1c1c;
  overflow: hidden;
}
.zk-choice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zk-choice__media--fallback,
.zk-choice__media--empty {
  background: transparent;
  aspect-ratio: 16/10;
}
.zk-choice--intent .zk-choice__media--fallback {
  min-height: 3.75rem;
}

.zk-model__hero--compact {
  background: transparent;
}
.zk-model__hero--compact .zk-media-fallback--hero {
  min-height: 7rem;
}

/* Admin media management ------------------------------------------------- */
.zk-media-grid--admin {
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  margin: 1rem 0 1.5rem;
  gap: 1rem;
}
.zk-media-card {
  margin: 0;
  border: 1px solid var(--zk-color-border, #2f3f51);
  background: linear-gradient(180deg, #18222d 0%, #121a22 100%);
  padding: 0.75rem;
  display: grid;
  gap: 0.65rem;
  border-radius: 0.4rem;
}
.zk-media-card__preview {
  position: relative;
  overflow: hidden;
  border-radius: 0.3rem;
}
.zk-media-card__preview img {
  width: 100%;
  height: 9rem;
  object-fit: cover;
  display: block;
  background: #0a0f14;
}
.zk-media-card__badges {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.zk-media-badge {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgb(0 0 0 / 0.72);
  color: #f3f3f1;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 0.2rem;
}
.zk-media-badge--active {
  border-color: #3d9a62;
  color: #9ae0b5;
}
.zk-media-badge--draft {
  border-color: #8a8a8a;
  color: #cfcfcf;
}
.zk-media-card__meta {
  font-size: 0.75rem;
}
.zk-media-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.zk-media-card__actions .zk-button {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.45rem 0.4rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zk-panel__subtitle {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.05rem;
}
.zk-intent-admin-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .zk-intent-admin-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.zk-intent-admin-card {
  border: 1px solid var(--zk-color-border, #2f3f51);
  padding: 1rem;
  background: #121a22;
  border-radius: 0.4rem;
}
.zk-intent-admin-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}
.zk-intent-admin-card__preview {
  margin-bottom: 0.85rem;
  min-height: 9rem;
  background: #0a0f14;
  overflow: hidden;
  border-radius: 0.3rem;
}
.zk-intent-admin-card__preview img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  display: block;
}
.zk-intent-admin-card__preview.is-fallback {
  min-height: 9rem;
}
.zk-intent-admin-card .zk-form {
  margin-bottom: 0.5rem;
  display: grid;
  gap: 0.75rem;
}
.zk-intent-admin-card .zk-button--primary {
  justify-self: start;
}

/* Flow auto-advance + premium Back --------------------------------------- */

html.js-enhanced form[data-zk-auto-advance]:not(.is-manual-continue) .zk-flow__continue {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

html.js-enhanced form[data-zk-auto-advance].is-manual-continue .zk-flow__continue {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  pointer-events: auto;
}

.zk-form.is-advancing {
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.zk-form.is-advancing .zk-choice:has(input:checked) {
  border-color: #1a1a18;
  background: #ebeae5;
  color: #1a1a18;
  box-shadow: inset 3px 0 0 #1a1a18;
}

.zk-flow__back {
  margin-top: 1.75rem;
  padding-top: 0.25rem;
}

.zk-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #5c5c58;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-flow-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid #d4d4d0;
  border-radius: 999px;
  color: #1a1a18;
  transition:
    border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-flow-back__icon svg {
  display: block;
}

.zk-flow-back:hover {
  color: #1a1a18;
  background: #f6f6f3;
  border-color: #e4e4e0;
}

.zk-flow-back:hover .zk-flow-back__icon {
  border-color: #1a1a18;
  background: #fff;
  transform: translateX(-2px);
}

.zk-flow-back:focus-visible {
  outline: 2px solid var(--zk-color-focus, #1a1a18);
  outline-offset: 3px;
}

.zk-flow-back:active {
  transform: scale(0.98);
}

.zk-flow .zk-button--primary {
  width: 100%;
  max-width: 22rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.zk-flow .zk-button--primary:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.zk-flow .zk-button--primary:active {
  transform: translateY(0);
}

.zk-flow .zk-button--secondary {
  min-height: 2.75rem;
  border-radius: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

@media (max-width: 639px) {
  .zk-flow .zk-button--primary {
    max-width: none;
  }

  .zk-flow-back {
    width: 100%;
    justify-content: flex-start;
  }

  .zk-choice--media {
    padding: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zk-choice,
  .zk-check,
  .zk-flow-back,
  .zk-flow-back__icon,
  .zk-flow .zk-button--primary,
  .zk-form.is-advancing {
    transition: none;
  }

  .zk-choice:active,
  .zk-flow-back:active,
  .zk-flow .zk-button--primary:hover {
    transform: none;
  }
}

/* Conversion flows — motion + atmosphere (test drive + offer) ------------ */

.zk-body--experience {
  background:
    radial-gradient(60% 40% at 10% 0%, rgb(0 0 0 / 0.04), transparent 55%),
    radial-gradient(50% 35% at 90% 10%, rgb(0 0 0 / 0.03), transparent 50%),
    linear-gradient(180deg, #f7f6f4 0%, #efeeeb 48%, #f3f2f0 100%);
}

.zk-flow.zk-flow--animated {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) var(--zk-gutter) 4rem;
}

.zk-flow--animated .zk-flow__title {
  animation: zk-flow-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zk-flow--animated .zk-flow__lead {
  animation: zk-flow-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.zk-flow--animated .zk-steps {
  animation: zk-flow-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.zk-flow__stage {
  animation: zk-flow-stage 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zk-steps__track {
  position: relative;
  height: 3px;
  margin: 0 0 0.85rem;
  background: rgb(0 0 0 / 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.zk-steps__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1a1a18, #0a0a0a);
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-steps__item[data-state="current"] {
  position: relative;
}

.zk-steps__item[data-state="current"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--zk-color-ink);
  transform-origin: left center;
  animation: zk-flow-underline 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zk-flow--animated .zk-fieldset__legend,
.zk-flow--animated .zk-flow__heading {
  animation: zk-flow-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.zk-flow--animated .zk-choice {
  animation: zk-flow-choice 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zk-flow--animated .zk-choice:nth-child(2) { animation-delay: 0.05s; }
.zk-flow--animated .zk-choice:nth-child(3) { animation-delay: 0.1s; }
.zk-flow--animated .zk-choice:nth-child(4) { animation-delay: 0.15s; }
.zk-flow--animated .zk-choice:nth-child(5) { animation-delay: 0.2s; }
.zk-flow--animated .zk-choice:nth-child(6) { animation-delay: 0.25s; }
.zk-flow--animated .zk-choice:nth-child(7) { animation-delay: 0.3s; }
.zk-flow--animated .zk-choice:nth-child(8) { animation-delay: 0.35s; }

.zk-flow--animated .zk-field,
.zk-flow--animated .zk-flow__summary,
.zk-flow--animated .zk-check {
  animation: zk-flow-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.zk-fieldset--windows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.zk-fieldset--windows .zk-fieldset__legend {
  grid-column: 1 / -1;
}

.zk-choice--window {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 4.5rem;
  margin-bottom: 0;
  gap: 0.45rem;
}

.zk-choice--window input {
  margin: 0;
}

.zk-flow--animated .zk-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(10 10 10 / 0.06);
}

.zk-flow--animated .zk-choice:has(input:checked) {
  background: #f0efe9;
  color: #1a1a18;
  border-color: #1a1a18;
  box-shadow:
    inset 3px 0 0 #1a1a18,
    0 12px 28px rgb(10 10 10 / 0.1);
  transform: translateY(-1px) scale(1.01);
}

.zk-flow--animated .zk-choice:has(input:checked) .zk-choice__label,
.zk-flow--animated .zk-choice:has(input:checked) .zk-choice__copy {
  color: #1a1a18;
}

.zk-flow--animated .zk-choice:has(input:checked) .zk-choice__meta,
.zk-flow--animated .zk-choice:has(input:checked) .zk-choice__desc {
  color: #5c5c58;
}

.zk-flow--animated .zk-field__input:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgb(10 10 10 / 0.08);
  outline: none;
}

.zk-flow--animated .zk-button--primary {
  position: relative;
  overflow: hidden;
}

.zk-flow--animated .zk-button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.zk-flow--animated .zk-button--primary:hover::after {
  transform: translateX(120%);
}

.zk-flow__summary {
  padding: 1rem 0 0.25rem;
  border-top: 1px solid rgb(0 0 0 / 0.08);
}

@keyframes zk-flow-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes zk-flow-stage {
  from { opacity: 0; transform: translateY(16px) scale(0.992); }
  to { opacity: 1; transform: none; }
}

@keyframes zk-flow-choice {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes zk-flow-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes zk-choice-select {
  0% {
    transform: scale(0.985);
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 rgb(10 10 10 / 0);
  }
  55% {
    transform: scale(1.018);
  }
  100% {
    transform: scale(1.01);
    box-shadow:
      inset 3px 0 0 #1a1a18,
      0 10px 24px rgb(10 10 10 / 0.07);
  }
}

@media (max-width: 639px) {
  .zk-fieldset--windows {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zk-flow--animated .zk-flow__title,
  .zk-flow--animated .zk-flow__lead,
  .zk-flow--animated .zk-steps,
  .zk-flow__stage,
  .zk-flow--animated .zk-choice,
  .zk-flow--animated .zk-field,
  .zk-flow--animated .zk-flow__summary,
  .zk-flow--animated .zk-check,
  .zk-flow--animated .zk-fieldset__legend,
  .zk-flow--animated .zk-flow__heading,
  .zk-steps__item[data-state="current"]::after {
    animation: none !important;
  }

  .zk-steps__fill {
    transition: none;
  }

  .zk-flow--animated .zk-choice:hover,
  .zk-flow--animated .zk-button--primary::after {
    transform: none;
  }

  .zk-choice:has(input:checked),
  .zk-flow--animated .zk-choice:has(input:checked) {
    animation: none !important;
    transform: none;
  }
}