/* academy.css: Academy pages on the meter.me brand tokens (assets/brand.css, a copy of www's). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--mm-font); color: var(--mm-text-darkest); background: var(--mm-bone); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--mm-accent); }
a:hover { color: var(--mm-accent-dark); }
.wrap { padding: 0 clamp(16px, 5vw, 96px); }
header.site { background: var(--mm-white); border-bottom: 1px solid var(--mm-gray-pale); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
header.site img { height: 28px; display: block; }
header.site .tag { color: var(--mm-gray-med); font-size: 15px; }
.hero { background: var(--mm-dark); color: var(--mm-white); padding: clamp(40px, 8vw, 96px) 0; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.1; margin: 0 0 12px; font-weight: 700; }
.hero p { font-size: clamp(17px, 2.2vw, 21px); margin: 0; color: var(--mm-pale-blue); }
main { padding: clamp(32px, 5vw, 64px) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--mm-white); border: 1px solid var(--mm-gray-pale); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-height: 44px; }
a.card:hover { border-color: var(--mm-blue); box-shadow: 0 2px 10px rgba(47, 51, 78, 0.08); }
.card h2 { font-size: 20px; margin: 0; color: var(--mm-dark); }
.card p { margin: 0; color: var(--mm-text-dark); }
.card .go { margin-top: auto; color: var(--mm-accent); font-weight: 700; }
.panel { background: var(--mm-white); border: 1px solid var(--mm-gray-pale); border-radius: 10px; padding: 24px; }
.panel h1 { margin: 0 0 8px; color: var(--mm-dark); font-size: clamp(26px, 4vw, 36px); }
footer.site { padding: 32px 0 48px; color: var(--mm-gray-med); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
