/*
 * HostCupid Content Experience v2
 * Blog + Knowledgebase
 */

.hc-content-enhanced{
    --hc-navy:#0b213d;
    --hc-navy2:#153b63;
    --hc-blue:#175cd3;
    --hc-cyan:#0ea5e9;
    --hc-red:#e53b43;
    --hc-green:#079455;
    --hc-purple:#7f56d9;
    --hc-orange:#f79009;
    --hc-soft:#f5f8fc;
    --hc-line:#e1e7ef;
    --hc-ink:#172033;
    --hc-muted:#667085;

    color:var(--hc-ink);
    font-size:17px;
    line-height:1.76;
}

.hc-content-enhanced p{
    margin:0 0 1.25rem;
}

.hc-content-enhanced > p:first-of-type{
    font-size:1.08em;
    line-height:1.8;
    color:#344054;
}

/* HERO IMAGE */

.hc-content-enhanced .hc-insight-featured,
.hc-content-enhanced > figure:first-of-type{
    margin:0 0 1.9rem;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,35,65,.12);
}

.hc-content-enhanced .hc-insight-featured img,
.hc-content-enhanced > figure:first-of-type img{
    display:block;
    width:100%;
    height:auto;
}

/* META STRIP */

.hc-reading-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem 1rem;
    margin:0 0 1.5rem;
    padding:.85rem 1rem;
    border:1px solid var(--hc-line);
    border-radius:14px;
    background:#f8fafc;
    font-size:.84rem;
    color:var(--hc-muted);
}

.hc-reading-meta strong{
    color:var(--hc-navy);
}

/* SECTION HEADINGS */

.hc-content-enhanced h2{
    margin:3rem 0 1rem;
    font-size:clamp(1.45rem,2.4vw,1.9rem);
    line-height:1.25;
    letter-spacing:-.025em;
    color:#101828;
}

.hc-content-enhanced h2::before{
    content:"";
    display:block;
    width:52px;
    height:4px;
    margin:0 0 14px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        var(--hc-red),
        var(--hc-blue)
    );
}

.hc-content-enhanced h3{
    margin:2rem 0 .75rem;
    font-size:1.18rem;
    color:#183b64;
}

/* QUICK SUMMARY */

.hc-quick-summary{
    margin:1.3rem 0 2rem;
    padding:1.35rem;
    border:1px solid #d6e4f7;
    border-radius:20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(23,92,211,.12),
            transparent 38%
        ),
        #f8fbff;
}

.hc-quick-summary-label{
    display:inline-block;
    margin-bottom:.65rem;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--hc-blue);
}

.hc-quick-summary h2{
    margin:0 0 1rem;
    padding:0;
    font-size:1.25rem;
}

.hc-quick-summary h2::before{
    display:none;
}

.hc-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.8rem;
}

.hc-summary-card{
    padding:1rem;
    border:1px solid #e2eaf4;
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 18px rgba(20,32,51,.04);
}

.hc-summary-card span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    margin-bottom:.7rem;
    border-radius:9px;
    background:#eaf2ff;
    color:var(--hc-blue);
    font-weight:800;
}

/* VISUAL ARTICLE ROADMAP */

.hc-roadmap{
    margin:2rem 0 2.4rem;
    padding:1.4rem;
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            #0c2340,
            #163f68
        );
    color:#fff;
    box-shadow:0 18px 45px rgba(12,35,64,.14);
}

.hc-roadmap-label{
    margin-bottom:.9rem;
    color:#b9d3ff;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.hc-roadmap-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
}

.hc-roadmap-item{
    position:relative;
    padding:1rem .9rem;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
}

.hc-roadmap-number{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    margin-bottom:.65rem;
    border-radius:50%;
    background:#fff;
    color:#16395f;
    font-size:.78rem;
    font-weight:900;
}

.hc-roadmap-item strong{
    display:block;
    color:#fff;
    line-height:1.35;
}

