/* ── Legal pages — scoped under lgl- prefix ── */
:root {
  --lgl-ink: #0a2540;
  --lgl-blue: #24a9df;
  --lgl-blue-dark: #12629b;
  --lgl-muted: #6b7c93;
  --lgl-soft: #f6f9fc;
  --lgl-line: #e6edf5;
  --lgl-shadow: 0 28px 80px rgba(8,42,70,.14);
  --lgl-shadow-soft: 0 14px 44px rgba(8,42,70,.07);
}

.lgl-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto }

/* ── Hero ── */
.lgl-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 20% 8%, rgba(36,169,223,.12), transparent 30%), radial-gradient(circle at 90% 12%, rgba(8,42,70,.08), transparent 24%), linear-gradient(180deg,#fff 0%,#f8fbff 100%); padding: 76px 0 96px }
.lgl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 76px; background: #fff; clip-path: polygon(0 50%,100% 0,100% 100%,0 100%) }
.lgl-hero-inner { position: relative; z-index: 2; max-width: 860px }
.lgl-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--lgl-blue-dark); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; margin-bottom: 18px }
.lgl-kicker i { width: 9px; height: 9px; border-radius: 99px; background: var(--lgl-blue); box-shadow: 0 0 0 6px rgba(36,169,223,.12); display: inline-block; flex-shrink: 0 }
.lgl-h1 { margin: 0; color: var(--lgl-ink); font-size: clamp(40px,5vw,68px); line-height: 1.02; letter-spacing: -.06em; font-weight: 900 }
.lgl-lead { margin: 22px 0 0; color: #4f6177; font-size: 19px; line-height: 1.68; max-width: 760px }

/* ── Two-column layout ── */
.lgl-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 38px; padding: 72px 0 }

/* ── Sidebar ── */
.lgl-sidebar { position: sticky; top: 112px; align-self: start; background: #fff; border: 1px solid var(--lgl-line); border-radius: 28px; padding: 22px; box-shadow: 0 14px 40px rgba(8,42,70,.06) }
.lgl-sidebar strong { display: block; font-size: 15px; font-weight: 900; color: var(--lgl-ink); margin-bottom: 14px }
.lgl-sidebar a { display: block; color: #637386; font-size: 14px; line-height: 1.45; padding: 10px 0; border-top: 1px solid #eef3f8; text-decoration: none; transition: color .15s }
.lgl-sidebar a:hover { color: var(--lgl-blue-dark) }
.lgl-sidebar a.lgl-active { color: var(--lgl-blue-dark); font-weight: 700 }

/* ── Content card ── */
.lgl-content { background: #fff; border: 1px solid var(--lgl-line); border-radius: 34px; box-shadow: var(--lgl-shadow-soft); padding: 44px }
.lgl-content .lgl-top-title { margin: 0 0 8px; font-size: 36px; letter-spacing: -.05em; color: var(--lgl-ink); line-height: 1.1 }
.lgl-content .lgl-effective { font-size: 13px; color: var(--lgl-muted); margin: 0 0 28px; font-weight: 600 }
.lgl-content h2 { font-size: 28px; letter-spacing: -.04em; margin: 34px 0 14px; color: var(--lgl-ink); line-height: 1.2 }
.lgl-content h3 { font-size: 20px; letter-spacing: -.03em; margin: 26px 0 10px; color: var(--lgl-ink) }
.lgl-content p { color: #4f6177; line-height: 1.78; margin: 0 0 14px; font-size: 15px }
.lgl-content ul { color: #4f6177; line-height: 1.78; margin: 0 0 18px; padding-left: 22px }
.lgl-content li { margin: 5px 0; font-size: 15px }
.lgl-content strong { color: var(--lgl-ink) }
.lgl-content a { color: var(--lgl-blue-dark); text-decoration: underline; text-underline-offset: 3px }
.lgl-content a:hover { color: var(--lgl-blue) }

/* ── Info note box ── */
.lgl-note { background: #f7fbfe; border: 1px solid #dceef8; border-radius: 22px; padding: 18px 22px; color: #4f6177; line-height: 1.65; margin: 22px 0; font-size: 14px }
.lgl-note strong { color: var(--lgl-ink); display: block; margin-bottom: 6px }

/* ── Address block ── */
.lgl-address { background: var(--lgl-soft); border: 1px solid var(--lgl-line); border-radius: 18px; padding: 18px 22px; margin: 18px 0; font-size: 14px; color: #4f6177; line-height: 1.75 }
.lgl-address strong { display: block; color: var(--lgl-ink); margin-bottom: 6px; font-size: 15px }

/* ── Footer CTA ── */
.lgl-footer-cta { position: relative; overflow: hidden; background: #082a46; color: #fff; padding: 70px 0 94px }
.lgl-footer-cta::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/img/cubes-pattern.svg'); background-size: 420px; opacity: .16 }
.lgl-footer-cta::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -60px; height: 100px; background: #fff; transform: rotate(-2.5deg); transform-origin: left top }
.lgl-footer-cta .lgl-container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center }
.lgl-footer-cta h2 { margin: 0; font-size: 34px; letter-spacing: -.05em; line-height: 1.1; color: #fff }
.lgl-footer-cta p { margin: 12px 0 0; color: rgba(255,255,255,.72); line-height: 1.65; max-width: 700px }

/* ── CTA Button ── */
.lgl-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; min-height: 52px; padding: 0 28px; font-weight: 900; cursor: pointer; transition: .18s ease; white-space: nowrap; font-size: 15px; text-decoration: none }
.lgl-btn-primary { background: var(--lgl-blue); color: #fff; box-shadow: 0 16px 36px rgba(36,169,223,.28) }
.lgl-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 44px rgba(36,169,223,.34); color: #fff }

/* ── Responsive ── */
@media (max-width: 980px) {
  .lgl-wrap { grid-template-columns: 1fr }
  .lgl-sidebar { position: relative; top: 0 }
  .lgl-footer-cta .lgl-container { grid-template-columns: 1fr }
}

@media (max-width: 680px) {
  .lgl-container { width: min(100% - 28px, 1120px) }
  .lgl-hero { padding: 54px 0 82px }
  .lgl-lead { font-size: 17px }
  .lgl-wrap { padding: 48px 0 }
  .lgl-content { padding: 24px; border-radius: 26px }
  .lgl-content .lgl-top-title { font-size: 28px }
  .lgl-content h2 { font-size: 22px }
  .lgl-content h3 { font-size: 18px }
  .lgl-footer-cta h2 { font-size: 28px }
  .lgl-h1 { font-size: clamp(32px, 8vw, 48px) }
}