/* ==========================================================================
   TECKNOID303 – LEGAL DESIGN SYSTEM
   ========================================================================== */

:root{
    --legal-bg:#f2f5f8;
    --legal-surface:#ffffff;
    --legal-soft:#f7f9fc;
    --legal-ink:#111827;
    --legal-text:#344054;
    --legal-muted:#667085;
    --legal-line:#dfe5ec;
    --legal-blue:#1769ff;
    --legal-blue-dark:#0d50cf;
    --legal-shadow:0 14px 38px rgba(15,23,42,.09);
    --legal-radius:16px;
    --legal-content:1040px;
}
html{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    color-scheme:light;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:inherit;min-width:0}
body{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 12% -10%,rgba(23,105,255,.08),transparent 30rem),
        var(--legal-bg);
    color:var(--legal-text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--legal-blue)}
.legal-header{
    position:sticky;
    top:0;
    z-index:50;
    color:#fff;
    background:rgba(14,22,34,.98);
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 10px 30px rgba(15,23,42,.18);
}
.legal-header-inner{
    width:min(1320px,calc(100% - 40px));
    min-height:72px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.legal-brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
}
.legal-brand-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#4bc9ff,#1769ff);
    box-shadow:0 10px 25px rgba(23,105,255,.3);
    font-weight:950;
}
.legal-brand strong,.legal-brand small{display:block}
.legal-brand strong{font-size:15px}
.legal-brand small{
    margin-top:2px;
    color:#b6c0cd;
    font-size:9px;
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.legal-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.legal-header-actions a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    color:#fff;
    font-size:12px;
    font-weight:850;
    text-decoration:none;
}
.legal-header-actions a:hover{background:rgba(255,255,255,.08)}
.legal-page{
    width:min(var(--legal-content),calc(100% - 40px));
    margin:34px auto 72px;
}
.legal-hero{
    margin-bottom:22px;
    padding:30px;
    border:1px solid var(--legal-line);
    border-radius:20px;
    background:linear-gradient(135deg,#fff,#f5f8fc);
    box-shadow:var(--legal-shadow);
}
.legal-eyebrow{
    color:var(--legal-blue);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.legal-hero h1{
    margin:8px 0 9px;
    color:var(--legal-ink);
    font-size:clamp(30px,5vw,48px);
    line-height:1.04;
    letter-spacing:-.045em;
}
.legal-hero p{
    max-width:760px;
    margin:0;
    color:var(--legal-muted);
    line-height:1.65;
}
.legal-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:22px;
    align-items:start;
}
.legal-nav{
    position:sticky;
    top:94px;
    padding:15px;
    border:1px solid var(--legal-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.legal-nav strong{
    display:block;
    margin:3px 8px 10px;
    color:var(--legal-ink);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.legal-nav a{
    display:block;
    padding:8px;
    border-radius:8px;
    color:#536174;
    font-size:12px;
    font-weight:750;
    text-decoration:none;
}
.legal-nav a:hover{
    color:var(--legal-blue-dark);
    background:#edf4ff;
}
.legal-content{
    padding:28px;
    border:1px solid var(--legal-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.legal-section{
    scroll-margin-top:98px;
    padding:0 0 25px;
    margin:0 0 25px;
    border-bottom:1px solid var(--legal-line);
}
.legal-section:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:0;
}
.legal-section h2{
    margin:0 0 12px;
    color:var(--legal-ink);
    font-size:22px;
    letter-spacing:-.025em;
}
.legal-section h3{
    margin:21px 0 8px;
    color:var(--legal-ink);
    font-size:16px;
}
.legal-section p,.legal-section li{
    color:var(--legal-text);
    font-size:14px;
    line-height:1.72;
}
.legal-section ul{
    padding-left:21px;
}
.legal-contact-card{
    display:grid;
    gap:4px;
    padding:17px;
    border:1px solid #dce4ed;
    border-radius:12px;
    background:var(--legal-soft);
    font-style:normal;
    line-height:1.65;
}
.legal-note{
    padding:14px 16px;
    border-left:4px solid var(--legal-blue);
    border-radius:0 10px 10px 0;
    background:#edf4ff;
    color:#2f4e82;
    font-size:13px;
    line-height:1.6;
}
.legal-warning{
    padding:14px 16px;
    border-left:4px solid #d97706;
    border-radius:0 10px 10px 0;
    background:#fff7ed;
    color:#7c3f0c;
    font-size:13px;
    line-height:1.6;
}
.legal-footer{
    width:min(var(--legal-content),calc(100% - 40px));
    margin:0 auto 28px;
    padding:18px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #d9e0e8;
    color:var(--legal-muted);
    font-size:11px;
}
.legal-footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.legal-footer a{
    color:var(--legal-muted);
    text-decoration:none;
}
.legal-footer a:hover{color:var(--legal-blue)}
@media(max-width:820px){
    .legal-layout{grid-template-columns:1fr}
    .legal-nav{position:static;display:flex;gap:5px;overflow-x:auto}
    .legal-nav strong{display:none}
    .legal-nav a{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:620px){
    .legal-header-inner{
        width:calc(100% - 24px);
        align-items:stretch;
        flex-direction:column;
        padding:12px 0 14px;
    }
    .legal-header-actions{display:grid;grid-template-columns:1fr 1fr}
    .legal-page{width:calc(100% - 24px);margin-top:20px}
    .legal-hero{padding:22px}
    .legal-content{padding:20px}
    .legal-footer{
        width:calc(100% - 24px);
        align-items:flex-start;
        flex-direction:column;
    }
}