
/* WebNigerians Legal Front Pages V1 */
:root{
  --wnl-blue:#086bd8;
  --wnl-blue-deep:#082d66;
  --wnl-navy:#071a38;
  --wnl-ink:#0a1832;
  --wnl-muted:#60718a;
  --wnl-line:#d9e5f2;
  --wnl-soft:#f3f8fe;
  --wnl-white:#fff;
  --wnl-green:#0b8a63;
  --wnl-shadow:0 18px 55px rgba(10,54,105,.09);
}

body{background:
 radial-gradient(circle at 10% 12%,rgba(25,126,230,.08),transparent 24rem),
 radial-gradient(circle at 90% 18%,rgba(246,185,40,.06),transparent 22rem),
 #f4f8fd;
 color:var(--wnl-ink)}

.wnLegalShell{max-width:1180px;margin:0 auto;padding:34px 18px 70px}
.wnLegalHero{
  overflow:hidden;position:relative;border-radius:28px;
  background:linear-gradient(130deg,#061b3c 0%,#07499a 52%,#1380e9 100%);
  min-height:280px;padding:38px 42px;color:#fff;
  box-shadow:0 24px 70px rgba(8,72,147,.18);
  border:1px solid rgba(255,255,255,.14)
}
.wnLegalHero:before,.wnLegalHero:after{
 content:"";position:absolute;border-radius:999px;pointer-events:none
}
.wnLegalHero:before{width:320px;height:320px;right:-90px;top:-160px;border:1px solid rgba(255,255,255,.13)}
.wnLegalHero:after{width:230px;height:230px;right:90px;bottom:-175px;background:rgba(255,255,255,.055)}
.wnLegalHeroTop{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:2}
.wnLegalBrand{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:15px;padding:9px 12px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.wnLegalBrand img{height:29px;width:auto;max-width:150px;object-fit:contain;display:block}
.wnLegalStatus{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800}
.wnLegalStatus:before{content:"";width:7px;height:7px;border-radius:50%;background:#4ee2b2;box-shadow:0 0 0 4px rgba(78,226,178,.12)}
.wnLegalEyebrow{position:relative;z-index:2;margin-top:37px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#c4e1ff}
.wnLegalHero h1{position:relative;z-index:2;margin:7px 0 10px;font-size:clamp(38px,5.5vw,68px);line-height:.97;letter-spacing:-.055em;max-width:760px}
.wnLegalHero p{position:relative;z-index:2;margin:0;max-width:760px;color:#d8eaff;font-size:16px;line-height:1.65}
.wnLegalMeta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wnLegalMeta span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:750;color:#e8f4ff}

.wnLegalGrid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.wnLegalSide{position:sticky;top:90px}
.wnLegalCard{background:#fff;border:1px solid var(--wnl-line);border-radius:20px;box-shadow:var(--wnl-shadow)}
.wnLegalSide .wnLegalCard{padding:12px}
.wnLegalSideTitle{padding:11px 12px 8px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#6f8096;font-weight:900}
.wnLegalToc{display:grid;gap:3px}
.wnLegalToc a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border-radius:11px;text-decoration:none;color:#334760;font-size:12.5px;font-weight:760;transition:.16s ease}
.wnLegalToc a:after{content:"›";color:#98a9bd;font-size:18px;line-height:1}
.wnLegalToc a:hover{background:#edf6ff;color:#075fc2}
.wnLegalSideNote{margin-top:13px;padding:14px;border-radius:15px;background:linear-gradient(145deg,#eef6ff,#fbfdff);border:1px solid #d8e9fb}
.wnLegalSideNote b{display:block;font-size:13px;margin-bottom:5px}
.wnLegalSideNote p{margin:0;color:#6b7c91;font-size:11px;line-height:1.55}

.wnLegalContent{overflow:hidden}
.wnLegalIntro{padding:26px 30px;border-bottom:1px solid var(--wnl-line);background:linear-gradient(180deg,#fff,#fbfdff)}
.wnLegalIntro strong{font-size:19px;line-height:1.35}
.wnLegalIntro p{margin:8px 0 0;color:var(--wnl-muted);line-height:1.65;font-size:14px}
.wnLegalSection{padding:28px 30px;border-bottom:1px solid #e8eef5;scroll-margin-top:90px}
.wnLegalSection:last-child{border-bottom:0}
.wnLegalSectionNo{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:10px;background:#eaf4ff;color:#0870db;font-weight:950;font-size:11px;margin-bottom:9px}
.wnLegalSection h2{margin:0 0 11px;font-size:24px;letter-spacing:-.025em;line-height:1.2}
.wnLegalSection p{margin:0 0 12px;color:#4d6078;font-size:14px;line-height:1.72}
.wnLegalSection ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.wnLegalSection li{position:relative;padding-left:25px;color:#4d6078;font-size:14px;line-height:1.62}
.wnLegalSection li:before{content:"✓";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e9f8f3;color:#087f5a;font-size:10px;font-weight:950}
.wnLegalHighlight{padding:16px 17px;margin:15px 0 4px;border-radius:15px;background:#f2f7fd;border:1px solid #dbe8f6;color:#3d536d;font-size:13px;line-height:1.6}
.wnLegalHighlight b{color:#102a4d}
.wnLegalLink{color:#086bd8;font-weight:800;text-decoration:none}
.wnLegalLink:hover{text-decoration:underline}

.wnLegalBottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--wnl-line);box-shadow:var(--wnl-shadow)}
.wnLegalBottom strong{display:block;font-size:15px}
.wnLegalBottom span{display:block;color:#6b7b90;font-size:12px;margin-top:3px}
.wnLegalButtons{display:flex;gap:9px;flex-wrap:wrap}
.wnLegalBtn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border-radius:12px;text-decoration:none;font-weight:850;font-size:12px;border:1px solid #cadbef;color:#0a5ab4;background:#fff}
.wnLegalBtn.primary{background:#0874df;color:#fff;border-color:#0874df;box-shadow:0 9px 24px rgba(8,116,223,.18)}
.wnLegalBtn:hover{transform:translateY(-1px)}

@media(max-width:820px){
 .wnLegalShell{padding:20px 12px 50px}
 .wnLegalHero{padding:28px 23px;min-height:250px;border-radius:22px}
 .wnLegalHeroTop{align-items:flex-start}
 .wnLegalHero h1{font-size:44px}
 .wnLegalGrid{grid-template-columns:1fr}
 .wnLegalSide{position:static}
 .wnLegalToc{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wnLegalContent .wnLegalSection,.wnLegalIntro{padding:23px 21px}
 .wnLegalBottom{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
 .wnLegalBrand img{height:24px;max-width:130px}
 .wnLegalStatus{display:none}
 .wnLegalHero h1{font-size:38px}
 .wnLegalHero p{font-size:14px}
 .wnLegalToc{grid-template-columns:1fr}
 .wnLegalSection h2{font-size:21px}
}
