/* =========================================================
   JALEN TRADES — design system v0
   Brand: practitioner-honest, dark-trading-aesthetic, no generic SaaS
   Type: Space Grotesk (display) + JetBrains Mono (data) + system stack (body)
   Color: ink + bone + edge orange (Jalen Range warm tone)
   ========================================================= */

/* Skip-to-main link (keyboard accessibility) */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: var(--space-3) var(--space-5);
    background: var(--edge);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
}

.skip-to-main:focus {
    top: 0;
    outline: 2px solid var(--bone);
    outline-offset: 2px;
}

:root {
    /* Color system */
    --ink: #0a0a0a;              /* deep background */
    --ink-2: #111111;            /* slightly elevated surface */
    --ink-3: #181818;            /* card surface */
    --ink-4: #232323;            /* hover surface */
    --line: #2a2a2a;             /* hairline borders */
    --line-2: #3a3a3a;           /* stronger border */

    --bone: #fafaf7;             /* primary text — slightly warm white */
    --bone-2: #c8c5be;           /* secondary text */
    --bone-3: #8a877f;           /* tertiary text / hints */
    --bone-4: #807d76;           /* subtle text — was #555149 (2.5:1, failed WCAG AA); lightened to ~4.8:1 on --ink, still dimmer than --bone-3 */

    --edge: #ff6a2c;             /* primary accent — Jalen Range warm orange */
    --edge-soft: rgba(255, 106, 44, 0.12);
    --edge-glow: rgba(255, 106, 44, 0.25);

    --win: #4ade80;              /* profit / firing */
    --loss: #f87171;             /* loss / risk disclosure */
    --neutral: #a1a1aa;          /* na / hold */

    /* Type scale */
    --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-base: 1rem;
    --t-md: 1.125rem;
    --t-lg: 1.25rem;
    --t-xl: 1.5rem;
    --t-2xl: 2rem;
    --t-3xl: 2.5rem;
    --t-4xl: 3.5rem;
    --t-display: clamp(2.75rem, 6vw, 5.5rem);
    --t-section: clamp(1.75rem, 3.5vw, 2.75rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Radii */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 24px;

    /* Layout */
    --container: 1200px;
    --container-narrow: 880px;
}

* {
    box-sizing: border-box;
}

*::selection {
    background: var(--edge);
    color: var(--ink);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: var(--edge-soft);
    /* Stop iOS Safari from auto-zooming the text when rotated. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.6;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11";
}

a {
    color: var(--bone);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
    color: var(--edge);
    text-decoration-color: var(--edge);
}

a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--edge);
    outline-offset: 2px;
    color: var(--edge);
    text-decoration-color: var(--edge);
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    line-height: 1.1;
}

p {
    margin: 0 0 var(--space-4);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

@media (min-width: 768px) {
    .container { padding: 0 var(--space-7); }
}

/* =========================================================
   NAV
   ========================================================= */

.nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--bone);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-md);
    letter-spacing: -0.01em;
}

.nav__brand:hover {
    color: var(--bone);
}

.nav__brand-mark {
    color: var(--edge);
    font-size: 1.1em;
    transform: translateY(-1px);
}

