/* ==========================================================================
   Kinect Sports Lab — design system
   One stylesheet. Dark-committed: the brand is black and red, and a light
   variant would be a different brand. Every colour is a token so a daytime
   palette can be dropped in later without touching a component rule.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Ground and surfaces */
    --ink: #0A0A0B;
    --panel: #111113;
    --panel-2: #17171A;
    --panel-3: #1E1E22;
    --line: #232327;
    --line-soft: #1A1A1D;

    /* Brand */
    --red: #E0342B;
    --red-hot: #F04539;
    --red-deep: #8E1C16;
    --red-tint: rgba(224, 52, 43, .08);
    --red-rule: rgba(224, 52, 43, .42);

    /* Text — neutrals carry a faint warm bias toward the accent */
    --text: #EDEBE9;
    --text-strong: #FFFFFF;
    --muted: #9A9499;
    --dim: #6C666B;

    /* Semantic, kept separate from the accent */
    --good: #56B37F;
    --warn: #D9A441;
    --bad: #E0574B;

    /* Type */
    --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --measure: 68ch;
    --gutter: clamp(20px, 5vw, 56px);
    --shell: 1240px;
    --header-h: 78px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--red); text-decoration-color: var(--red-rule); text-underline-offset: 3px; }
a:hover { color: var(--red-hot); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.ksl-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.ksl-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; }

.ksl-display {
    font-weight: 800;
    font-size: clamp(38px, 7vw, 78px);
    line-height: .94;
    letter-spacing: -.022em;
    text-transform: uppercase;
}

.ksl-h2 {
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.06;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.ksl-h3 {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ksl-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 16px;
}

.ksl-lede { font-size: 18px; color: var(--muted); max-width: 60ch; }
.ksl-muted { color: var(--muted); }
.ksl-dim { color: var(--dim); }
.ksl-prose { max-width: var(--measure); }
.ksl-prose p { margin: 0 0 1.1em; color: var(--muted); }
.ksl-prose p:last-child { margin-bottom: 0; }
.ksl-prose strong { color: var(--text); font-weight: 600; }
.ksl-prose h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text);
    margin: 2.6em 0 .9em; }
