/* ============================================
   DocKit Master — Claw Guide Page Styles
   OpenClaw (blue) + ZeroClaw (orange)
   ============================================ */

/* --- Guide Content Typography --- */
.guide-content h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guide-content h3 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .75rem;
    color: #e4e4e7;
}

.guide-content p {
    color: #a1a1aa;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.guide-content ul,
.guide-content ol {
    color: #a1a1aa;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.guide-content li {
    margin-bottom: .5rem;
    line-height: 1.7;
}

.guide-content pre {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.guide-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    color: #8a7efd;
}

.guide-content pre code {
    color: #d4d4d8;
}

.guide-content blockquote {
    border-left: 3px solid rgba(109, 93, 252, .4);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: #a1a1aa;
    font-style: italic;
}

.guide-content strong {
    color: #e4e4e7;
}

.guide-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .3), rgba(249, 115, 22, .2), transparent);
    margin: 3rem 0;
}

/* --- Chat Bubbles --- */
.chat-bubble {
    background: rgba(14, 165, 233, .08);
    border: 1px solid rgba(14, 165, 233, .15);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
}

.chat-bubble.user {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
    color: #e4e4e7;
}

/* --- Use Case Cards --- */
.use-case-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
}

.use-case-card:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(109, 93, 252, .25);
    transform: translateY(-4px);
}