/* Status accent. Lime is the site's action colour (buttons, links, progress).
   This violet is reserved for the few things that have to stand out FROM the
   lime: VIP, Featured and top-of-discovery placement. Keep it off ordinary
   buttons and links, or it stops meaning anything.
   Verified wears the blue every platform uses for a verified tick, so it reads
   at a glance instead of being a colour people have to learn.
   Gold is the founding mentors' OG mark — the first intake, which nobody can
   buy into later, so it never shares a colour with VIP. */
:root{
  /* Colour tokens: the one copy. Pages used to paste their own :root palette,
     and the copies drifted (three surfaces, two line greys, home's own text
     white). Pages may still add page-only tokens, but these come from here. */
  --bg:#0a0a0b;
  --surface:#17171a;
  --surface-2:#1f1f23;
  --surface-3:#27272c;
  --line:#2c2c31;
  --text:#ededea;
  --ink:#0a0a0b;         /* text on acid and other light fills */
  --text-dim:#8f8f96;
  --acid:#c9ff3d;
  --acid-dim:#8fb32a;
  --warn:#ff4d4d;
  --amber:#ffb020;
  --text-soft:#9a9aa1;   /* between --text-dim and --text */
  --text-faint:#86868e;  /* lowest grey that still passes AA on --surface-2 */
  --line-2:#3a3a41;
  --input:#121214;
  /* Older names some pages still use. */
  --muted2:var(--text-faint);
  --dim:var(--text-soft);
  --dim2:var(--text-faint);
  --surface2:var(--surface-2);
  --surface3:var(--surface-3);
  --acid2:var(--acid-dim);
  --danger:var(--warn);
  --vip:#b18cff;
  --vip-rgb:177,140,255;
  --verified:#1d9bf0;
  --og:#f0c14b;
  /* Page width. Content pages stretch to this with a fluid side gutter,
     the way large storefronts (Beatport, Bandcamp) use the whole screen.
     Reading-heavy pages (FAQ, terms, forms) keep their own narrow measure. */
  --page-max:1600px;
  --w-narrow:640px;
  --w-std:1200px;
  --w-wide:var(--page-max, 1600px);
  --page-gutter:clamp(16px,3.2vw,56px);
  /* Header nav text: brighter than --text-dim so it reads at a glance. */
  --nav-text:#c4c4ca;
}

/* =========================================================
   LABEL READY — SITEWIDE HEADER
   Keeps the header typography and logo consistent.
   Does NOT change body/page typography.
   ========================================================= */

