@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root { --ink: #173f37; --muted: #71817d; --green: #0e6b5a; --cream: #f7f8f6; --line: #e2e9e5; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 14px 'DM Sans', sans-serif; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 24px 'Space Grotesk', sans-serif; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #f2c879; }
.badge, .status { border-radius: 99px; background: #e7f3ec; color: var(--green); padding: 7px 11px; font-size: 12px; font-weight: 700; }
.intro { margin: 80px 0 28px; } .eyebrow { color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; } h1, h2 { font-family: 'Space Grotesk', sans-serif; margin: 0; } h1 { font-size: clamp(32px, 6vw, 54px); letter-spacing: -1.5px; } .intro p:last-child, .panel-header p { color: var(--muted); }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); } .panel-header p { margin: 5px 0 0; font-size: 12px; }
.button { border-radius: 8px; background: var(--green); color: #fff; padding: 10px 14px; text-decoration: none; font-weight: 700; font-size: 12px; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; } td { color: #38534c; }
@media (max-width: 600px) { .shell { width: min(100% - 28px, 1120px); } .intro { margin-top: 54px; } .panel-header, th, td { padding-left: 16px; padding-right: 16px; } }