.ksl-prose h4 { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.ksl-prose ol, .ksl-prose ul { margin: 0 0 1.1em; padding-left: 1.25em; color: var(--muted); }
.ksl-prose li + li { margin-top: .45em; }
.ksl-prose li::marker { color: var(--red); }
.ksl-prose figure { margin: 2em 0; }
.ksl-prose figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.ksl-prose figcaption { margin-top: 9px; font-family: var(--f-mono); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/*  Side-by-side blocks inside a write-up — pillar lists, paired photos. One column on phones. */
.ksl-prose__cols, .ksl-prose__figs { display: grid; gap: 22px; margin: 0 0 1.1em; }
.ksl-prose__figs { margin: 2em 0; }
.ksl-prose__figs figure { margin: 0; }
@media (min-width: 560px) {
    .ksl-prose__cols, .ksl-prose__figs { grid-template-columns: repeat(2, 1fr); }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ksl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--f-display); font-weight: 700; font-size: 12.5px;
    letter-spacing: .11em; text-transform: uppercase;
    padding: 13px 26px; border: 1px solid transparent; border-radius: 2px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ksl-btn--primary { background: var(--red); color: #FFF; }
.ksl-btn--primary:hover { background: var(--red-hot); color: #FFF; }

.ksl-btn--ghost { background: transparent; color: var(--text-strong); border-color: rgba(237, 235, 233, .55); }
.ksl-btn--ghost:hover { border-color: var(--text-strong); background: rgba(255, 255, 255, .07); color: var(--text-strong); }

.ksl-btn--quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.ksl-btn--quiet:hover { color: var(--text); border-color: #3A3A40; }

.ksl-btn--sm { padding: 9px 16px; font-size: 11px; }
.ksl-btn--block { width: 100%; }
.ksl-btn[disabled], .ksl-btn--disabled { opacity: .45; pointer-events: none; }

.ksl-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.ksl-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 10, 11, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.ksl-header__inner {
    max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
    height: var(--header-h); display: flex; align-items: center; gap: 20px;
}

/*  The lockup is a single transparent PNG, so it is sized by height and the 3:1 artwork
    sets its own width. The intrinsic width/height on the tag reserves the box before the
    file lands, which keeps the header from reflowing on first paint. */
.ksl-logo {
    display: flex; align-items: center;
    text-decoration: none; color: var(--text); flex: none;
}
.ksl-logo__img { display: block; height: 42px; width: auto; max-width: 52vw; }

.ksl-logo--lg .ksl-logo__img { height: 56px; }

.ksl-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.ksl-nav__link {
    position: relative;
    display: inline-flex; align-items: center;
    font-family: var(--f-display); font-weight: 600; font-size: 12px;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--text); text-decoration: none;
    padding: 10px 14px; border: 0; background: none; cursor: pointer;
    transition: color .15s ease;
}
.ksl-nav__link:hover { color: var(--red); }
.ksl-nav__link.is-current { color: var(--text-strong); }
.ksl-nav__link.is-current::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 1.5px; background: var(--red);
}

.ksl-header__cta { display: flex; align-items: center; gap: 8px; margin-left: 20px; }

.ksl-burger {
    display: none; margin-left: auto; background: none; border: 1px solid var(--line);
    border-radius: 2px; padding: 9px 11px; cursor: pointer; color: var(--text);
}
.ksl-burger span { display: block; width: 17px; height: 1.5px; background: currentColor; }
.ksl-burger span + span { margin-top: 4px; }

@media (max-width: 1100px) {
    .ksl-burger { display: block; }
    .ksl-nav {
        position: absolute; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--panel); border-bottom: 1px solid var(--line);
        padding: 10px var(--gutter) 22px; margin-left: 0;
    }
    .ksl-nav[hidden] { display: none; }
    .ksl-nav__link { padding: 12px 0; font-size: 14px; width: 100%; }
    .ksl-nav__link.is-current::after { left: 0; right: auto; width: 22px; bottom: 6px; }
    .ksl-header__cta { margin: 14px 0 0; }
    .ksl-header__cta .ksl-btn { flex: 1; }
}

/* ── Media (b-roll) ─────────────────────────────────────────────────────── */

.ksl-media { position: relative; overflow: hidden; background: var(--panel); }
.ksl-media video, .ksl-media img { width: 100%; height: 100%; object-fit: cover; }

/*  Empty state. Media rows exist before the footage does, so this is a designed
    surface rather than a broken player: layered light, a hatch, and the monogram. */
.ksl-media--empty {
    background:
        radial-gradient(120% 90% at 78% 12%, rgba(224, 52, 43, .16), transparent 58%),
        radial-gradient(80% 70% at 12% 88%, rgba(120, 130, 160, .10), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, #131316, #0B0B0D);
}
.ksl-media--empty::after {
    content: attr(data-mark);
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(64px, 16vw, 190px); letter-spacing: -.05em;
    color: rgba(255, 255, 255, .028);
    pointer-events: none; user-select: none;
}

.ksl-media--tall { min-height: 340px; }

.ksl-media__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 9, .93) 0%, rgba(8, 8, 9, .72) 44%, rgba(8, 8, 9, .35) 100%);
}
.ksl-media__scrim--soft { background: linear-gradient(180deg, rgba(8, 8, 9, .28), rgba(8, 8, 9, .82)); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/*  Sized to what it holds, never 100vh — a viewport-height opener pushes the page
    itself out of the first frame. */
.ksl-hero { position: relative; min-height: 560px; display: flex; align-items: center; }
.ksl-hero .ksl-media { position: absolute; inset: 0; }
.ksl-hero__inner {
    position: relative; z-index: 1;
    max-width: var(--shell); margin: 0 auto; width: 100%;
    padding: clamp(64px, 11vw, 132px) var(--gutter);
}
.ksl-hero__rule { width: 54px; height: 3px; background: var(--red); margin-bottom: 26px; }
.ksl-hero__title { max-width: 15ch; }
.ksl-hero__title .accent { color: var(--red); }
.ksl-hero__copy { margin: 24px 0 34px; max-width: 46ch; color: var(--muted); font-size: 17px; }

/*  Join Now landing. The photo is already near-black on its left, so the scrim only
    needs to firm up the text column; anchoring right keeps the wall logo in frame
    as the viewport narrows. */
.ksl-join-hero {
    position: relative; display: flex; align-items: center;
    min-height: clamp(520px, calc(100vh - var(--header-h)), 820px);
    background:
        linear-gradient(90deg, rgba(8, 8, 9, .7) 0%, rgba(8, 8, 9, .45) 40%, rgba(8, 8, 9, 0) 62%),
        url('../img/join-hero.jpg') right center / cover no-repeat,
        #060607;
}
@media (max-width: 899.98px) {
    /* Once the text overlaps the logo, darken the whole frame so the copy stays legible. */
    .ksl-join-hero {
        background:
            linear-gradient(90deg, rgba(8, 8, 9, .88) 0%, rgba(8, 8, 9, .6) 100%),
            url('../img/join-hero.jpg') 78% center / cover no-repeat,
            #060607;
    }
}
.ksl-join-hero__inner {
    position: relative; z-index: 1;
    max-width: var(--shell); margin: 0 auto; width: 100%;
    padding: clamp(64px, 10vw, 120px) var(--gutter);
}
.ksl-join-hero__eyebrow { font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .24em; margin-bottom: 18px; }
.ksl-join-hero__title {
    font-size: clamp(52px, 8.6vw, 112px); line-height: .92; letter-spacing: -.01em;
    text-transform: uppercase; color: var(--text-strong);
}
.ksl-join-hero__copy {
    margin: 18px 0 44px; max-width: 32ch;
    font-size: clamp(19px, 2.3vw, 30px); font-weight: 300; line-height: 1.3; color: #C9C5C8;
}
.ksl-join-hero__cta { padding: 22px 64px; font-size: 14px; letter-spacing: .14em; }
.ksl-join-hero__alert { max-width: 60ch; margin-bottom: 30px; }
.ksl-join-hero__login {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
    margin: 42px 0 0; font-size: 15px; color: #C9C5C8;
}
.ksl-join-hero__login-link {
    display: inline-flex; align-items: center; gap: 22px;
    padding-bottom: 5px; border-bottom: 2px solid var(--red);
    font-family: var(--f-display); font-weight: 600; font-size: 14px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-strong); text-decoration: none;
}
.ksl-join-hero__login-link span { color: var(--red); transition: transform .15s ease; }
.ksl-join-hero__login-link:hover { color: var(--text-strong); border-color: var(--red-hot); }
.ksl-join-hero__login-link:hover span { transform: translateX(4px); }
@media (max-width: 559.98px) {
    .ksl-join-hero__cta { width: 100%; padding: 20px 24px; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.ksl-section { padding: clamp(56px, 8vw, 104px) 0; }
.ksl-section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.ksl-section--flush { padding-bottom: 0; }
/*  The header already separates the page from the top edge; the opening section only needs a quarter
    of the usual lead-in. Spacing between later sections is unchanged. */
main > .ksl-section:first-child { padding-top: clamp(14px, 2vw, 26px); }
main > .ksl-section--tight:first-child { padding-top: clamp(10px, 1.25vw, 16px); }
.ksl-section + .ksl-section { border-top: 1px solid var(--line-soft); }
.ksl-section__head { text-align: center; margin-bottom: clamp(34px, 5vw, 56px); }
.ksl-section__head .ksl-lede { margin: 16px auto 0; }
.ksl-section__head--left { text-align: left; }
.ksl-section__head--left .ksl-lede { margin-left: 0; }

/* ── Pillars ────────────────────────────────────────────────────────────── */

.ksl-pillars { display: grid; }
@media (min-width: 640px) { .ksl-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ksl-pillars { grid-template-columns: repeat(4, 1fr); } }

.ksl-pillar { padding: 8px clamp(16px, 2.6vw, 30px) 10px; text-align: center; }

/*  Rules divide the columns from each other and stop there — the group itself is
    never boxed in, so the pillars read as one continuous band.

    Each column count owns an exclusive width range. The two-up rules carry higher
    specificity than any single-class reset could, so they must stop at the four-up
    breakpoint rather than be overridden inside it. */
@media (max-width: 639.98px) {
    .ksl-pillar + .ksl-pillar { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 30px; }
}
@media (min-width: 640px) and (max-width: 999.98px) {
    .ksl-pillar:nth-child(2n) { border-left: 1px solid var(--line); }
    .ksl-pillar:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 30px; }
}
@media (min-width: 1000px) {
    .ksl-pillar + .ksl-pillar { border-left: 1px solid var(--line); }
}

.ksl-pillar__icon {
    width: 52px; height: 52px; margin: 0 auto 20px;
    display: grid; place-items: center; color: var(--red);
}
.ksl-pillar__icon svg { width: 100%; height: 100%; }
.ksl-pillar h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.ksl-pillar p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.62; }

