/* --- General Page Content Styles --- */
.page-content {
    padding: 60px 0;
}

.prose {
    max-width: 800px;
    margin: 0 auto;
}

.page-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--light-gray);
}

.page-header h1 {
    font-size: 2.6rem;
    margin-bottom: 0.5rem;
}

.page-header .subtitle {
    font-size: 1.2rem;
    color: var(--medium-gray);
}

/* --- Article Content Styles --- */
.prose section {
    margin-bottom: 40px;
}

.prose h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    color: var(--primary-color);
}

.prose p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.prose ul {
    padding-left: 25px;
}

.prose li {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
}

.prose strong {
    font-weight: 700;
    color: var(--dark-gray);
}

/* --- Callout Box --- */
.callout {
    background-color: #e7f3fe; /* Light blue background */
    border-left: 5px solid var(--secondary-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.callout p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.callout strong {
    color: var(--primary-color);
}

/* --- Professional Solution Callout --- */
.callout-pro {
    background-color: var(--white-color);
    border: 1px solid #d0e0ec;
    border-left: 5px solid var(--primary-color);
    padding: 25px;
    margin: 25px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.callout-pro .pro-logo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.callout-pro .pro-logo a {
    color: var(--primary-color);
    text-decoration: none;
}

.callout-pro .pro-logo a:hover {
    text-decoration: underline;
}

.callout-pro p {
    margin: 0;
    font-size: 1.05rem;
}