/* ==========================================================================
   Awayly Guide Articles
   ========================================================================== */

.guide-article-hero{
    padding-bottom:58px;
}

.guide-article-hero h1{
    max-width:900px;
    margin-inline:auto;
}

.guide-article-hero p{
    max-width:760px;
    margin-inline:auto;
}

.guide-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 20px;
    margin-top:20px;
    color:#77879a;
    font-size:.7rem;
    font-weight:700;
}

.guide-breadcrumbs{
    padding:16px 0 0;
}

.guide-breadcrumbs-inner{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
    color:#8693a3;
    font-size:.68rem;
}

.guide-breadcrumbs a{
    color:var(--blue);
    font-weight:800;
}

.guide-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:54px;
    align-items:start;
}

.guide-content{
    min-width:0;
}

.guide-content > p,
.guide-content li{
    color:#66788d;
    line-height:1.78;
}

.guide-content > p{
    margin:0 0 17px;
}

.guide-content h2{
    margin:42px 0 14px;
    color:var(--navy);
    font-size:clamp(1.55rem,3vw,2.2rem);
    line-height:1.18;
    letter-spacing:-.03em;
}

.guide-content h3{
    margin:26px 0 10px;
    color:var(--navy);
    font-size:1.08rem;
    line-height:1.35;
}

.guide-content ul,
.guide-content ol{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin:0 0 20px;
    padding-left:1.2rem;
}

.guide-content a{
    color:var(--blue);
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
}

.guide-callout{
    margin:26px 0;
    padding:22px 24px;
    border:1px solid #cfe0f5;
    border-radius:17px;
    background:#f4f8ff;
}

.guide-callout strong{
    display:block;
    margin-bottom:7px;
    color:var(--navy);
    font-size:.85rem;
}

.guide-callout p{
    margin:0;
    color:#64768a;
    font-size:.78rem;
    line-height:1.68;
}

.guide-example{
    margin:26px 0;
    padding:24px;
    border:1px solid #dfe7f0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,42,73,.04);
}

.guide-example > span{
    display:block;
    margin-bottom:8px;
    color:var(--blue);
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.guide-example h3{
    margin:0 0 10px;
}

.guide-example p{
    margin:0;
    color:#697b8f;
    line-height:1.7;
}

.guide-table-wrap{
    overflow-x:auto;
    margin:24px 0 30px;
    border:1px solid #dfe7f0;
    border-radius:18px;
}

.guide-table{
    width:100%;
    min-width:640px;
    border-collapse:collapse;
    background:#fff;
}

.guide-table th,
.guide-table td{
    padding:15px 17px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid #e7edf4;
}

.guide-table th{
    background:#f3f7fc;
    color:var(--navy);
    font-size:.73rem;
    font-weight:900;
}

.guide-table td{
    color:#67798d;
    font-size:.75rem;
    line-height:1.55;
}

.guide-table tr:last-child td{
    border-bottom:0;
}

.guide-source-box{
    margin-top:42px;
    padding:24px;
    border:1px solid #dfe7f0;
    border-radius:18px;
    background:#f8fbff;
}

.guide-source-box h2{
    margin:0 0 12px;
    font-size:1.25rem;
}

.guide-source-box ul{
    margin:0;
}

.guide-disclaimer{
    margin-top:18px;
    color:#8b97a5;
    font-size:.68rem;
    line-height:1.6;
}

.guide-sidebar{
    position:sticky;
    top:95px;
}

.guide-sidebar-card{
    padding:21px;
    border:1px solid #dfe7f0;
    border-radius:18px;
    background:#fff;
}

.guide-sidebar-card + .guide-sidebar-card{
    margin-top:14px;
}

.guide-sidebar-card > strong{
    display:block;
    margin-bottom:11px;
    color:var(--navy);
    font-size:.78rem;
}

.guide-sidebar-card nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.guide-sidebar-card nav a{
    padding:8px 9px;
    border-radius:9px;
    color:#66798d;
    font-size:.7rem;
    font-weight:750;
}

.guide-sidebar-card nav a:hover{
    background:#edf4ff;
    color:var(--blue);
}

.guide-sidebar-product{
    background:#0c2d54;
    border-color:#0c2d54;
}

.guide-sidebar-product > span{
    display:block;
    margin-bottom:8px;
    color:#91b6e4;
    font-size:.63rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.guide-sidebar-product strong{
    color:#fff;
    font-size:1.05rem;
    line-height:1.35;
}

.guide-sidebar-product p{
    margin:8px 0 15px;
    color:#c4d3e4;
    font-size:.72rem;
    line-height:1.55;
}

.guide-related{
    background:#f8fbff;
}

.guide-related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
}

.guide-related-grid a{
    display:flex;
    flex-direction:column;
    min-height:180px;
    padding:25px;
    border:1px solid #dfe7f0;
    border-radius:19px;
    background:#fff;
}

.guide-related-grid span{
    margin-bottom:12px;
    color:var(--blue);
    font-size:.64rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.guide-related-grid strong{
    color:var(--navy);
    font-size:1rem;
    line-height:1.4;
}

.guide-related-grid b{
    margin-top:auto;
    padding-top:22px;
    color:var(--blue);
    font-size:.73rem;
}

.guide-final{
    padding:28px 0 88px;
}

.guide-final-card{
    padding:52px 32px;
    border-radius:25px;
    background:
        radial-gradient(circle at 10% 15%,rgba(95,226,211,.15),transparent 28%),
        radial-gradient(circle at 90% 85%,rgba(56,125,255,.18),transparent 30%),
        #0c2d54;
    text-align:center;
}

.guide-final-card h2{
    max-width:760px;
    margin:9px auto 13px;
    color:#fff;
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:1.1;
}

.guide-final-card p{
    max-width:650px;
    margin:0 auto;
    color:#c4d3e4;
    line-height:1.7;
}

.guide-final-card > div{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

@media(max-width:950px){

    .guide-layout{
        grid-template-columns:1fr;
    }

    .guide-sidebar{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }

    .guide-sidebar-card + .guide-sidebar-card{
        margin-top:0;
    }

    .guide-related-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .guide-sidebar{
        grid-template-columns:1fr;
    }

    .guide-article-hero{
        padding-bottom:42px;
    }

    .guide-final{
        padding-bottom:55px;
    }

    .guide-final-card{
        padding:40px 20px;
    }

    .guide-final-card > div{
        flex-direction:column;
    }

    .guide-final-card .btn{
        width:100%;
    }

}