.nav__links {
    order: 2;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 0 var(--space-1);
    scrollbar-width: none;
    /* Soft fade on the right edge cues the user that the horizontal-
       scroll nav has more items to swipe to. mask-image gradient is
       supported in all modern browsers; falls back to no fade in older
       browsers (still functional). The fade is only applied at narrow
       viewports — on desktop (>= 860px) the nav has visible: visible
       and full width, so the mask is removed there. */
    mask-image: linear-gradient(
        to right,
        black 0,
        black calc(100% - 28px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        black 0,
        black calc(100% - 28px),
        transparent 100%
    );
}

.nav__links::-webkit-scrollbar {
    display: none;
}

@media (min-width: 860px) {
    .nav__inner {
        flex-wrap: nowrap;
        gap: var(--space-6);
    }

    .nav__links {
        order: 0;
        /* Constrain the links row to the available middle space so an
           overcrowded nav scrolls within its own strip instead of widening
           the whole page (horizontal page scroll). Fixes overflow at common
           laptop widths (1280-1440) where 13-14 items no longer fit on one
           row. When items DO fit (>= ~1440px) this renders identically to a
           static inline nav; the right-edge fade only shows when overflowing. */
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        /* Tighter desktop gap so the full link set fits at common laptop
           widths (1280-1440) without needing to scroll; the overflow-x net
           above only engages on genuinely narrow desktop widths. */
        gap: var(--space-4);
        padding: 0;
        /* The CTA is pinned (below) as the right-edge treatment, so the
           narrow-viewport fade mask is not needed here. */
        mask-image: none;
        -webkit-mask-image: none;
    }

    /* Brand + CTA must hold their size; only the links strip flexes/scrolls. */
    .nav__brand,
    .nav__cta {
        flex-shrink: 0;
    }

    /* Keep the primary conversion CTA pinned to the visible right edge so it
       never scrolls out of view when a crowded nav overflows on narrow
       desktop widths. Links scroll underneath its opaque background. */
    .nav__cta {
        position: sticky;
        right: 0;
    }
}

.nav__links a {
    color: var(--bone-2);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
}

.nav__links a:hover {
    color: var(--bone);
}

.nav__links a:focus {
    outline: none;
}

.nav__links a:focus-visible {
    outline: 2px solid var(--edge);
    outline-offset: 2px;
    color: var(--bone);
}

.nav__cta {
    background: var(--edge);
    color: var(--ink) !important;
    padding: 8px 14px;
    border-radius: var(--r-md);
    font-weight: 600;
    transition: background 120ms ease, transform 120ms ease;
}

.nav__cta:hover {
    background: #ff8252;
    color: var(--ink) !important;
    transform: translateY(-1px);
}

.mobile-action-bar {
    display: none;
}

@media (max-width: 859px) {
    .nav__inner {
        gap: var(--space-2);
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .nav__links {
        gap: var(--space-3);
        scroll-padding-inline: var(--space-5);
    }

    .nav__links a {
        padding: 9px 0;
    }

    .nav__cta {
        order: -1;
        min-width: 112px;
        justify-content: center;
        padding: 8px 12px;
    }
}

@media (max-width: 719px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .mobile-action-bar {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
        z-index: 60;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-3);
        align-items: center;
        padding: 9px 10px 9px 14px;
        border: 1px solid rgba(255, 106, 44, 0.34);
        border-radius: var(--r-md);
        background: rgba(10, 10, 10, 0.94);
        box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-action-bar span {
        color: var(--bone-2);
        font-family: var(--font-mono);
        font-size: var(--t-xs);
        font-weight: 700;
        min-width: 0;
        text-transform: uppercase;
    }

    .mobile-action-bar a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--space-4);
        border-radius: var(--r-sm);
        background: var(--edge);
        color: var(--ink);
        font-family: var(--font-display);
        font-size: var(--t-sm);
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 6px 18px -6px rgba(255, 106, 44, 0.55);
        transition: transform 120ms ease, box-shadow 160ms ease;
    }

    .mobile-action-bar a:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -6px rgba(255, 106, 44, 0.7);
    }

    .mobile-action-bar a:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px -6px rgba(255, 106, 44, 0.55);
    }

    .mobile-action-bar a:focus-visible {
        outline: 2px solid var(--bone);
        outline-offset: 2px;
        color: var(--ink);
    }

    .nav.is-open + .mobile-action-bar {
        display: none;
    }
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-9) 0 var(--space-10);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
    .hero { padding: var(--space-10) 0 calc(var(--space-10) + 2rem); }
}