/* ── Split (mission, location) ──────────────────────────────────────────── */

.ksl-split { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 900px) { .ksl-split { grid-template-columns: 44fr 56fr; } }
.ksl-split .ksl-media { min-height: 320px; }
.ksl-split__body { padding: clamp(34px, 5vw, 62px); display: flex; flex-direction: column; justify-content: center; }
.ksl-split--panel .ksl-split__body { background: var(--panel); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.ksl-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .ksl-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .ksl-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ksl-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .ksl-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ksl-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.ksl-card {
    background: var(--panel); border: 1px solid var(--line);
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: border-color .15s ease;
}
a.ksl-card:hover { border-color: #3A3A40; color: inherit; }
.ksl-card .ksl-media { aspect-ratio: 16 / 9; }
.ksl-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ksl-card__vendor { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim); }
.ksl-card__title { font-family: var(--f-display); font-weight: 700; font-size: 17px;
    letter-spacing: -.005em; color: var(--text); }
.ksl-card__text { font-size: 13.5px; color: var(--muted); margin: 0; }
.ksl-card__more { margin-top: auto; padding-top: 12px; font-family: var(--f-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/*  The item's spec rows, compressed into a strip on the card. */
.ksl-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px;
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ksl-card__stat { padding: 12px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.ksl-card__stat + .ksl-card__stat { padding-left: 12px; border-left: 1px solid var(--line-soft); }
.ksl-card__stat-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim); }
.ksl-card__stat-value { font-family: var(--f-display); font-weight: 700; font-size: 15px;
    line-height: 1.25; color: var(--text); font-variant-numeric: tabular-nums; }
.ksl-card__stat-value .ksl-spec__unit { margin-left: 4px; font-size: 10px; }

/* ── Spec strip ─────────────────────────────────────────────────────────── */

.ksl-specs { display: grid; gap: 1px; background: var(--line-soft);
    border: 1px solid var(--line); margin: 28px 0; }
@media (min-width: 640px) { .ksl-specs { grid-template-columns: repeat(3, 1fr); } }
.ksl-specs--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ksl-specs--4 { grid-template-columns: repeat(4, 1fr); } }
.ksl-spec { background: var(--panel); padding: 18px 20px; }
.ksl-spec__label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.ksl-spec__value { font-family: var(--f-display); font-weight: 700; font-size: 19px;
    letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ksl-spec__unit { font-family: var(--f-mono); font-size: 11px; color: var(--muted);
    margin-left: 6px; letter-spacing: .04em; }

/* ── Plan cards ─────────────────────────────────────────────────────────── */

.ksl-plan {
    background: var(--panel); border: 1px solid var(--line);
    padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px;
    position: relative;
}
.ksl-plan--featured { border-color: var(--red-deep); background: linear-gradient(180deg, var(--red-tint), var(--panel) 42%); }
.ksl-plan__flag {
    position: absolute; top: -1px; right: 18px;
    background: var(--red); color: #FFF; font-family: var(--f-mono);
    font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; padding: 4px 9px;
}
.ksl-plan__name { font-family: var(--f-display); font-weight: 700; font-size: 16px;
    letter-spacing: .09em; text-transform: uppercase; }
.ksl-plan__tagline { font-size: 13.5px; color: var(--muted); margin: -6px 0 0; }
.ksl-plan__price { display: flex; align-items: baseline; gap: 8px; padding-block: 6px;
    border-block: 1px solid var(--line-soft); }
.ksl-plan__amount { font-family: var(--f-display); font-weight: 800; font-size: 34px;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ksl-plan__interval { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim);
    letter-spacing: .05em; }
.ksl-plan__features { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 8px; flex: 1; }
.ksl-plan__features li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.ksl-plan__features li::before {
    content: ""; position: absolute; left: 2px; top: .58em;
    width: 7px; height: 7px; border-right: 1.5px solid var(--red);
    border-bottom: 1.5px solid var(--red); transform: rotate(45deg) translate(-1px, -1px);
}

/* Radio-selectable plan (Join Now and wizard step 2) */
.ksl-plan--choice { cursor: pointer; }
/*  In a picker the red border means "selected", so the featured plan keeps only its flag until it is
    picked — otherwise it reads as chosen no matter which card is checked. */
.ksl-plan--choice.ksl-plan--featured:not(:has(input:checked)) { border-color: var(--line); background: var(--panel); }
.ksl-plan--choice input { position: absolute; opacity: 0; pointer-events: none; }
.ksl-plan--choice:has(input:checked) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.ksl-plan--choice:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
.ksl-plan__pick {
    margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
    display: flex; align-items: center; gap: 8px;
}
.ksl-plan--choice:has(input:checked) .ksl-plan__pick { color: var(--red); }
.ksl-plan__pick::before {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 1.5px solid currentColor; flex: none;
}
.ksl-plan--choice:has(input:checked) .ksl-plan__pick::before {
    background: radial-gradient(circle, var(--red) 0 3.5px, transparent 4px);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.ksl-form { display: flex; flex-direction: column; gap: 22px; }

.ksl-fieldset { border: 1px solid var(--line); background: var(--panel); padding: 24px; }
.ksl-fieldset > legend {
    font-family: var(--f-display); font-weight: 700; font-size: 11.5px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--text);
    padding: 0 10px; margin-left: -10px;
}
.ksl-fieldset__hint { font-size: 13px; color: var(--dim); margin: 4px 0 20px; }

.ksl-fields { display: grid; gap: 16px; }
@media (min-width: 620px) { .ksl-fields--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px) { .ksl-fields--3 { grid-template-columns: repeat(3, 1fr); } }
.ksl-field--wide { grid-column: 1 / -1; }

.ksl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ksl-field label {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .11em;
    text-transform: uppercase; color: var(--muted);
}
.ksl-field input, .ksl-field select, .ksl-field textarea {
    font-family: var(--f-body); font-size: 15px; color: var(--text);
    background: var(--ink); border: 1px solid var(--line); border-radius: 2px;
    padding: 11px 13px; width: 100%;
    transition: border-color .15s ease;
}
.ksl-field textarea { min-height: 130px; resize: vertical; }
.ksl-field input:hover, .ksl-field select:hover, .ksl-field textarea:hover { border-color: #34343A; }
.ksl-field input:focus, .ksl-field select:focus, .ksl-field textarea:focus {
    outline: none; border-color: var(--red);
}
.ksl-field input::placeholder, .ksl-field textarea::placeholder { color: #4C474C; }
.ksl-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                      linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
.ksl-field__note { font-size: 12px; color: var(--dim); }

.ksl-check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.ksl-check input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--red); flex: none; }
.ksl-check label { font-family: var(--f-body); font-size: 14px; letter-spacing: 0;
    text-transform: none; color: var(--muted); }

.field-validation-error, .ksl-error-text { color: var(--bad); font-size: 12.5px; }
.input-validation-error { border-color: var(--bad) !important; }

.ksl-alert { border-left: 2px solid; padding: 13px 16px; font-size: 14px; }
.ksl-alert--error { border-color: var(--bad); background: rgba(224, 87, 75, .07); color: #F0C6C1; }
.ksl-alert--good { border-color: var(--good); background: rgba(86, 179, 127, .07); color: #C3E3D1; }
.ksl-alert--note { border-color: var(--warn); background: rgba(217, 164, 65, .06); color: #E2D3B4; }
.ksl-alert ul { margin: 6px 0 0; padding-left: 18px; }

.ksl-form__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding-top: 4px;
}
.ksl-form__actions .ksl-spacer { flex: 1; }

/*  A low-key text action beside the buttons — Cancel enrollment is available, not a peer of Continue. */
.ksl-link-quiet { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim); padding: 6px 4px; }
.ksl-link-quiet:hover { color: var(--bad); }

/* ── Auth / narrow panels ───────────────────────────────────────────────── */

.ksl-panel { background: var(--panel); border: 1px solid var(--line); padding: clamp(26px, 4vw, 38px); }
.ksl-panel__title { margin-bottom: 6px; }
.ksl-panel__sub { color: var(--muted); font-size: 14.5px; margin: 0 0 26px; }
.ksl-auth { max-width: 460px; margin: clamp(40px, 8vw, 88px) auto; padding: 0 var(--gutter); }
.ksl-auth__foot { margin-top: 22px; font-size: 13.5px; color: var(--dim); text-align: center; }

/* ── Enrollment step rail ───────────────────────────────────────────────── */

.ksl-steps {
    display: grid; gap: 1px; background: var(--line-soft);
    border: 1px solid var(--line); margin-bottom: 34px;
    grid-template-columns: repeat(5, 1fr);
}
.ksl-step {
    background: var(--panel); padding: 13px 12px 15px;
    display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.ksl-step__n {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--dim);
}
.ksl-step__name {
    font-family: var(--f-display); font-weight: 700; font-size: 11px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ksl-step--done { background: var(--panel-2); }
.ksl-step--done .ksl-step__n, .ksl-step--done .ksl-step__name { color: var(--muted); }
.ksl-step--current { background: linear-gradient(180deg, var(--red-tint), var(--panel) 70%); }
.ksl-step--current .ksl-step__n { color: var(--red); }
.ksl-step--current .ksl-step__name { color: var(--text); }
.ksl-step--current { box-shadow: inset 0 2px 0 var(--red); }

@media (max-width: 700px) {
    .ksl-steps { grid-template-columns: repeat(5, 1fr); }
    .ksl-step { padding: 10px 7px 12px; }
    .ksl-step__name { display: none; }
    .ksl-step--current .ksl-step__name { display: block; font-size: 10px; }
}

/* ── Waiver ─────────────────────────────────────────────────────────────── */

.ksl-waiver { border: 1px solid var(--line); background: var(--panel); margin-bottom: 22px; }
.ksl-waiver__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.ksl-waiver__title { font-family: var(--f-display); font-weight: 700; font-size: 15px;
    letter-spacing: .04em; }
.ksl-waiver__meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.ksl-waiver__body {
    max-height: 300px; overflow-y: auto; padding: 20px 22px;
    font-size: 14px; line-height: 1.7; color: var(--muted);
    border-bottom: 1px solid var(--line); background: var(--ink);
}
.ksl-waiver__body p { margin: 0 0 1em; }
.ksl-waiver__body p:last-child { margin-bottom: 0; }
.ksl-waiver__body strong { color: var(--text); }
.ksl-waiver__sign { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.ksl-waiver__sign .ksl-field { max-width: 380px; }
.ksl-signature-preview {
    font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 22px;
    color: var(--text); min-height: 1.4em;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.ksl-footer { border-top: 1px solid var(--line); background: var(--ink); margin-top: 0; }
.ksl-footer__inner {
    max-width: var(--shell); margin: 0 auto;
    padding: clamp(38px, 5vw, 54px) var(--gutter) clamp(32px, 4vw, 44px);
    display: grid; gap: 34px; align-items: start;
}
@media (min-width: 800px) { .ksl-footer__inner { grid-template-columns: minmax(220px, 1.5fr) 1fr 1fr 1fr; } }
.ksl-footer h4 {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dim); margin: 0 0 14px; font-weight: 400;
}
.ksl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ksl-footer a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.ksl-footer a:hover { color: var(--text); }
.ksl-footer address { font-style: normal; color: var(--muted); font-size: 13.5px; line-height: 1.75; }

.ksl-footer .ksl-social { flex-direction: row; gap: 10px; }
.ksl-social a {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--line); border-radius: 3px; color: var(--muted);
    transition: color .15s ease, border-color .15s ease;
}
.ksl-social a:hover { color: var(--text); border-color: #3A3A40; }
.ksl-social svg { width: 18px; height: 18px; }

.ksl-footer__legal {
    max-width: var(--shell); margin: 0 auto;
    padding: 20px var(--gutter) 30px; border-top: 1px solid var(--line-soft);
    text-align: center;
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--dim);
}

/* ── Data list (dashboard, location hours) ──────────────────────────────── */

.ksl-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 24px;
    font-size: 14px; margin: 0; }
.ksl-dl dt { color: var(--dim); }
.ksl-dl dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

.ksl-tag {
    display: inline-block; font-family: var(--f-mono); font-size: 10.5px;
    letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px;
    border: 1px solid; border-radius: 2px; white-space: nowrap;
}
.ksl-tag--good { color: var(--good); border-color: rgba(86, 179, 127, .35); background: rgba(86, 179, 127, .08); }
.ksl-tag--warn { color: var(--warn); border-color: rgba(217, 164, 65, .35); background: rgba(217, 164, 65, .08); }
.ksl-tag--dim { color: var(--dim); border-color: var(--line); }

/* ── Member portal ──────────────────────────────────────────────────────── */

/*  A separate shell from the public site: fixed sidebar, slim top bar, and dense panels. Cards inside
    panels sit on --well, one step darker than the panel, so nesting reads without extra borders.

    Sized so every portal page fits a maximized 1080p browser (about 1920 × 940 of viewport) without
    scrolling: tight vertical rhythm, and wide-screen rows that put panels side by side. Panels are
    size containers, so the rows inside them (sessions, recaps, tiles) adapt to the column they land
    in rather than to the window. */
.ksl-portal {
    --side-w: 236px; --topbar-h: 56px; --gap: 14px;
    --well: #0D0D0F; --hover-line: #34343A; --trajekt: #2F9BFF;
    min-height: 100vh;
}
.ksl-icon { width: 20px; height: 20px; flex: none; }
.ksl-icon--mark { object-fit: contain; }

.ksl-side {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--side-w);
    display: flex; flex-direction: column; padding: 22px 0 14px; overflow-y: auto;
    background: #0B0B0C; border-right: 1px solid var(--line);
}
.ksl-side__head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 20px; }
.ksl-side .ksl-logo__img { height: 40px; }
.ksl-side__close { display: none; }
.ksl-side__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ksl-side__link {
    position: relative; display: flex; align-items: center; gap: 16px; width: calc(100% - 12px);
    padding: 12px 22px; border: 0; border-radius: 0 8px 8px 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--f-body); font-size: 15px; line-height: 1.3; color: var(--muted); text-decoration: none;
}
.ksl-side__link .ksl-icon { width: 22px; height: 22px; }
.ksl-side__link:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.ksl-side__link.is-current { color: var(--text-strong); background: var(--panel-2); }
.ksl-side__link.is-current::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--red); }
.ksl-side__link.is-pending { color: var(--text-strong); }
.ksl-side__link.is-pending::after {
    content: ""; margin-left: auto; width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--red); animation: ksl-spin .9s linear infinite;
}
.ksl-side__foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.ksl-side__scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); }

