/* CHANGE LOG
   File: /var/www/html/prohrhq.com/static/css/how-it-works.css
   Purpose: Styles for templates/how-it-works.html.
            Extracted verbatim (byte-for-byte from the original inline
            <style> block, via script, not retyped from memory) --
            Michael: "We're not supposed to have any CSS inside any
            HTML. It's all supposed to be one master location."
   Version History:
   2026-08-06 v1.0 - Initial extraction. */

    .section-card {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .section-card h2 {
        color: #2c3e50;
        margin-top: 0;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #3498db;
    }
    
    .highlight-box {
        background: #e8f4fc;
        border-left: 4px solid #3498db;
        padding: 1rem 1.25rem;
        margin: 1.5rem 0;
        border-radius: 0 6px 6px 0;
    }
    
    .screening-list {
        list-style: none;
        margin: 1rem 0;
        padding: 0;
    }
    
    .screening-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #eee;
        padding-left: 1.5rem;
        position: relative;
    }
    
    .screening-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #27ae60;
        font-weight: bold;
    }
    
    .screening-list li:last-child {
        border-bottom: none;
    }

/* Element formerly styled inline (style="margin-top: 2rem;") --
   Michael: "no CSS inside any HTML." */
.content-section--mt2 {
    margin-top: 2rem;
}