/*!
 * Kinetic Apex — the public design system
 *
 * Tokens transcribed from the `tailwind-config` block the approved comps carry
 * in dev-doc/: pahang_1st_events_laman_utama_portal_sukan (landing),
 * senarai_acara_grid_list_directory (catalogue) and
 * perincian_acara_larian_pahang_1st (event detail). All three are one system,
 * so it is defined once here and the per-page sheets only lay out sections.
 *
 * Loaded by landing/layout.blade.php for every public page, immediately after
 * landing.css. landing.css is kept and untouched because checkout.css and
 * event-templates.css read two dozen `--myrun-*` tokens out of it — the "bold"
 * and "minimal" event designs (FR-205) are still the crimson ones, and only
 * "classic" was replaced by the comp.
 *
 * Contents
 *   1. Tokens          6. Badges, chips, pills
 *   2. Base            7. Forms
 *   3. Typography      8. Navbar
 *   4. Sections        9. Footer
 *   5. Buttons        10. Reveal & utilities
 */

/* ---------------------------------------------------------------------------
   1. Tokens — straight from the comps' tailwind-config
   ------------------------------------------------------------------------ */

:root {
    /* Surfaces, darkest first. The comps step between adjacent surfaces to
       separate an object from its ground; there is no border on a card
       anywhere in this design, and adding one breaks the language. */
    --ax-lowest: #050c25;
    --ax-surface: #0a122b;
    --ax-low: #131a33;
    --ax-container: #171e38;
    --ax-high: #222943;
    --ax-highest: #2d344e;
    --ax-bright: #313853;

    /* Ink, in descending emphasis. */
    --ax-on-surface: #dce1ff;
    --ax-on-variant: #bbc9cf;
    --ax-outline: #859399;

    /* Accent. `cyan` is the interactive colour and the only thing that glows;
       `blue` is the resting state of a primary action; `secondary` is the
       lavender used for a third-rank number. */
    --ax-primary: #a5e7ff;
    --ax-cyan: #00d2ff;
    --ax-on-cyan: #003543;
    --ax-blue: #0146e5;
    --ax-on-blue: #c6cfff;
    --ax-secondary: #b8c4ff;
    --ax-error: #ffb4ab;

    /* Type */
    --ax-display: "Oswald", "Hanken Grotesk", system-ui, sans-serif;
    --ax-body: "Manrope", "Work Sans", system-ui, sans-serif;

    /* Geometry */
    --ax-r: 8px;
    --ax-r-card: 12px;
    --ax-r-bento: 16px;
    --ax-r-pill: 9999px;

    --ax-container-w: 1280px;
    --ax-gutter: 32px;
    --ax-section-y: clamp(56px, 6vw, 88px);
    --ax-nav-h: 80px;

    /* Glow, never shadow, is the hover signal. */
    --ax-glow-cyan: 0 0 24px rgba(0, 210, 255, 0.4);
    --ax-glow-blue: 0 4px 16px rgba(1, 70, 229, 0.35);
    --ax-lift: 0 8px 24px rgba(0, 0, 0, 0.3);
    --ax-lift-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
}

@media (max-width: 991.98px) {
    :root {
        --ax-gutter: 20px;
        --ax-nav-h: 64px;
    }
}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */

body.landing {
    --bs-body-font-family: var(--ax-body);
    --bs-body-color: var(--ax-on-surface);
    --bs-body-bg: var(--ax-surface);
    --bs-border-color: var(--ax-highest);
    --bs-border-radius: var(--ax-r);
    --bs-link-color: var(--ax-primary);
    --bs-link-hover-color: var(--ax-cyan);
    --bs-emphasis-color: var(--ax-on-surface);

    background-color: var(--ax-surface);
    color: var(--ax-on-surface);
    font-family: var(--ax-body);
    -webkit-font-smoothing: antialiased;
}

/* The two FR-205 designs that were not replaced ("bold", "minimal") are still
   light-surface pages. They paint their own sections, but the body behind them
   has to stop being navy or their gutters go dark. The chrome stays dark
   either way — a dark bar and footer around a light page is the same shell,
   not a different one. */
