/* ── NADI legal & info pages — shared UBD-branded styling ──────────
   Used by the Privacy Notice, Acceptable Use Policy and Request-an-
   account pages. Palette: Ocean #325494 · Teal #74c1a1 · Gold #f5c946.
   Class prefix: .lg- */

:root {
  --lg-ocean: #325494;
  --lg-ocean-deep: #24406f;
  --lg-teal: #74c1a1;
  --lg-gold: #f5c946;
  --lg-ink: #1f2a3a;
  --lg-muted: #5b6677;
  --lg-line: #e6e9ef;
  --lg-bg: #f4f6fa;
}

* { box-sizing: border-box; }

/* Explicitly allow the document to grow and scroll — these are
   content pages, unlike the fixed full-screen login. */
html { height: auto; overflow-y: auto; scroll-behavior: smooth; }

body.lg-body {
  margin: 0;
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(1200px 480px at 50% -160px, rgba(50,84,148,.10), transparent 70%),
    var(--lg-bg);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--lg-ink);
  -webkit-font-smoothing: antialiased;
}

/* Sticky top navigation — always reachable, never scrolls away */
.lg-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 20px;
  background: rgba(36, 64, 111, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.lg-topbar a { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; }
.lg-top-back { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); transition: background .16s, border-color .16s; }
.lg-top-back:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.lg-top-back svg { width: 13px; height: 13px; }
.lg-top-home { font-weight: 700; letter-spacing: .04em; opacity: .82; }
.lg-top-home:hover { opacity: 1; color: var(--lg-gold); }

/* Header band — primary Ocean → Teal brand gradient */
.lg-header {
  background: linear-gradient(120deg, var(--lg-ocean-deep) 0%, var(--lg-ocean) 48%, #3e6f8e 100%);
  color: #fff;
  border-bottom: 3px solid var(--lg-gold);
}
.lg-header-inner { max-width: 860px; margin: 0 auto; padding: 26px 28px 30px; }
.lg-brandrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.lg-brandrow > a:first-child { display: inline-block; line-height: 0; }
.lg-logo { height: 46px; width: auto; display: block; opacity: .95; }
.lg-brandrow > a:first-child:hover .lg-logo { opacity: 1; }
.lg-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.88); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  transition: background .18s, border-color .18s;
}
.lg-back:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.lg-back svg { width: 14px; height: 14px; }
.lg-eyebrow {
  margin: 22px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lg-gold);
}
.lg-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.lg-sub { margin: 8px 0 0; font-size: 13.5px; color: rgba(255,255,255,.78); max-width: 62ch; line-height: 1.6; }
.lg-meta { margin-top: 16px; display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.72); }
.lg-meta b { color: #fff; font-weight: 600; }

/* Content card */
.lg-main { max-width: 860px; margin: -22px auto 56px; padding: 0 28px; }
.lg-card {
  background: #fff; border-radius: 16px; border: 1px solid var(--lg-line);
  box-shadow: 0 18px 50px rgba(36, 64, 111, .10), 0 4px 12px rgba(15, 23, 42, .04);
  padding: 40px clamp(24px, 5vw, 52px) 36px;
}

.lg-intro { font-size: 15px; line-height: 1.75; color: var(--lg-ink); margin: 0 0 26px; }

/* Table of contents */
.lg-toc {
  background: rgba(50,84,148,.045); border: 1px solid var(--lg-line);
  border-left: 3px solid var(--lg-ocean); border-radius: 10px;
  padding: 18px 22px; margin: 0 0 34px;
}
.lg-toc h2 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-ocean); }
.lg-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; counter-reset: toc; }
.lg-toc li { counter-increment: toc; margin: 5px 0; break-inside: avoid; }
.lg-toc a { font-size: 13.5px; color: var(--lg-ink); text-decoration: none; display: inline-flex; gap: 8px; }
.lg-toc a::before { content: counter(toc); color: var(--lg-ocean); font-weight: 700; min-width: 16px; }
.lg-toc a:hover { color: var(--lg-ocean); text-decoration: underline; }

/* Sections */
.lg-sec { padding-top: 8px; margin-top: 30px; scroll-margin-top: 20px; }
.lg-sec:first-of-type { margin-top: 0; }
.lg-sec h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 18.5px; font-weight: 700; color: var(--lg-ocean-deep);
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lg-line);
}
.lg-sec h2 .lg-num {
  font-size: 13px; font-weight: 700; color: #fff; background: var(--lg-ocean);
  border-radius: 7px; min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lg-sec h3 { font-size: 14.5px; font-weight: 600; color: var(--lg-ink); margin: 20px 0 6px; }
.lg-sec p { font-size: 14.5px; line-height: 1.75; color: var(--lg-ink); margin: 0 0 12px; }
.lg-sec ul { margin: 4px 0 14px; padding-left: 0; list-style: none; }
.lg-sec ul li { position: relative; font-size: 14px; line-height: 1.7; color: var(--lg-ink); padding: 3px 0 3px 24px; }
.lg-sec ul li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 2px; background: var(--lg-teal); transform: rotate(45deg); }
.lg-sec ul li b { font-weight: 600; color: var(--lg-ocean-deep); }
.lg-sec a { color: var(--lg-ocean); }

/* Audience cards (Request-an-account page) */
.lg-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 20px; }
.lg-aud { background: #fff; border: 1px solid var(--lg-line); border-top: 3px solid var(--lg-ocean); border-radius: 12px; padding: 18px 18px 16px; }
.lg-aud .lg-aud-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(50,84,148,.10); color: var(--lg-ocean); margin-bottom: 10px; }
.lg-aud .lg-aud-ico svg { width: 18px; height: 18px; }
.lg-aud h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--lg-ocean-deep); }
.lg-aud p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--lg-muted); }

/* Note / callout */
.lg-note {
  margin: 18px 0; padding: 14px 18px; border-radius: 10px;
  background: rgba(245,201,70,.10); border: 1px solid rgba(245,201,70,.45);
  font-size: 13.5px; line-height: 1.65; color: var(--lg-ink);
}
.lg-note b { color: var(--lg-ocean-deep); }

/* Contact callout */
.lg-contact { margin-top: 34px; background: linear-gradient(120deg, rgba(50,84,148,.06), rgba(116,193,161,.10)); border: 1px solid var(--lg-line); border-radius: 12px; padding: 22px 24px; }
.lg-contact h2 { border: 0; padding: 0; margin: 0 0 8px; }
.lg-contact p { margin: 0 0 6px; }
.lg-dl { margin: 10px 0 0; font-size: 14px; line-height: 1.9; }
.lg-dl span { display: inline-block; min-width: 130px; color: var(--lg-muted); }
.lg-dl b { color: var(--lg-ocean-deep); font-weight: 600; }
.lg-dl a { color: var(--lg-ocean); text-decoration: none; }
.lg-dl a:hover { text-decoration: underline; }

/* Inline CTA button. The compound selector keeps the white text from
   being overridden by the lower-specificity `.lg-sec a` link colour. */
.lg-btn,
.lg-sec a.lg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 11px 18px; border-radius: 10px;
  background: var(--lg-ocean); color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: background .18s, transform .18s;
}
.lg-btn:hover { background: var(--lg-ocean-deep); color: #fff; transform: translateY(-1px); }
.lg-btn svg { width: 15px; height: 15px; }

.lg-foot {
  max-width: 860px; margin: 0 auto; padding: 0 28px 48px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--lg-muted);
}
.lg-foot a { color: var(--lg-ocean); text-decoration: none; }
.lg-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .lg-audience { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lg-toc ol { columns: 1; }
  .lg-title { font-size: 24px; }
}