.ksl-portal__main { margin-left: var(--side-w); min-width: 0; }
.ksl-topbar {
    position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
    padding: 0 28px; background: rgba(10, 10, 11, .86); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.ksl-topbar__menu, .ksl-topbar__brand { display: none; }
.ksl-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ksl-topbar__bell, .ksl-topbar__menu, .ksl-side__close {
    padding: 6px; border: 0; background: none; color: var(--muted); cursor: pointer;
}
.ksl-topbar__bell:hover, .ksl-topbar__menu:hover, .ksl-side__close:hover { color: var(--text); }
.ksl-topbar__who {
    display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
    font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.ksl-topbar__who:hover { color: var(--text-strong); }
.ksl-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--panel-3); border: 1px solid var(--line); font-size: 11.5px;
}

/* Embedded partner app: full-height frame beside the sidebar; the top bar only remains on narrow
   screens, where it holds the menu button. */
.ksl-embed { display: block; width: 100%; height: 100vh; border: 0; background: var(--bg, #0a0a0b); }
.ksl-embed-wrap { position: relative; }
.ksl-embed-loading {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; background: var(--ink); text-align: center; padding: 0 24px;
    transition: opacity .3s ease, visibility .3s;
}
.ksl-embed-wrap.is-loaded .ksl-embed-loading { opacity: 0; visibility: hidden; }
.ksl-embed-loading__spin {
    width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line);
    border-top-color: var(--red); animation: ksl-spin .9s linear infinite;
}
.ksl-embed-loading__title { margin: 6px 0 0; color: var(--text); font-family: var(--f-display); font-weight: 600; }
.ksl-embed-loading__slow { margin: 0; color: var(--muted); font-size: 14px; opacity: 0; animation: ksl-fade-in .4s ease 8s forwards; }
@keyframes ksl-spin { to { transform: rotate(360deg); } }
@keyframes ksl-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ksl-embed-loading__spin { animation-duration: 3s; } }
@media (min-width: 1000px) { .ksl-portal.is-embed .ksl-topbar { display: none; } }
@media (max-width: 999.98px) { .ksl-embed { height: calc(100vh - var(--topbar-h)); } }