body.landing.ax-surface-light {
    --bs-body-bg: var(--myrun-surface, #fcf9f8);
    --bs-body-color: var(--myrun-on-surface, #1c1b1b);

    background-color: var(--myrun-surface, #fcf9f8);
    color: var(--myrun-on-surface, #1c1b1b);
}

body.landing .container {
    max-width: calc(var(--ax-container-w) + (var(--ax-gutter) * 2));
    padding-inline: var(--ax-gutter);
}

body.landing ::selection {
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
}

/* One focus ring for every public page. Bootstrap's default is a crimson
   shadow that disappears against navy. */
body.landing a:focus-visible,
body.landing button:focus-visible,
body.landing input:focus-visible,
body.landing select:focus-visible,
body.landing textarea:focus-visible,
body.landing [tabindex]:focus-visible {
    outline: 2px solid var(--ax-cyan);
    outline-offset: 3px;
    box-shadow: none;
}

/* The fixed bar means an in-page anchor must stop short of its own heading. */
body.landing [id] {
    scroll-margin-top: calc(var(--ax-nav-h) + 16px);
}

/* ---------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------ */

body.landing h1,
body.landing h2,
body.landing h3,
body.landing h4 {
    font-family: var(--ax-display);
    color: var(--ax-on-surface);
}

.ax-display {
    font-family: var(--ax-display);
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    line-height: 1.07;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.ax-h1 {
    font-family: var(--ax-display);
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    line-height: 1.09;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}

.ax-h2 {
    font-family: var(--ax-display);
    font-size: clamp(1.5rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.ax-h3 {
    font-family: var(--ax-display);
    font-size: 1.375rem;
    line-height: 1.27;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.ax-h4 {
    font-family: var(--ax-display);
    font-size: 1.125rem;
    line-height: 1.33;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.ax-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ax-on-variant);
}

.ax-body {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ax-on-variant);
}

.ax-body-sm {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ax-on-variant);
}

/* The 10px all-caps label above every figure and beside every icon. Set in the
   body face: Oswald is condensed and stops being legible at this size. */
.ax-micro {
    display: block;
    font-family: var(--ax-body);
    font-size: 0.625rem;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ax-outline);
}

.ax-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--ax-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ax-primary);
}

/* The small square that leads a section eyebrow in every comp. */
.ax-eyebrow__mark {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--ax-cyan);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.ax-accent { color: var(--ax-cyan); }
.ax-upper { text-transform: uppercase; }

.ax-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ax-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ax-primary);
    text-decoration: none;
}

.ax-link:hover,
.ax-link:focus-visible { color: var(--ax-cyan); }

.ax-link .material-symbols-outlined {
    font-size: 1.125rem;
    transition: transform 0.2s ease;
}

.ax-link:hover .material-symbols-outlined { transform: translateX(4px); }

/* The breadcrumb above a catalogue or event-detail hero. Shared chrome: the
   catalogue and the classic event page both emit `.ax-crumbs`, so it lives
   here rather than in either page's own sheet — event-classic.css never
   loads landing-catalog.css, and a copy in each would drift. */
.ax-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ax-outline);
}

.ax-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--ax-highest);
}

.ax-crumbs a { color: var(--ax-primary); text-decoration: none; }
.ax-crumbs a:hover { color: var(--ax-cyan); }

/* ---------------------------------------------------------------------------
   4. Sections
   ------------------------------------------------------------------------ */

.ax-section {
    position: relative;
    padding-block: var(--ax-section-y);
}

/* Two rules hold the page together, and breaking either makes a card vanish
   into the band behind it. No two adjacent sections take the same step, and a
   section never takes the step its own cards sit on. */
.ax-section--surface { background: var(--ax-surface); }
.ax-section--low { background: var(--ax-low); }
.ax-section--lowest { background: var(--ax-lowest); }

.ax-section-head {
    max-width: 44rem;
    margin: 0 auto clamp(32px, 4vw, 56px);
    text-align: center;
}

.ax-section-head .ax-eyebrow { justify-content: center; }

/* Heading on the left, an action on the right. */
.ax-section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* The generic panel: everything in these comps that is not a photograph. */
.ax-card {
    border-radius: var(--ax-r-card);
    background: var(--ax-container);
}

.ax-card--low { background: var(--ax-low); }
.ax-card--high { background: var(--ax-high); }

/* ---------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------ */