/* TOC */

.hc-article-toc{
    margin:1.5rem 0 2.2rem;
    padding:1.15rem 1.25rem;
    border:1px solid var(--hc-line);
    border-radius:16px;
    background:#fff;
}

.hc-article-toc summary{
    cursor:pointer;
    font-weight:800;
    color:var(--hc-navy);
}

.hc-article-toc nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.2rem 1rem;
    padding-top:.85rem;
}

.hc-article-toc a{
    padding:.45rem 0;
    color:#475467;
    text-decoration:none;
    border-bottom:1px dashed #e4e7ec;
}

.hc-article-toc a:hover{
    color:var(--hc-blue);
}

/* NORMAL CHECKLIST */

.hc-content-enhanced ul{
    list-style:none;
    margin:1.3rem 0 1.9rem;
    padding:0;
}

.hc-content-enhanced ul > li{
    position:relative;
    margin:.65rem 0;
    padding:.9rem 1rem .9rem 3rem;
    border:1px solid #e5eaf1;
    border-radius:13px;
    background:#fff;
}

.hc-content-enhanced ul > li::before{
    content:"✓";
    position:absolute;
    left:1rem;
    top:.9rem;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#e9f8f1;
    color:var(--hc-green);
    font-size:12px;
    font-weight:900;
}

/* VISUAL NUMBERED STEPS */

.hc-content-enhanced ol{
    list-style:none;
    counter-reset:hc-step;
    margin:1.5rem 0 2rem;
    padding:0;
}

.hc-content-enhanced ol > li{
    counter-increment:hc-step;
    position:relative;
    margin:.8rem 0;
    padding:1.1rem 1.1rem 1.1rem 4.25rem;
    border:1px solid #dfe6ef;
    border-radius:15px;
    background:
        linear-gradient(
            135deg,
            #fff,
            #f8fbff
        );
    box-shadow:0 5px 18px rgba(16,24,40,.035);
}

.hc-content-enhanced ol > li::before{
    content:counter(hc-step);
    position:absolute;
    left:1rem;
    top:1rem;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    background:var(--hc-navy);
    color:#fff;
    font-weight:900;
}

/* AUTOMATIC STEP INFOGRAPHIC */

.hc-step-visual{
    margin:1.8rem 0 2.4rem;
    padding:1.35rem;
    border:1px solid #dce5ef;
    border-radius:20px;
    background:#f8fafc;
}

.hc-step-visual-title{
    margin-bottom:1rem;
    font-weight:800;
    color:var(--hc-navy);
}

.hc-step-flow{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7rem;
}

.hc-step-flow-card{
    position:relative;
    min-height:115px;
    padding:1rem;
    border-radius:15px;
    background:#fff;
    border:1px solid #e1e8f0;
}

.hc-step-flow-card:nth-child(4n+1){
    border-top:4px solid var(--hc-blue);
}

.hc-step-flow-card:nth-child(4n+2){
    border-top:4px solid var(--hc-purple);
}

.hc-step-flow-card:nth-child(4n+3){
    border-top:4px solid var(--hc-green);
}

.hc-step-flow-card:nth-child(4n){
    border-top:4px solid var(--hc-orange);
}

.hc-step-flow-num{
    display:block;
    margin-bottom:.4rem;
    font-size:.74rem;
    font-weight:900;
    color:var(--hc-muted);
}

.hc-step-flow-card strong{
    display:block;
    color:#182230;
    line-height:1.35;
}

/* BLOCKQUOTES / ALERTS */

.hc-content-enhanced blockquote{
    position:relative;
    margin:1.8rem 0;
    padding:1.15rem 1.25rem 1.15rem 1.4rem;
    border:1px solid #bfd8ff;
    border-left:5px solid var(--hc-blue);
    border-radius:0 15px 15px 0;
    background:#eff6ff;
    color:#294b75;
}

