
:root{
  --kl-navy:#082d67;
  --kl-text:#284c78;
  --kl-muted:#7187a5;
  --kl-border:#dce6f2;
  --kl-bg:#f4f8fc;
  --kl-coral:#ff526f;
}
.legal-page{background:var(--kl-bg);color:var(--kl-navy)}
.legal-hero{padding:64px 0 44px;background:linear-gradient(180deg,#eef5fc 0%,#f7faff 100%);border-bottom:1px solid var(--kl-border)}
.legal-hero .container{max-width:1040px}
.legal-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--kl-border);font-size:13px;font-weight:800;color:var(--kl-coral);letter-spacing:.02em;text-transform:uppercase}
.legal-hero h1{margin:18px 0 12px;font-size:clamp(42px,6vw,72px);line-height:.96;letter-spacing:-.055em}
.legal-hero p{max-width:780px;margin:0;color:var(--kl-text);font-size:18px;line-height:1.65}
.legal-main{padding:44px 0 84px}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}
.legal-content{display:grid;gap:18px}
.legal-card{background:#fff;border:1px solid var(--kl-border);border-radius:22px;padding:28px 30px;box-shadow:0 14px 38px rgba(8,45,103,.05)}
.legal-card h2{margin:0 0 14px;font-size:26px;letter-spacing:-.025em}
.legal-card h3{margin:24px 0 8px;font-size:18px}
.legal-card p,.legal-card li{color:var(--kl-text);line-height:1.72}
.legal-card ul{margin:10px 0 0;padding-left:22px}
.legal-card a{color:var(--kl-navy);font-weight:800;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-note{padding:18px 20px;border-radius:16px;background:#eef7f2;color:#17603c;font-weight:650;line-height:1.55}
.legal-note--warn{background:#fff6e8;color:#7a4b00}
.legal-side{position:sticky;top:110px;background:#fff;border:1px solid var(--kl-border);border-radius:20px;padding:22px}
.legal-side strong{display:block;margin-bottom:10px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--kl-muted)}
.legal-side a{display:block;padding:9px 0;color:var(--kl-navy);text-decoration:none;font-weight:750}
.legal-side a+strong{margin-top:18px}
.legal-meta{margin-top:12px;color:var(--kl-muted);font-size:14px}
.legal-table{width:100%;border-collapse:collapse;margin-top:12px}
.legal-table th,.legal-table td{padding:13px 12px;border-bottom:1px solid var(--kl-border);text-align:left;vertical-align:top;color:var(--kl-text);line-height:1.5}
.legal-table th{color:var(--kl-navy);font-size:13px}
@media(max-width:860px){
  .legal-layout{grid-template-columns:1fr}
  .legal-side{position:static;order:-1}
  .legal-hero{padding-top:42px}
  .legal-card{padding:24px 20px}
}