.ax-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 0;
    border-radius: var(--ax-r);
    font-family: var(--ax-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ax-btn .material-symbols-outlined { font-size: 1.25rem; }

.ax-btn--block { width: 100%; }

.ax-btn--sm {
    padding: 9px 16px;
    font-size: 0.875rem;
    gap: 6px;
}

.ax-btn--sm .material-symbols-outlined { font-size: 1rem; }

.ax-btn--primary {
    background: var(--ax-blue);
    color: var(--ax-on-surface);
    box-shadow: var(--ax-glow-blue);
}

.ax-btn--primary:hover,
.ax-btn--primary:focus-visible {
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.ax-btn--cyan {
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
    box-shadow: var(--ax-glow-cyan);
}

.ax-btn--cyan:hover,
.ax-btn--cyan:focus-visible {
    background: var(--ax-primary);
    color: var(--ax-on-cyan);
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.6);
}

.ax-btn--ghost {
    background: rgba(23, 30, 56, 0.85);
    color: var(--ax-primary);
}

.ax-btn--ghost:hover,
.ax-btn--ghost:focus-visible {
    background: var(--ax-high);
    color: var(--ax-on-surface);
}

.ax-btn--outline {
    background: transparent;
    color: var(--ax-primary);
    box-shadow: inset 0 0 0 1px var(--ax-highest);
}

.ax-btn--outline:hover,
.ax-btn--outline:focus-visible {
    background: var(--ax-high);
    color: var(--ax-on-surface);
    box-shadow: inset 0 0 0 1px var(--ax-cyan);
}

.ax-btn[aria-disabled="true"],
.ax-btn:disabled {
    background: var(--ax-high);
    color: var(--ax-outline);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   6. Badges, chips, pills
   ------------------------------------------------------------------------ */

.ax-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: var(--ax-body);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ax-badge--cyan { background: var(--ax-cyan); color: var(--ax-on-cyan); }
.ax-badge--blue { background: var(--ax-blue); color: var(--ax-on-surface); box-shadow: 0 0 12px rgba(1, 70, 229, 0.8); }
.ax-badge--glass { background: rgba(5, 12, 37, 0.8); backdrop-filter: blur(6px); color: var(--ax-primary); }
.ax-badge--muted { background: var(--ax-highest); color: var(--ax-primary); }
.ax-badge--warn { background: var(--ax-high); color: var(--ax-cyan); }
.ax-badge--live { background: var(--ax-cyan); color: var(--ax-on-cyan); box-shadow: 0 0 14px rgba(0, 210, 255, 0.7); }

/* Rounded status chip with a pulsing dot — the comp's hero and spotlight. */
.ax-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 16px;
    border-radius: var(--ax-r-pill);
    background: rgba(23, 30, 56, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ax-primary);
}

.ax-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ax-cyan);
    box-shadow: 0 0 8px var(--ax-cyan);
    animation: ax-pulse 2s ease-in-out infinite;
}

@keyframes ax-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* A flat label — the endorsement pills, the package chips on a card. */
.ax-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--ax-container);
    color: var(--ax-primary);
    font-family: var(--ax-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ax-tag {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--ax-blue);
    color: var(--ax-on-surface);
    font-family: var(--ax-body);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The icon plate that leads a feature or category card. */
.ax-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ax-r);
    background: var(--ax-low);
    color: var(--ax-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.ax-plate .material-symbols-outlined { font-size: 2rem; }

.ax-plate--sm { width: 40px; height: 40px; }
.ax-plate--sm .material-symbols-outlined { font-size: 1.375rem; }

/* ---------------------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------------------ */

.ax-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--ax-r);
    background: var(--ax-low);
    color: var(--ax-outline);
}

.ax-field:focus-within { box-shadow: inset 0 0 0 1px var(--ax-cyan); }

.ax-field .material-symbols-outlined { font-size: 1.25rem; }

.ax-input,
.ax-select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ax-on-surface);
    font-family: var(--ax-body);
    font-size: 0.9375rem;
}

.ax-input::placeholder { color: var(--ax-outline); }
.ax-input:focus,
.ax-select:focus { outline: none; }

.ax-select {
    appearance: none;
    cursor: pointer;
    padding-right: 4px;
}

/* A native option list paints in the OS palette, so it has to be told. */
.ax-select option {
    background: var(--ax-high);
    color: var(--ax-on-surface);
}

/* ---------------------------------------------------------------------------
   8. Navbar
   ------------------------------------------------------------------------ */

.ax-nav {
    --bs-navbar-padding-y: 0;
    min-height: var(--ax-nav-h);
    background: rgba(10, 18, 43, 0.85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(220, 225, 255, 0.08);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.ax-nav.is-stuck {
    background: rgba(5, 12, 37, 0.94);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ax-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--ax-nav-h);
}

.ax-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto;
}

.ax-nav__logo {
    display: block;
    height: 30px;
    width: auto;
}

