/* Job board — shared job-card component (used on Home, /jobs, and the /careers teaser)
   plus the /jobs board page and /jobs/:slug detail page layouts. */
.jb-page { --jb-ink: #0f172a; --jb-muted: #64748b; --jb-line: rgba(15, 23, 42, 0.1); --jb-accent: #7c3aed; --jb-accent-2: #db2777; }

/* ── Job card ─────────────────────────────────────────────────────────── */
.jb-card {
    background: #fff;
    border: 1px solid var(--jb-line);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    height: 100%;
}

.jb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); border-color: rgba(124, 58, 237, 0.3); }

.jb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }

.jb-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--jb-accent);
}

.jb-card-featured {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
}

.jb-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--jb-ink); }
.jb-card h3 a { color: inherit; text-decoration: none; }
.jb-card h3 a:hover { color: var(--jb-accent); }

.jb-card-company { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--jb-muted); font-weight: 600; }
.jb-card-company i { color: var(--jb-accent); font-size: 0.8rem; }

.jb-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: var(--jb-muted); }
.jb-card-meta span { display: inline-flex; align-items: center; gap: 0.3rem; background: #f8fafc; border: 1px solid var(--jb-line); padding: 0.25rem 0.55rem; border-radius: 8px; }

.jb-card-excerpt { margin: 0; font-size: 0.88rem; color: var(--jb-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

.jb-card-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    -webkit-text-fill-color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.jb-card-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(124, 58, 237, 0.35); }
.jb-card-cta-hint { margin: 0; font-size: 0.72rem; color: var(--jb-muted); text-align: center; }

/* ── Home page section ───────────────────────────────────────────────── */
.jb-home-section { padding: 4.5rem 0; background: #fff; }
.jb-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.jb-home-empty { text-align: center; padding: 3rem 1rem; color: var(--jb-muted, #64748b); background: #f8fafc; border-radius: 16px; border: 1px dashed rgba(15, 23, 42, 0.15); }
.jb-home-cta { text-align: center; margin-top: 2.5rem; }

/* ── /jobs board page ────────────────────────────────────────────────── */
.jb-hero {
    padding: 7.5rem 0 3rem;
    background: linear-gradient(135deg, #1e1b4e 0%, #4c1d95 55%, #831843 120%);
    color: #fff;
    text-align: center;
}
.jb-hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.28); margin-bottom: 1rem; }
.jb-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.85rem; }
.jb-hero p { max-width: 620px; margin: 0 auto; color: rgba(255, 255, 255, 0.85); font-size: 1.02rem; line-height: 1.6; }
.jb-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

/* ── /jobs sidebar + content layout ─────────────────────────────────── */
.jb-board { padding: 3rem 0 4.5rem; background: #f8fafc; }
.jb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.jb-sidebar {
    background: #fff;
    border: 1px solid var(--jb-line);
    border-radius: 16px;
    padding: 1.1rem;
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.jb-sidebar-all {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 0.7rem; border-radius: 10px; margin-bottom: 0.75rem;
    font-weight: 700; font-size: 0.92rem; color: var(--jb-ink); text-decoration: none;
    background: #f8fafc;
}
.jb-sidebar-all:hover { background: rgba(124, 58, 237, 0.08); }
.jb-sidebar-all.is-active { background: var(--jb-accent); color: #fff; -webkit-text-fill-color: #fff; }
.jb-sidebar-all i { width: 1.1rem; text-align: center; }

.jb-sidebar-group { margin-bottom: 1.1rem; }
.jb-sidebar-group:last-child { margin-bottom: 0; }

.jb-sidebar-industry {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--jb-muted); padding: 0.4rem 0.7rem 0.35rem;
}

.jb-sidebar-cat {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.7rem; border-radius: 9px; margin: 0.1rem 0;
    font-size: 0.85rem; font-weight: 500; color: var(--jb-ink); text-decoration: none;
    transition: background 0.12s ease;
}
.jb-sidebar-cat:hover { background: #f8fafc; }
.jb-sidebar-cat.is-active { background: rgba(124, 58, 237, 0.1); color: var(--jb-accent); font-weight: 700; }
.jb-sidebar-cat i { width: 1.1rem; text-align: center; color: var(--jb-muted); font-size: 0.85rem; flex-shrink: 0; }
.jb-sidebar-cat.is-active i { color: var(--jb-accent); }
.jb-sidebar-cat span { flex: 1; line-height: 1.3; }
.jb-sidebar-cat em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--jb-muted); background: #f1f5f9; padding: 0.1rem 0.4rem; border-radius: 999px; }
.jb-sidebar-cat.is-active em { background: rgba(124, 58, 237, 0.15); color: var(--jb-accent); }

.jb-content { min-width: 0; }
.jb-board-head { margin-bottom: 1rem; }
.jb-board-head h2 { margin: 0 0 0.4rem; font-size: 1.4rem; letter-spacing: -0.01em; }
.jb-board-head p { margin: 0; color: var(--jb-muted); }

.jb-filters {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end;
    margin: 0 0 1.5rem; padding: 1rem 1.1rem; background: #f8fafc;
    border: 1px solid var(--jb-line); border-radius: 14px;
}
.jb-filters-body { display: contents; }
.jb-sheet-head { display: none; }
.jb-mobile-toolbar { display: none; }
.jb-sheet-backdrop { display: none; }
.jb-filters label { display: flex; flex-direction: column; gap: 0.3rem; min-width: 140px; flex: 1; }
.jb-filters label span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--jb-muted); }
.jb-filters select {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--jb-line);
    border-radius: 8px; background: #fff; font: inherit; color: var(--jb-ink);
}
.jb-filters-clear {
    font-size: 0.85rem; font-weight: 600; color: var(--jb-accent); text-decoration: none;
    padding: 0.55rem 0.2rem; white-space: nowrap;
}
.jb-filters-clear:hover { text-decoration: underline; }

.jb-near {
    margin: 0 0 1rem;
}
.jb-near-prompt,
.jb-near-active,
.jb-near-detecting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    padding: 0.85rem 1.05rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--jb-line);
    font-size: 0.9rem;
    color: var(--jb-ink);
}
.jb-near-detecting {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.18);
    color: var(--jb-muted);
}
.jb-near-detecting i {
    color: var(--jb-accent);
    animation: jb-near-pulse 1.2s ease-in-out infinite;
}
@keyframes jb-near-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
.jb-near-active {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.22);
}
.jb-near-active--manual { background: #fff; }
.jb-near-prompt i,
.jb-near-active i { color: var(--jb-accent); }
.jb-near-active em { font-style: normal; color: var(--jb-muted); font-size: 0.82rem; }
.jb-near-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.jb-near-btn:disabled { opacity: 0.65; cursor: wait; }
.jb-near-btn--ghost {
    background: #fff;
    color: var(--jb-accent);
    -webkit-text-fill-color: var(--jb-accent);
    border: 1px solid rgba(124, 58, 237, 0.35);
}
.jb-near-clear {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--jb-accent);
    text-decoration: none;
}
.jb-near-clear:hover { text-decoration: underline; }
.jb-near-status {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    color: var(--jb-muted);
}
.jb-near-status.is-error { color: #b91c1c; }

.jb-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

body.jb-sheet-lock { overflow: hidden; }

@media (max-width: 900px) {
    .jb-layout { grid-template-columns: 1fr; gap: 0; }

    .jb-mobile-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
        position: sticky;
        top: 4.25rem;
        z-index: 40;
        margin: 0 0 1rem;
        padding: 0.15rem 0 0.55rem;
        background: linear-gradient(180deg, #fff 70%, rgba(255,255,255,0));
    }

    .jb-sheet-trigger {
        appearance: none;
        border: 1px solid var(--jb-line);
        background: #fff;
        border-radius: 14px;
        padding: 0.7rem 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        text-align: left;
        font: inherit;
        color: var(--jb-ink);
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        min-width: 0;
    }
    .jb-sheet-trigger > i:first-child {
        width: 1.15rem;
        text-align: center;
        color: var(--jb-accent);
        flex-shrink: 0;
    }
    .jb-sheet-trigger-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
    }
    .jb-sheet-trigger-text em {
        font-style: normal;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--jb-muted);
    }
    .jb-sheet-trigger-text strong {
        font-size: 0.88rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .jb-sheet-trigger-caret {
        font-size: 0.7rem;
        color: var(--jb-muted);
        flex-shrink: 0;
    }
    .jb-sheet-trigger.is-active {
        border-color: rgba(124, 58, 237, 0.35);
        background: rgba(124, 58, 237, 0.06);
    }
    .jb-sheet-trigger[aria-expanded="true"] {
        border-color: var(--jb-accent);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    }

    .jb-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    .jb-sheet-backdrop.is-on {
        opacity: 1;
        pointer-events: auto;
    }

    .jb-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.15rem 0 0.85rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--jb-line);
        flex-shrink: 0;
    }
    .jb-sheet-head h3 {
        margin: 0;
        font-size: 1.05rem;
        letter-spacing: -0.01em;
    }
    .jb-sheet-close {
        appearance: none;
        border: 1px solid var(--jb-line);
        background: #f8fafc;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--jb-ink);
        font-size: 0.95rem;
    }

    .jb-sidebar,
    .jb-filters {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        width: 100%;
        max-height: min(78vh, 640px);
        margin: 0;
        border-radius: 20px 20px 0 0;
        border: 1px solid var(--jb-line);
        border-bottom: 0;
        background: #fff;
        padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
        transform: translateY(110%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .jb-sidebar.is-sheet-open,
    .jb-filters.is-sheet-open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    .jb-sidebar-nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 0.35rem;
        min-height: 0;
        flex: 1;
    }

    .jb-filters-body {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0;
        flex: 1;
        padding-top: 0.35rem;
    }
    .jb-filters label { min-width: 0; flex: none; width: 100%; }
    .jb-filters-clear {
        align-self: flex-start;
        padding: 0.75rem 0 0.2rem;
    }
}