.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(255, 106, 44, 0.12), transparent 60%),
        radial-gradient(40% 40% at 10% 100%, rgba(255, 106, 44, 0.05), transparent 70%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(255, 255, 255, 0.015) 39px,
            rgba(255, 255, 255, 0.015) 40px
        );
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-narrow);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px 6px 10px;
    background: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--bone-2);
    margin-bottom: var(--space-6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hero__badge-dot {
    width: 7px;
    height: 7px;
    background: var(--edge);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--edge-soft);
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--edge-soft); }
    50% { box-shadow: 0 0 0 8px rgba(255, 106, 44, 0); }
}

.hero__title {
    font-size: var(--t-display);
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-6);
    font-weight: 700;
}

.hero__title--accent {
    color: var(--edge);
    font-style: italic;
    font-weight: 500;
}

.hero__lede {
    font-size: clamp(var(--t-md), 1.6vw, var(--t-xl));
    color: var(--bone-2);
    line-height: 1.5;
    max-width: 680px;
    margin-bottom: var(--space-7);
}

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

.hero__decision-note {
    max-width: 560px;
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 var(--space-5);
    text-transform: uppercase;
}

.hero__quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.hero__quick a {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.hero__quick a:hover {
    border-color: var(--edge);
    color: var(--edge);
    text-decoration: none;
}

/* Hero quick-shortcuts mobile polish: bump legibility (12→13px),
   tighten letter-spacing for the mono font, and lift the last two
   chips (Funded Firm Radar + Preview Access) as the highest-intent
   secondary actions. */
@media (max-width: 859px) {
    .hero__quick a {
        font-size: 13px;
        letter-spacing: 0.04em;
        padding: 12px 8px;
    }

    .hero__quick a:nth-last-child(-n+2) {
        border-color: rgba(255, 106, 44, 0.4);
        color: var(--bone);
        background: rgba(255, 106, 44, 0.06);
    }

    .hero__quick a:nth-last-child(-n+2):hover {
        background: rgba(255, 106, 44, 0.12);
        border-color: var(--edge);
        color: var(--edge);
    }
}

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
}

.hero__proof span {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    padding: 6px 10px;
    text-transform: uppercase;
}

@media (min-width: 720px) {
    .hero__actions { margin-bottom: var(--space-4); }
    .hero__quick { display: none; }
}

.hero__sub {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
    .hero__sub { grid-template-columns: repeat(4, 1fr); }
}

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

.kpi__num {
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    font-weight: 500;
    color: var(--bone);
    letter-spacing: -0.02em;
}

.kpi__label {
    font-size: var(--t-xs);
    color: var(--bone-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-sm);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
    letter-spacing: -0.005em;
}

.btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--edge);
    outline-offset: 2px;
}

.btn--primary {
    background: var(--edge);
    color: var(--ink);
    border-color: var(--edge);
    box-shadow: 0 0 0 0 var(--edge-glow), 0 8px 24px -10px rgba(255, 106, 44, 0.4);
}

.btn--primary:hover {
    background: #ff8252;
    color: var(--ink);
    box-shadow: 0 0 0 4px var(--edge-soft), 0 10px 30px -10px rgba(255, 106, 44, 0.55);
}

.btn--primary:focus-visible {
    box-shadow: 0 0 0 4px var(--edge-soft), 0 10px 30px -10px rgba(255, 106, 44, 0.55);
}

.btn--ghost {
    background: transparent;
    color: var(--bone);
    border-color: var(--line-2);
}

.btn--ghost:hover {
    border-color: var(--edge);
    color: var(--edge);
}

.btn--ghost:focus-visible {
    border-color: var(--edge);
    color: var(--edge);
}

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

.checkout-readiness {
    border: 1px solid var(--edge);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--edge-soft), var(--ink-3));
    box-shadow: 0 0 0 1px var(--edge-glow);
    margin: 0 0 var(--space-6);
    padding: var(--space-5);
}

