.guide-container {
    padding: 32px 10%;
    max-width: 100%;
}

.guide-hero {
    text-align: center;
    padding: 48px 0 40px;
}

.guide-hero h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.guide-hero p {
    font-size: 15px;
    color: var(--text-muted);
}

.guide-section {
    margin-bottom: 48px;
}

.guide-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-section h2 .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Visual step card */
.guide-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 16px;
}

.guide-card-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.guide-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.guide-card p, .guide-card li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
}

.guide-card ul, .guide-card ol {
    padding-left: 20px;
    margin-bottom: 12px;
}

.guide-card li {
    margin-bottom: 6px;
}

/* Mock UI screenshots */
.mock-ui {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 12px 0;
}

.mock-input {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: 13px;
    min-width: 180px;
    text-align: left;
    margin: 4px;
}

.mock-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin: 4px;
}

.mock-btn-outline {
    display: inline-block;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin: 4px;
}

.mock-id {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--primary);
    margin: 12px 0;
    font-family: monospace;
}

.mock-qr {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 6px;
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
}

/* Role visual */
.role-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.role-mini {
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.role-mini-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.role-mini-name {
    font-size: 13px;
    font-weight: 600;
}

.role-mini-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.role-mini.client { border-top: 3px solid #3b82f6; }
.role-mini.client .role-mini-name { color: #3b82f6; }
.role-mini.cc { border-top: 3px solid var(--primary); }
.role-mini.cc .role-mini-name { color: var(--primary); }
.role-mini.observer { border-top: 3px solid #a78bfa; }
.role-mini.observer .role-mini-name { color: #a78bfa; }

/* Info badge */
.info-badge {
    display: inline-block;
    background: rgba(0, 204, 187, 0.08);
    border: 1px solid rgba(0, 204, 187, 0.2);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    margin: 4px 2px;
}

.info-badge.full { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.info-badge.limited { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.2); color: #a78bfa; }

/* Timeline mini */
.timeline-mini {
    display: flex;
    gap: 0;
    margin: 20px 0;
    overflow-x: auto;
}

.tl-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    position: relative;
    padding: 0 8px;
}

.tl-item::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.tl-item:last-child::after {
    display: none;
}

.tl-dot {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.tl-label {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Important box */
.important-box {
    padding: 16px 20px;
    background: rgba(234, 179, 8, 0.06);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.8;
    margin: 16px 0;
    color: var(--text);
}

.important-box strong {
    color: var(--badge-mid);
}

/* CTA */
.guide-cta {
    text-align: center;
    padding: 40px 0;
}

.guide-cta .mock-btn {
    font-size: 16px;
    padding: 14px 36px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
}

/* Footer */
.guide-footer {
    text-align: center;
    padding: 24px 10%;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

.guide-footer a {
    color: var(--primary);
    text-decoration: none;
}

@media (max-width: 768px) {
    .guide-container { padding: 20px 5%; }
    .guide-card-split { grid-template-columns: 1fr; }
    .role-visual { grid-template-columns: 1fr; }
    .timeline-mini { flex-wrap: wrap; }
    .tl-item::after { display: none; }
    .guide-hero h1 { font-size: 22px; }
}

/* Utility classes (extracted from inline styles) */
.mock-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.mock-hint { font-size: 11px; color: var(--text-muted); }
.role-badge-wrap { margin-top: 8px; }
.guide-note { color: var(--text-muted); font-size: 13px; margin-top: 8px; }
.guide-card-split-mt { margin-top: 16px; }
.cta-text { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; }
.footer-copy { margin-top: 8px; }