* {
    box-sizing: border-box; 
} 

html, 
body { 
    margin: 0; 
    min-height: 100%; 
    font-family: Inter, "Segoe UI", Arial, sans-serif; 
    color: #172a2a; 
} 

body { 
    background: #174c45; 
} 

.legal-page { 
    position: relative; 
    min-height: 100vh; 
    overflow-x: hidden; 
    background: 
        linear-gradient(rgba(8, 48, 42, 0.72), rgba(8, 48, 42, 0.86)), 
        url('/static/img/hero.png') center / cover fixed no-repeat; 
} 

.legal-shell { 
    position: relative; 
    z-index: 1; 
    width: min(980px, calc(100% - 32px)); 
    margin: 0 auto; 
    padding: 28px 0 44px; 
} 

.legal-topbar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 20px; 
    margin-bottom: 28px; 
} 

.legal-brand { 
    color: #ffffff; 
    text-decoration: none; 
    font-size: clamp(1.6rem, 4vw, 2rem); 
    font-weight: 300; 
} 

.legal-brand span { 
    font-weight: 800; 
} 

.legal-back { 
    display: inline-flex; 
    align-items: center; 
    min-height: 44px; 
    padding: 10px 16px; 
    border: 1px solid rgba(255, 255, 255, 0.58); 
    border-radius: 999px; 
    background: rgba(255, 255, 255, 0.10); 
    color: #ffffff; 
    text-decoration: none; 
    font-weight: 800; 
    backdrop-filter: blur(10px); 
} 

.legal-back:hover { 
    background: rgba(255, 255, 255, 0.18); 
} 

.legal-back:focus-visible, 
.legal-footer a:focus-visible, 
.legal-card a:focus-visible { 
    outline: 3px solid #f7efe6; 
    outline-offset: 4px; 
    border-radius: 4px; 
} 

.legal-card { 
    padding: clamp(26px, 5vw, 52px); 
    border: 1px solid rgba(255, 255, 255, 0.62); 
    border-radius: 30px; 
    background: rgba(250, 248, 244, 0.93); 
    box-shadow: 0 28px 80px rgba(5, 32, 29, 0.35); 
    backdrop-filter: blur(18px); 
} 

.legal-kicker { 
    margin: 0 0 8px; 
    color: #26745e; 
    font-size: 0.78rem; 
    font-weight: 900; 
    letter-spacing: 0.18em; 
} 

.legal-card h1 {
    margin: 0 0 24px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: #174c45;
}

.legal-card h2 { 
    margin: 28px 0 8px; 
    color: #174c45; 
    font-size: 1.3rem; 
} 

.legal-card h3 { 
    margin: 20px 0 6px; 
    color: #26745e; 
    font-size: 1.05rem; 
} 

.legal-card p, 
.legal-card li { 
    line-height: 1.68; 
} 

.legal-card p { 
    margin: 0 0 12px; 
} 

.legal-card ul { 
    margin: 8px 0 14px; 
    padding-left: 22px; 
} 

.legal-card a { 
    color: #26745e; 
    font-weight: 800; 
    text-underline-offset: 3px; 
} 

.legal-note { 
    margin: 24px 0; 
    padding: 16px 18px; 
    border-left: 4px solid #f47c61; 
    border-radius: 0 14px 14px 0; 
    background: #fff2e8; 
} 

.legal-footer { 
    display: grid; 
    justify-items: center; 
    gap: 10px; 
    padding: 28px 16px 0; 
    color: rgba(255, 255, 255, 0.90); 
    text-align: center; 
} 

.legal-footer p { 
    margin: 0; 
} 

.legal-footer nav { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 9px; 
} 

.legal-footer a { 
    color: #ffffff; 
    text-decoration: none; 
    font-weight: 800; 
} 

.legal-footer a:hover { 
    text-decoration: underline; 
} 

@media (max-width: 640px) { 
    .legal-shell { 
        width: min(100% - 20px, 980px); 
        padding-top: 16px; 
    } 
    .legal-topbar { 
        align-items: flex-start; 
        margin-bottom: 18px; 
    } 
    .legal-back { 
        padding: 9px 12px; 
        font-size: 0.88rem; 
    } 
    .legal-card { 
        border-radius: 22px; 
    } 
}