.ksl-portal__pad { padding: 18px clamp(16px, 2vw, 28px) 16px; max-width: 1840px; }
.ksl-phead { margin-bottom: 14px; }
.ksl-phead .ksl-eyebrow { margin-bottom: 4px; }
.ksl-phead .ksl-h2, .ksl-xhead .ksl-h2 { font-size: clamp(24px, 2.2vw, 32px); }

@media (max-width: 999.98px) {
    .ksl-side { transform: translateX(-100%); transition: transform .2s ease; }
    .ksl-side.is-open { transform: none; }
    .ksl-side__close { display: grid; place-items: center; }
    .ksl-portal__main { margin-left: 0; }
    .ksl-topbar { padding: 0 16px; }
    .ksl-topbar__menu { display: grid; place-items: center; color: var(--text); }
    .ksl-topbar__brand { display: block; }
    .ksl-topbar__brand .ksl-logo__img { height: 30px; }
}
@media (max-width: 559.98px) { .ksl-topbar__name, .ksl-topbar .ksl-sample { display: none; } }

.ksl-sample {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px;
    border: 1px solid var(--line); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--dim); cursor: help;
}
.ksl-sample__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

/* Hero banners */
/* A slim banner, text left and the sign right. The box is about as tall as its text, so the image is
   sized from that height rather than the width: at 187% of the box, shifted up 33%, the sign (20%–70%
   of dashboard-hero.jpg's height) fits with a little room above and below. The image keeps its own
   ratio and its edges fade into the ink background; the sign sits 64% across the image, so pinning
   that point at 74% of the box keeps it right of the text at any width. */