.hc-practical-alert{
    margin:2rem 0;
    padding:1.15rem 1.25rem;
    border-radius:16px;
    border:1px solid #fedf89;
    background:#fffaeb;
    color:#7a2e0e;
}

.hc-practical-alert strong{
    display:block;
    margin-bottom:.35rem;
    color:#93370d;
}

/* COMPARISON TABLES */

.hc-content-enhanced table{
    width:100%;
    margin:1.5rem 0 2rem;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border:1px solid var(--hc-line);
    border-radius:15px;
}

.hc-content-enhanced th{
    padding:.95rem 1rem;
    background:var(--hc-navy);
    color:#fff;
    text-align:left;
}

.hc-content-enhanced td{
    padding:.9rem 1rem;
    border-top:1px solid #e7ecf2;
}

.hc-content-enhanced tr:nth-child(even) td{
    background:#f8fafc;
}

/* SCREENSHOTS / INLINE IMAGES */

.hc-content-enhanced img{
    max-width:100%;
    height:auto;
}

.hc-content-enhanced p img,
.hc-content-enhanced figure:not(.hc-insight-featured) img{
    border-radius:15px;
    border:1px solid #dfe5ec;
    box-shadow:0 12px 32px rgba(16,24,40,.09);
}

/* MID-ARTICLE GRAPHIC */

.hc-visual-break{
    position:relative;
    overflow:hidden;
    margin:2.5rem 0;
    padding:1.5rem;
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            #eef5ff 0%,
            #f9fbff 60%,
            #fff 100%
        );
    border:1px solid #dbe7f6;
}

.hc-visual-break::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-60px;
    top:-70px;
    border-radius:50%;
    background:rgba(23,92,211,.08);
}

.hc-visual-break-label{
    margin-bottom:.4rem;
    color:var(--hc-blue);
    font-size:.74rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.hc-visual-break h3{
    margin:.1rem 0 .55rem;
}

.hc-visual-icons{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1rem;
}

.hc-visual-pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem .75rem;
    border-radius:999px;
    background:#fff;
    border:1px solid #dfe7f1;
    font-size:.82rem;
    font-weight:700;
}

/* CTA */

.hc-content-cta{
    margin:2.7rem 0 2rem;
    padding:1.5rem;
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            #0c223f,
            #17436f
        );
    color:#fff;
    box-shadow:0 18px 42px rgba(12,34,63,.16);
}

.hc-content-cta-label{
    margin-bottom:.4rem;
    color:#b8d3ff;
    font-size:.75rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.hc-content-cta h2{
    margin:.1rem 0 .55rem;
    color:#fff;
    font-size:1.35rem;
}

.hc-content-cta h2::before{
    display:none;
}

.hc-content-cta p{
    color:#e5eef8;
}

.hc-content-cta a{
    display:inline-flex;
    padding:.72rem 1rem;
    border-radius:10px;
    background:#fff;
    color:#102946;
    font-weight:800;
    text-decoration:none;
}

/* SOURCE SECTION */

.hc-content-enhanced hr{
    margin:2.8rem 0 1.7rem;
    border:0;
    border-top:1px solid var(--hc-line);
}

.hc-content-enhanced h2:last-of-type{
    scroll-margin-top:110px;
}

/* PROGRESS BAR */

#hc-reading-progress{
    position:fixed;
    z-index:99999;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:linear-gradient(
        90deg,
        var(--hc-red),
        var(--hc-blue)
    );
}

/* MOBILE */

@media(max-width:850px){

    .hc-summary-grid,
    .hc-roadmap-grid,
    .hc-step-flow{
        grid-template-columns:1fr 1fr;
    }

    .hc-article-toc nav{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .hc-content-enhanced{
        font-size:16px;
    }

    .hc-summary-grid,
    .hc-roadmap-grid,
    .hc-step-flow{
        grid-template-columns:1fr;
    }

    .hc-content-enhanced ol > li{
        padding-left:3.8rem;
    }
}