/* =====================================================
   BAOIAM - TERMS & CONDITIONS PAGE
===================================================== */

/* The shared nav is a translucent "glass" bar (rgba background + blur on
   scroll) designed to sit over hero images. Over this page's dense body
   text that translucency lets paragraph lines show through underneath it,
   which reads as a bug — so this page pins it to a solid background. */
body.terms-page nav{
    background:linear-gradient(90deg,#fbf6f3 0%,#f9f2ed 50%,#f6ece6 100%);
    backdrop-filter:none;
}

body.terms-page{
    background:var(--section-bg);
}

.terms-wrap{
    display:flex;
    align-items:flex-start;
    gap:48px;
    max-width:1200px;
    margin:0 auto;
    padding:var(--space-section-sm) 24px var(--space-section);
}

/* Sidebar TOC */

.terms-sidebar{
    position:sticky;
    top:92px;
    flex:0 0 280px;
    max-height:calc(100vh - 112px);
    overflow-y:auto;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:28px 18px 28px 22px;
    box-shadow:var(--shadow-soft);

    /* Thin, unobtrusive scrollbar for the TOC's internal scroll */
    scrollbar-width:thin;
    scrollbar-color:var(--border-grey) transparent;
}

.terms-sidebar::-webkit-scrollbar{
    width:5px;
}

.terms-sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.terms-sidebar::-webkit-scrollbar-thumb{
    background:var(--border-grey);
    border-radius:10px;
}

.terms-sidebar::-webkit-scrollbar-thumb:hover{
    background:var(--ink-400);
}

.terms-sidebar-eyebrow{
    font-family:"Poppins",sans-serif;
    font-size:11px;
    font-weight:700;
    color:var(--ink-400);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
}

.terms-sidebar-title{
    font-family:"Poppins",sans-serif;
    font-size:18px;
    font-weight:700;
    color:var(--ink-900);
    margin-bottom:16px;
}

.terms-toc{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.terms-toc a{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:9px 4px;
    font-size:14px;
    color:var(--ink-500);
    text-decoration:none;
    line-height:1.4;
    transition:color .15s ease;
}

.terms-toc a:hover{
    color:var(--primary);
}

.toc-dot{
    flex-shrink:0;
    width:8px;
    height:8px;
    margin-top:5px;
    border-radius:50%;
    border:1.5px solid var(--border-grey);
    transition:background .15s ease,border-color .15s ease;
}

.toc-num{
    flex-shrink:0;
    font-variant-numeric:tabular-nums;
    color:var(--ink-400);
}

.toc-label{
    flex:1;
}

.terms-toc a.active{
    color:var(--ink-900);
    font-weight:600;
}

.terms-toc a.active .toc-dot{
    background:var(--ink-600);
    border-color:var(--ink-600);
}

.terms-toc a.active .toc-num{
    color:var(--ink-600);
}

/* Content */

.terms-content{
    flex:1 1 auto;
    min-width:0;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:44px 48px;
    box-shadow:var(--shadow-soft);
}

.terms-intro h1{
    font-family:"Poppins",sans-serif;
    font-size:var(--fs-hero);
    font-weight:700;
    color:var(--ink-900);
    margin-bottom:16px;
}

.terms-intro p{
    font-size:var(--fs-lead);
    line-height:1.7;
    color:var(--ink-800);
}

.terms-section{
    padding-top:32px;
    margin-top:32px;
    border-top:1px solid var(--border-soft);
    scroll-margin-top:120px;
}

.terms-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.terms-icon{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--primary-10);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
}

.terms-section h2{
    font-family:"Poppins",sans-serif;
    font-size:var(--fs-sub);
    font-weight:700;
    color:var(--ink-900);
}

.terms-section h3{
    font-family:"Poppins",sans-serif;
    font-size:17px;
    font-weight:700;
    color:var(--ink-900);
    margin:16px 0 8px;
}

.terms-section p{
    font-size:15px;
    line-height:1.75;
    color:var(--ink-800);
    margin-bottom:10px;
}

.terms-section ul{
    margin:0 0 10px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.terms-section li{
    font-size:15px;
    line-height:1.7;
    color:var(--ink-800);
}

/* Icon-led lines — replaces plain bullet dots with a small round icon per
   line, related items grouped onto one comma-joined line, hairline divider
   between rows. */

.terms-icon-list{
    display:flex;
    flex-direction:column;
    margin:12px 0;
}

.terms-icon-line{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:10px 0;
    font-size:15px;
    line-height:1.6;
    color:var(--ink-800);
    border-bottom:1px solid var(--border-soft);
}

.terms-icon-line:last-child{
    border-bottom:none;
}

.terms-line-icon{
    flex-shrink:0;
    width:26px;
    height:26px;
    margin-top:1px;
    border-radius:50%;
    background:var(--primary-10);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

/* Chip rows — short phrases (what/why lists) as wrapping pill badges
   instead of a long bullet column. */

.terms-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:14px 0;
}

.terms-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:var(--cream-50);
    font-size:13px;
    line-height:1.4;
    color:var(--ink-800);
}

.terms-chip i{
    color:var(--primary);
    font-size:12px;
}

/* Callout boxes — pull a single standout statement out of the paragraph
   flow. --info for neutral notices, --warn for cautionary/emphasis ones. */

.terms-callout{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
    border-radius:var(--radius-md);
    margin:14px 0;
    font-size:14px;
    line-height:1.65;
}

.terms-callout p{
    margin:0;
    color:inherit;
    font-size:inherit;
}

.terms-callout i{
    margin-top:2px;
    flex-shrink:0;
}

.terms-callout--info{
    background:#EEF2FF;
    color:#3730A3;
    border:1px solid #C7D2FE;
}

.terms-callout--info i{
    color:#4F46E5;
}

.terms-callout--warn{
    background:var(--cream-100);
    color:#9A3412;
    border:1px solid var(--cream-300);
}

.terms-callout--warn i{
    color:var(--primary);
}

.terms-pending-note{
    font-style:italic;
    color:var(--ink-400) !important;
}

/* Mobile */

@media (max-width:900px){
    .terms-wrap{
        flex-direction:column;
        padding-top:32px;
    }

    .terms-sidebar{
        position:static;
        max-height:none;
        width:100%;
        padding:20px 16px;
    }

    .terms-toc{
        flex-direction:row;
        flex-wrap:wrap;
    }

    .terms-toc a{
        padding:6px 10px;
    }

    .terms-content{
        padding:28px 22px;
    }
}

/* ==========================================
   TOUCH TARGETS

   Every rule below exists because a real element measured under 40px tall
   or 32px wide at a 390px viewport — measured, not guessed. Desktop is
   untouched; these only open up where a finger is doing the pointing.

   The query is width OR (hover:none) deliberately. (hover:none) alone is
   the semantically right test — a 1280px tablet needs the same room a phone
   does — but it never matches in a desktop browser, which makes the fix
   impossible to verify by measurement. The pair covers both.
========================================== */

/* The contents list on the legal pages: 14 links at 32px, stacked tight,
   so the wrong one is easy to hit. */

@media (max-width:768px), (hover:none){

    .terms-toc li a{
        min-height:44px;
        display:flex;
        align-items:center;
    }

    .terms-sidebar-eyebrow{
        font-size:12px;
    }

}


/* Inline links inside the legal and FAQ body copy sat at 19px — they are
   in running text, so the padding has to stay vertical or the sentence
   spaces out. */

@media (max-width:768px), (hover:none){

    .terms-content p a{
        display:inline-block;
        padding-block:11px;
    }

}