:root {
    --man-bg: #f8f9fa;
    --man-text: #333;
    --man-primary: #e67e22; /* Orange */
    --man-secondary: #2c3e50;
    --man-border: #dcdde1;
    --man-card: #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--man-bg); color: var(--man-text);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.7;
}

.man-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* Header */
.man-header {
    background: var(--man-secondary); color: #fff;
    padding: 20px 0; margin-bottom: 40px;
}
.man-header .man-container {
    display: flex; justify-content: space-between; align-items: center;
}
.man-brand {
    font-size: 22px; font-weight: bold; color: #fff;
    display: flex; align-items: center; gap: 8px;
}
.man-brand::before { content: '📖'; font-size: 24px; }
.man-nav { display: flex; gap: 20px; }
.man-nav a {
    color: #bdc3c7; text-decoration: none; font-size: 14px;
    transition: color 0.3s;
}
.man-nav a:hover, .man-nav a.active { color: var(--man-primary); }

/* Hero / Title */
.man-title {
    text-align: center; margin-bottom: 50px; padding: 40px 0;
    border-bottom: 2px solid var(--man-primary);
}
.man-title h1 { font-size: 36px; color: var(--man-secondary); margin-bottom: 15px;}
.man-title p { font-size: 16px; color: #7f8c8d;}

/* Content Sections */
.man-section {
    background: var(--man-card); padding: 40px; border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05); margin-bottom: 30px;
    border: 1px solid var(--man-border);
}
.man-section h2 {
    font-size: 24px; color: var(--man-secondary); margin-bottom: 25px;
    display: flex; align-items: center; gap: 10px;
}
.man-step {
    display: flex; margin-bottom: 30px;
}
.man-step-num {
    width: 40px; height: 40px; background: var(--man-primary); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: bold; margin-right: 20px; flex-shrink: 0;
}
.man-step-content h3 { font-size: 18px; color: var(--man-secondary); margin-bottom: 10px;}
.man-step-content p { font-size: 15px; color: #555; margin-bottom: 15px;}

.btn-man {
    display: inline-block; padding: 12px 25px; background: var(--man-primary);
    color: #fff; text-decoration: none; border-radius: 4px; font-weight: bold;
    transition: background 0.3s;
}
.btn-man:hover { background: #d35400; }

/* FAQ */
.man-faq-item {
    border-bottom: 1px solid var(--man-border); padding: 15px 0;
}
.man-faq-item:last-child { border-bottom: none; }
.man-fq { font-weight: bold; color: var(--man-secondary); margin-bottom: 8px;}
.man-fa { color: #666; font-size: 14px;}

footer {
    text-align: center; padding: 40px 0; color: #999; font-size: 13px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .man-header .man-container { flex-direction: column; gap: 15px; }
    .man-section { padding: 25px; }
    .man-step { flex-direction: column; }
    .man-step-num { margin-bottom: 15px; }
}