/* Mockup template v3 — white header, navy nav, blue hero. Built 2026-10-29, offline only. */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;background:#f4f6f9;color:#1d2a3a;line-height:1.5}
a{color:#1a4b8f;text-decoration:none}
a:hover{text-decoration:underline}
/* White header — mockup */
.mk-header{background:#fff;border-bottom:1px solid #e2e8f0}
.mk-head-in{max-width:1240px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.mk-brand img{display:block;width:100%;max-width:360px;height:auto}
.mk-search{display:flex;flex:1;max-width:480px;min-width:260px}
.mk-search input{flex:1;min-width:0;border:1px solid #d9e2ee;border-right:0;border-radius:8px 0 0 8px;padding:11px 14px;font-size:14px;font-family:inherit}
.mk-search button{background:#DC2626;color:#fff;border:0;border-radius:0 8px 8px 0;padding:0 18px;font-size:18px;cursor:pointer}
/* Navy nav — links are <a>, styled as pills; wraps desktop, scrolls phones */
.mk-nav{background:#12366B;border-bottom:3px solid #FF9933;position:sticky;top:0;z-index:40}
.mk-nav-in{max-width:1240px;margin:0 auto;padding:7px 10px;display:flex;gap:4px;flex-wrap:wrap}
.mk-nav a{display:inline-flex;align-items:center;border-radius:8px;color:#dce8f7;padding:8px 12px;font-weight:600;font-size:13px;white-space:nowrap;flex:0 0 auto}
.mk-nav a:hover{background:rgba(255,255,255,.13);text-decoration:none;color:#fff}
.mk-nav a.active{background:#FF9933;color:#fff;text-decoration:none}
@media(max-width:640px){.mk-nav-in{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mk-nav a{padding:5px 9px;font-size:12px}.mk-brand img{max-width:240px}.mk-head-in{flex-direction:column;align-items:stretch}}
/* Layout */
.mk-wrap{max-width:1240px;margin:0 auto;padding:20px 16px 10px}
.mk-crumb{font-size:12.5px;color:#5a6b7d;margin-bottom:10px}
.mk-crumb a{font-weight:700}
.mk-wrap h1{font-size:24px;color:#12366B;font-weight:800;margin:0 0 8px;padding-bottom:8px;border-bottom:3px solid #FF9933;line-height:1.25}
.mk-wrap h2{font-size:19px;color:#12366B;margin:22px 0 10px}
.mk-wrap h3{font-size:16px;color:#12366B;margin:0 0 8px}
.mk-sub{color:#5a6b7d;font-size:14.5px;margin:0 0 14px}
.mk-note{font-size:12.5px;color:#5a6b7d;line-height:1.6;background:#fff;border:1px solid #d9e2ee;border-radius:10px;padding:12px 14px;margin-top:16px}
/* Hero — mockup blue banner */
.mk-hero{background:linear-gradient(120deg,#1a4b8f,#0b2650);color:#fff;border-radius:14px;padding:36px 28px;text-align:center;box-shadow:0 8px 24px rgba(9,35,75,.18)}
.mk-hero h1{color:#fff;border:0;font-size:32px;margin:0 0 8px;padding:0}
.mk-hero p{font-size:16px;margin:0 0 18px;color:#dbeafe}
.mk-hero-search{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:10px;overflow:hidden}
.mk-hero-search input{flex:1;min-width:0;border:0;padding:13px 16px;font-size:14px;font-family:inherit}
.mk-hero-search button{background:#DC2626;color:#fff;border:0;padding:0 20px;font-size:18px;cursor:pointer}
/* Tiles */
.mk-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
.mk-tile{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:16px 8px;text-align:center;color:#12366B;box-shadow:0 2px 8px rgba(9,35,75,.06)}
.mk-tile:hover{border-color:#1a4b8f;text-decoration:none}
.mk-tile-ic{display:flex;width:52px;height:52px;border-radius:50%;background:#eef3fa;color:#12366B;font-weight:800;font-size:13px;align-items:center;justify-content:center;margin:0 auto 8px}
.mk-tile b{font-size:13px}
@media(max-width:900px){.mk-tiles{grid-template-columns:repeat(3,1fr)}.mk-hero h1{font-size:25px}}
@media(max-width:520px){.mk-tiles{grid-template-columns:repeat(2,1fr)}}
/* Columns / sidebar */
.mk-cols{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
@media(max-width:900px){.mk-cols{grid-template-columns:1fr}}
.mk-main-col{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:18px}
.mk-side{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:18px}
.mk-side h3{border-bottom:1px solid #e2e8f0;padding-bottom:8px;margin-top:18px}
.mk-side h3:first-child{margin-top:0}
.mk-side a{display:block;padding:6px 0;color:#1a4b8f}
.mk-side input{width:100%;border:1px solid #d9e2ee;border-radius:8px;padding:10px 12px;font-family:inherit;margin:8px 0}
.mk-side button{background:#DC2626;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer;width:100%}
.mk-warn{background:#fff7ed;border:1px solid #fdba74;border-radius:10px;padding:12px;margin-top:16px}
/* Latest updates */
.mk-upd{display:flex;gap:10px;align-items:center;border-bottom:1px solid #eef2f7;padding:10px 0}
.mk-upd:last-child{border-bottom:0}
.mk-upd a{flex:1;color:#12366B;font-weight:600}
.mk-date{color:#64748b;font-size:12.5px;white-space:nowrap}
.mk-new{display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;white-space:nowrap}
.mk-declared{display:inline-block;background:#138A45;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
/* Pills / cards */
.mk-pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.mk-pills button{border:1px solid #d9e2ee;background:#fff;color:#12366B;border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer}
.mk-pills button.on{background:#1a4b8f;color:#fff;border-color:#1a4b8f}
.mk-count{font-size:13px;color:#5a6b7d}
.mk-none{background:#fff7ed;border:1px solid #fdba74;border-radius:10px;padding:12px}
.mk-list{display:grid;gap:12px}
.mk-card{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:center;box-shadow:0 2px 8px rgba(9,35,75,.06)}
.mk-card h3{margin:0 0 4px;font-size:15px}
.mk-card h3 a{color:#111}
.mk-card p{margin:0;color:#475569;font-size:13px;line-height:1.5}
.mk-circle{flex:0 0 48px;width:48px;height:48px;border-radius:50%;color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
.mk-circle-lg{flex-basis:64px;width:64px;height:64px;font-size:14px}
.mk-card-main{flex:1;min-width:0}
.mk-btn-green,.mk-btn-blue,.mk-btn-red{display:inline-block;color:#fff!important;font-weight:700;font-size:13px;padding:9px 14px;border-radius:8px;white-space:nowrap;text-decoration:none!important}
.mk-btn-green{background:#138A45}.mk-btn-blue{background:#2563eb}.mk-btn-red{background:#DC2626}
@media(max-width:640px){.mk-card{flex-direction:column;align-items:flex-start}.mk-btn-green,.mk-btn-blue,.mk-btn-red{width:100%;text-align:center}}
/* State grid */
.mk-state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.mk-state-grid{grid-template-columns:repeat(2,1fr)}}
.mk-state{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;color:#12366B}
.mk-state-ic{width:40px;height:40px;border-radius:50%;background:#eef3fa;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:0 0 40px}
.mk-state-off{color:#94a3b8}
.mk-state small{display:block;font-size:11px;color:#b45309}
/* Detail / tables / about */
.mk-detail-head{display:flex;gap:18px;background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:20px;align-items:flex-start}
.mk-detail-head h1{border:0;padding:0}
.mk-detail-btns{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.mk-table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:14px}
.mk-table th{background:#12366B;color:#fff;text-align:left;padding:9px 12px}
.mk-table td{border:1px solid #d9e2ee;padding:9px 12px}
.mk-illus{background:linear-gradient(120deg,#eef3fa,#fdf2df);border:1px solid #d9e2ee;border-radius:12px;padding:24px;text-align:center;margin:14px 0}
.mk-illus span{font-size:48px;color:#138A45}
.mk-why{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
@media(max-width:700px){.mk-why{grid-template-columns:1fr}}
.mk-why-card{background:#f8fafc;border:1px solid #d9e2ee;border-radius:12px;padding:14px}
.mk-contact label{display:block;font-weight:600;margin:10px 0}
.mk-contact input,.mk-contact textarea{width:100%;border:1px solid #d9e2ee;border-radius:8px;padding:11px 12px;font-family:inherit;margin-top:6px}
/* Footer */
.mk-footer{background:#0b2650;border-top:4px solid #FF9933;color:#c6d6ea;margin-top:30px}
.mk-foot-in{max-width:1240px;margin:0 auto;padding:28px 16px 18px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:900px){.mk-foot-in{grid-template-columns:1fr}}
.mk-footer h4{color:#fff;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:8px}
.mk-footer a{color:#c6d6ea;display:block;padding:3px 0}
.mk-foot-logo{max-width:270px;height:auto;border-radius:10px}
.mk-foot-disc{color:#ffb020;font-weight:700}
.mk-copy{border-top:1px solid rgba(255,255,255,.15);max-width:1240px;margin:0 auto;padding:14px 16px;color:#93a9c4;font-size:12.5px}
.mk-copy span{display:block;margin-top:5px;color:#ffb020;font-weight:600}

/* v5 compat — classes carried over from converted v2 pages, styled to match the mockup template. */
.mk-wrap table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:14px}
.mk-wrap th{background:#12366B;color:#fff;text-align:left;padding:9px 12px}
.mk-wrap td{border:1px solid #d9e2ee;padding:9px 12px}
.mk-wrap input,.mk-wrap select,.mk-wrap textarea{border:1px solid #d9e2ee;border-radius:8px;padding:10px 12px;font-family:inherit}
.mk-wrap form button[type=submit],.mk-wrap p button{background:#DC2626;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer}
.mk-wrap .pill{display:inline-block;background:#eef3fa;border:1px solid #d9e2ee;color:#12366B;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;margin-right:6px}
.mk-wrap .pill.b{background:#12366B;border-color:#12366B;color:#fff}
.mk-wrap .pill.g{background:#e6f4ea;border-color:#b7dfc2;color:#137333}
.mk-wrap .badge{display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;margin-left:6px}
.mk-wrap .faq-item{background:#fff;border:1px solid #d9e2ee;border-radius:12px;padding:14px 16px;margin:10px 0}
.mk-wrap .faq-item h4{margin:0 0 6px;color:#12366B}
.mk-wrap .faq-sec{margin:14px 0}
.mk-wrap .detail-top{color:#5a6b7d;font-size:13.5px}
.mk-wrap .tables{display:grid;gap:14px}
.mk-wrap .section-head{margin:18px 0 10px}