/* ---------- NAVIGATION ---------- */
.topbar .nav,
.topbar .nav a,
.topbar-links,
.topbar-links a,
.topbar-nav,
.topbar-nav a {
    /* Was 11px uppercase mono in the dim grey. At normal zoom it read as
       fine print next to every storefront people compare us with (Splice,
       Beatport run 14-16px sans in near-white), and it was the first thing
       to go when someone zoomed in. The mono stays for small labels and
       tags; primary navigation is plain, readable text. */
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* A text link in .topbar-actions that carries the same weight as a primary
   nav link. Used for "Become a Mentor", which was the only pill in the bar:
   supply had a button and demand had a text link, which read as a site
   recruiting mentors more than one where you book them. Levelling it down
   removes the asymmetry without adding any marketing language. */
.account-bar .topbar-actions .lr-nav-textlink {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    color: var(--nav-text, #c4c4ca) !important;
    text-decoration: none !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
}
.account-bar .topbar-actions .lr-nav-textlink:hover {
    color: var(--text, #fff) !important;
    border-bottom-color: var(--line, #2a2a2a) !important;
    background: none !important;
}

/* As a pill this carried .lr-hide-narrow, which hides it below 1040px — so a
   would-be mentor on a phone, a tablet or a small laptop never saw it in the
   bar at all. As a text link it costs little enough room to stay. Below 360px
   it does have to go, or it pushes the menu button off the right edge. */
/* On phones the nav itself is in the drawer, so the one link left in the bar
   is the one students came for: Lineup. Become a Mentor moves into the drawer. */
.account-bar .topbar-actions .lr-nav-textlink.lr-nav-narrow,
.account-bar .topbar-links .lr-drawer-only { display: none !important; }
@media (max-width: 940px) {
    .account-bar .topbar-actions .lr-nav-textlink.lr-nav-wide { display: none !important; }
    .account-bar .topbar-actions .lr-nav-textlink.lr-nav-narrow { display: inline !important; }
    .account-bar .topbar-links .lr-drawer-only { display: block !important; }
}
@media (max-width: 359px) {
    .account-bar .topbar-actions .lr-nav-textlink,
    .account-bar .topbar-actions .lr-nav-textlink.lr-nav-narrow { display: none !important; }
}

/* ---------- "MORE" NAV GROUP ----------
   Labels, Rankings and Success Stories sit behind one trigger on desktop so
   the four everyday destinations are not competing with them. Below 940px
   the nav is already a full-width drawer, so the group is flattened there and
   all three read as ordinary rows — nothing is hidden on a phone. */
.account-bar .topbar-links .lr-more {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.account-bar .topbar-links .lr-more-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    color: var(--nav-text, #c4c4ca) !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    padding: 6px 2px !important;
    cursor: pointer !important;
}
.account-bar .topbar-links .lr-more-trigger:hover,
.account-bar .topbar-links .lr-more.is-open .lr-more-trigger {
    color: var(--text, #fff) !important;
}
/* Current-page marker when the open page lives inside the group. */
.account-bar .topbar-links .lr-more.is-current-group .lr-more-trigger {
    color: var(--text, #fff) !important;
    border-bottom-color: var(--acid, #c9ff3d) !important;
}
.account-bar .topbar-links .lr-more-panel {
    display: none !important;
    /* position:fixed, not absolute: .topbar-links carries overflow:hidden to
       stop the bar spilling at mid widths, which clipped an absolutely
       positioned panel to a ~30px tall strip. Fixed escapes that clip, and the
       bar is itself fixed, so the panel stays put on scroll. site-nav.js sets
       top/left from the trigger's rect when it opens. */
    position: fixed !important;
    min-width: 190px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: rgba(10, 10, 11, 0.99) !important;
    border: 1px solid var(--line, #2a2a2a) !important;
    border-radius: 4px !important;
    padding: 5px !important;
    z-index: 120 !important;
}
.account-bar .topbar-links .lr-more.is-open .lr-more-panel {
    display: flex !important;
}
.account-bar .topbar-links .lr-more-panel a {
    padding: 11px 13px !important;
    border-radius: 3px !important;
    border-bottom: 0 !important;
}
.account-bar .topbar-links .lr-more-panel a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 0 !important;
}
.account-bar .topbar-links .lr-more-panel a::after { display: none !important; }

@media (max-width: 940px) {
    /* In the drawer the group is not a dropdown at all: the trigger goes, and
       display:contents lifts the three links up so they become ordinary rows
       alongside the rest. */
    .account-bar .topbar-links .lr-more { display: contents !important; }
    .account-bar .topbar-links .lr-more-trigger { display: none !important; }
    .account-bar .topbar-links .lr-more-panel {
        display: contents !important;
        position: static !important;
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    .account-bar .topbar-links .lr-more-panel a {
        padding: 14px 24px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--line, #2a2a2a) !important;
        width: 100% !important;
    }
}

/* ---------- ACCOUNT BAR / TOPBAR ---------- */
.account-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 72px !important;
    min-width: 0 !important;
    /* backdrop-filter removed. A 20px blur on a full-width position:fixed
       bar forces the compositor to re-blur the region behind it on every
       frame. Over the homepage hero — a large background-image plus two
       radial-gradients — that pegged the renderer and froze the page
       (a plain `1+1` could not execute). The bar's background is ~97%
       opaque, so the blur was contributing almost nothing visually. */
    background: rgba(10, 10, 11, 0.97) !important;
    border-bottom: 1px solid var(--line, #2a2a2a) !important;
    display: flex !important;
    align-items: center !important;
    /* The bar's background runs edge to edge, but its contents sit in the
       same centred column as the page (--page-max plus the gutter, like the
       footer). With a flat 30px padding the logo and account menu were
       pinned to the screen edges, so on any wide or zoomed-out screen they
       sat hundreds of pixels outside the content they belong to. */
    padding: 0 max(var(--page-gutter, 30px), calc((100% - var(--page-max, 1600px)) / 2)) !important;
    gap: 25px !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: visible !important;
}
.account-bar .topbar-logo,
.account-bar .brand-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.account-bar .topbar-logo img,
.account-bar .brand-link img {
    height: 44px !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.account-bar .topbar-links {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    /* Was flex-shrink: 0, which — together with the search's 180px
       min-width and the non-shrinking logo and actions — made the bar's
       content wider than the viewport on any screen narrower than about
       1400px, spilling the search box and buttons off the right edge.
       The primary nav is now a fixed four items and is allowed to shrink. */
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.account-bar .topbar-links a {
    position: relative !important;
    flex-shrink: 0 !important;
    color: var(--nav-text, #c4c4ca) !important;
    text-decoration: none !important;
    padding: 6px 2px !important;
    border-bottom: 1px solid transparent !important;
}
.account-bar .topbar-links a:last-child {
    margin-right: 0 !important;
}
.account-bar .topbar-links a::after {
    content: '' !important;
    position: absolute !important;
    left: 2px !important;
    right: 2px !important;
    bottom: -3px !important;
    height: 2px !important;
    background: transparent !important;
    border-radius: 3px !important;
}
.account-bar .topbar-links a:hover {
    color: var(--text, #fff) !important;
    border-bottom-color: var(--line, #2a2a2a) !important;
}
.account-bar .topbar-links a.is-current {
    color: var(--text, #fff) !important;
    border-bottom-color: var(--acid, #c9ff3d) !important;
}
.account-bar .topbar-links a.is-current::after {
    background: var(--acid, #c9ff3d) !important;
}
.account-bar .topbar-search-slot {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: relative !important;
}
.account-bar .site-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 3px !important;
    border: 1px solid var(--line, #2a2a2a) !important;
    background: rgba(31, 31, 35, 0.75) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.account-bar .site-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--text-dim, #8f8f96) !important;
    pointer-events: none !important;
}
.account-bar .site-search-input {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: var(--text, #ededea) !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 14px 0 40px !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}
.account-bar .site-search-input::placeholder {
    color: var(--text-dim, #8f8f96) !important;
}
.account-bar .site-search-results {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    background: rgba(10, 10, 11, 0.98) !important;
    border: 1px solid var(--line, #2a2a2a) !important;
    border-radius: 3px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.34) !important;
    overflow: hidden !important;
    z-index: 1200 !important;
}
.account-bar .site-search-results.has-results {
    display: block !important;
}
.account-bar .site-search-section-label {
    padding: 8px 12px 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #8f8f96) !important;
    background: rgba(255,255,255,0.01) !important;
}
.account-bar .site-search-result {
    display: block !important;
    padding: 10px 12px !important;
    color: var(--text, #ededea) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
}
.account-bar .site-search-result:hover {
    background: rgba(201,255,61,0.06) !important;
}
.account-bar .site-search-result-sub {
    color: var(--text-dim, #8f8f96) !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}
/* Mentors, labels and products: a square thumbnail beside the name. */
.account-bar .site-search-result.has-thumb {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
}
.account-bar .site-search-thumb {
    position: relative !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    background: #1c1c20 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    font: 800 15px/1 Archivo, Inter, sans-serif !important;
    color: var(--text-dim, #8f8f96) !important;
}
.account-bar .site-search-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
.account-bar .site-search-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.account-bar .site-search-name,
.account-bar .site-search-result.has-thumb .site-search-result-sub {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.account-bar .site-search-empty {
    padding: 12px !important;
    color: var(--text-dim, #8f8f96) !important;
    font-size: 12px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
}
body { padding-top: 72px !important; }
.account-bar .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.account-bar .topbar-actions .acc-name,
.account-bar .topbar-actions .account-name {
    color: var(--acid, #c9ff3d) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}
.account-bar .topbar-actions .btn-pill,
.account-bar .topbar-actions button:not(.nav-toggle):not(.lr-account-trigger):not(.lr-account-logout):not(.lr-search-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
    border-radius: 3px !important;
    border: 1px solid var(--line, #2a2a2a) !important;
    background: transparent !important;
    color: var(--text, #ededea) !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.account-bar .topbar-actions .btn-pill:hover,
.account-bar .topbar-actions button:not(.nav-toggle):not(.lr-account-trigger):not(.lr-account-logout):not(.lr-search-toggle):hover {
    border-color: #45454d !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--text, #ededea) !important;
}

/* =========================================================
   BUTTON SYSTEM  (Console)
   One button across the site: uppercase JetBrains Mono, 3px corners,
   three heights, four roles. Every page's own button classes are mapped
   onto it here, so page stylesheets keep only layout (width, margins)
   and no longer decide what a button looks like.

   Heights come from line-height + padding + a 1px border, never a fixed
   height or a display value, so pages that hide a button responsively
   (display:none) keep working.

     sm 32 · md 40 · lg 48
     primary = lime fill · secondary = outline · ghost = text · danger = red
   ========================================================= */
.btn, .btn-primary, .btn-ghost, .hero-cta, button.cta, a.cta, .book-bar-cta, .ar-cta, .tt-cta,
.primary-btn, .secondary-btn, .danger-btn, .promo-copy, .new-message-btn, .send-btn,
.message-mentor-btn, .share-btn, .mini-btn, .act, .small-btn, .vbtn, .fb-reset,
.lrt-btn, .lr-work-btn, .art-play, .mcard-book, .lr-academy-cta, .lr-terms-accept,
.lr-capture-form button, .post-action-btn, .like-btn, .support-close-btn {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap;
    height: auto !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

/* ---- Sizes ---- */
.btn, .btn-primary, .btn-ghost, .hero-cta, button.cta, a.cta, .send-btn,
.lr-terms-accept, .lr-capture-form button {                          /* lg 48 */
    font-size: 12px !important; line-height: 16px !important; padding: 15px 22px !important;
}
.primary-btn, .secondary-btn, .danger-btn, .promo-copy, .new-message-btn,
.message-mentor-btn, .share-btn, .book-bar-cta, .ar-cta, .lr-academy-cta { /* md 40 */
    font-size: 11px !important; line-height: 16px !important; padding: 11px 16px !important;
}
.mini-btn, .act, .small-btn, .vbtn, .fb-reset, .lrt-btn, .lr-work-btn, .art-play,
.mcard-book, .tt-cta, .post-action-btn, .like-btn, .support-close-btn { /* sm 32 */
    font-size: 11px !important; line-height: 14px !important; padding: 8px 12px !important;
}
.act .i, .like-btn .like-icon, .message-mentor-btn svg, .share-btn svg { width: 14px !important; height: 14px !important; }
.oauth-btn { min-height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 3px !important; }

/* ---- Secondary: outline ---- */
.btn-ghost, .btn.btn-ghost, .secondary-btn, .promo-copy.ghost, .message-mentor-btn,
.mini-btn, .act, .small-btn, .vbtn, .fb-reset, .lr-work-btn, .tt-cta, .like-btn, .support-close-btn {
    background: transparent !important; color: var(--text, #ededea) !important; border-color: var(--line, #2c2c31) !important;
}
.btn-ghost:hover, .btn.btn-ghost:hover, .secondary-btn:hover, .promo-copy.ghost:hover, .message-mentor-btn:hover,
.mini-btn:hover, .act:hover, .small-btn:hover, .vbtn:hover, .fb-reset:hover, .lr-work-btn:hover, .tt-cta:hover,
.like-btn:hover, .support-close-btn:hover {
    background: rgba(255,255,255,.04) !important; color: var(--text, #ededea) !important; border-color: #45454d !important; filter: none !important;
}

/* ---- Primary: lime ---- */
.btn, .btn-primary, .hero-cta, button.cta, a.cta, .primary-btn, .promo-copy, .new-message-btn, .send-btn,
.book-bar-cta, .lr-academy-cta, .lr-capture-form button, .lr-terms-accept, .gift-box .ar-cta, .act.primary,
.mini-btn-accept, .art-play, .mcard-book, .lrt-next, .tt-row:hover .tt-cta, .tt-row:focus-visible .tt-cta,
.post-edit-actions .save {
    background: var(--acid, #c9ff3d) !important; color: var(--ink) !important; border-color: var(--acid, #c9ff3d) !important;
}
.btn:hover, .btn-primary:hover, .hero-cta:hover, button.cta:hover, a.cta:hover, .primary-btn:hover, .promo-copy:hover,
.new-message-btn:hover, .send-btn:hover, .book-bar-cta:hover, .lr-academy-cta:hover, .lr-capture-form button:hover,
.lr-terms-accept:hover, .gift-box .ar-cta:hover, .act.primary:hover, .mini-btn-accept:hover, .art-play:hover,
.mcard-book:hover, .lrt-next:hover, .post-edit-actions .save:hover {
    background: var(--acid, #c9ff3d) !important; color: var(--ink) !important; border-color: var(--acid, #c9ff3d) !important;
    filter: brightness(1.08) !important; opacity: 1 !important;
}
.btn.btn-ghost:hover { background: rgba(255,255,255,.04) !important; color: var(--text, #ededea) !important; border-color: #45454d !important; }

/* ---- Ghost: text only ---- */
.share-btn, .post-action-btn, .lrt-back, .act.is-muted {
    background: transparent !important; color: var(--text-dim, #8f8f96) !important; border-color: transparent !important;
}
.share-btn:hover, .post-action-btn:hover, .lrt-back:hover {
    background: var(--surface-2, #1f1f23) !important; color: var(--text, #ededea) !important; border-color: transparent !important;
}
.act.is-muted:hover { background: transparent !important; color: var(--text-dim, #8f8f96) !important; border-color: transparent !important; cursor: default; }
.share-btn.copied { color: var(--acid, #c9ff3d) !important; }

/* ---- Danger: red outline ---- */
.danger-btn, .mini-btn-warn {
    background: transparent !important; color: #ff6b6b !important; border-color: rgba(255,107,107,.4) !important;
}
.danger-btn:hover, .mini-btn-warn:hover {
    background: rgba(255,107,107,.08) !important; color: #ff6b6b !important; border-color: rgba(255,107,107,.7) !important;
}
.post-action-btn.danger:hover, .post-action-btn.delete-post-btn:hover, .vbtn.no:hover {
    background: rgba(255,107,107,.08) !important; color: #ff6b6b !important;
}
.vbtn.ok:hover { color: var(--acid, #c9ff3d) !important; border-color: rgba(201,255,61,.5) !important; }

/* ---- States that carry meaning ---- */
.mini-btn-featured { background: rgba(177,140,255,.12) !important; color: var(--vip, #b18cff) !important; border-color: rgba(177,140,255,.5) !important; }
.act.is-attn { color: var(--acid, #c9ff3d) !important; border-color: rgba(201,255,61,.45) !important; }
.like-btn.liked { background: rgba(201,255,61,.1) !important; color: var(--acid, #c9ff3d) !important; border-color: rgba(201,255,61,.45) !important; }
:is(.btn, .btn-primary, .btn-ghost, .hero-cta, button.cta, .ar-cta, .primary-btn, .secondary-btn, .danger-btn,
    .promo-copy, .new-message-btn, .send-btn, .mini-btn, .act, .small-btn, .vbtn, .fb-reset, .lrt-btn,
    .lr-work-btn, .lr-terms-accept, .lr-capture-form button, .post-action-btn, .like-btn):disabled {
    opacity: .45 !important; cursor: not-allowed !important; filter: none !important;
}
.account-bar .topbar-actions .btn-pill.btn-pill-ghost {
    background: rgba(255,255,255,0.02) !important;
}

/* ---------- LOGGED-IN USER NAME ---------- */
.topbar .account-name,
.topbar-actions .account-name,
.topbar-actions .acc-name,
.account-bar .account-name,
.account-bar .acc-name {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* ---------- HEADER BUTTONS / PILLS ---------- */
.topbar .pill,
.topbar-actions .pill,
.account-bar .btn-pill,
.account-bar button:not(.nav-toggle) {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ---------- LOGO ---------- */
.topbar .brand-link img,
.account-bar .topbar-logo img {
    height: 44px !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
}
.topbar .brand-link,
.account-bar .topbar-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Public-beta tag beside the logo; doubles as the feedback link.
   Negative margin pulls it in against the logo past the bar's 25px gap. */
.account-bar .lr-beta {
    flex-shrink: 0 !important;
    margin-left: -14px !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(201,255,61,.45) !important;
    border-radius: 3px !important;
    color: var(--acid) !important;
    background: rgba(201,255,61,.06) !important;
    font: 600 11px/1 "JetBrains Mono", monospace !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    position: relative !important;
}
/* The chip is small; its tap area isn't. */
.account-bar .lr-beta::after { content: ""; position: absolute; inset: -8px -6px; }
.account-bar .lr-beta:hover,
.account-bar .lr-beta:focus-visible {
    background: rgba(201,255,61,.16) !important;
    border-color: var(--acid) !important;
}
@media (max-width: 600px) {
    .account-bar .lr-beta { margin-left: -8px !important; padding: 2px 5px !important; font-size: 10px !important; letter-spacing: .06em !important; }
}
/* Signed out, a 360-400px bar is already full (logo, Become a Mentor, Log In,
   menu), so in the row the tag pushes the menu button off screen. Lift it out
   of the row and tuck it above the logo's top-right, superscript-style, in
   the bar's top padding. 88px = 16px gutter + the 70px logo + 2px. */
@media (max-width: 400px) {
    .account-bar .lr-beta {
        position: absolute !important;
        top: 4px !important;
        left: 88px !important;
        margin: 0 !important;
        padding: 1px 4px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        letter-spacing: .04em !important;
    }
}

/* =========================================================
   RESPONSIVE NAV — HAMBURGER MENU
   Below the breakpoint, .topbar-links stops competing for
   fixed-width space in the bar and moves into a toggled
   dropdown instead. Paired with header-nav.js, which injects
   the .nav-toggle button and wires up open/close behavior
   sitewide, regardless of how each page builds its nav.
   ========================================================= */
.account-bar .topbar-actions .nav-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    background: transparent !important;
    border: 1px solid var(--line, #2a2a2a) !important;
    border-radius: 3px !important;
    color: var(--text, #ededea) !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.account-bar .topbar-actions .nav-toggle:hover {
    border-color: var(--acid-dim, #8fb32a) !important;
    color: var(--acid, #c9ff3d) !important;
}
.account-bar .topbar-actions .nav-toggle:focus { outline: none !important; }
.account-bar .topbar-actions .nav-toggle:focus-visible {
    outline: 2px solid var(--acid, #c9ff3d) !important;
    outline-offset: 2px !important;
}
.account-bar .topbar-actions .nav-toggle svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/* Between the drawer and a full desktop width the bar tightens instead of
   collapsing. The drawer used to take over at 1040px, which is where a
   1280px laptop lands at 125% browser zoom (or a 1440px one at 140%) — so
   anyone who zoomed in to read the nav lost it altogether. Tightening the
   gaps and stepping the type down a point keeps the links in the bar down to
   940px; the search box is what gives up the room. */
@media (min-width: 941px) and (max-width: 1180px) {
    .account-bar { padding: 0 var(--page-gutter, 20px) !important; gap: 18px !important; }
    .account-bar .topbar-links { gap: 20px !important; }
    .account-bar .topbar-links a,
    .account-bar .topbar-links .lr-more-trigger,
    .account-bar .topbar-actions .lr-nav-textlink { font-size: 14px !important; }
    .account-bar .topbar-actions { gap: 12px !important; }
}

@media (max-width: 940px) {
    .account-bar .topbar-actions .nav-toggle {
        display: inline-flex !important;
        order: 3 !important;
    }
    .account-bar .topbar-search-slot {
        order: 4 !important;
        min-width: 0 !important;
    }
    .account-bar .topbar-actions {
        order: 5 !important;
    }
    .account-bar .topbar-links {
        display: none !important;
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        background: rgba(10, 10, 11, 0.99) !important;
        border-bottom: 1px solid var(--line, #2a2a2a) !important;
        padding: 6px 0 !important;
        z-index: 99 !important;
    }
    .account-bar .topbar-links.is-open {
        display: flex !important;
    }
    .account-bar .topbar-links a {
        padding: 16px 24px !important;
        border-bottom: 1px solid var(--line, #2a2a2a) !important;
        width: 100% !important;
    }
    .account-bar .topbar-links a::after {
        display: none !important;
    }
    .account-bar .topbar-links a.is-current {
        background: rgba(201,255,61,0.05) !important;
    }
}

/* =========================================================
   MENTOR VIP CONVERSION CARD
   Uses the existing membership flow — visual upgrade only.
   Existing JavaScript still controls checkout and plan state.
   ========================================================= */
#membership-box {
    position: relative !important;
    overflow: hidden !important;
    padding: 28px 26px 26px !important;
    border-color: rgba(201,255,61,.34) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(201,255,61,.13), transparent 42%),
        linear-gradient(145deg, rgba(201,255,61,.035), rgba(23,23,26,.98) 45%) !important;
    box-shadow: 0 0 0 1px rgba(201,255,61,.025), 0 18px 55px rgba(0,0,0,.25) !important;
}
#membership-box::before {
    content: 'VIP MENTOR MEMBERSHIP';
    display: block !important;
    margin-bottom: 13px !important;
    color: var(--acid, #c9ff3d) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    line-height: 1.2 !important;
}
#membership-box::after {
    content: '✓ LOWER PLATFORM CUT   ·   ✓ VIP STATUS   ·   ✓ ENHANCED VISIBILITY';
    display: block !important;
    margin-top: 15px !important;
    color: var(--text-dim, #8f8f96) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
    letter-spacing: .04em !important;
}
#membership-status {
    margin: 0 !important;
    max-width: 58ch !important;
    color: var(--text, #ededea) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}
#membership-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 20px !important;
    padding: 14px 18px !important;
    border-radius: 3px !important;
    background: var(--acid, #c9ff3d) !important;
    color: var(--ink) !important;
    box-shadow: 0 8px 28px rgba(201,255,61,.10) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease !important;
}
#membership-btn:hover {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 34px rgba(201,255,61,.18) !important;
}
#membership-btn:active { transform: translateY(0) !important; }
#membership-error { margin-top: 10px !important; }

@media (max-width: 600px) {
    #membership-box { padding: 24px 20px 22px !important; }
    #membership-box::after { font-size: 11px !important; }
}

/* =========================================================
   ACCOUNT MENU  (site-nav.js)
   Everything personal — sessions, profile, messages, settings,
   mentor and admin tools, log out — lives in this menu instead
   of in .topbar-links. The primary nav therefore stays at four
   items for every visitor, rather than growing to nine for a
   mentor-admin and pushing the search and buttons off screen.
   ========================================================= */
.account-bar .topbar-actions .lr-account {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
/* The trigger is your profile photo, like Reddit and SoundCloud. */
.account-bar .topbar-actions .lr-account-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 40px !important;
    padding: 3px 9px 3px 3px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--text-dim, #8f8f96) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.account-bar .topbar-actions .lr-account-trigger:hover,
.account-bar .topbar-actions .lr-account.is-open .lr-account-trigger {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--text, #ededea) !important;
}
.account-bar .topbar-actions .lr-account-trigger > svg {
    flex: 0 0 10px !important;
    transition: transform 0.15s ease !important;
}
.account-bar .topbar-actions .lr-account.is-open .lr-account-trigger > svg {
    transform: rotate(180deg) !important;
}
.account-bar .topbar-actions .lr-account-trigger:focus { outline: none !important; }
.account-bar .topbar-actions .lr-account-trigger:focus-visible {
    outline: 2px solid var(--acid, #c9ff3d) !important;
    outline-offset: 2px !important;
}

/* Profile photo, with the initial underneath for anyone who has no photo. */
.lr-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #26262b;
}
.lr-avatar-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acid, #c9ff3d);
    color: var(--ink);
    font: 800 14px/1 'Archivo', system-ui, sans-serif;
}
.lr-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lr-avatar-lg { width: 38px; height: 38px; }
.lr-avatar-lg .lr-avatar-initial { font-size: 16px; }
.lr-avatar-wrap { position: relative; display: inline-flex; }
.lr-avatar-wrap::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2fd67b;
    border: 2px solid #0a0a0b;
    box-sizing: border-box;
}

.account-bar .topbar-actions .lr-account-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 272px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: #141417 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
    z-index: 1200 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.account-bar .topbar-actions .lr-account.is-open .lr-account-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.account-bar .topbar-actions .lr-account-panel a,
.account-bar .topbar-actions .lr-account-panel .lr-account-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text, #ededea) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.account-bar .topbar-actions .lr-account-panel a:hover,
.account-bar .topbar-actions .lr-account-panel .lr-account-logout:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text, #ededea) !important;
}
.account-bar .topbar-actions .lr-account-panel a.is-current {
    background: rgba(201, 255, 61, 0.08) !important;
    color: var(--acid, #c9ff3d) !important;
}
.account-bar .topbar-actions .lr-account-panel .lr-menu-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #b5b5b0;
}
.account-bar .topbar-actions .lr-account-panel a.is-current .lr-menu-ico { color: var(--acid, #c9ff3d); }
.account-bar .topbar-actions .lr-account-panel a.lr-account-profile {
    min-height: 58px !important;
    padding: 8px 10px !important;
}
.lr-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-menu-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dim, #8f8f96);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* A grouped item starts a new section — mentor tools, admin, settings. */
.account-bar .topbar-actions .lr-account-panel a.lr-account-group {
    position: relative !important;
    margin-top: 13px !important;
}
.account-bar .topbar-actions .lr-account-panel a.lr-account-group::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: -7px;
    height: 1px;
    background: var(--line);
}

/* =========================================================
   SITEWIDE FOOTER  (site-nav.js)
   Apply, FAQ, Support, Terms and Privacy existed as pages but
   nothing on the site linked to them, so they were reachable
   only by typing the URL. They live here now, on every page.
   ========================================================= */
.lr-site-footer {
    margin-top: 80px !important;
    border-top: 1px solid var(--line, #2a2a2a) !important;
    background: rgba(10, 10, 11, 0.6) !important;
}
.lr-footer-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px 30px !important;
    max-width: calc(var(--page-max, 1600px) + 2 * var(--page-gutter, 30px)) !important;
    margin: 0 auto !important;
    padding: 30px var(--page-gutter, 30px) !important;
    box-sizing: border-box !important;
}
.lr-footer-logo { display: flex !important; align-items: center !important; flex-shrink: 0 !important; }
.lr-footer-logo img {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    display: block !important;
    opacity: 0.65 !important;
}
.lr-footer-logo:hover img { opacity: 1 !important; }
.lr-footer-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 24px !important;
}
.lr-footer-links a {
    color: var(--text-dim, #8f8f96) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.lr-footer-links a:hover,
.lr-footer-links a.is-current { color: var(--acid, #c9ff3d) !important; }
.lr-footer-copy {
    margin-left: auto !important;
    color: var(--text-dim, #8f8f96) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
}

/* Below the hamburger breakpoint, drop the secondary pill so the bar keeps
   the logo, the hamburger, the search and "Log In" without wrapping. */
@media (max-width: 1040px) {
    /* Needs to out-specify `.account-bar .topbar-actions .btn-pill`, which
       sets display:inline-flex !important. */
    .account-bar .topbar-actions .lr-hide-narrow { display: none !important; }
    .lr-footer-inner { padding: 26px 20px !important; }
    .lr-footer-copy { margin-left: 0 !important; width: 100% !important; }
}
@media (max-width: 600px) {
    .account-bar { padding: 0 var(--page-gutter, 16px) !important; gap: 12px !important; }
    /* Phones: a step down from the desktop sizes so the logo, Become a
       Mentor, Log In and the menu button still share a 360px bar. The logo
       goes back to 39px, which the 400px beta-tag offset below is sized for. */
    .account-bar .topbar-logo img,
    .account-bar .brand-link img { height: 39px !important; }
    .account-bar .topbar-actions { gap: 10px !important; }
    .account-bar .topbar-actions .lr-nav-textlink { font-size: 13px !important; }
    .account-bar .topbar-actions .btn-pill { font-size: 13px !important; min-height: 36px !important; padding: 7px 12px !important; }
    .account-bar .topbar-actions .lr-account-trigger { max-width: 132px !important; }
}
/* On the narrowest phones the search can't hold a usable field alongside
   the logo, hamburger, bell and Log In — drop it rather than crush it. */
@media (max-width: 480px) {
    .account-bar .topbar-search-slot { display: none !important; }
}

/* ...but search itself stays. site-nav.js puts a search button in the bar;
   tapping it drops the field down as a full-width row under the bar, the
   same spot the menu drawer uses, with results listed beneath it. */
.account-bar .topbar-actions .lr-search-toggle { display: none !important; }
@media (max-width: 480px) {
    .account-bar .topbar-actions .lr-search-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        padding: 0 !important;
        border: 1px solid var(--line, #2a2a2a) !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--nav-text, #c4c4ca) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }
    .account-bar .topbar-actions .lr-search-toggle svg { width: 20px !important; height: 20px !important; pointer-events: none !important; }
    .account-bar.lr-search-open .topbar-actions .lr-search-toggle {
        color: var(--acid, #c9ff3d) !important;
        border-color: rgba(201,255,61,.45) !important;
    }
    .account-bar .topbar-actions .lr-search-toggle:focus-visible {
        outline: 2px solid var(--acid, #c9ff3d) !important;
        outline-offset: 2px !important;
    }
    .account-bar.lr-search-open .topbar-search-slot {
        display: block !important;
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px var(--page-gutter, 16px) 14px !important;
        background: rgba(10, 10, 11, 0.99) !important;
        border-bottom: 1px solid var(--line, #2a2a2a) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
        z-index: 1100 !important;
    }
    .account-bar.lr-search-open .site-search {
        width: 100% !important;
        max-width: none !important;
        height: 48px !important;
    }
    .account-bar.lr-search-open .site-search-results {
        background: rgb(10, 10, 11) !important;
        max-height: calc(100vh - 160px) !important;
        max-height: calc(100dvh - 160px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
    .account-bar.lr-search-open .site-search-result { padding: 13px 14px !important; }
}
/* Signed in, the bar now carries search, messages, bell, account and menu:
   five 40px controls. At 10px gaps that is 14px too wide for a 360px phone,
   so the gaps close up first... */
@media (max-width: 400px) {
    .account-bar .topbar-actions { gap: 6px !important; }
}
/* ...and below 360px the logo steps down and the account button drops its
   chevron (the avatar alone opens the same menu), which keeps every control
   on a 320px screen. The beta tag follows the smaller logo. */
@media (max-width: 359px) {
    .account-bar .topbar-logo img,
    .account-bar .brand-link img { height: 32px !important; }
    .account-bar .topbar-actions { gap: 4px !important; }
    .account-bar .topbar-actions .lr-account-trigger { padding: 3px !important; gap: 0 !important; }
    .account-bar .topbar-actions .lr-account-trigger > svg { display: none !important; }
    .account-bar .lr-beta { left: 75px !important; top: 6px !important; }
}

/* ==========================================================================
   Availability badges + saved-mentor hearts on mentor cards
   --------------------------------------------------------------------------
   Mentor cards gave no clue whether the mentor could actually be booked, so a
   student would pick one, click through and hit "No open slots right now".
   These render from the mentor_availability view — see lr-saved.js.
   ========================================================================== */
.lr-avail{
  /* Same flat, square bar as the session-card flags on the homepage, so
     "Tomorrow" doesn't look like two different things on two pages. */
  display:inline-flex; align-items:center; height:22px; box-sizing:border-box;
  font:800 11px/1 'Inter', sans-serif; letter-spacing:.03em; text-transform:uppercase;
  padding:0 8px; border-radius:0; white-space:nowrap;
}
.lr-avail-open{ color:var(--text); background:rgba(255,255,255,.09); }
/* Inside 48 hours is the one case worth making louder than the rest. */
.lr-avail-soon{ color:var(--ink); background:var(--acid); }
.lr-avail-none{ color:var(--text-dim); background:rgba(143,143,150,.10); }

/* The heart sits over the top-right of a card's artwork. Cards are links, so
   lr-saved.js stops the click propagating rather than relying on z-index
   alone. */
.lr-card-actions{
  position:absolute; top:10px; right:10px; z-index:3;
  display:flex; gap:6px;
}
@media (max-width:600px){
  .lr-card-actions{ top:8px; right:8px; }
}

/* ==========================================================================
   Site announcement banner (site-nav.js, managed in admin.html)
   ========================================================================== */
.lr-announce{ position:relative; z-index:50; border-bottom:1px solid var(--line,#2c2c31); }
.lr-announce-inner{
  max-width:calc(var(--page-max,1600px) + 2 * var(--page-gutter,20px)); margin:0 auto;
  padding:11px var(--page-gutter,20px); display:flex; align-items:center; gap:14px;
  font:500 13px/1.45 'Inter',sans-serif;
}
.lr-announce-msg{ flex:1; min-width:0; }
.lr-announce-link{ color:inherit !important; font-weight:700; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.lr-announce-close{ background:none; border:0; color:inherit; opacity:.7; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.lr-announce-close:hover{ opacity:1; }
.lr-announce-info{ background:#151419; color:var(--text); box-shadow:inset 3px 0 0 var(--vip,#b18cff); }
.lr-announce-promo{ background:var(--acid,#c9ff3d); color:var(--ink); border-bottom-color:var(--acid,#c9ff3d); }
.lr-announce-warning{ background:#2a1f0c; color:#ffe2a8; box-shadow:inset 3px 0 0 var(--amber); }
@media (max-width:600px){ .lr-announce-inner{ flex-wrap:wrap; font-size:13px; gap:8px 14px; } }


/* =========================================================
   MOTION — page transitions, scroll reveal, VIP shine
   ========================================================= */

/* Cross-document view transitions: pages crossfade instead of hard-cutting.
   Browsers without support just navigate normally. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lr-vt-out .2s ease both}
::view-transition-new(root){animation:lr-vt-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes lr-vt-out{to{opacity:0}}
@keyframes lr-vt-in{from{opacity:0}}

/* Scroll reveal. lr-boot.js adds .lr-reveal only to cards that start below
   the fold, then .lr-in as they scroll into view, then removes both.
   Movement only, never opacity: cards parked at opacity:0 left a blank black
   viewport whenever someone scrolled faster than the observer fired. */
.lr-reveal{transform:translateY(4px)}
.lr-reveal.lr-in{transform:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}

/* A light streak across VIP badges. Each badge puts this gradient as the top
   layer of its own background and animates background-position. */
@keyframes lr-shine{0%,58%{background-position:180% 0}100%{background-position:-80% 0}}

/* A slowly turning violet edge for VIP cards, drawn in ::after with a mask so
   it follows the card's corners without touching its layout. */
@property --lr-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lr-spin{to{--lr-spin:360deg}}
.lr-vip-frame{position:relative;isolation:isolate;transition:box-shadow .35s ease}
.lr-vip-frame::after{
  content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--lr-spin),rgba(var(--vip-rgb),.12) 0deg,rgba(var(--vip-rgb),.95) 55deg,#fff 75deg,rgba(var(--vip-rgb),.95) 95deg,rgba(var(--vip-rgb),.12) 160deg,rgba(var(--vip-rgb),.12) 200deg,rgba(var(--vip-rgb),.85) 250deg,rgba(var(--vip-rgb),.12) 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:lr-spin 6s linear infinite;opacity:.8;transition:opacity .35s ease;
}
.lr-vip-frame:hover::after{opacity:1}
.lr-vip-frame:hover{box-shadow:0 20px 50px -18px rgba(var(--vip-rgb),.6)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .lr-reveal{opacity:1;transform:none}
  .lr-vip-frame::after{animation:none}
  .lr-vip,.chip-vip,.mcard-chip.is-vip,.tt-vip,.va-tag,.vip-ribbon{animation:none!important}
}

/* =========================================================
   POLISH LAYER
   Sitewide consistency fixes every page inherits, so the thirty
   page-level stylesheets don't each need the same edit.
   ========================================================= */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(201,255,61,.85);color:var(--ink)}

/* Keyboard focus. Most pages removed outlines on inputs (they swap the
   border colour instead) but gave buttons, links and chips nothing at all. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--acid,#c9ff3d);
  outline-offset:2px;
}
.account-bar .site-search:focus-within{border-color:var(--acid-dim,#8fb32a) !important}
.account-bar .site-search-result:focus-visible{outline:none;background:rgba(201,255,61,.08) !important}
button:disabled{cursor:not-allowed}

/* Eyebrows carry no dot marker (no "live" indicator look). */
.eyebrow::before{display:none !important}

/* Form feedback. Errors and confirmations were 12px monospace text in a
   colour and nothing else, easy to miss under a button. Now a quiet inline
   notice; :not(:empty) keeps the always-present containers invisible. */
.status-msg:not(:empty){font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none}
.status-msg.error:not(:empty),
.status-msg.ok:not(:empty),
.status-msg.success:not(:empty){padding:10px 12px;border:1px solid;border-radius:3px}
.status-msg.error:not(:empty){color:#ff8f8f;background:rgba(255,77,77,.07);border-color:rgba(255,77,77,.28)}
.status-msg.ok:not(:empty),
.status-msg.success:not(:empty){color:var(--acid,#c9ff3d);background:rgba(201,255,61,.06);border-color:rgba(201,255,61,.24)}


/* ============================================================
   WORK ITEMS (C-04) — assignments, mentor feedback and skills,
   whichever script renders them (student dashboard, notifications.js).
   ============================================================ */
@keyframes lr-grow{ from{ width:0; } }
  .work-item{ padding:14px 0; border-top:1px solid var(--line); }
  .work-item:first-child{ border-top:0; padding-top:0; }
  .work-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .work-title{ font:700 15px/1.3 'Archivo', sans-serif; }
  .work-item.is-done .work-title{ color:var(--text-dim); }
  .work-body{ margin:5px 0 0; font-size:15px; color:var(--text-dim); line-height:1.55; white-space:pre-line; }
  .work-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
  .work-meta{ font-size:12px; color:var(--text-dim); }
  .work-meta.is-late{ color:var(--warn); }
  .skill{ margin-bottom:14px; }
  .skill:last-child{ margin-bottom:0; }
  .skill-head{ display:flex; justify-content:space-between; gap:10px; font-size:15px; margin-bottom:6px; }
  .skill-head span{ font:600 12px 'JetBrains Mono', monospace; color:var(--acid); }
  .skill-bar{ height:8px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
  .skill-bar i{ display:block; height:100%; width:var(--w); background:linear-gradient(90deg, var(--acid-dim), var(--acid)); border-radius:inherit; animation:lr-grow 1s cubic-bezier(.2,.7,.2,1) both; }
  .work-done{ display:inline-flex; align-items:center; gap:5px; font:600 12px 'Inter',sans-serif; color:var(--acid,#c9ff3d); white-space:nowrap; }
  .work-done svg{ width:12px; height:12px; }

/* MO-03: back-to-top steps aside near the page end, where it used to sit on
   the signup band's button. site-nav.js sets .lr-near-bottom. */
.lr-near-bottom #back-to-top{display:none !important}

/* MO-01: on phones the page head is just the title, so content starts on
   the first screen. The announcement is one line (tap it to read the rest). */
@media (max-width:600px){
  .eyebrow:has(+ h1){display:none !important}
  h1:not(.stage-name){font-size:28px !important;line-height:1.1 !important;margin-bottom:16px !important}
  h1 + .sub{display:none !important}
  .lr-announce-inner{flex-wrap:nowrap !important;padding-top:9px !important;padding-bottom:9px !important}
  .lr-announce-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .lr-announce.is-open .lr-announce-msg{white-space:normal}
}

/* Back-to-top: square like every other control, neutral until hovered. */
#back-to-top{border-radius:5px !important;border-color:var(--line,#2c2c31) !important;background:rgba(23,23,26,.92) !important;color:var(--text,#ededea) !important}
#back-to-top:hover{opacity:1 !important;border-color:var(--acid-dim,#8fb32a) !important;color:var(--acid,#c9ff3d) !important}

/* L-10: one genre chip, used by the home genre row and the mentors and
   lineup filters. Sans, sentence case, lime only when selected. */
.lr-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; height:36px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--line,#2c2c31); border-radius:3px; background:var(--surface,#17171a); color:var(--text-dim,#8f8f96);
  font:500 13px/1 'Inter',system-ui,sans-serif; letter-spacing:0; text-transform:none; text-decoration:none;
  white-space:nowrap; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.lr-chip:hover{ border-color:#45454d; color:var(--text,#ededea); }
.lr-chip.active, .lr-chip.is-active{ background:var(--acid,#c9ff3d); border-color:var(--acid,#c9ff3d); color:var(--ink); font-weight:600; }
.lr-chip.lr-chip-link{ background:transparent; border-color:transparent; }
.lr-chip.lr-chip-link:hover{ color:var(--text,#ededea); }

/* Genre chips stacked six rows deep on a phone, pushing results off the
   first screen. One swipeable row instead. */
@media (max-width:600px){
  .filter-chips{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filter-chips::-webkit-scrollbar{display:none}
  .filter-chip{flex:0 0 auto;white-space:nowrap}
}

/* ============================================================
   MENTOR ARTWORK (L-04) — generated fallback for missing photos.
   Markup from LR.mentorArt(). Sizing, radius and border come from the
   page's own fallback class; this layer supplies the look.
   ============================================================ */
.lr-art{
  position:relative !important; display:block !important; overflow:hidden !important;
  padding:0 !important; text-align:left !important; color:#f2f2f4 !important;
  container-type:inline-size;
  background:
    radial-gradient(90% 90% at var(--ax,100%) var(--ay,0%), color-mix(in srgb, var(--art-c,#c9ff3d) 20%, transparent), transparent 70%),
    repeating-radial-gradient(circle at var(--ax,100%) var(--ay,0%), rgba(255,255,255,.06) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, #1c1d20, #0d0d0f) !important;
}
.lr-art > span{ position:absolute; }
.lr-art-disc{
  width:44cqi; aspect-ratio:1; border-radius:50%;
  left:var(--ax,100%); top:var(--ay,0%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, #0d0d0f 0 7%, var(--art-c,#c9ff3d) 7.5% 100%);
  box-shadow:0 0 0 10cqi rgba(13,13,15,.35);
  opacity:.92;
}
.lr-art-copy{
  left:8cqi; right:8cqi; bottom:7cqi;
  display:flex; flex-direction:column; gap:2.6cqi;
}
.lr-art-tag{
  font:500 11px/1 'JetBrains Mono', ui-monospace, monospace; font-size:clamp(8px, 4.4cqi, 12px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--art-c,#c9ff3d);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lr-art-name{
  font:800 24px/.92 'Archivo', system-ui, sans-serif; font-size:clamp(14px, 13cqi, 56px);
  letter-spacing:-.025em; color:#f2f2f4; text-wrap:balance; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.lr-art-bare .lr-art-copy{ display:none; }
/* Small slots — the 46px timetable rows and 56px cards on the Lineup, avatars
   on the leaderboard — have no room for the name.
   The text goes and NOTHING replaces it: the sleeve is simply cropped to its
   grooves and the disc in the corner, so a small avatar is a miniature of the
   same artwork the big cards show. Earlier passes at this printed a monogram
   over the disc, but initials on a coloured circle is the grey-tile
   placeholder in disguise — the exact thing this artwork exists to replace.
   Nothing is lost by dropping them: every row that uses an avatar this size
   prints the person's name directly beside it. */
@container (max-width: 119px){
  .lr-art-copy{ display:none; }
  /* These slots are round, and a round crop cuts off the corners — which is
     exactly where the sleeve's disc sits, leaving a dark textured nothing. So
     at this size the record turns to face you: vinyl body, grooves running the
     full tile, and the coloured centre label in the middle. Same object as the
     big artwork, seen head-on instead of as a sleeve.
     It all has to be painted by .lr-art-disc — .lr-art is the query container,
     and a container query can't restyle its own container. */
  .lr-art-disc{
    width:100cqi; left:50%; top:50%; opacity:1; box-shadow:none;
    background:
      radial-gradient(circle, rgba(255,255,255,.22) 0 3%, rgba(0,0,0,0) 3.5%),
      radial-gradient(circle, var(--art-c,#c9ff3d) 0 19%, rgba(0,0,0,0) 19.5%),
      repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,0) 1px 5px),
      radial-gradient(circle at 32% 26%, #2b2b30, #141416 70%);
  }
}

/* ============================================================
   STUDENT ARTWORK — generated fallback for students with no photo.
   Markup from LR.studentArt(): an editorial name card in the house style
   (dark stock, grain, scratches, a short acid bar, a heavy name with a mono
   [ Student ] tag, and a huge outlined first letter cropped off the edge).
   Plainer than the mentor sleeve on purpose: no disc, no genre, no colour
   field. Like .lr-art, size, radius and border come from the page's own class.
   ============================================================ */
.lr-sart{
  position:relative !important; display:block !important; overflow:hidden !important;
  padding:0 !important; text-align:left !important; color:#f2f2f4 !important; container-type:inline-size;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(201,255,61,.07), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--st,#151515) 70%, #2a2a2a), var(--st,#151515) 55%, #0b0b0c) !important;
}
.lr-sart::before, .lr-sart::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; }
.lr-sart::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.2; mix-blend-mode:screen; }
.lr-sart::after{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-10 70 L180 40' stroke-width='.6' opacity='.5'/%3E%3Cpath d='M60 260 L330 170' stroke-width='.45' opacity='.4'/%3E%3Cpath d='M250 20 L410 90' stroke-width='.8' opacity='.3'/%3E%3Cpath d='M120 150 l40 -6' stroke-width='1.2' opacity='.35'/%3E%3Cpath d='M300 240 l22 10' stroke-width='1' opacity='.3'/%3E%3C/svg%3E") var(--sx,30%) var(--sy,20%) / 260px auto repeat; opacity:.35; }
.lr-sart > span{ position:absolute; }
.lr-sart-big{
  font:800 100px/.78 'Archivo', system-ui, sans-serif; font-size:118cqi;
  letter-spacing:-.05em; white-space:nowrap; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:max(1px, .45cqi) rgba(242,242,244,.24);
  bottom:-20cqi; right:-10cqi;
}
.lr-sart-l .lr-sart-big{ right:auto; left:-8cqi; }
.lr-sart-bar{
  left:8cqi; top:8cqi; width:15cqi; height:max(3px, 2.2cqi); background:var(--acid);
  clip-path:polygon(0 12%, 38% 0, 71% 18%, 100% 4%, 97% 88%, 60% 100%, 22% 84%, 2% 100%);
}
.lr-sart-copy{
  left:8cqi; right:8cqi; bottom:7cqi; z-index:1;
  display:flex; flex-direction:column; gap:2.4cqi;
}
.lr-sart-tag{
  font:500 11px/1 'JetBrains Mono', ui-monospace, monospace; font-size:clamp(8px, 4.2cqi, 11px);
  letter-spacing:.14em; text-transform:uppercase; color:#9c9c98;
}
.lr-sart-name{
  font:800 20px/.95 'Archivo', system-ui, sans-serif; font-size:clamp(13px, 10.5cqi, 40px);
  letter-spacing:-.02em; text-transform:uppercase; color:#f2f2f4; text-wrap:balance; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lr-sart-bare .lr-sart-copy{ display:none; }
/* Banner: the whole name, outlined, running off the right edge. */
.lr-sart-wide .lr-sart-big{ font-size:clamp(70px, 14cqi, 210px); line-height:.8; right:auto; bottom:auto; left:-1cqi; top:5.5cqi; -webkit-text-stroke:1.5px rgba(242,242,244,.2); }
.lr-sart-wide .lr-sart-bar{ left:2.4cqi; top:2.6cqi; width:5cqi; height:6px; }
.lr-sart-wide .lr-sart-copy{ display:none; }
/* Avatars: the cropped letter and the bar. The name is printed beside them. */
@container (max-width: 119px){
  .lr-sart-copy{ display:none; }
  .lr-sart-big{ font-size:128cqi; bottom:-22cqi; right:-10cqi; -webkit-text-stroke:max(1px, 1.3cqi) rgba(242,242,244,.6); }
  .lr-sart-l .lr-sart-big{ left:-6cqi; }
  .lr-sart-bar{ left:12cqi; top:14cqi; width:30cqi; height:max(3px, 5cqi); }
}

/* =========================================================
   SITEWIDE TYPOGRAPHY + PHOTO FIXES
   Three things that were wrong on every page rather than one,
   so they are fixed once here instead of page by page.
   ========================================================= */

/* ---------- 1. PHOTO CROP ----------
   Mentor photos are rendered with object-fit:cover into square and portrait
   tiles. Cover centres the crop, and a head sits in the top third of almost
   every press shot, so a tall photo in a square tile lost the top of the
   face. Bias the crop upward: for a square or landscape source this is
   indistinguishable from centre, and for a tall one it keeps the head in.
   Every mentor photo on the site carries data-lr-art (see LR.mentorPhoto in
   lr-ui.js), so this reaches all of them without touching each page. */
img[data-lr-art], img[data-lr-sart]{ object-position: 50% 22%; }

/* ---------- 2. BODY PROSE ----------
   Paragraphs inherited whatever line-height their page happened to set —
   1.4, 1.5, 1.65, or none at all, which left <li> at the browser's cramped
   "normal". And on reading-heavy pages 15px text ran the full 700px column:
   about 95 characters a line, well past the 60-75 that reads comfortably.
   Both rules are deliberately unweighted (no !important, element selectors)
   so any page that has genuinely chosen its own measure or rhythm still wins.
   text-wrap:pretty stops the one-word last line that made long paragraphs
   look ragged. */
p, li, dd, blockquote, figcaption{ text-wrap: pretty; }
p, li, dd{ line-height: 1.65; }

/* A real measure for the places that are actually long-form. */
.legal-content p, .legal-content li,
.faq-answer p, .faq-answer li,
.lede, .lead, .panel-sub, .section-sub, .payout-note,
.post-body p, .article-body p,
.prose p, .stage-copy p, .stage-bio p, .lr-academy-text{ max-width: 68ch; }

/* ---------- 3. FIELD AND STAT LABELS ----------
   Across the dashboards, settings and admin the NAME of a field was the
   dimmest thing in the row: 11px uppercase mono at --text-dim (var(--text-dim)),
   sitting above a 15px near-white value. That inverts the hierarchy — you
   could read every answer and not the questions. Same typeface, same case,
   same size relationship to the value; just brought up to a weight and
   contrast you can read without leaning in. Hints and helper text stay dim,
   because those really are secondary. */
label,
.fact dt, .meta-item .label, .tile-label, .preview-label, .np-label,
.p-sel-label, .earn-label, .va-label, .rel-label, .plan-label,
.stat-label, .payout-account-label, .lr-statgrid-k{
  color: #d6d6d9 !important;
  font-weight: 600 !important;
}

/* The helper line under a field is the one thing here that SHOULD recede. */
.field-hint, .card-hint, .hint, label .pf-optional, label small{
  color: var(--text-dim, #8f8f96) !important;
  font-weight: 400 !important;
}

/* Skip link (site-nav.js): off-screen until it has keyboard focus, then a
   solid acid tab over the top-left of the header. */
.lr-skip-link{
  position:fixed; top:8px; left:8px; z-index:10000;
  padding:10px 14px; border-radius:3px;
  background:var(--acid,#c9ff3d); color:var(--ink);
  font:700 13px 'Inter',system-ui,sans-serif; text-decoration:none;
  transform:translateY(-200%);
}
.lr-skip-link:focus,.lr-skip-link:focus-visible{ transform:none; outline:2px solid #0a0a0b; outline-offset:-4px; }
main[tabindex="-1"]:focus{ outline:none; }
/* Land below the sticky header, not under it. */
main{ scroll-margin-top:88px; }

/* Visually hidden, still read by screen readers. */
.lr-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* "Still loading" note (LR.skeleton and static loading placeholders): stays
   out of sight and out of the accessibility tree for 6s, then appears. If the
   content arrives first, it goes with the placeholder and nobody sees it. */
.lr-slow-note{display:block;margin-top:10px;font:400 13px/1.5 'Inter',system-ui,sans-serif;color:var(--text-dim,#8f8f96);
  visibility:hidden;opacity:0;animation:lr-slow-in .4s cubic-bezier(.16,1,.3,1) 6s forwards}
.lr-slow-note a{color:var(--acid,#c9ff3d);text-decoration:underline;text-underline-offset:3px}
@keyframes lr-slow-in{to{visibility:visible;opacity:1}}
@media (prefers-reduced-motion:reduce){.lr-slow-note{animation-duration:0s}}

/* ==========================================================================
   Touch devices
   --------------------------------------------------------------------------
   Everything here is gated on a coarse pointer, so a mouse and trackpad see
   the site exactly as before.

   Form fields: iOS Safari zooms the whole page in when a field under 16px
   takes focus and leaves it zoomed, so every search box, filter and settings
   field on a phone threw the layout sideways. No field on the site is set
   above 16px, so raising the floor to 16px changes nothing else.

   Header: Log In was 36px tall and Lineup a 29px text link; both keep their
   look and get a 44px tap height. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }
    .account-bar .topbar-actions .btn-pill { min-height: 44px !important; }
    /* Genre and specialty chips (home, mentors, lineup) were 36px rows. */
    .lr-chip { min-height: 44px !important; }
    /* Inline, so padding grows the hit box without moving the text. */
    .account-bar .topbar-actions .lr-nav-textlink {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
}

/* ==========================================================================
   Dashboard tab strips (mentor, student, label, admin)
   --------------------------------------------------------------------------
   Below 980px each dashboard's side nav becomes one sideways-scrolling row
   with its scrollbar hidden, so nothing said there were more tabs off to
   the right. lr-ui.js marks which edge has more to show (.lr-more-left /
   .lr-more-right); a sticky fade sits on that edge. The fades are sticky
   flex items rather than a mask so the strip's own sticky background stays
   solid over the page scrolling beneath it. */
@media (max-width: 980px) {
    .dash-nav::before,
    .dash-nav::after {
        content: "";
        position: sticky;
        flex: 0 0 36px;
        align-self: stretch;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s ease;
    }
    .dash-nav::before {
        left: 0;
        order: -999;
        margin-right: -36px;
        background: linear-gradient(90deg, rgb(10,10,11) 15%, rgba(10,10,11,0));
    }
    .dash-nav::after {
        right: 0;
        order: 999;
        margin-left: -36px;
        background: linear-gradient(270deg, rgb(10,10,11) 15%, rgba(10,10,11,0));
    }
    .dash-nav.lr-more-left::before,
    .dash-nav.lr-more-right::after { opacity: 1; }
}

/* ---- Catalogue toolbar: Mentors, Lineup, Labels, Shop ----
   One order on every catalogue page: a full-width search, the category
   chips or tabs under it, then one unboxed row of 36px dropdowns with
   Reset next to them and the count / sort pushed right. */
.cat-search{position:relative;display:block;width:100%;margin:0 0 14px}
.cat-search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.cat-search input:is([type=search],[type=text]){display:block;width:100%;max-width:none;height:44px;min-height:44px;margin:0;padding:0 14px 0 40px;box-sizing:border-box;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;color:var(--text);font:400 15px 'Inter',sans-serif}
.cat-search input::placeholder{color:var(--text-dim)}
.cat-search input:focus{outline:none;border-color:var(--acid)}
.cat-select{appearance:none;-webkit-appearance:none;width:auto;max-width:200px;height:36px;padding:0 30px 0 11px;box-sizing:border-box;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8f96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center/10px 6px;
  border:1px solid var(--line);border-radius:3px;color:var(--text);font:500 13px 'Inter',sans-serif;cursor:pointer}
.cat-select:focus{outline:none;border-color:var(--acid)}
.cat-select.is-set{border-color:rgba(201,255,61,.6);color:var(--acid)}
.cat-toggle{display:inline-flex;align-items:center;height:36px;padding:0 12px;box-sizing:border-box;background:transparent;color:var(--text-dim);
  border:1px solid var(--line);border-radius:3px;font:500 13px 'Inter',sans-serif;cursor:pointer;user-select:none}
.cat-toggle:hover{color:var(--text);border-color:#45454d}
.cat-toggle[aria-pressed="true"],.cat-toggle:has(input:checked){color:var(--ink);background:var(--acid);border-color:var(--acid)}
/* Labels' toggle is a <label>, which the site-wide label rule forces to bold, tracked, light grey. */
label.cat-toggle{color:var(--text-dim)!important;font-weight:500!important;letter-spacing:0!important}
label.cat-toggle:hover{color:var(--text)!important}
label.cat-toggle:has(input:checked){color:var(--ink)!important}
.cat-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cat-toggle:has(input:focus-visible){outline:2px solid var(--acid);outline-offset:2px}
.cat-reset{height:36px;padding:0 12px;box-sizing:border-box;background:none;border:1px solid var(--line);border-radius:3px;color:var(--text-dim);
  font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cat-reset:hover{color:var(--text);border-color:#45454d}
.cat-count{font:500 13px 'Inter',system-ui,sans-serif;letter-spacing:0;color:var(--text-dim);font-variant-numeric:tabular-nums;text-transform:none}
@media (pointer:coarse){.cat-select,.cat-toggle,.cat-reset{min-height:44px}}
/* 16px stops iOS zooming into the field on focus. */
@media (max-width:620px){.cat-search input:is([type=search],[type=text]){font-size:16px}}

/* ---- Dashboards: shared ease-of-use pieces ---------------------------------
   One small title naming the open tab, instead of eyebrow + big
   "Name's X Dashboard" + subtitle (the sidebar card already says who you are). */
.dash-title{font:800 26px/1.15 'Archivo',sans-serif;letter-spacing:-.015em;margin:0 0 18px;color:var(--text)}
.dash-title span{color:inherit}
@media (max-width:980px){.dash-title{font-size:22px;margin-bottom:14px}}

/* Policy and how-it-works text, folded behind one quiet link so each card
   opens with a single line. */
.hint-more{margin:-8px 0 14px;font-size:13px;color:var(--text-dim)}
.hint-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--text-dim);font:500 12px 'Inter',sans-serif;user-select:none}
.hint-more>summary::-webkit-details-marker{display:none}
.hint-more>summary::before{content:'i';display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font:700 10px/1 'Inter',sans-serif}
.hint-more>summary:hover{color:var(--text)}
.hint-more[open]>summary{color:var(--text)}
.hint-more>:not(summary){margin:8px 0 0;line-height:1.6;max-width:80ch}
.hint-more p{margin:8px 0 0}

/* Row overflow menu: rare and destructive actions (Hide, Delete, Remove)
   live behind ⋯ instead of sitting on every row. Plain <details>, so the
   buttons inside keep whatever handlers the page already binds to them. */
.more-menu{position:relative;display:inline-block;flex:none}
.more-menu>summary{list-style:none;display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:3px;
  background:transparent;color:var(--text-dim);cursor:pointer;font:700 16px/1 'Inter',sans-serif;letter-spacing:1px;user-select:none}
.more-menu>summary::-webkit-details-marker{display:none}
.more-menu>summary:hover,.more-menu[open]>summary{color:var(--text);border-color:#45454d}
.more-menu>summary:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:168px;display:flex;flex-direction:column;padding:5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.more-pop>*{display:block;width:100%;margin:0!important;padding:9px 11px!important;text-align:left;background:none!important;border:0!important;border-radius:3px!important;
  color:var(--text)!important;font:500 13px 'Inter',sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none!important}
.more-pop>*:hover{background:var(--surface-3)!important}
.more-pop>.is-danger,.more-pop>.mini-btn-warn,.more-pop>.it-del{color:#ff7a66!important}
.more-pop>:disabled{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){.more-menu>summary{width:40px;height:40px}}

/* Sidebar help: the tour replay and support, out of the nav's way. */
.dash-help{margin-top:6px;padding:0 14px}
.dash-help>summary{list-style:none;cursor:pointer;font:500 13px 'Inter',sans-serif;color:var(--text-dim);padding:6px 0;user-select:none}
.dash-help>summary::-webkit-details-marker{display:none}
.dash-help>summary::after{content:' \25BE';font-size:10px}
.dash-help>summary:hover,.dash-help[open]>summary{color:var(--text)}
.dash-help-list{display:flex;flex-direction:column;gap:2px;padding:2px 0 4px}
.dash-help-list>*{background:none;border:0;padding:5px 0;margin:0;text-align:left;cursor:pointer;color:var(--text-dim);font:500 13px 'Inter',sans-serif;text-decoration:none}
.dash-help-list>*:hover{color:var(--acid)}
@media (max-width:980px){.dash-help{display:none}}

/* Sidebar identity card (mentor, student). A badge, if any, sits inside it. */
.dash-you{display:flex;align-items:center;gap:11px;padding:10px;margin-bottom:12px;border:1px solid var(--line);border-radius:5px;background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
.dash-you[hidden]{display:none}
.dash-you:hover{border-color:var(--acid-dim)}
.dash-you-ph{width:42px;height:42px;flex:none;border-radius:3px;object-fit:cover;overflow:hidden}
.dash-you b{display:block;font:700 14px/1.2 'Archivo',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-you small{display:block;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--acid);margin-top:3px}
.dash-you small.is-founding{color:#e8c46a}
.dash-you small.is-vip{color:var(--vip)}
.dash-you>span{min-width:0}
@media (max-width:980px){.dash-you{display:none!important}}

/* "Today": the short list of things that need doing, first thing on a dashboard. */
.today-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.today-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px}
.today-item.is-urgent{border-color:rgba(255,176,32,.45);box-shadow:inset 3px 0 0 var(--amber)}
.today-item .ti-copy{flex:1;min-width:0}
.today-item .ti-title{font:600 14px/1.35 'Inter',sans-serif;color:var(--text)}
.today-item .ti-sub{font-size:13px;color:var(--text-dim);margin-top:2px}
.today-item .ti-go{flex:none}
.today-clear{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:14px;padding:4px 0}
.today-clear::before{content:'\2713';display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(201,255,61,.12);color:var(--acid);font-size:12px;font-weight:700}
.today-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.today-stat{display:block;text-align:left;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:5px;color:inherit;text-decoration:none;cursor:pointer;font:inherit}
.today-stat:hover{border-color:var(--acid-dim)}
.today-stat b{display:block;font:800 24px/1.1 'Archivo',sans-serif;color:var(--text)}
.today-stat span{display:block;margin-top:4px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
@media (max-width:720px){.today-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-nav .dash-count{min-width:20px;height:20px;padding:0 6px;border-radius:5px;background:var(--acid);color:var(--ink);font:700 11px/20px 'JetBrains Mono',monospace;text-align:center}
.dash-nav .dash-count[hidden]{display:none}
.dash-nav .dash-nav-sub{margin-top:0;padding-top:10px;border-top:0}
.bk.is-flash,.card.is-flash{outline:2px solid var(--acid);outline-offset:2px;transition:outline-color .3s}
.dash-nav .dash-nav-link.is-active{color:var(--acid)}
/* A two-up grid whose partner card is hidden goes full width. */
.dash-grid-2:has(> .card[hidden]){grid-template-columns:minmax(0,1fr)}