.jb-empty {
    text-align: center; padding: 4rem 1.5rem; background: #f8fafc; border-radius: 18px; border: 1px dashed rgba(15, 23, 42, 0.15);
}
.jb-empty i { font-size: 2.5rem; color: rgba(124, 58, 237, 0.4); margin-bottom: 1rem; }
.jb-empty h3 { margin: 0 0 0.5rem; color: var(--jb-ink); }
.jb-empty p { margin: 0 0 1.25rem; color: var(--jb-muted); }

/* ── /jobs/:slug detail page ─────────────────────────────────────────── */
.jb-detail { padding: 7.5rem 0 4rem; }
.jb-detail-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--jb-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 1.25rem; }
.jb-detail-back:hover { color: var(--jb-accent); }

.jb-detail-hero {
    background: linear-gradient(145deg, #faf5ff 0%, #fff 55%, #fdf2f8 100%);
    border: 1px solid var(--jb-line);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}
.jb-detail-hero h1 { margin: 0.35rem 0 0.5rem; font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -0.02em; color: var(--jb-ink); }
.jb-detail-company { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 600; color: var(--jb-ink); display: flex; align-items: center; gap: 0.45rem; }
.jb-detail-lead { margin: 1rem 0 0; color: var(--jb-muted); font-size: 1rem; line-height: 1.55; max-width: 52rem; }
.jb-detail-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; }
.jb-detail-actions-inline { margin-top: 1.35rem; }
.jb-detail-actions-hint { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--jb-muted); }

