:root {
       --bg: #ffffff;
       /* primary */
       --text: #111827;
       --muted: #6b7280;
       --line: #e5e7eb;
       --card: #ffffff;
       --shadow: 0 12px 30px rgba(17, 24, 39, .08);
       --yellow: #ffd400;
       /* secondary */
       --yellow-2: #ffef99;
       --yellow-3: #fff7cc;
       --danger: #b00020;
       --ok: #0a7a2a;
       --radius: 18px;
   }

   * {
       box-sizing: border-box;
   }

   html,
   body {
       height: 100%;
   }

   body {
       margin: 0;
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
       background: linear-gradient(180deg, var(--yellow-3), var(--bg) 45%);
       color: var(--text);
   }

   a {
       color: inherit;
       text-decoration: none;
   }

   a:hover {
       text-decoration: underline;
   }

   .wrap {
       max-width: 1100px;
       margin: 0 auto;
       padding: 22px 16px 60px;
   }

   /* Header */
   .hero {
       position: relative;
       overflow: hidden;
       background: var(--card);
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 22px 18px;
   }

   .hero::before {
       content: "";
       position: absolute;
       inset: -80px -120px auto auto;
       width: 260px;
       height: 260px;
       background: radial-gradient(circle at 30% 30%, var(--yellow), transparent 60%);
       filter: blur(2px);
       opacity: .75;
       border-radius: 999px;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }

   .logo {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       background: linear-gradient(135deg, var(--yellow), #ffb703);
       border: 1px solid rgba(17, 24, 39, .12);
       box-shadow: 0 10px 20px rgba(255, 212, 0, .25);
       display: grid;
       place-items: center;
       font-weight: 900;
       letter-spacing: .5px;
   }

   .brand h1 {
       margin: 0;
       font-size: clamp(18px, 2.2vw, 26px);
       line-height: 1.2;
   }

   .sub {
       margin: 6px 0 0;
       color: var(--muted);
       font-size: 14px;
       max-width: 70ch;
   }

   .meta {
       margin-top: 14px;
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       align-items: center;
   }

   .pill {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 12px;
       border: 1px solid var(--line);
       border-radius: 999px;
       background: #fff;
       font-size: 13px;
       color: #111827;
   }

   .dot {
       width: 10px;
       height: 10px;
       border-radius: 999px;
       background: var(--yellow);
       border: 1px solid rgba(17, 24, 39, .15);
   }

   /* Layout */
   .grid {
       margin-top: 18px;
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
   }

   @media (min-width: 960px) {
       .grid {
           grid-template-columns: 320px 1fr;
           align-items: start;
       }
   }

   /* Side nav */
   .side {
       position: sticky;
       top: 16px;
       background: var(--card);
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 14px;
   }

   .side h2 {
       margin: 0 0 10px;
       font-size: 14px;
       color: var(--muted);
       font-weight: 700;
       letter-spacing: .3px;
       text-transform: uppercase;
   }

   .nav {
       display: grid;
       gap: 8px;
   }

   .nav a {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 14px;
       border: 1px solid var(--line);
       background: #fff;
       font-size: 14px;
   }

   .nav a:hover {
       border-color: rgba(255, 212, 0, .9);
       box-shadow: 0 8px 18px rgba(255, 212, 0, .18);
       transform: translateY(-1px);
       transition: .18s ease;
       text-decoration: none;
   }

   .nav small {
       color: var(--muted);
       font-weight: 600;
   }

   /* Main content */
   .content {
       background: var(--card);
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 18px;
   }

   .notice {
       display: flex;
       gap: 12px;
       align-items: flex-start;
       padding: 12px 14px;
       border-radius: 16px;
       border: 1px solid rgba(255, 212, 0, .55);
       background: linear-gradient(180deg, #fff, var(--yellow-3));
       margin-bottom: 16px;
   }

   .notice .badge {
       flex: 0 0 auto;
       width: 40px;
       height: 40px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: var(--yellow);
       border: 1px solid rgba(17, 24, 39, .12);
       font-size: 18px;
   }

   .notice p {
       margin: 0;
       color: #111827;
       font-size: 14px;
       line-height: 1.5;
   }

   .notice p strong {
       font-weight: 800;
   }

   section {
       padding-top: 10px;
       margin-top: 10px;
       border-top: 1px solid var(--line);
   }

   section:first-of-type {
       border-top: 0;
   }

   .sec-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       flex-wrap: wrap;
       margin-bottom: 8px;
   }

   h3 {
       margin: 0;
       font-size: 18px;
       letter-spacing: .2px;
   }

   .tag {
       font-size: 12px;
       font-weight: 800;
       padding: 6px 10px;
       border-radius: 999px;
       border: 1px solid var(--line);
       background: #fff;
       color: #111827;
   }

   .para {
       margin: 10px 0;
       color: #111827;
       line-height: 1.7;
       font-size: 14.5px;
   }

   .muted {
       color: var(--muted);
       font-size: 13.5px;
       line-height: 1.6;
   }

   .cards {
       display: grid;
       grid-template-columns: 1fr;
       gap: 12px;
       margin: 12px 0 4px;
   }

   @media(min-width: 700px) {
       .cards {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   .cardx {
       border: 1px solid var(--line);
       border-radius: 16px;
       background: #fff;
       padding: 12px 12px 10px;
       box-shadow: 0 10px 22px rgba(17, 24, 39, .06);
   }

   .cardx .top {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 6px;
   }

   .icon {
       width: 38px;
       height: 38px;
       border-radius: 14px;
       background: linear-gradient(180deg, #fff, var(--yellow-3));
       border: 1px solid rgba(255, 212, 0, .55);
       display: grid;
       place-items: center;
       font-size: 18px;
   }

   .cardx h4 {
       margin: 0;
       font-size: 15px;
       letter-spacing: .2px;
   }

   .cardx p {
       margin: 0;
       color: var(--muted);
       line-height: 1.6;
       font-size: 13.5px;
   }

   ul,
   ol {
       margin: 10px 0 0;
       padding-left: 18px;
       color: #111827;
       line-height: 1.7;
       font-size: 14.5px;
   }

   li {
       margin: 6px 0;
   }

   .callout {
       margin-top: 12px;
       border-radius: 16px;
       padding: 12px 14px;
       border: 1px solid rgba(17, 24, 39, .10);
       background: #fff;
   }

   .callout strong {
       font-weight: 900;
   }

   .callout.warning {
       border-color: rgba(176, 0, 32, .25);
       background: linear-gradient(180deg, #fff, #fff5f5);
   }

   .footer {
       margin-top: 16px;
       padding-top: 14px;
       border-top: 1px solid var(--line);
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       align-items: center;
       justify-content: space-between;
       color: var(--muted);
       font-size: 12.5px;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 12px;
       border-radius: 14px;
       border: 1px solid rgba(17, 24, 39, .12);
       background: #111827;
       color: #fff;
       cursor: pointer;
       font-weight: 800;
       font-size: 13px;
   }

   .btn:hover {
       opacity: .92;
   }

   .btn.secondary {
       background: #fff;
       color: #111827;
       border-color: rgba(255, 212, 0, .9);
   }

   @media print {

       .side,
       .btn {
           display: none !important;
       }

       body {
           background: #fff;
       }

       .hero,
       .content {
           box-shadow: none;
       }
   }





   .verified-row {
       display: flex;
       align-items: flex-start;
       gap: 8px;
   }

   /* Meta-style: ndogo sana */
   .verified-badge {
       width: 18px;
       height: 18px;
       flex-shrink: 0;
       margin-top: 2px;
       /* ili ilingane na text */
       filter: drop-shadow(0 2px 6px rgba(29, 155, 240, .35));
   }

   /* screens ndogo sana */
   @media (max-width: 360px) {
       .verified-badge {
           width: 16px;
           height: 16px;
       }
   }

   /* desktop kubwa kidogo tu */
   @media (min-width: 1024px) {
       .verified-badge {
           width: 19px;
           height: 19px;
       }
   }

   .verified-badge svg {
       width: 100%;
       height: 100%;
       display: block;
   }