/* Monon Research — mononresearch.com
   Set from the Monon Research brand guidelines v1.0 (November 2026):
   tokens, type scale, spacing, interface styling. Public Sans only; white
   with Slate text first; Mist for alternate bands; teal for the focus ring
   and link hover and nothing else; no shadows, no gradients, square data. */

@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/public-sans-regular.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/public-sans-semibold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/public-sans-bold.woff2") format("woff2"); }

:root {
  --mr-slate: #2E3740; --mr-white: #FFFFFF; --mr-slate-muted: #5E6873;
  --mr-mist: #F4F6F7; --mr-hairline: #E3E6E9; --mr-gray-400: #8A939C; --mr-gray-300: #BCC4CC;
  --mr-slate-deep: #1F262D; --mr-teal: #0F6B6B; --mr-error: #B42318; --mr-success: #1E6B3A;
  --mr-font: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mr-text-display: 700 48px/56px var(--mr-font);
  --mr-text-h1: 700 36px/44px var(--mr-font);
  --mr-text-h2: 700 28px/36px var(--mr-font);
  --mr-text-h3: 600 22px/30px var(--mr-font);
  --mr-text-lead: 400 18px/28px var(--mr-font);
  --mr-text-body: 400 16px/26px var(--mr-font);
  --mr-text-small: 400 14px/20px var(--mr-font);
  --mr-text-label: 600 13px/16px var(--mr-font);
  --mr-space-2: 8px; --mr-space-3: 12px; --mr-space-4: 16px; --mr-space-5: 24px;
  --mr-space-6: 32px; --mr-space-7: 48px; --mr-space-8: 64px; --mr-space-9: 96px;
  --mr-radius-sm: 4px; --mr-radius-md: 8px;
  --mr-border: 1px solid var(--mr-hairline);
  --mr-border-control: 1px solid var(--mr-gray-400);
  --mr-container: 1120px; --mr-measure: 640px; --mr-tap: 48px; --mr-header-h: 64px;
  --mr-ease: 150ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--mr-text-body); color: var(--mr-slate); background: var(--mr-white); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
a { color: var(--mr-slate); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--mr-ease); }
a:hover { color: var(--mr-teal); }
:where(a, button, input, select, textarea, .consent):focus-visible { outline: 2px solid var(--mr-teal); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; padding: var(--mr-space-2) var(--mr-space-3); background: var(--mr-slate); color: var(--mr-white); }
.skip:focus { left: var(--mr-space-2); top: var(--mr-space-2); z-index: 10; }

/* Layout: 1120 container, 640 text column, 24/32/48 side padding. */
.wrap { max-width: var(--mr-container); margin: 0 auto; padding: 0 var(--mr-space-5); }
@media (min-width: 640px) { .wrap { padding: 0 var(--mr-space-6); } }
@media (min-width: 1024px) { .wrap { padding: 0 var(--mr-space-7); } }
.measure { max-width: var(--mr-measure); }
.section { padding: var(--mr-space-7) 0; }
@media (min-width: 1024px) { .section { padding: var(--mr-space-9) 0; } }
.band { background: var(--mr-mist); }
.lead { font: var(--mr-text-lead); color: var(--mr-slate-muted); }
.small { font: var(--mr-text-small); color: var(--mr-slate-muted); }
.label { font: var(--mr-text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mr-slate-muted); }
h1 { font: var(--mr-text-h1); letter-spacing: -0.01em; }
h2 { font: var(--mr-text-h2); }
h3 { font: var(--mr-text-h3); }
@media (max-width: 639px) { h1 { font-size: 28px; line-height: 36px; } }

/* Header: 64px, hairline, logo 32px left, nav Slate Muted. */
.masthead { height: var(--mr-header-h); display: flex; align-items: center; border-bottom: var(--mr-border); background: var(--mr-white); }
.masthead .wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--mr-space-5); }
.logo { display: block; line-height: 0; }
.logo img { display: block; height: 32px; width: auto; }
.masthead nav { display: flex; gap: var(--mr-space-5); }
.masthead nav a { font: var(--mr-text-small); color: var(--mr-slate-muted); text-decoration: none; white-space: nowrap; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--mr-slate); }
@media (max-width: 639px) {
  .masthead { height: 56px; }
  .logo img { height: 28px; }
  .masthead nav { gap: var(--mr-space-4); }
  .masthead nav a:not(:last-child):not([href^="#join"]) { display: none; }
}

/* Hero: a label, the H1 and a lead, nothing else. */
.hero .label { margin-bottom: var(--mr-space-4); }
.hero h1 { margin-bottom: var(--mr-space-4); }
@media (min-width: 1024px) { .hero h1 { font: var(--mr-text-display); letter-spacing: -0.01em; } }
.section--rule { border-top: var(--mr-border); }

/* Two columns: the section's label and heading on the left, its text on
   the right, as an institution lays out a report. One column under 1024. */
