:root {
    --navy:#11497b;
    --navy-dark:#0c3760;
    --orange:#e66651;
    --sky:#abd7cd;
    --sand:#caba9f;
    --sky-tint:#eef7f4;
    --ink:#1f2d38;
    --line:#e4ede9;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    font-family:"Nunito Sans", "Segoe UI", Arial, sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65;
}
h2, h3 {
    font-family:"Poppins", "Segoe UI", Arial, sans-serif;
}
a {
    color:inherit;
}
.content-title {
    padding:16px 0 0;
    max-width:1180px;
    margin:0 auto;
}
.content-title p {
    margin:0;
    color:#5b6b70;
    font-size:.95rem;
}
.wrap {
    padding:16px 0 70px;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:32px;
    max-width:1180px;
    margin:0 auto;
}
nav.toc {
    position:sticky;
    top:110px;
    align-self:start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:0 2px 10px rgba(17, 73, 123, .05);
    z-index:10;
}
nav.toc h2 {
    margin:0 0 14px;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--navy);
    font-weight:800;
}
nav.toc ol {
    list-style:none;
    margin:0;
    padding:0;
}
nav.toc a {
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink);
    font-size:.88rem;
    font-weight:600;
    padding:9px 8px;
    border-radius:9px;
    transition:background .15s ease, color .15s ease;
}
nav.toc a:hover, nav.toc a:focus-visible {
    background:var(--sky-tint);
    color:var(--navy);
}
nav.toc .badge {
    flex:0 0 auto;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sky);
    color:var(--navy);
    border-radius:8px;
    font-size:.72rem;
    font-weight:800;
}
nav.toc a.active .badge {
    background:var(--orange);
    color:#fff;
}
main {
    min-width:0;
}
article.article {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px clamp(18px, 4vw, 36px);
    margin-bottom:22px;
    box-shadow:0 2px 10px rgba(17, 73, 123, .05);
    scroll-margin-top:20px;
}
article.article .kicker {
    display:inline-block;
    background:var(--sky);
    color:var(--navy);
    font-weight:800;
    font-size:.72rem;
    letter-spacing:.06em;
    padding:4px 12px;
    border-radius:999px;
    margin-bottom:10px;
}
article.article h2 {
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:2px solid var(--line);
    color:var(--navy);
    font-size:1.28rem;
    font-weight:700;
}
article.article .intro-note {
    margin:0 0 14px;
    color:#4a5960;
    font-size:.92rem;
}
ul.clauses {
    list-style:none;
    margin:0;
    padding:0;
}
ul.clauses>li {
    display:flex;
    gap:14px;
    padding:13px 0;
    border-top:1px solid var(--line);
}
ul.clauses>li:first-child {
    border-top:none;
    padding-top:2px;
}
ul.clauses>li .num {
    flex:0 0 auto;
    min-width:34px;
    height:30px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sky-tint);
    border:1px solid var(--sky);
    color:var(--navy);
    font-weight:800;
    font-size:.82rem;
    border-radius:9px;
}
ul.clauses>li .txt {
    flex:1;
}
a.inline-link, a.mail-link {
    color:var(--navy);
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid var(--sky);
}
a.inline-link:hover, a.mail-link:hover {
    color:var(--orange);
    border-bottom-color:var(--orange);
}
.effective-bottom {
    text-align:center;
    font-weight:700;
    color:var(--navy);
    padding:24px 0 4px;
}
#backToTop {
    position:fixed;
    right:24px;
    bottom:24px;
    background:#fff;
    color:var(--navy);
    border:2px solid var(--sky);
    width:46px;
    height:46px;
    border-radius:50%;
    font-size:1.15rem;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(17, 73, 123, .18);
    display:none;
    align-items:center;
    justify-content:center;
    transition:transform .15s ease, background .15s ease, color .15s ease;
}
#backToTop:hover {
    transform:translateY(-3px);
    background:var(--orange);
    color:#fff;
    border-color:var(--orange);
}
@media (max-width:900px) {
    .wrap {
        grid-template-columns:1fr;
    }
    nav.toc {
        position:relative;
        top:0;
    }
}