.hero {

    background: white;

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 4rem;

    margin-bottom: 2.5rem;

    text-align: center;
    margin-top: 2.5rem;
}

.badge{

    display:inline-block;

    padding:.45rem .9rem;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-weight:600;

    margin-bottom:1.5rem;
}
.hero h1{

    font-size:3rem;

    line-height:1.1;

    margin-bottom:1rem;
}

.hero h1 span{

    color:var(--primary);
}
.hero .lead{

    max-width:700px;

    margin:0 auto 2rem;

    font-size:1.15rem;

    color:var(--text-light);
}
.btn{
    display:inline-block;
    padding:.8rem 1.4rem;

    border-radius:8px;

    border:1px solid #d0d7de;

    background:#fff;

    color:#24292f;

    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.btn:hover{

    border-color:#0366d6;

    color:#0366d6;

    background:#f6f8fa;
}

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.85rem 1.4rem;

    background:#1f2937;

    color:#fff;

    border:1px solid #1f2937;

    border-radius:10px;

    font-weight:600;

    transition:.2s;
}

.btn-primary:hover{

    background:#111827;

    border-color:#111827;

    transform:translateY(-1px);
}

.btn-secondary{

    background:white;

    color:#334155;

    border:1px solid var(--border);

    border-radius:10px;

    font-weight:600;
}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

    background:#f8fafc;
}
.highlights{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:2rem;

    list-style:none;

    padding:0;
}

.highlights li{

    background:#f8fafc;

    border:1px solid var(--border);

    border-radius:999px;

    padding:.55rem 1rem;
}
.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;
}

.code,
.structure{

    background:white;

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;
}
.section{

    background:white;

    border:1px solid var(--border);

    border-radius:14px;

    padding:3rem;

    margin:2rem 0;
}
.pricing{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;
}
.card{

    background:white;

    border:1px solid var(--border);

    border-radius:16px;

    padding:2.5rem;

    display:flex;

    flex-direction:column;

    transition:.25s;
}
/* .card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,0,0,.08);
} */
.featured{
    position: relative;

    border:1px solid var(--primary);


}
.featured::before {

    content: "Recommended";

    position: absolute;

    top: -12px;
    right: 24px;

    padding: .15rem .7rem;

    background: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 999px;

    color:  #fff;

    font-size: .75rem;

    font-weight: 600;
}
.includes-community{

    padding:.8rem 1rem;

    margin-bottom:1.5rem;

    background:#eff6ff;

    border:1px solid #bfdbfe;

    border-radius:10px;

    color:var(--primary);

    font-weight:600;
}
.card h3{

    font-size:2.3rem;

    margin-top:auto;

    margin-bottom:1.5rem;
}
.card ul{

    list-style:none;

    padding:0;

    margin:1.5rem 0;
}

.card li{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:.7rem 0;

    border-bottom:1px solid #eef2f7;
}

.card li:last-child{

    border-bottom:none;
}

.card li::before{

    content:"✓";

    width:24px;
    height:24px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#eff6ff;

    color:var(--primary);

    border-radius:50%;

    font-size:.85rem;

    font-weight:700;

    flex-shrink:0;
}
table{

    width:100%;

    border-collapse:collapse;
}

th{

    background:#f8fafc;
}

td,
th{

    padding:1rem;

    border:1px solid var(--border);
}
.cta{

    background:white;

    border:1px solid var(--border);

    border-radius:16px;

    text-align:center;

    padding:4rem;

    margin-top:3rem;
        margin-bottom: 2rem;
}
@media(max-width:900px){

    .pricing,
    .two-columns{

        grid-template-columns:1fr;
    }

    .hero{

        padding:2rem;
    }

    .hero h1{

        font-size:2.2rem;
    }

}
.principles{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:2rem;
}

.principle{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:1.75rem;

    transition:.2s;
}

/* .principle:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(0,0,0,.06);
} */

.principle h3{

    margin-bottom:.8rem;
}