.checkout-readiness__eyebrow {
    color: var(--edge);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.checkout-readiness__title {
    color: var(--bone);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.checkout-readiness__body {
    color: var(--bone-2);
    margin-bottom: 0;
}

.checkout-paused,
.checkout-paused:hover {
    background: var(--ink-4);
    border-color: var(--line-2);
    color: var(--bone-3);
    cursor: not-allowed;
    text-decoration: none;
}

.btn--lg {
    padding: 18px 28px;
    font-size: var(--t-base);
}

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding: var(--space-9) 0;
    border-bottom: 1px solid var(--line);
}

.section--soft {
    background: var(--ink-2);
}

.section--cta {
    background:
        radial-gradient(60% 60% at 50% 0%, var(--edge-soft), transparent 60%),
        var(--ink);
}

.section__head {
    margin-bottom: var(--space-8);
    max-width: 720px;
}

.section__head--split {
    display: grid;
    gap: var(--space-5);
    align-items: end;
    max-width: none;
}

@media (min-width: 880px) {
    .section__head--split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.section__title {
    font-size: var(--t-section);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--bone);
}

.section__intro {
    font-size: var(--t-md);
    color: var(--bone-2);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 0;
}

.section__footnote {
    margin-top: var(--space-7);
    color: var(--bone-2);
    font-size: var(--t-sm);
    font-family: var(--font-mono);
    line-height: 1.7;
}

.section__cta {
    margin-top: var(--space-7);
    color: var(--bone-2);
    font-size: var(--t-md);
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bone-3);
    margin-bottom: var(--space-3);
}

.eyebrow--accent {
    color: var(--edge);
}

/* =========================================================
   THREE-UP CARDS
   ========================================================= */

.three-up {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 880px) {
    .three-up { grid-template-columns: repeat(3, 1fr); }
}

.card {
    background: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color 200ms ease, transform 200ms ease;
}

.card:hover {
    border-color: var(--line-2);
    transform: translateY(-2px);
}

.card--accent {
    border-color: var(--edge);
    background: linear-gradient(180deg, var(--edge-soft), var(--ink-3) 30%);
}

.card--accent:hover {
    border-color: var(--edge);
    box-shadow: 0 0 0 1px var(--edge-glow), 0 24px 48px -24px rgba(255, 106, 44, 0.3);
}

.card__num {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--edge);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.card__title {
    font-size: var(--t-xl);
    margin-bottom: var(--space-2);
    line-height: 1.15;
}

.card__body {
    color: var(--bone-2);
    flex-grow: 1;
    margin-bottom: var(--space-4);
}

.card__detail {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--bone-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    margin-bottom: 0;
}

/* =========================================================
   COMMUNITY OPERATING SYSTEM
   ========================================================= */

.community-system {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 760px) {
    .community-system {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.community-card {
    min-height: 260px;
    background:
        linear-gradient(180deg, rgba(250, 250, 247, 0.035), transparent 42%),
        var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
}

.community-card--accent {
    border-color: var(--edge);
    background:
        linear-gradient(180deg, var(--edge-soft), transparent 46%),
        var(--ink-2);
}

.community-card__kicker {
    width: fit-content;
    color: var(--edge);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 5px 8px;
}

.community-card h3 {
    font-size: var(--t-xl);
    margin-bottom: var(--space-3);
}

.community-card p {
    color: var(--bone-2);
    margin-bottom: 0;
}

.community-flow {
    margin-top: var(--space-6);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    background: var(--ink-3);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
}

@media (min-width: 820px) {
    .community-flow {
        grid-template-columns: 1fr auto;
        padding: var(--space-6);
    }
}

.community-flow p {
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    line-height: 1.7;
    margin: var(--space-2) 0 0;
}

.community-flow__label {
    color: var(--bone);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
}

.community-flow__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* =========================================================
   LAYERS (5-layer framework list)
   ========================================================= */

.layers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}

.layer {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--ink-2);
    transition: background 160ms ease;
}

.layer:hover {
    background: var(--ink-3);
}