.jb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.7rem 1.15rem; border-radius: 10px; font-weight: 700; font-size: 0.9rem;
    text-decoration: none; border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease;
}
.jb-btn:hover { transform: translateY(-1px); }
.jb-btn-primary { background: var(--jb-ink); color: #fff; }
.jb-btn-primary:hover { background: #1e293b; color: #fff; }
.jb-btn-accent { background: var(--jb-accent); color: #fff; }
.jb-btn-accent:hover { background: #6d28d9; color: #fff; }
.jb-btn-ghost { background: #fff; color: var(--jb-ink); border-color: var(--jb-line); }
.jb-btn-ghost:hover { border-color: rgba(124, 58, 237, 0.35); color: var(--jb-accent); }

/* Rainbow animated border — used for Learn skills CTAs */
.jb-btn-rainbow {
    position: relative;
    z-index: 0;
    color: var(--jb-ink);
    background: #fff;
    border: none;
    isolation: isolate;
    overflow: hidden;
}
.jb-btn-rainbow::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(
        from var(--jb-rainbow-angle, 0deg),
        #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444
    );
    animation: jb-rainbow-spin 3s linear infinite;
}
.jb-btn-rainbow::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: calc(10px - 1px);
    background: #fff;
}
.jb-btn-rainbow:hover {
    color: #6d28d9;
    transform: translateY(-1px);
}
.jb-btn-rainbow:hover::after {
    background: linear-gradient(180deg, #faf5ff, #fff);
}
@property --jb-rainbow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes jb-rainbow-spin {
    to { --jb-rainbow-angle: 360deg; }
}
/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from var(--jb-rainbow-angle), red, blue)) {
    .jb-btn-rainbow::before {
        background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
        background-size: 300% 100%;
        animation: jb-rainbow-shift 2.5s linear infinite;
    }
    @keyframes jb-rainbow-shift {
        to { background-position: 100% 0; }
    }
}

.jb-detail-grid { display: grid; grid-template-columns: 1.45fr 0.7fr; gap: 1.5rem; align-items: start; }
.jb-detail-main { display: grid; gap: 1.15rem; min-width: 0; }
.jb-detail-body { background: #fff; border: 1px solid var(--jb-line); border-radius: 18px; padding: 1.5rem 1.75rem; }
.jb-section-title { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--jb-ink); }
.jb-detail-body .prose { color: var(--jb-ink); line-height: 1.7; font-size: 0.98rem; }
.jb-detail-body .prose h2, .jb-detail-body .prose h3 { margin: 1.35rem 0 0.65rem; }
.jb-detail-body .prose p { margin: 0 0 1rem; }
.jb-detail-body .prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }

.jb-company-copy { margin: 0 0 1rem; color: var(--jb-ink); line-height: 1.65; font-size: 0.98rem; }
.jb-company-copy.muted, .muted { color: var(--jb-muted); }
.jb-company-links { display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem; align-items: center; }
.jb-company-links a {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 650;
    color: var(--jb-accent); text-decoration: none;
}
.jb-company-links a:hover { text-decoration: underline; }

.jb-skills-intro { margin: -0.35rem 0 1rem; color: var(--jb-muted); font-size: 0.92rem; }
.jb-skills-grid { display: grid; gap: 1.15rem; }
.jb-skills-grid h3 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--jb-accent); }
.jb-skill-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jb-skill-chips li { font-size: 0.8rem; background: #f8fafc; border: 1px solid var(--jb-line); padding: 0.3rem 0.65rem; border-radius: 999px; color: var(--jb-ink); }
.jb-skill-chips-learn li { display: inline-flex; align-items: center; gap: 0.4rem; padding-right: 0.55rem; }
.jb-skill-learn {
    color: var(--jb-muted); opacity: 0.55; font-size: 0.68rem; line-height: 1; text-decoration: none;
    display: inline-flex; transition: opacity 0.15s ease, color 0.15s ease;
}
.jb-skill-learn:hover { opacity: 1; color: var(--jb-accent); }

.jb-detail-aside { background: #f8fafc; border: 1px solid var(--jb-line); border-radius: 18px; padding: 1.4rem 1.35rem; position: sticky; top: 5.5rem; }
.jb-detail-aside h2 { margin: 0 0 0.85rem; font-size: 1rem; }
.jb-detail-aside-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; padding: 0.5rem 0; border-bottom: 1px solid var(--jb-line); }
.jb-detail-aside-row span:first-child { color: var(--jb-muted); }
.jb-detail-aside-row span:last-child { font-weight: 600; color: var(--jb-ink); text-align: right; }
.jb-aside-actions { display: grid; gap: 0.55rem; margin-top: 1.15rem; }
.jb-aside-actions .jb-btn { width: 100%; }
.jb-aside-links { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--jb-line); display: grid; gap: 0.45rem; }
.jb-aside-links h3 { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--jb-muted); }
.jb-aside-links a { color: var(--jb-accent); text-decoration: none; font-size: 0.88rem; font-weight: 600; display: inline-flex; gap: 0.4rem; align-items: center; }
.jb-aside-links a:hover { text-decoration: underline; }
.jb-detail-aside .jb-card-cta-hint { margin-top: 0.85rem; }

@media (max-width: 900px) {
    .jb-detail-grid { grid-template-columns: 1fr; }
    .jb-detail-aside { position: static; }
}

@media (max-width: 640px) {
    .jb-hero { padding: 7rem 0 2.5rem; }
    .jb-detail { padding: 6.5rem 0 3rem; }
    .jb-detail-hero, .jb-detail-body { padding: 1.35rem 1.25rem; }

    /* Stack the 3 hero CTAs full-width instead of wrapping unevenly. */
    .jb-detail-actions { flex-direction: column; align-items: stretch; }
    .jb-detail-actions .jb-btn { width: 100%; }

    /* The aside's identical 3-button set is redundant once it stacks below the
       hero on mobile (same actions are already visible above the fold). */
    .jb-aside-actions { display: none; }
}