.course-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.course-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(126, 122, 193, 0.1);
    color: var(--primary);
    border: 1px solid rgba(125, 117, 183, 0.12);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

.course-pill-soft {
    background: #f5f5fb;
    color: #6c6f8d;
}

.course-target-label {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.course-target-value {
    color: var(--text);
    font-weight: 700;
    text-align: right;
    max-width: 58%;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}@media (max-width: 700px) {
    .course-grid {
        grid-template-columns: 1fr;
    }

    .course-target-value {
        max-width: 100%;
        text-align: left;
    }
}

.course-sessions-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.course-session-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(125, 117, 183, 0.12);
    box-shadow: 0 10px 30px rgba(40, 44, 90, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.course-session-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(40, 44, 90, 0.1);
    border-color: rgba(125, 117, 183, 0.22);
}

.course-session-card-topline {
    height: 6px;
    background: linear-gradient(90deg, var(--primary), #c7c2f0);
}

.course-session-card-body {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
}

.course-session-card-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.course-session-number-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(126, 122, 193, 0.2), rgba(247, 248, 253, 0.95));
    border: 1px solid rgba(125, 117, 183, 0.14);
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 800;
}

/* Illustrated topic tile — replaces the session number box when the topic has
   art. The wrapper stays unclipped so the order bubble can overlap the corner;
   the SVG itself carries the rounding. */
.course-session-topic-art {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
}

.course-session-topic-art .lm-topic-art {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 1px solid rgba(125, 117, 183, 0.14);
    box-shadow: 0 6px 14px rgba(40, 44, 90, 0.08);
}

/* The session's place in the course — same language as the game-modal step
   bubbles, so the list reads as an ordered trajectory (1 → 2 → …). */
.course-session-order {
    position: absolute;
    top: -7px;
    left: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(40, 44, 90, 0.22);
}

.course-session-card-middle {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.course-session-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.course-session-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.course-session-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-session-open-arrow {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 800;
    transition: transform 0.18s ease;
}

.course-session-card:hover .course-session-open-arrow {
    transform: translateX(3px);
}@media (max-width: 900px) {
    .course-sessions-list {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {

    .course-session-card-body {
        padding: 14px;
    }

    .course-session-title {
        font-size: 1.1rem;
    }
}

.courses-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 14px 6px;
}

.courses-actions .btn {
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(120, 110, 200, 0.12);
}

/* Match the site's main purple buttons. Uses the shared token (#625fa0,
   ~5.7:1 white-on-purple) so it clears WCAG AA — the old #817cc5 was 3.73:1. */
.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 18px rgba(120, 110, 200, 0.18);
    transform: translateY(-1px);
}

/* Soft secondary button */
.btn-secondary {
    background: #ececf6;
    color: #5f6185;
}

.btn-secondary:hover {
    background: #e3e4f1;
}
/* ═══ "Indigo banner" course design ═══════════════════════════════════
   One saturated band on the course page; quiet hairline cards in the
   catalogue. The band is the page's single loud surface. */

.course-hero-band {
    border-radius: 24px;
    background: linear-gradient(115deg, #565394 0%, #4f4c83 55%, #454272 100%);
    color: #fff;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    gap: 34px;
    box-shadow: 0 18px 40px rgba(79, 76, 131, 0.28);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.course-hero-band::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.course-hero-main {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.course-hero-flag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 6px 14px 6px 7px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.course-hero-flag img {
    display: block;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.course-hero-band h1 {
    margin: 14px 0 10px;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}

.course-hero-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.course-hero-chip {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 0.82rem;
    font-weight: 600;
}

.course-hero-stats {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.course-hero-stat {
    padding: 6px 30px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.course-hero-stat:first-child {
    border-left: 0;
}

.course-hero-stat b {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.course-hero-stat span {
    display: block;
    margin-top: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 760px) {
    .course-hero-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding: 26px 24px;
    }

    .course-hero-band h1 {
        font-size: 1.7rem;
    }

    .course-hero-stats {
        width: 100%;
        justify-content: flex-start;
    }

    .course-hero-stat {
        padding: 6px 26px 6px 0;
        text-align: left;
        border-left: 0;
    }
}

/* ── Catalogue card ─────────────────────────────────────────────────── */

.course-card-v3 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 22px rgba(34, 42, 70, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    text-decoration: none;
    color: inherit;
}

.course-card-v3:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(34, 42, 70, 0.1);
    text-decoration: none;
    color: inherit;
}

.course-card-v3-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-card-v3-flag {
    width: 34px;
    height: 21px;
    border-radius: 5px;
    object-fit: cover;
    display: block;
    box-shadow: 0 1px 4px rgba(34, 42, 70, 0.25);
    flex-shrink: 0;
}

.course-card-v3-flag-emoji {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.course-card-v3-head h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.course-card-v3-sub {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

.course-card-v3-stats {
    display: flex;
    gap: 22px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.course-card-v3-stat b {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}

.course-card-v3-stat span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.course-card-v3-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 2px 0 4px;
}

.course-card-v3-arr {
    transition: transform 0.16s ease;
}

.course-card-v3:hover .course-card-v3-arr {
    transform: translateX(4px);
}


/* === Course view switch (home + catalogue) ==========================
   Cards-vs-player segmented control, its "what's the difference?" tip and
   the flag images on the cards. Shared by the home page's starter strip and
   the full catalogue, so it lives here rather than inline in one template. */
/* Real flag images (replacing emoji) on the course cards. */
  .quickpick-flag-img { width: 46px; height: 35px; border-radius: 6px; object-fit: cover; display: block; box-shadow: 0 2px 8px rgba(34, 42, 70, 0.20); }
  .aurora-ccard-flag-img { width: 42px; height: 32px; border-radius: 6px; object-fit: cover; display: block; box-shadow: 0 2px 8px rgba(34, 42, 70, 0.18); }
  /* Segmented switch between the catalogue cards and the player tiles,
     centered, with a small expandable "what's the difference?" note. */
  .home-course-viewswitch-row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
  .home-course-viewswitch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }
  .home-course-viewswitch button { min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
  .home-course-viewswitch button.active { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(98, 95, 160, 0.35); }
  @media (hover: hover) { .home-course-viewswitch button:not(.active):hover { color: var(--primary-dark); } }
  .home-player-note { margin: 0 0 18px; color: var(--muted); max-width: 60ch; }
  .home-viewswitch-help { position: relative; display: inline-flex; justify-content: center; }
  .home-viewswitch-help-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--muted); cursor: pointer; }
  .home-viewswitch-help-btn:hover, .home-viewswitch-help-btn[aria-expanded="true"] { color: var(--primary-dark); }
  /* Anchored tooltip bubble (not a modal) — sits right under the button, with a caret. */
  /* The class sets display:grid, which beats the UA's [hidden] rule — without
     this the tip stays laid out (invisible but hit-testable) with z-index 60 and
     swallows taps on the filter bar underneath it. */
  .home-viewswitch-help-tip[hidden] { display: none; }
  .home-viewswitch-help-tip { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: min(430px, calc(100vw - 40px)); z-index: 60; text-align: left; display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(34, 42, 70, 0.16); color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
  .home-viewswitch-help-tip::before { content: ""; position: absolute; top: -6.5px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .home-viewswitch-help-tip p { margin: 0; }
  .home-viewswitch-help-tip strong { color: var(--text); }
  /* The three key numbers, moved from the hero to a slim strip below the catalogue. */
  .home-stats-strip { padding-top: 0; }
  @media (max-width: 560px) { .home-course-viewswitch { width: 100%; } .home-course-viewswitch button { flex: 1; justify-content: center; } }