/* Mobile: stack number above the body so the body gets the full
   container width. The 80px fixed first-column at 327px viewport
   leaves only ~175px for body copy, which causes layer body to
   wrap awkwardly and (previously) overflow the clip container. */
@media (max-width: 559px) {
    .layer {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-5);
    }

    .layer__num {
        font-size: var(--t-lg);
        line-height: 1;
    }
}

@media (min-width: 720px) {
    .layer {
        grid-template-columns: 100px 1fr;
        padding: var(--space-6) var(--space-7);
    }
}

.layer__num {
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    font-weight: 500;
    color: var(--edge);
    letter-spacing: -0.02em;
}

.layer__title {
    font-size: var(--t-lg);
    margin-bottom: var(--space-2);
    color: var(--bone);
}

.layer__body p {
    color: var(--bone-2);
    margin-bottom: 0;
}

/* =========================================================
   CASE STUDIES
   ========================================================= */

.cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 880px) {
    .cases { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.case {
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.case:hover {
    border-color: var(--line-2);
}

.case__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.case__date {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--bone-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case__tag {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    letter-spacing: 0.04em;
}

.case__tag--win {
    background: rgba(74, 222, 128, 0.12);
    color: var(--win);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.case__title {
    font-size: var(--t-2xl);
    line-height: 1.1;
    margin-bottom: var(--space-3);
    color: var(--bone);
}

.case__sub {
    color: var(--bone-2);
    margin-bottom: var(--space-5);
    line-height: 1.55;
}

.case__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--space-3);
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
}

.case__stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.case__stats dt {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--bone-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.case__stats dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--bone);
}

.num--win { color: var(--win) !important; }
.num--loss { color: var(--loss) !important; }

.case__note {
    color: var(--bone-3);
    font-size: var(--t-sm);
    line-height: 1.6;
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.case__cta {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
}

.case__cta a {
    color: var(--edge);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 120ms ease, transform 120ms ease;
    display: inline-block;
}

.case__cta a:hover {
    color: #ff8252;
    transform: translateX(2px);
}

/* =========================================================
   PRICING TIERS
   ========================================================= */

.tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.pricing-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    max-width: 760px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4);
    border: 1px solid rgba(255, 106, 44, 0.28);
    border-radius: var(--r-md);
    background: rgba(255, 106, 44, 0.06);
}

.pricing-path span {
    color: var(--edge);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-path p {
    color: var(--bone-2);
    margin: 0;
}

.pricing-path a {
    color: var(--bone);
    font-weight: 700;
}

@media (min-width: 760px) {
    .pricing-path {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media (min-width: 720px) {
    .tiers { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .tiers { grid-template-columns: repeat(4, 1fr); }
}

.tier {
    position: relative;
    background: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.tier--featured {
    border-color: var(--edge);
    background: linear-gradient(180deg, var(--edge-soft), var(--ink-3) 25%);
    box-shadow: 0 0 0 1px var(--edge-glow);
}

.tier--apex {
    border-color: var(--bone-4);
    background: linear-gradient(180deg, rgba(250, 250, 247, 0.04), var(--ink-3) 25%);
}

.tier__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--edge);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--r-sm);
}

.tier header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.tier__name {
    font-size: var(--t-lg);
    margin-bottom: var(--space-3);
    color: var(--bone);
}

.tier__price {
    margin: 0 0 var(--space-3);
    line-height: 1;
}

.tier__amount {
    font-family: var(--font-mono);
    font-size: var(--t-3xl);
    font-weight: 700;
    color: var(--bone);
    letter-spacing: -0.03em;
}

.tier__period {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--bone-3);
    margin-left: var(--space-2);
    letter-spacing: 0.02em;
}

.tier__desc {
    font-size: var(--t-sm);
    color: var(--bone-2);
    margin: 0;
}

.tier__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-grow: 1;
}

.tier__features li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--t-sm);
    color: var(--bone-2);
    line-height: 1.5;
}