.ax-nav__lockup {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ax-nav__name {
    font-family: var(--ax-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ax-on-surface);
}

.ax-nav__tagline {
    font-family: var(--ax-body);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ax-primary);
}

.ax-nav__links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.ax-nav .nav-link {
    font-family: var(--ax-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ax-on-variant);
    padding-inline: 12px;
    white-space: nowrap;
}

.ax-nav .nav-link:hover,
.ax-nav .nav-link:focus-visible { color: var(--ax-on-surface); }

/* The comp marks the current section with the accent and a cyan halo, not a
   rule under the label. */
.ax-nav .nav-link.active {
    color: var(--ax-primary);
    font-weight: 800;
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.45);
}

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

.ax-nav__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ax-r);
    background: var(--ax-low);
    color: var(--ax-on-variant);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ax-nav__icon .material-symbols-outlined { font-size: 1.25rem; }

.ax-nav__icon:hover,
.ax-nav__icon:focus-visible {
    background: var(--ax-container);
    color: var(--ax-cyan);
}

/* How many tickets are waiting (FR-302), pinned to the button's corner. */
.ax-nav__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ax-r-pill);
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
    font-family: var(--ax-body);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    /* Rings the badge in whatever the bar is sitting on, so the pill reads as a
       separate object rather than a bite out of the button. */
    box-shadow: 0 0 0 2px var(--ax-surface), 0 0 8px rgba(0, 210, 255, 0.8);
    pointer-events: none;
}

.ax-nav__icon:hover .ax-nav__count,
.ax-nav__icon:focus-visible .ax-nav__count {
    box-shadow: 0 0 0 2px var(--ax-container), 0 0 8px rgba(0, 210, 255, 0.8);
}

.ax-nav__cta { padding: 11px 20px; font-size: 1rem; }

.ax-nav__toggler {
    border-radius: var(--ax-r);
    border-color: rgba(220, 225, 255, 0.2);
    color: var(--ax-on-surface);
}

.ax-nav__toggler:focus { box-shadow: none; }

@media (max-width: 1199.98px) {
    .ax-nav__tagline { display: none; }
    .ax-nav .nav-link { padding-inline: 8px; letter-spacing: 0.08em; }
}

@media (max-width: 991.98px) {
    .ax-nav__collapse {
        background: var(--ax-lowest);
        border-radius: var(--ax-r-card);
        margin-top: 12px;
        padding: 16px;
    }

    .ax-nav__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin: 0 0 16px;
        width: 100%;
    }

    .ax-nav .nav-link { padding-inline: 0; font-size: 0.875rem; }

    .ax-nav__actions { flex-wrap: wrap; }
    .ax-nav__cta { flex: 1 1 auto; }
    .ax-nav__logo { height: 22px; }
    .ax-nav__name { font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------------ */

.ax-footer {
    background: var(--ax-lowest);
    color: var(--ax-on-variant);
    padding-block: clamp(40px, 5vw, 64px) 24px;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.3);
}

.ax-footer__top { margin-bottom: 32px; }

.ax-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ax-footer__logo { height: 28px; width: auto; }

.ax-footer__name {
    font-family: var(--ax-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-on-surface);
}

.ax-footer__blurb {
    max-width: 28rem;
    margin-bottom: 16px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ax-on-variant);
}

.ax-footer__blurb--tight { margin-bottom: 12px; }

.ax-footer__sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ax-footer__sponsors .ax-micro { display: inline-block; }

.ax-footer__social {
    display: flex;
    gap: 8px;
}

.ax-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ax-r);
    background: var(--ax-container);
    color: var(--ax-on-variant);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ax-footer__social a:hover,
.ax-footer__social a:focus-visible {
    background: var(--ax-high);
    color: var(--ax-cyan);
}

.ax-footer__heading {
    margin-bottom: 16px;
    font-family: var(--ax-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-primary);
}

.ax-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ax-footer__links li + li { margin-top: 10px; }

.ax-footer__links a {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ax-on-variant);
    text-decoration: none;
}

.ax-footer__links a:hover,
.ax-footer__links a:focus-visible { color: var(--ax-cyan); }

.ax-subscribe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ax-subscribe__input {
    flex: 1 1 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--ax-r);
    background: var(--ax-container);
    color: var(--ax-on-surface);
    font-family: var(--ax-body);
    font-size: 0.875rem;
}

.ax-subscribe__input::placeholder { color: var(--ax-outline); }