.cols { display: grid; grid-template-columns: 1fr; gap: var(--mr-space-5) var(--mr-space-8); }
@media (min-width: 1024px) { .cols { grid-template-columns: 300px minmax(0, var(--mr-measure)); } }
.cols__head .label { margin-bottom: var(--mr-space-3); }
.cols__note { margin-top: var(--mr-space-4); font: var(--mr-text-small); color: var(--mr-slate-muted); max-width: 18rem; }
.cols__body > p + p { margin-top: var(--mr-space-4); }
.areas div { padding: var(--mr-space-5) 0; border-top: var(--mr-border); }
.areas div:first-child { padding-top: 0; border-top: 0; }
.areas dt { font: var(--mr-text-h3); margin-bottom: var(--mr-space-2); }
.areas dd { color: var(--mr-slate-muted); }
.standards { list-style: none; padding: 0; counter-reset: standard; }
.standards li { position: relative; padding: var(--mr-space-5) 0 var(--mr-space-5) var(--mr-space-8); border-top: var(--mr-border); }
.standards li:first-child { padding-top: 0; border-top: 0; }
.standards li::before { counter-increment: standard; content: counter(standard, decimal-leading-zero); position: absolute; left: 0; top: var(--mr-space-5); font: var(--mr-text-label); letter-spacing: 0.08em; color: var(--mr-slate-muted); font-variant-numeric: tabular-nums; }
.standards li:first-child::before { top: 0; }
.standards h3 { font: 600 16px/26px var(--mr-font); margin-bottom: var(--mr-space-2); }
.standards p { color: var(--mr-slate-muted); }
.faq div { padding: var(--mr-space-5) 0; border-top: var(--mr-border); }
.faq div:first-child { border-top: 0; padding-top: 0; }
.faq dt { font-weight: 600; margin-bottom: var(--mr-space-2); }
.faq dd { color: var(--mr-slate-muted); }

/* Buttons: 48px, Slate, 4px radius, SemiBold 16. Full width on phones. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mr-tap); padding: 0 var(--mr-space-5); border: 1px solid var(--mr-slate); border-radius: var(--mr-radius-sm); background: var(--mr-slate); color: var(--mr-white); font: 600 16px/20px var(--mr-font); text-decoration: none; cursor: pointer; transition: background-color var(--mr-ease), border-color var(--mr-ease); }
.button:hover { background: var(--mr-slate-deep); border-color: var(--mr-slate-deep); color: var(--mr-white); }
@media (max-width: 639px) { .button { width: 100%; } }

/* Form fields: 48px, Gray 400 border, 4px radius; errors in Error red with text. */
.form { max-width: var(--mr-measure); }
.row { display: flex; gap: var(--mr-space-4); }
.row > * { flex: 1; min-width: 0; }
.field { margin-bottom: var(--mr-space-5); }
.field label { display: block; margin-bottom: var(--mr-space-2); font: 600 14px/20px var(--mr-font); }
.field input { width: 100%; min-height: var(--mr-tap); padding: var(--mr-space-3) var(--mr-space-4); border: var(--mr-border-control); border-radius: var(--mr-radius-sm); background: var(--mr-white); color: var(--mr-slate); font: var(--mr-text-body); transition: border-color var(--mr-ease); }
.field input:focus { border-color: var(--mr-slate); }
.field [aria-invalid="true"] { border-color: var(--mr-error); }
.field [aria-invalid="true"] ~ .error { display: block; }
.error { display: none; margin-top: var(--mr-space-2); font: var(--mr-text-small); color: var(--mr-error); }
/* The consent box is a choice row: 1px Gray 400, 8px radius, 16px padding; checked, 2px Slate on Mist. */
.consent { display: flex; align-items: flex-start; gap: var(--mr-space-3); margin: var(--mr-space-6) 0 var(--mr-space-5); padding: var(--mr-space-4); border: var(--mr-border-control); border-radius: var(--mr-radius-md); background: var(--mr-white); font: var(--mr-text-small); color: var(--mr-slate-muted); cursor: pointer; transition: background-color var(--mr-ease), border-color var(--mr-ease); }
.consent:hover { background: var(--mr-mist); }
.consent input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--mr-slate); }
.consent:has(input:checked) { border: 2px solid var(--mr-slate); padding: calc(var(--mr-space-4) - 1px); background: var(--mr-mist); color: var(--mr-slate); }
.consent:has(input[aria-invalid="true"]) { border-color: var(--mr-error); }
.consent:has(input[aria-invalid="true"]) .error { display: block; }
.form[data-state="pending"] .button { background: var(--mr-hairline); border-color: var(--mr-hairline); color: var(--mr-gray-400); cursor: progress; }
.form[data-state="success"] .fields, .form[data-state="success"] .button { display: none; }
.status { margin-top: var(--mr-space-4); min-height: 26px; }
.form[data-state="success"] .status { color: var(--mr-success); font-weight: 600; }
.form[data-state="error"] .status { color: var(--mr-error); }
/* Visually hidden, never display:none: a bot that cannot see it fills it. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The privacy page. */
.doc h1 { margin-bottom: var(--mr-space-2); }
.doc .updated { margin-bottom: var(--mr-space-6); }
.doc h2 { font: var(--mr-text-h3); margin: var(--mr-space-6) 0 var(--mr-space-2); }
.doc p { margin-bottom: var(--mr-space-4); }

/* Footer: Mist, hairline, Small text, 24px logo, then the legal line. */
footer { background: var(--mr-mist); border-top: var(--mr-border); padding: var(--mr-space-7) 0; font: var(--mr-text-small); color: var(--mr-slate-muted); }
.foot { display: grid; grid-template-columns: 1fr; gap: var(--mr-space-6); }
@media (min-width: 640px) { .foot { grid-template-columns: 2fr 1fr 1fr; } }
.foot__brand img { display: block; height: 24px; width: auto; margin-bottom: var(--mr-space-3); }
.foot__col { display: flex; flex-direction: column; gap: var(--mr-space-2); }
.foot__col .label { margin-bottom: var(--mr-space-2); }
footer a { color: var(--mr-slate-muted); }
.foot__legal { margin-top: var(--mr-space-7); padding-top: var(--mr-space-5); border-top: var(--mr-border); }