/* ==========================================================
   POLICY PAGE
========================================================== */

html{
    scroll-behavior:smooth;
}

/* ==========================================================
   LAYOUT
========================================================== */

.policy-layout{
    align-items:start;
}
.policy-sidebar{

    position:sticky;

    top:110px;

    align-self:start;

    height:fit-content;

}

@media (max-width:1279px){

    .policy-sidebar{
        position:static;
    }

}

/* ==========================================================
   TABLE OF CONTENTS
========================================================== */
/* ==========================================================
   TABLE OF CONTENTS (Smooth, Non-Shaking SaaS Style)
========================================================== */

#policy-toc {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

#policy-toc a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #64748b;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    /* Smooth transition for color and background only, avoiding size shifts */
    transition: all 0.3s ease-in;
}

#policy-toc a:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

/* Active state uses background tint instead of layout-shifting borders */
#policy-toc a.active {
    background-color: #ecfdf5;
    color: #047857;
    font-weight: 500;
}

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


.policy-body{

    max-width:780px;

    font-size:16px;

    line-height:1.9;

    color:#475569;

}

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

.policy-body h2{

    margin-top:3.5rem;
    margin-bottom:1rem;

    font-size:2rem;

    line-height:1.25;

    font-weight:800;

    color:#0f172a;

    padding-bottom:.8rem;

    border-bottom:1px solid #e5e7eb;

    scroll-margin-top:120px;

}

.policy-body h3{

    margin-top:2.5rem;
    margin-bottom:.85rem;

    font-size:1.45rem;

    line-height:1.35;

    font-weight:700;

    color:#1e293b;

    scroll-margin-top:120px;

}

.policy-body h4{

    margin-top:2rem;
    margin-bottom:.65rem;

    font-size:1.18rem;

    font-weight:700;

    color:#334155;

}

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

.policy-body p{

    margin:0 0 1.35rem;

    color:#475569;
    font-weight: 500;

}

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

.policy-body a{

    color:#059669;

    text-decoration:none;

    font-weight:600;

}

.policy-body a:hover{

    text-decoration:underline;

}

/* ==========================================================
   STRONG
========================================================== */

.policy-body strong{

    color:#0f172a;

    font-weight:700;

}

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

.policy-body ul,
.policy-body ol{

    margin:1.3rem 0 1.7rem;

    padding-left:1.45rem;

}

.policy-body li{

    margin:.75rem 0;

    padding-left:.35rem;

    line-height:1.85;
    font-weight: 500;
    list-style-type: disc;

}

.policy-body ul li::marker{

    color:#000000;

}

.policy-body ol li::marker{

    color:#10b981;

    font-weight:700;

}

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

.policy-body blockquote{

    margin:2.25rem 0;

    padding:1.4rem 1.6rem;

    background:#f8fafc;

    border-left:5px solid #10b981;

    border-radius:18px;

    color:#475569;

    font-style:italic;

}

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

.policy-body table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

    width:100%;

    border-collapse:collapse;

    margin:2.2rem 0;

    border:1px solid #e2e8f0;

    border-radius:16px;

}

.policy-body th{

    background:#f8fafc;

    color:#0f172a;

    font-weight:700;

    padding:15px;

    border-bottom:1px solid #e2e8f0;

}

.policy-body td{

    padding:15px;

    border-bottom:1px solid #e2e8f0;

}

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

.policy-body img{

    display:block;

    max-width:100%;

    height:auto;

    margin:2.5rem auto;

    border-radius:18px;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

}

/* ==========================================================
   INLINE CODE
========================================================== */

.policy-body code{

    background:#f1f5f9;

    color:#be123c;

    padding:.15rem .45rem;

    border-radius:6px;

    font-size:.9em;

}

/* ==========================================================
   CODE BLOCK
========================================================== */

.policy-body pre{

    overflow:auto;

    margin:2rem 0;

    padding:22px;

    background:#0f172a;

    color:#f8fafc;

    border-radius:18px;

}

.policy-body pre code{

    background:none;

    color:inherit;

    padding:0;

}

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

.policy-body hr{

    margin:3rem 0;

    border:none;

    border-top:1px solid #e2e8f0;

}

/* ==========================================================
   SELECTION
========================================================== */

.policy-body ::selection{

    background:#d1fae5;

    color:#065f46;

}

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

@media (max-width:768px){

    .policy-body{

        max-width:100%;

        font-size:15px;

        line-height:1.85;

    }

    .policy-body h2{

        font-size:1.65rem;

        margin-top:2.6rem;

    }

    .policy-body h3{

        font-size:1.3rem;

    }

    .policy-body h4{

        font-size:1.1rem;

    }

    .policy-body table{

        font-size:14px;

    }

}