.ksl-phero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--ink); aspect-ratio: 14 / 1; }
.ksl-phero__img {
    position: absolute; top: -33%; left: 74%; transform: translateX(-64%); width: auto; height: 187%; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent);
}
.ksl-phero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 11, .95) 0%, rgba(10, 10, 11, .7) 30%, rgba(10, 10, 11, 0) 55%);
}
.ksl-phero__inner { position: relative; z-index: 1; padding: 12px clamp(16px, 2.6vw, 52px); }
.ksl-phero__eyebrow {
    margin: 0 0 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--muted);
}
.ksl-phero__name {
    font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: .98;
    letter-spacing: -.01em; text-transform: uppercase; color: var(--text-strong);
}
.ksl-phero__meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin: 10px 0 0; font-size: 14px; }
.ksl-phero__meta > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--dim); }
.ksl-phero__meta a { text-decoration: none; }
.ksl-phero__meta .ksl-phero__draft { color: var(--warn); }
.ksl-phero__meta .ksl-phero__draft:hover { color: var(--text-strong); }
.ksl-phero__status::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
    background: var(--dim); vertical-align: 1px;
}
.ksl-phero__status.is-good::before { background: var(--good); }
.ksl-phero__status.is-warn::before { background: var(--warn); }

.ksl-xhead { position: relative; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); }
.ksl-xhead__img {
    position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.ksl-xhead__inner { position: relative; max-width: 860px; padding: 20px clamp(16px, 2vw, 28px) 18px; }
.ksl-xhead__summary { margin: 8px 0 0; max-width: 72ch; font-size: 14px; color: var(--muted); }
.ksl-xhead .ksl-phero__meta { margin-top: 10px; font-size: 13px; }

/* Small uppercase label used inside wells */
.ksl-glance__label {
    margin-bottom: 8px; font-family: var(--f-display); font-weight: 700; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text);
}

/* Metric readout and sparkline */
.ksl-metric { min-width: 0; padding-right: 10px; }
.ksl-metric__label {
    margin-bottom: 2px; font-size: 12.5px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ksl-metric__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.ksl-metric__value {
    font-family: var(--f-display); font-weight: 700; font-size: 20px; white-space: nowrap;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.ksl-metric__unit { margin-left: 3px; font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--muted); }
.ksl-metric__unit:empty { display: none; }
.ksl-metric__delta { font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; }
.ksl-metric__delta.is-good { color: var(--good); }
.ksl-metric__delta.is-bad { color: var(--bad); }
.ksl-metric__delta.is-flat { color: var(--dim); }

/*  The sparkline stretches to its box; --spark-h sets the height per layout. */
.ksl-spark { display: block; width: 100%; height: var(--spark-h, 44px); overflow: visible; color: var(--red); }
.ksl-spark__pt:not(.is-last) .ksl-spark__dot { stroke: var(--muted); }
.ksl-spark__pt:hover .ksl-spark__dot { stroke: var(--text-strong); }

/* Panels and the rows that hold them */
.ksl-box {
    container-type: inline-size;
    min-width: 0; margin-bottom: var(--gap); padding: 14px 18px 16px;
    background: var(--panel); border: 1px solid var(--line);
}
.ksl-box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; min-height: 30px; }
.ksl-box__head > .ksl-icon { color: var(--red); }
.ksl-box__title { font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-strong); }
.ksl-box__more {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted);
    font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.ksl-box__more:hover { color: var(--text); }
.ksl-box__more .ksl-icon, .ksl-btn .ksl-icon { width: 15px; height: 15px; }
.ksl-box__aside {
    margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--dim);
}
.ksl-box__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

