/* ==========================================================
   ARTICLE
========================================================== */

.article-body{

    max-width:720px;

    margin:0 auto;

    color:#c9cbd0;

    font-size:1rem;

    line-height:1.65;
}


/* ==========================================================
   HEADINGS
========================================================== */

.article-body h2{

    margin-top:2.4rem;

    margin-bottom:.8rem;

    font-family:"Hanken Grotesk",sans-serif;

    font-size:clamp(1.45rem,5vw,1.9rem);

    font-weight:800;

    line-height:1.2;

    color:#f7f7f8;
}

.article-body > h3{

    margin:2rem 0 .75rem;

    font-family:"Hanken Grotesk",sans-serif;

    font-size:clamp(1.15rem,1.8vw,1.35rem);

    font-weight:700;

    line-height:1.3;

    letter-spacing:-0.01em;

    color:#ffffff;
}


/* ==========================================================
   PARAGRAPHS
========================================================== */

.article-body p{

    margin-bottom:1rem;
}


/* ==========================================================
   LINKS
========================================================== */

.article-body a{

    color:#10d8c4;

    font-weight:600;

    text-decoration:underline;

    text-underline-offset:4px;

    transition:.25s;
}

.article-body a:hover{

    color:#ffb22e;
}


/* ==========================================================
   LISTS
========================================================== */

.article-body ul,
.article-body ol{

    margin:.8rem 0 1rem;

    padding-left:1.35rem;
}

.article-body li{

    margin-bottom:.55rem;

    line-height:1.6;
}

/* ==========================================================
   EMPHASIS
========================================================== */

.article-body strong{

    color:#fff;
}

.article-body em{

    color:#f5f5f5;
}


/* ==========================================================
   BLOCKQUOTE
========================================================== */

.article-body blockquote{

    margin:1.4rem 0;

    padding-left:1rem;

    border-left:4px solid #10d8c4;

    color:#e5e5e5;

    font-style:italic;
}


/* ==========================================================
   TABLES
========================================================== */

.article-body table{

    width:100%;

    border-collapse:collapse;

    margin:1.5rem 0;
}

.article-body th,
.article-body td{

    padding:.8rem;

    border:1px solid rgba(255,255,255,.08);

    text-align:left;
}

.article-body th{

    background:#0b2233;

    color:#fff;
}


/* ==========================================================
   IMAGES
========================================================== */

.article-body img{

    width:100%;

    margin:1.5rem 0;

    border-radius:20px;
}


/* ==========================================================
   HR
========================================================== */

.article-body hr{

    margin:2rem 0;

    border:none;

    border-top:1px solid rgba(255,255,255,.08);
}

/* ==========================================================
   COMPARISON CARD
========================================================== */

.comparison-card{

    margin:2rem 0;

    padding:1.5rem;

    border:1px solid rgb(51 65 85);

    border-radius:1.5rem;

    background:#0f172a;
}

.comparison-divider{

    margin:1.5rem 0;

    border:none;

    border-top:1px solid rgb(51 65 85);
}

.comparison-heading{

    margin-bottom:.5rem;

    font-family:"Hanken Grotesk",sans-serif;

    font-size:clamp(1.25rem,2vw,1.5rem);

    font-weight:700;
}

.comparison-list{

    margin:0;

    padding-left:1.25rem;

    color:#d1d5db;
}

.comparison-list li{

    margin-bottom:.35rem;

    line-height:1.75;
}


/* Heading Colors */

.comparison-pink{
    color:#f472b6;
}

.comparison-blue{
    color:#60a5fa;
}

.comparison-teal{
    color:#2dd4bf;
}

.comparison-gold{
    color:#fbbf24;
}

.comparison-green{
    color:#4ade80;
}

.comparison-red{
    color:#fb7185;
}

.comparison-purple{
    color:#c084fc;
}


/* ==========================================================
   CALLOUT
========================================================== */

.article-callout{

    margin:1.8rem 0;

    padding:1.15rem 1.25rem;

    border-radius:1rem;

    border:1px solid rgba(16,216,196,.25);

    background:rgba(16,216,196,.08);
}

.article-callout h3{

    display:flex;

    align-items:center;

    gap:.5rem;

    margin:0 0 .45rem;

    font-size:1.05rem;

    font-weight:700;

    color:#10d8c4;
}

.article-callout p{

    margin:0;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .article-body{

        font-size:.97rem;

        line-height:1.6;
    }

    .article-body h2{

        font-size:1.35rem;

        margin-top:2rem;
    }

    .article-body h3{

        font-size:1.05rem;
    }

    .article-body p{

        margin-bottom:.8rem;
    }

}

.article-body h1{
    line-height:1.1;
}

.article-body b{
    color:#fff;
}

.article-body i{
    color:#f5f5f5;
}

.article-body iframe{

    width:100%;

    border-radius:20px;

    margin:1.5rem 0;

    border:none;
}