:root{
    --pump-amber:#E87C12;
    --alert-red:#FD2D2D;
    --ink:#1A1815;
    --ink-soft:#5B564E;
    --paper:#FFFFFF;
    --paper-warm:#FAF8F5;
    --line:#E8E3DA;

    --mono:'JetBrains Mono', monospace;
    --sans:'Inter', sans-serif;

    /* Revlo master blue for legal pages */
    --revlo-blue:#2563EB;
    --revlo-blue-dark:#1D4ED8;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:#faf8f6;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--revlo-blue);
    text-decoration:none;
}

a:hover{
    color:var(--revlo-blue-dark);
    text-decoration:underline;
}


/*=========================================================
                        DOCUMENT
=========================================================*/

.wrap{
    max-width:840px;
    margin:0 auto;
    padding:56px 24px 120px;
}

.eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--revlo-blue);
    margin-bottom:14px;
}

h1{
    font-size:38px;
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 10px;
    line-height:1.15;
}

.meta{
    font-family:var(--mono);
    font-size:13px;
    color:var(--ink-soft);
    margin-bottom:40px;
}

.meta strong{
    color:var(--ink);
}

.intro{
    font-size:16px;
    color:var(--ink-soft);
    border-left:3px solid var(--revlo-blue);
    padding-left:18px;
    margin-bottom:44px;
}


/*=========================================================
                    TABLE OF CONTENTS
=========================================================*/

.toc{
    background:var(--paper-warm);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px 28px;
    margin-bottom:56px;
}

.toc h2{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 14px;
    font-weight:600;
}

.toc ol{
    margin:0;
    padding-left:20px;
    columns:2;
    column-gap:24px;
}

.toc li{
    font-size:14px;
    margin-bottom:8px;
    break-inside:avoid;
}

.toc a{
    color:var(--ink);
}

.toc a:hover{
    color:var(--revlo-blue);
    text-decoration:none;
}


/*=========================================================
                        SECTIONS
=========================================================*/

section{
    margin-bottom:40px;
    scroll-margin-top:90px;
}

section h2{
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 14px;
    display:flex;
    align-items:baseline;
    gap:10px;
    line-height:1.35;
}

section h2 .num{
    font-family:var(--mono);
    font-size:14px;
    color:var(--revlo-blue);
    font-weight:600;
    flex:0 0 auto;
}

section h3{
    font-size:15px;
    font-weight:700;
    margin:20px 0 8px;
}

section p{
    font-size:15px;
    color:var(--ink);
    margin:0 0 12px;
}

section ul,
section ol{
    font-size:15px;
    padding-left:22px;
    margin:0 0 12px;
}

section li{
    margin-bottom:6px;
}

section strong{
    color:var(--ink);
}


/*=========================================================
                        CALLOUTS
=========================================================*/

.callout{
    background:#EFF6FF;
    border:1px solid #BFDBFE;
    border-left:3px solid var(--revlo-blue);
    border-radius:8px;
    padding:14px 18px;
    font-size:14px;
    color:#1E40AF;
    margin:16px 0;
}

.callout.red{
    background:#FEECEC;
    border-color:#F8BCBC;
    border-left-color:var(--alert-red);
    color:#8A1414;
}


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

code,
.placeholder{
    font-family:var(--mono);
    font-size:13px;
    background:var(--paper-warm);
    border:1px solid var(--line);
    padding:1px 6px;
    border-radius:4px;
    color:var(--ink-soft);
}


/*=========================================================
                        DIVIDER
=========================================================*/

hr.div{
    border:none;
    border-top:1px solid var(--line);
    margin:48px 0;
}


/*=========================================================
                    CONTACT BOX
    Hardcoded navy gradient to match .site-footer's
    --sf-ink (#101828 family) instead of falling back to
    var(--ink), which on this page is a separate dark
    brown/black used for body text.
=========================================================*/

.contact-box{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,.11), transparent 30%),
        linear-gradient(135deg, #101828 0%, #1B2540 100%);
    color:#B9C3D3;
    border-radius:12px;
    padding:28px 30px;
    box-shadow:0 18px 45px rgba(16,24,40,.18);
}

.contact-box::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--revlo-blue), #6A8BFF);
}

.contact-box h2{
    color:var(--paper);
}

.contact-box .num{
    color:var(--revlo-blue);
}

.contact-box p{
    color:#B9C3D3;
}

.contact-box a{
    color:#7EA7FF;
}

.contact-box a:hover{
    color:#A8C2FF;
}


/*=========================================================
                        RESPONSIVE
=========================================================*/

@media (max-width:640px){

    .wrap{
        padding:36px 18px 90px;
    }

    h1{
        font-size:28px;
    }

    .meta{
        font-size:11px;
        line-height:1.7;
    }

    .intro{
        font-size:15px;
        padding-left:15px;
    }

    .toc{
        padding:20px;
    }

    .toc ol{
        columns:1;
    }

    section h2{
        font-size:19px;
    }

    section p,
    section ul,
    section ol{
        font-size:14px;
    }

    .contact-box{
        padding:23px 20px;
    }

}

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

}