.ksl-pair, .ksl-split2 { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.ksl-pair > .ksl-box, .ksl-split2 > .ksl-box { margin-bottom: 0; }
@media (min-width: 1180px) {
    .ksl-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ksl-split2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.ksl-tabs { display: flex; gap: 4px; margin-left: 8px; }
.ksl-tabs__tab {
    padding: 5px 12px; font-size: 13.5px; text-decoration: none; color: var(--muted);
    border-bottom: 2px solid transparent;
}
.ksl-tabs__tab:hover { color: var(--text); }
.ksl-tabs__tab.is-current { color: var(--text-strong); border-color: var(--red); }

/* Wells: the cards that live inside a panel */
.ksl-session, .ksl-recap, .ksl-program__row, .ksl-tile, .ksl-workout {
    background: var(--well); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
a.ksl-program__row:hover, a.ksl-tile:hover {
    color: var(--text); border-color: var(--hover-line);
}

.ksl-sessions { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ksl-session {
    display: grid; grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center; gap: 3px 16px; padding: 7px 16px 7px 0;
}
.ksl-session__date { display: flex; flex-direction: column; align-items: center; padding: 2px 0; border-right: 1px solid var(--line); }
.ksl-session__mon { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.ksl-session__day { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--text-strong); }
.ksl-session__title { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.ksl-session__sub { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ksl-session__blocks {
    display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none;
    font-size: 12.5px; color: var(--muted);
}
.ksl-session__blocks li + li::before { content: "→"; margin: 0 8px; color: var(--dim); }
.ksl-session.is-cancelled .ksl-session__title { color: var(--muted); text-decoration: line-through; }
/*  In a narrow column the plan drops under the session details. */
@container (max-width: 640px) {
    .ksl-session { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .ksl-session__date { grid-row: span 2; }
    .ksl-session__blocks { grid-column: 2; grid-row: 2; }
    .ksl-session > .ksl-tag { grid-column: 3; grid-row: 1; }
}

.ksl-recaps { display: flex; flex-direction: column; gap: 10px; }
.ksl-recap { display: grid; }
@container (min-width: 400px) { .ksl-recap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; } }
@container (min-width: 1100px) { .ksl-recaps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .ksl-recaps--row .ksl-recap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } }
.ksl-recap__media { position: relative; display: block; min-height: 140px; overflow: hidden; background: var(--panel-2); }
.ksl-recap__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.ksl-recap__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
    border: 2px solid #FFF; background: rgba(0, 0, 0, .55); color: #FFF;
}
.ksl-recap__play .ksl-icon { width: 20px; height: 20px; margin-left: 3px; }
.ksl-recap__body { padding: 12px 14px; }
@container (min-width: 400px) { .ksl-recap__body { padding: 12px 14px 12px 0; } }
.ksl-recap__title { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.ksl-recap__meta { margin: 2px 0 6px; font-size: 12.5px; color: var(--muted); }
.ksl-recap__notes {
    margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ksl-recap__link { font-size: 13px; text-decoration: none; }
.ksl-recap__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ksl-recap .ksl-glance__label { margin-bottom: 4px; font-size: 10.5px; color: var(--muted); }

.ksl-program { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.ksl-program__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 14px; }
.ksl-program__row > .ksl-icon { width: 18px; height: 18px; color: var(--muted); }
.ksl-program__name { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.ksl-program .ksl-glance__label, .ksl-workout .ksl-glance__label { margin-bottom: 2px; font-size: 10.5px; color: var(--muted); }
.ksl-program__row--stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
@container (max-width: 380px) { .ksl-program { grid-template-columns: 1fr; } }
.ksl-progress { display: flex; gap: 3px; }
.ksl-progress span { width: 12px; height: 5px; background: var(--panel-3); }
.ksl-progress span.is-done { background: var(--red); }

.ksl-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ksl-tiles--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ksl-tiles--stack { grid-template-columns: 1fr; }
@container (max-width: 600px) { .ksl-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 320px) { .ksl-tiles:not(.ksl-tiles--stack) { grid-template-columns: 1fr; } }
.ksl-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; padding: 10px 14px 12px; }
.ksl-tile--row { flex-direction: row; align-items: center; gap: 14px; }
.ksl-tile--row .ksl-metric { flex: 0 0 46%; }
.ksl-tile--row .ksl-spark { flex: 1; width: auto; min-width: 0; }
@container (max-width: 420px) {
    .ksl-tile--row { flex-direction: column; align-items: stretch; gap: 8px; }
    .ksl-tile--row .ksl-metric, .ksl-tile--row .ksl-spark { flex: none; width: 100%; }
}

.ksl-workouts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ksl-workout { padding: 12px 14px; }
.ksl-workout.is-next { border-color: var(--red-deep); box-shadow: inset 0 2px 0 var(--red); }
.ksl-workout.is-done { opacity: .7; }
.ksl-workout__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ksl-exercises { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ksl-exercises li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.ksl-exercises li > span:first-child { flex: 1 0 auto; }
.ksl-exercises__rx { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; text-align: right; white-space: nowrap; color: var(--muted); }

.ksl-table-wrap { overflow-x: auto; }
.ksl-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ksl-table th, .ksl-table td { padding: 8px 14px 8px 0; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.ksl-table thead th {
    font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim);
}
.ksl-table tbody th { font-weight: 500; color: var(--text); }
.ksl-table td { color: var(--muted); }

.ksl-captures { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ksl-captures li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.ksl-captures li:first-child { border-top: 0; }
.ksl-captures li > span:last-child { display: flex; flex-direction: column; }
.ksl-captures__date { padding-top: 2px; font-family: var(--f-mono); font-size: 11px; color: var(--dim); }
.ksl-captures__title { color: var(--text); }
.ksl-captures .ksl-dim { font-size: 12.5px; }

/* ── Member home ─────────────────────────────────────────────────────────
   Three summary cards, a full-width schedule, then Development beside Strength. Panels and cards are
   rounded here only; the other portal pages keep square panels. */
.ksl-home .ksl-box, .ksl-card { border-radius: 10px; }
.ksl-home .ksl-box { padding: 16px 20px 18px; }
.ksl-home .ksl-box__head > .ksl-icon { width: 24px; height: 24px; }
.ksl-home .ksl-box__title { font-family: var(--f-display); font-size: 19px; letter-spacing: 0; text-transform: none; }
.ksl-home .ksl-box__more { font-family: var(--f-body); font-weight: 500; font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.ksl-home .ksl-box__actions { align-items: center; gap: 22px; }
.ksl-home .ksl-box__actions .ksl-box__more { margin-left: 0; }

.ksl-home__top { display: grid; gap: var(--gap); margin-bottom: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ksl-home__pair { display: grid; gap: var(--gap); }
.ksl-home__pair > .ksl-box { margin-bottom: 0; }
@media (min-width: 1180px) { .ksl-home__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.ksl-card {
    display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px 20px 18px;
    background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none;
    transition: border-color .15s ease;
}
.ksl-card:hover { color: var(--text); border-color: var(--hover-line); }
.ksl-card__head { display: flex; align-items: center; gap: 12px; }
.ksl-card__head > .ksl-icon { width: 26px; height: 26px; color: var(--red); }
.ksl-card__title { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--text-strong); }
.ksl-card__go { margin-left: auto; color: var(--muted); }
.ksl-card__empty { margin: 0; font-size: 13.5px; color: var(--muted); }

.ksl-next { display: flex; align-items: flex-start; gap: 18px; }
.ksl-next__icon { color: var(--red); }
.ksl-next__icon .ksl-icon { width: 40px; height: 40px; }
.ksl-next__when { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 1.7vw, 28px); line-height: 1.15; color: var(--text-strong); }
.ksl-next__what { margin-top: 4px; font-size: 16px; color: var(--muted); }

.ksl-card__radar { display: block; width: 100%; height: auto; border-radius: 12px; margin-top: 10px; }
.ksl-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ksl-stat { min-width: 0; padding: 0 14px; }
.ksl-stat:first-child { padding-left: 0; }
.ksl-stat + .ksl-stat { border-left: 1px solid var(--line); }
.ksl-stat__label { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksl-stat__value {
    font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.15;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.ksl-stat__value--accent { color: var(--trajekt); }
.ksl-stat__prev { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.ksl-stat__prev .ksl-icon { width: 14px; height: 14px; }
.ksl-stat__delta { font-size: 13.5px; color: var(--trajekt); white-space: nowrap; }
.ksl-stat__delta.is-bad { color: var(--bad); }

/*  Rows of links with a trailing chevron: upcoming sessions, openings, development, program. */
.ksl-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ksl-list > li + li { border-top: 1px solid var(--line-soft); }
.ksl-list__row {
    display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 6px;
    color: var(--text); text-decoration: none;
}
.ksl-list__row:hover { color: var(--text); background: rgba(255, 255, 255, .025); }
.ksl-list__row > .ksl-icon { width: 22px; height: 22px; color: var(--muted); }
.ksl-list__row > .ksl-icon:last-child { width: 18px; height: 18px; }
.ksl-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ksl-list__title { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.ksl-list__main .ksl-list__title { flex: none; }
.ksl-list__sub { font-size: 13px; color: var(--muted); }
.ksl-list__label { font-size: 12px; color: var(--muted); }
.ksl-list .ksl-session__date { flex: none; width: 52px; padding-right: 12px; }

.ksl-sched { display: grid; gap: 18px; }
.ksl-sched__label { margin: 0 0 4px; font-family: var(--f-body); font-weight: 500; font-size: 14px; color: var(--muted); }
@container (min-width: 900px) {
    .ksl-sched { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 0; }
    .ksl-sched > :first-child { padding-right: 24px; }
    .ksl-sched > :last-child { padding-left: 24px; border-left: 1px solid var(--line); }
}

/*  An opening stacks its times under the title in a narrow column and lines up in one row when wide. */
.ksl-opening {
    display: grid; align-items: center; gap: 8px 14px;
    grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "title day go" "slots slots go";
}
.ksl-opening > .ksl-list__title { grid-area: title; }
.ksl-opening > .ksl-day { grid-area: day; }
.ksl-opening > .ksl-slots { grid-area: slots; }
.ksl-opening > .ksl-icon { grid-area: go; }
@container (min-width: 1100px) {
    .ksl-opening { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.5fr) 18px; grid-template-areas: "title day slots go"; }
    .ksl-opening > .ksl-day { justify-self: start; }
}
.ksl-day {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
    background: var(--panel-3); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.ksl-day.is-today::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ksl-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ksl-slot {
    padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--well);
    font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ksl-list__row:hover .ksl-slot { border-color: var(--hover-line); }
.ksl-slots__left { margin-left: 6px; font-size: 13px; color: var(--muted); }

.ksl-devlinks { display: grid; }
.ksl-devlinks > ul + ul { border-top: 1px solid var(--line-soft); }
@container (min-width: 520px) {
    .ksl-devlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ksl-devlinks > :first-child { padding-right: 16px; }
    .ksl-devlinks > ul + ul { padding-left: 16px; border-top: 0; border-left: 1px solid var(--line-soft); }
}
.ksl-list__row--media { padding-top: 6px; padding-bottom: 6px; }
.ksl-thumb { position: relative; flex: none; width: 104px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--panel-2); }
.ksl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.ksl-thumb__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    border: 1.5px solid #FFF; background: rgba(0, 0, 0, .55); color: #FFF;
}
.ksl-thumb__play .ksl-icon { width: 14px; height: 14px; margin-left: 2px; }
.ksl-badge {
    display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--red); color: #FFF; font-size: 11.5px; font-weight: 600;
}

.ksl-home .ksl-program { margin-bottom: 12px; }
.ksl-home .ksl-program > .ksl-list__row { padding: 10px 14px; background: var(--well); border: 1px solid var(--line); border-radius: 6px; }
.ksl-home .ksl-program > .ksl-list__row:hover { border-color: var(--hover-line); }
.ksl-home .ksl-tiles { --spark-h: 30px; }
.ksl-home .ksl-tile { padding: 10px 12px; border-radius: 6px; }

/* ── Motion ─────────────────────────────────────────────────────────────── */

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