.ax-subscribe__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--ax-cyan);
}

.ax-subscribe__input.is-invalid { box-shadow: inset 0 0 0 1px var(--ax-error); }

.ax-subscribe__submit { flex: 1 1 100%; }

.ax-subscribe__note {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.ax-subscribe__note--error { color: var(--ax-error); }
.ax-subscribe__note--ok { color: var(--ax-cyan); }

.ax-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(220, 225, 255, 0.08);
}

.ax-footer__legal,
.ax-footer__follow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--ax-outline);
}

.ax-footer__legal .material-symbols-outlined {
    font-size: 1rem;
    color: var(--ax-primary);
}

.ax-footer__follow a {
    color: var(--ax-primary);
    text-decoration: none;
    font-weight: 700;
}

.ax-footer__follow a:hover { color: var(--ax-cyan); }

/* ---------------------------------------------------------------------------
   10. Reveal & utilities
   ------------------------------------------------------------------------ */

/* Progressive enhancement: `.js` is set on <html> by an inline head script, and
   landing.js drops it again when the visitor has asked for reduced motion or
   the browser has no IntersectionObserver. Without it nothing here applies and
   every section is simply visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .ax-dot { animation: none; }
}

.ax-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
    font-weight: 700;
    text-decoration: none;
}

.ax-skip:focus {
    left: 16px;
    top: 16px;
}

/* ---------------------------------------------------------------------------
   11. Race card, filter pills, callout — shared by the landing grid and the
       catalogue, which draw the same card in both comps.
   ------------------------------------------------------------------------ */

.ax-race {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--ax-r-card);
    overflow: hidden;
    background: var(--ax-low);
    box-shadow: var(--ax-lift);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ax-race:hover,
.ax-race:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .ax-race { transition: none; }
    .ax-race:hover { transform: none; }
}

.ax-race__media {
    position: relative;
    height: 180px;
    background-color: var(--ax-container);
    background-size: cover;
    background-position: center;
}

/* No hero upload (FR-205): the comp's photo slot becomes the same wash the
   hero uses, so the card still reads as a race rather than a gap. */
.ax-race__media--blank {
    background-image:
        radial-gradient(110% 90% at 70% 15%, rgba(0, 210, 255, 0.3) 0%, rgba(1, 70, 229, 0) 62%),
        linear-gradient(148deg, #222943 0%, #131a33 60%, #050c25 100%);
}

.ax-race__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ax-low) 0%, rgba(5, 12, 37, 0.1) 52%, rgba(0, 0, 0, 0.45) 100%);
}

.ax-race__badge {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ax-race__badge--end {
    left: auto;
    right: 12px;
    max-width: 52%;
}

.ax-race__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
}

.ax-race__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 8px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ax-primary);
}

.ax-race__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ax-race__meta .material-symbols-outlined { font-size: 0.9375rem; }

.ax-race__discipline {
    margin: 0 0 4px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ax-outline);
}

.ax-race__title {
    margin: 0 0 8px;
    font-family: var(--ax-display);
    font-size: 1.3125rem;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ax-race__title a { color: inherit; text-decoration: none; }

.ax-race__title a:hover,
.ax-race__title a:focus-visible { color: var(--ax-cyan); }

.ax-race__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ax-on-variant);
}

.ax-race__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
}

.ax-race__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ax-race__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--ax-container);
}

.ax-race__price .ax-micro { display: inline-block; }

.ax-race__price strong {
    font-family: var(--ax-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ax-on-surface);
}

.ax-race .ax-btn {
    padding-block: 11px;
    font-size: 0.9375rem;
    box-shadow: none;
}

/* Filter pills */
.ax-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ax-pills__item {
    padding: 7px 14px;
    border-radius: var(--ax-r-pill);
    background: var(--ax-high);
    color: var(--ax-on-variant);
    font-family: var(--ax-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ax-pills__item:hover,
.ax-pills__item:focus-visible {
    background: var(--ax-highest);
    color: var(--ax-on-surface);
}

.ax-pills__item.is-active {
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

/* The bordered strip that offers the full calendar. */
.ax-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(24px, 3vw, 40px);
    padding: 18px 24px;
    border-radius: var(--ax-r-card);
    background: var(--ax-low);
}

.ax-callout__copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ax-on-variant);
}

.ax-callout__copy strong {
    display: block;
    font-family: var(--ax-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ax-on-surface);
}

.ax-callout__copy .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1.375rem;
    color: var(--ax-cyan);
}