*{box-sizing:border-box}
body{margin:0;font:15px/1.6 Arial,sans-serif;background:#f4f6f8;color:#17212b}
.top{background:#123c32;color:#fff;padding:15px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}
.brand{font-weight:bold;font-size:20px;color:#fff;text-decoration:none}
.top nav a{color:#fff;text-decoration:none;margin-left:16px}
.top nav a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:28px auto;padding:0 18px;min-height:75vh}
.hero,.panel,.card{background:#fff;border-radius:10px;padding:22px;margin-bottom:18px;box-shadow:0 2px 9px #0000000b}
.hero{background:linear-gradient(120deg,#123c32,#26735b);color:white;padding:34px 26px}
.hero h1{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card h3{margin-top:0}
.btn,button{display:inline-block;background:#176b52;color:white;border:0;border-radius:6px;padding:10px 16px;text-decoration:none;cursor:pointer;font:inherit}
.btn:hover,button:hover{filter:brightness(.94)}
.btn.secondary{background:#53636e}
input,select,textarea{width:100%;padding:10px;border:1px solid #ccd3d8;border-radius:5px;margin:5px 0 14px;font:inherit}
input[type=checkbox]{width:auto}
label{font-weight:bold}
.notice{background:#e6f4ed;border-left:4px solid #27865e;padding:12px;margin-bottom:16px}
.error{background:#fff0ef;border-left:4px solid #c0392b;padding:12px}
.muted{color:#64727c}
.video{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.table{width:100%;border-collapse:collapse;background:#fff}
.table td,.table th{padding:10px;border-bottom:1px solid #e4e8eb;text-align:left}
.pill{background:#e4f2ec;color:#176b52;border-radius:20px;padding:3px 9px;font-size:12px}
footer{text-align:center;padding:25px;color:#718078}
@media(max-width:600px){.top{display:block}.top nav{margin-top:10px}.top nav a{display:inline-block;margin:0 12px 6px 0}.wrap{margin:16px auto;padding:0 12px}.hero,.panel,.card{padding:17px}.table{display:block;overflow-x:auto;white-space:nowrap}}