.tier__features li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    color: var(--edge);
    font-weight: 700;
}

/* =========================================================
   FOUNDER
   ========================================================= */

.founder {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

@media (min-width: 880px) {
    .founder { grid-template-columns: 1fr 2fr; gap: var(--space-8); }
}

.founder__intro .section__title {
    font-size: var(--t-2xl);
}

.founder__body p {
    color: var(--bone-2);
    font-size: var(--t-md);
    line-height: 1.75;
}

.founder__signoff {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--bone) !important;
    margin-top: var(--space-5) !important;
}

/* =========================================================
   CONSTRAINTS
   ========================================================= */

.constraints {
    list-style: none;
    padding: 0;
    margin: var(--space-7) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-width: 720px;
}

.constraints li {
    background: var(--ink-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--edge);
    border-radius: var(--r-md);
    padding: var(--space-4) var(--space-5);
    color: var(--bone-2);
    line-height: 1.55;
}

.constraints strong {
    color: var(--bone);
    font-weight: 600;
}

/* =========================================================
   CTA / WAITLIST FORM
   ========================================================= */

.cta {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
}

.cta__title {
    font-size: var(--t-section);
    line-height: 1.1;
    margin-bottom: var(--space-5);
    letter-spacing: -0.025em;
}

.cta__lede {
    color: var(--bone-2);
    font-size: var(--t-md);
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto var(--space-7);
}

.form {
    background: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}

.form__summary {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(255, 106, 44, 0.22);
    border-radius: var(--r-md);
    background: rgba(255, 106, 44, 0.06);
    color: var(--bone-2);
    font-size: var(--t-sm);
    line-height: 1.45;
}

@media (min-width: 720px) {
    .form { padding: var(--space-7); }
}

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

.form__row--two {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form__row--two { grid-template-columns: 1fr 1fr; }
}

.form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form__label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--bone-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form__field input,
.form__field select,
.form__field textarea {
    background: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: var(--t-base);
    padding: 12px 14px;
    transition: border-color 140ms ease, background 140ms ease;
    font-feature-settings: inherit;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
    outline: none;
    border-color: var(--edge);
    background: var(--ink-2);
    box-shadow: 0 0 0 3px var(--edge-soft);
}

.form__field textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-body);
}

.form__fineprint {
    font-size: var(--t-xs);
    color: var(--bone-3);
    text-align: center;
    margin: var(--space-2) 0 0;
}

.form__fallback {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--bone-2);
    font-size: var(--t-sm);
    line-height: 1.5;
    text-align: center;
}

.form__fallback a {
    color: var(--edge);
}

.form__status {
    margin: var(--space-3) 0 0;
    color: var(--bone-2);
    font-size: var(--t-sm);
    text-align: center;
}

.form__status[data-state="success"] {
    color: var(--win);
}

.form__status[data-state="error"] {
    color: var(--loss);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: var(--space-8) 0 var(--space-7);
    color: var(--bone-3);
    font-size: var(--t-sm);
}

@media (max-width: 639px) {
    .footer {
        padding: var(--space-6) 0 calc(var(--space-5) + 68px);
    }
    .footer__inner {
        gap: var(--space-5);
    }
}

.footer__back-to-top {
    display: none;
}

@media (max-width: 859px) {
    .footer__back-to-top {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: var(--space-4) 0 0;
        padding: 10px 14px;
        min-height: 44px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-md);
        background: transparent;
        color: var(--bone-2);
        font-family: var(--font-mono);
        font-size: var(--t-xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        cursor: pointer;
        text-decoration: none;
        transition: border-color 120ms ease, color 120ms ease;
    }
    .footer__back-to-top:hover,
    .footer__back-to-top:focus-visible {
        border-color: var(--edge);
        color: var(--bone);
    }
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 720px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr 2fr;
        gap: var(--space-8);
    }
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__mark {
    color: var(--edge);
    font-size: var(--t-xl);
}

