/* ============================================================
   dd_pages — Solutions / Self-Study / Machine Learning pages
   ============================================================ */

:root { --dd-background-blue: #0d6efd; --text-dark: #1f2937; --text-light: #6b7280; --border-color: #e5e7eb; --bg-light: #f9fafb; }
.bg-dd-blue { background-color: var(--dd-background-blue) !important; }
.text-white { color: #fff !important; }
.text-primary { color: var(--dd-green); }
.dd-text-bold { font-weight: 700; }
.dd-text-muted-sm { font-size: 0.95rem; color: var(--text-light); }
.dd-note-text { font-size: 0.875rem; color: #9ca3af; margin-top: 1rem; font-style: italic; }
.dd-divider-white { height: 1px; background: rgba(255,255,255,0.2); width: 80px; margin: 25px auto; }
.dd-section-header { text-align: center; max-width: 700px; margin: 0 auto 50px auto; }
.dd-train-grid-2, .dd-train-grid-2-rev { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.dd-train-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.dd-train-cta { margin-top: 2rem; }
.dd-train-tagline { font-size: 1.5rem; font-weight: 600; margin-top: 1rem; color: #fff; }
.dd-list-cross, .dd-list-check { list-style: none; padding: 0; margin: 0; }
.dd-list-cross li, .dd-list-check li { position: relative; padding-left: 35px; margin-bottom: 12px; color: var(--text-dark); font-size: 1.05rem; }
.dd-list-cross li::before { content: "✕"; color: #dc3545; position: absolute; left: 0; font-weight: bold; }
.dd-list-check li::before { content: "✔"; color: var(--dd-green); position: absolute; left: 0; font-weight: bold; }
.dd-step-card { background: #fff; padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); text-align: center; transition: transform 0.3s; }
.dd-step-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.dd-step-num { background: var(--dd-green); color: #fff; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin: 0 auto 20px auto; }
.dd-step-card > h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.dd-tags-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.dd-tag { background: #e9ecef; padding: 6px 16px; border-radius: 20px; font-size: 0.95rem; }
.dd-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.dd-compare-card { padding: 40px; border-radius: 12px; position: relative; }
.dd-card-traditional { background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280; }
.dd-card-traditional ul { list-style: none; padding: 0; }
.dd-card-traditional li { padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
.dd-card-highlight { background: #fff; border: 2px solid var(--dd-green); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.dd-card-highlight ul { list-style: none; padding: 0; }
.dd-card-highlight li { padding: 10px 0 10px 30px; border-bottom: 1px solid #f3f4f6; position: relative; font-weight: 500; color: var(--text-dark); }
.dd-card-highlight li::before { content: "✔"; color: var(--dd-green); position: absolute; left: 0; }
.dd-badge-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--dd-green); color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dd-narrow { max-width: 720px; margin: 0 auto; }

/* Self-Study & ML pages */
.hero { background: var(--bg-light); padding: 48px 20px; text-align: center; }
.hero p { max-width: 600px; margin: 0 auto 1.5rem; }
.why-matters { border-bottom: 1px solid var(--border-color); }
.why-matters p { max-width: 720px; margin: 0 auto; font-size: 15px; }
.benefits { padding: 48px 20px; }
.benefits h2 { margin-bottom: 40px; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.benefit-card { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; padding: 24px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.benefit-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.benefit-icon { font-size: 36px; margin-bottom: 12px; display: inline-block; }
.benefit-card h3 { font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.benefit-card p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.ideal-for { padding: 40px 20px; background: var(--bg-light); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.ideal-for h2 { margin-bottom: 28px; }
.ideal-list { list-style: none; max-width: 550px; margin: 0 auto; }
.ideal-list li { color: var(--text-dark); font-size: 15px; padding: 6px 0 6px 28px; position: relative; line-height: 1.5; }
.ideal-list li::before { content: "✓"; position: absolute; left: 0; color: #0d7a6b; font-weight: bold; font-size: 16px; }
.cta-section { padding: 48px 20px; text-align: center; }
.cta-section h2 { margin-bottom: 12px; }
.cta-section p { font-size: 15px; margin-bottom: 24px; }

@media (max-width: 767px) {
    .dd-train-grid-2, .dd-train-grid-2-rev, .dd-train-grid-3, .dd-compare-grid { grid-template-columns: 1fr; gap: 30px; }
    .dd-train-grid-2-rev { display: flex; flex-direction: column-reverse; }
    .dd-card-highlight { top: 0; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 15px; }
    .benefits h2, .ideal-for h2, .why-matters h2, .cta-section h2 { font-size: 26px; }
    .benefits-grid { grid-template-columns: 1fr; gap: 16px; }
    .benefits, .ideal-for, .hero { padding: 32px 20px; }
    .cta-section { padding: 36px 20px; }
}