﻿body{
        line-height: 170%
}
h3{
        font-size: 22px;
}

h3.title{
        font-size: 22px;
}

h4{
        font-size: 20px; margin-bottom: 15px; padding-bottom: 0
}
.scenario, .mistake {
    background: white;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid #6a39b7;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.best-choice {
    background-color: #e8f5e9;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 10px 0;
    font-weight: bold;
}

.why {
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 10px 0;
    font-style: italic;
}

.comparison-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.desktop, .mobile {
    background: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.desktop {
    border-top: 4px solid #27ae60;
}

.mobile {
    border-top: 4px solid #e74c3c;
}

.highlight-box {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

.jwbiz-section {
    background: linear-gradient(135deg,#e8f5e9 0%, #e8f5e9 100%);

    padding: 30px;
    border-radius: 8px;
    margin: 40px 0;
}

.jwbiz-section h2, .jwbiz-section h3 {


}

ul {
    margin: 15px 0;
    padding-left: 25px;
}

li {
    margin: 8px 0;
}
ol{
        font-size: 50px
}

.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li:before {
    content: '✓ ';
    color: #27ae60;
    font-weight: bold;
    margin-right: 8px;
}

.not-good-for {
    list-style: none;
    padding-left: 0;
}

.not-good-for li:before {
    content: '✗ ';
    color: #e74c3c;
    font-weight: bold;
    margin-right: 8px;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    margin: 50px 0 0;
    flex-wrap: wrap;
}

.comp-btn
{ background : #6a39b7;
    border : none;
    border-radius : 25px;
    color : rgba(255, 255, 255);
    cursor : pointer;
    font-size : inherit;
    font-size : 19px;
    margin : 0 auto 10px;
    min-width : 215px;
    text-align: center;
    padding : 10px 20px;
}


.comp-btn:hover
{ background : #4caf50;
    color : rgba(255, 255, 255);
}

.comp-btn:focus
{ color : #fff;
    outline : none;
}

.summary-box {
    background: white;
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

@media (max-width: 768px) {
    .comparison-box {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-button {
        text-align: center;
    }
}