/* RoboCairn static site. No third-party resources. System font stacks only.
   Palette: ui-ux-pro-max "Industrial slate + stock green". */
:root {
  --bg: #F8FAFC;
  --fg: #0F172A;
  --card: #FFFFFF;
  --muted: #F2F3F4;
  --muted-fg: #475569;
  --border: #E6E8EA;
  --slate: #334155;
  --marker: #047857;
  --bad: #B91C1C;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-wrap: break-word; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

a { color: var(--fg); text-underline-offset: 3px; }
a:focus-visible, .skip:focus, summary:focus-visible, .sample:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--card); color: var(--fg); padding: 12px 16px; }
.skip:focus { left: 8px; top: 8px; z-index: 2; }

.top { border-bottom: 1px solid var(--border); }
.top-row { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 8px 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 21px; font-weight: 600; min-height: 44px; }
.brand svg { width: 30px; height: 30px; }
.st { fill: none; stroke: var(--slate); stroke-width: 1.8; }
.st.mk { stroke: var(--marker); }
nav { display: flex; gap: 0 22px; flex-wrap: wrap; }
nav a { font-size: 16px; text-decoration: none; color: var(--muted-fg); display: inline-flex; align-items: center; min-height: 44px; }
nav a:hover { color: var(--fg); }

section { padding: 56px 0; border-bottom: 1px solid var(--border); }
section.alt { background: var(--muted); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 34px; line-height: 1.18; margin: 0 0 18px; max-width: 20ch; }
h2 { font-size: 28px; line-height: 1.25; margin: 0 0 12px; }
h3 { font-family: var(--sans); font-size: 18px; line-height: 1.35; margin: 0 0 6px; }
p { margin: 0 0 14px; max-width: 64ch; }
.sub { color: var(--muted-fg); margin-bottom: 26px; }
.eyebrow { font-family: var(--mono); font-size: 16px; color: var(--muted-fg); margin: 0 0 14px; }
.lead { font-size: 19px; }

.hero { padding: 64px 0 52px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; max-width: none; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border: 1.5px solid var(--slate); border-radius: 24px; text-decoration: none; background: var(--card); }
.btn.primary { background: var(--slate); color: #FFFFFF; }
.btn:hover { border-color: var(--marker); }
.status { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 16px; color: var(--muted-fg); margin: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--marker); flex: none; }

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.grid li { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 8px; }
.grid p { margin-bottom: 10px; }
.n { font-family: var(--mono); font-size: 16px; color: var(--muted-fg); display: block; margin-bottom: 6px; }

.two { display: grid; gap: 32px; }
.list { margin: 0 0 16px; padding-left: 20px; }
.list li { margin-bottom: 10px; max-width: 60ch; }
.list.wide li { max-width: 70ch; }
.list li::marker { color: var(--muted-fg); }

.sample { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; overflow-x: auto; }
.sample figcaption { font-family: var(--mono); font-size: 16px; color: var(--muted-fg); margin-bottom: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--border); }
thead th { border-top: 0; color: var(--muted-fg); font-weight: 600; }
td.ok { color: var(--marker); font-weight: 600; white-space: nowrap; }
td.bad { color: var(--bad); font-weight: 600; white-space: nowrap; }
td.unk { color: var(--slate); font-weight: 600; white-space: nowrap; }

details { border-top: 1px solid var(--border); max-width: 76ch; }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary { cursor: pointer; padding: 14px 0; font-weight: 600; min-height: 48px; }
details p { margin: 0 0 16px; }

.mail { font-family: var(--mono); font-size: 19px; display: inline-flex; align-items: center; min-height: 44px; }
footer { padding: 28px 0 40px; color: var(--muted-fg); font-size: 16px; }
footer a { color: var(--muted-fg); display: inline-block; padding: 12px 0; }
footer p { margin: 0; max-width: none; }

@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  section { padding: 76px 0; }
  .hero { padding: 88px 0 72px; }
  .grid.four { grid-template-columns: repeat(4, 1fr); }
  .grid.five { grid-template-columns: repeat(3, 1fr); }
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 44px; }
}
@media (min-width: 1024px) {
  .grid.five { grid-template-columns: repeat(5, 1fr); }
}