.footer__name {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--bone);
}

.footer__tag {
    font-size: var(--t-sm);
    color: var(--bone-3);
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    align-self: flex-start;
}

.footer__links a {
    color: var(--bone-2);
    text-decoration: none;
    font-size: var(--t-sm);
}

.footer__links a:hover {
    color: var(--edge);
}

.footer__links a:focus {
    outline: none;
}

.footer__links a:focus-visible {
    outline: 2px solid var(--edge);
    outline-offset: 2px;
    color: var(--edge);
}

.footer__legal p {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--bone-3);
    margin-bottom: var(--space-3);
}

.footer__legal strong {
    color: var(--bone-2);
    font-weight: 500;
}

.footer__copy {
    margin-top: var(--space-4) !important;
    font-family: var(--font-mono);
    font-size: var(--t-xs) !important;
    color: var(--bone-2) !important;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   MOBILE UX REFINEMENTS — 2026-05-16
   CSS-only; no HTML/copy/pricing changes. Targets narrow
   viewports (<860px) where current design has touch-target
   + section-padding + nav-affordance gaps.
   ========================================================= */

/* Touch-target bump for nav links + hero quick-shortcuts.
   44px is the cross-platform standard (Apple HIG / Material). */
@media (max-width: 859px) {
    .nav__links a {
        padding: 10px 0 12px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .nav__cta {
        min-height: 44px;
        min-width: 112px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
    }

    .hero__quick a {
        padding: 14px 8px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Nav scroll affordance — gradient fade on the right edge tells
   the user the horizontally-scrolling link row extends past the
   visible area. Sits inside the .nav so it scrolls with the page
   and disappears on wider screens. */
@media (max-width: 859px) {
    .nav__inner {
        position: relative;
    }

    .nav__inner::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 12px;
        width: 28px;
        height: 36px;
        pointer-events: none;
        background: linear-gradient(
            to right,
            transparent,
            rgba(10, 10, 10, 0.85) 85%
        );
        z-index: 1;
    }
}

/* Reduce hero + section vertical padding on narrow viewports.
   --space-9 / --space-10 = 6rem / 8rem ≈ 96-128px is generous
   for desktop but eats viewport on phones. Compress to
   --space-7 / --space-8 = 3rem / 4rem ≈ 48-64px under 640px. */
@media (max-width: 639px) {
    .hero {
        padding: var(--space-7) 0 var(--space-8);
    }

    .section {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
}

/* Hero CTA stack — at the narrowest widths, force the two
   primary/ghost buttons to full-width column. Below ~480px the
   wrap-then-shrink default produces awkward partial-width buttons. */
@media (max-width: 479px) {
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Hero quick-shortcuts: drop to 2-column grid on very narrow
   viewports so each tile gets adequate width + readable label.
   3-column at 360px wide forces tiles to ~95px which can clip
   uppercase mono labels. */
@media (max-width: 419px) {
    .hero__quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pricing tier cards: tighter internal padding on narrow viewports
   so the tier name + price + feature list don't push the CTA
   button below the fold inside the card. */
@media (max-width: 479px) {
    .tier {
        padding: var(--space-5);
    }
}

/* Ensure all .btn instances meet the 44px touch standard.
   Current .btn padding 14px 22px renders ~44px tall, but small
   font fallbacks or button variants can drop below. Floor it. */
.btn {
    min-height: 44px;
}

/* Mobile touch targets — bump in-content text links to 44px tap area.
   Apple HIG + Material both require 44×44 minimum. Inline-action
   links like "Read the analysis →" rendered at h=16-22 are below
   that floor. We add padding (not margin) so the tap target grows
   without changing visual line spacing much. */
@media (max-width: 859px) {
    .card__detail a,
    .case__cta a,
    .community-flow a,
    .tier__features a,
    .footer__links a,
    .footer__legal a,
    .form__fallback a,
    .section__footnote a,
    .pricing-path a,
    .nav__brand {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
    }

    /* Footer columns: keep flex-wrap so links tile horizontally; the
       per-link 44px padding handles touch-target compliance without
       turning the footer into a 700px-tall vertical list. */
    .footer__links {
        gap: var(--space-3) var(--space-4);
    }
}

/* Hero H1 mobile flow.
   The H1 has hardcoded <br> + &nbsp; line breaks that work at desktop
   but fragment awkwardly at narrow widths (line-height 0.95 on 44px
   font means 41.8px line gap, glyphs visually crowd). At mobile:
     - neutralize the manual <br> so text flows naturally
     - keep the accent span on its own line via display:block
     - bump line-height to 1.05 so cap+descender stop overlapping
   Also tighten the display font-size at mobile so 3 lines fit
   above the fold without pushing the CTAs below it. */
@media (max-width: 639px) {
    .hero__title {
        font-size: clamp(2rem, 9vw, 2.75rem);
        line-height: 1.05;
        letter-spacing: -0.025em;
        margin-bottom: var(--space-5);
    }

    .hero__title br {
        display: none;
    }

    .hero__title .hero__title--accent {
        display: block;
        margin-top: 2px;
    }
}

/* In-page anchor offset for the sticky nav. Without this,
   clicking #method or #pricing scrolls the target heading under
   the sticky nav bar. scroll-margin-top is the right tool for
   sticky-aware anchor targets. */
[id] {
    scroll-margin-top: 80px;
}

/* =========================================================
   MOBILE NAV DISCLOSURE (JS-enhanced)
   The .nav__toggle button + .is-enhanced class are added by
   /assets/js/mobile-nav.js on load. With JS disabled the
   nav falls back to the horizontal-scroll strip.
   ========================================================= */
.nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    color: var(--bone);
    transition: border-color 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.nav__toggle:hover {
    border-color: var(--edge);
    background: var(--ink-3);
}

.nav__toggle:focus-visible {
    outline: 2px solid var(--edge);
    outline-offset: 2px;
}

.nav__toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
    transform-origin: center;
}

.nav.is-open .nav__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav.is-open .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav.is-open .nav__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 859px) {
    .nav.is-enhanced .nav__toggle {
        display: inline-flex;
        position: relative;
        z-index: 91;
    }

    .nav.is-enhanced.is-open .nav__toggle {
        border-color: var(--edge);
        background: var(--ink-3);
    }

    /* When JS-enhanced, replace the horizontal scroll strip with an
       overlay menu. Without the .is-enhanced class the strip remains
       as a graceful fallback. */
    .nav.is-enhanced .nav__links {
        display: none !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        width: 320px;
        max-width: 88vw;
        background: var(--ink, #0a0a0a);
        border-left: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 80px 24px 24px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 90;
        mask-image: none;
        -webkit-mask-image: none;
        box-shadow: -16px 0 32px rgba(0, 0, 0, 0.4);
    }

    .nav.is-enhanced.is-open .nav__links {
        display: flex !important;
    }

    .nav.is-enhanced .nav__links a {
        font-size: 17px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        min-height: 52px;
        display: flex;
        align-items: center;
        white-space: normal;
    }

    .nav.is-enhanced .nav__links a.nav__cta {
        margin-top: 24px;
        border-bottom: none;
        justify-content: center;
        text-align: center;
        order: 100;
        padding: 14px 22px;
    }

    /* Backdrop behind the open overlay */
    .nav.is-enhanced.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 89;
        animation: navFade 220ms ease;
    }

    /* Suppress the horizontal-scroll fade affordance when JS-enhanced
       (no horizontal scroll exists anymore). */
    .nav.is-enhanced .nav__inner::after {
        display: none;
    }
}

@keyframes navFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nav.is-enhanced .nav__links,
    .nav__toggle-bar {
        transition: none;
    }
    .nav.is-enhanced.is-open::before {
        animation: none;
    }
}