/* ZeroDaOne — zerodaone.com
   Single stylesheet. No JavaScript anywhere on this site. */

:root {
  --bg: #0a0a0b;
  --bg-raised: #101012;
  --fg: #f4f4f5;
  --muted: #8b8b93;
  --border: #1f1f23;
  --border-strong: #2e2e34;
  --accent: #84cc16;
  /* The rail: header, footer, section rules, cards, tables and data blocks
     span this. Prose does NOT — it is capped at --measure so line length stays
     readable however wide the viewport gets. */
  --wrap: 70rem;
  --gutter: 1.5rem;
  --measure: 68ch;        /* body copy and lists */
  --measure-head: 34ch;   /* headings, so they break rather than run */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbfa;
    --bg-raised: #ffffff;
    --fg: #101012;
    --muted: #57575f;
    --border: #e2e2e0;
    --border-strong: #cfcfcc;
    --accent: #4d7c0f;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- accessibility ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 0.5rem 1rem;
  z-index: 10;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.skip:focus { left: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- shell ---------- */

.shell {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Wider viewports get more air and a slightly larger base size, so the page
   reads as composed rather than as a column stranded in the middle. */
@media (min-width: 64rem) {
  :root { --gutter: 2.75rem; }
  body { font-size: 17px; }
  main { padding-top: 4.5rem; }
}

/* ---------- header ---------- */

header.site {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}

header.site .shell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.wordmark {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

nav.site ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.875rem;
}

nav.site a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav.site a:hover { color: var(--fg); border-bottom-color: var(--border-strong); }
nav.site a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- main ---------- */

main { flex: 1; padding: 3.5rem 0 4.5rem; }

.lede,
h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.22;
  margin-bottom: 1.5rem;
  max-width: var(--measure-head);
}

h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 3rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

h2:first-of-type { margin-top: 2.5rem; }

h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

p { color: var(--muted); margin-bottom: 1.125rem; max-width: var(--measure); }
p.tight { margin-bottom: 0.5rem; }
p strong, li strong { color: var(--fg); font-weight: 600; }

main a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.15s ease;
}

main a:hover { border-bottom-color: var(--accent); }

ul.list, ol.list {
  color: var(--muted);
  margin: 0 0 1.25rem 1.125rem;
  max-width: var(--measure);
}

ul.list li, ol.list li { margin-bottom: 0.5rem; padding-left: 0.25rem; }

ul.plain { list-style: none; margin-left: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ---------- content column + sticky section nav ----------
   Two columns on wide viewports: prose left (its own elements stay capped at
   --measure, while tables and data lists use the full column), section nav
   pinned right so the space beside the text is occupied rather than empty.
   Below 64rem the nav is dropped and the prose takes the full width — a
   duplicate list of links is noise on a phone. */

.with-toc { display: grid; }

.toc { display: none; }

@media (min-width: 64rem) {
  .with-toc {
    grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: 3.5rem;
  }

  .with-toc > .prose {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .toc {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 2.75rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    border-left: 1px solid var(--border);
    padding-left: 1.125rem;
  }
}

.toc-title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.875rem;
}

.toc ol {
  list-style: none;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.toc li { margin-bottom: 0.5rem; }

.toc a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.15s ease;
}

.toc a:hover { color: var(--fg); border-bottom: 0; }

/* ---------- eyebrow + status ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.3125rem 0.6875rem 0.3125rem 0.5625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.status.dim::before { background: var(--muted); }

/* ---------- product cards ---------- */

.cards {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
}

@media (min-width: 40rem) {
  .cards.two { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .cards { gap: 1.25rem; }
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.375rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.card h3 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card .kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.875rem;
}

.card p { font-size: 0.9375rem; margin-bottom: 1rem; }
.card .card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* ---------- meta rows (legal / factual data) ---------- */

dl.meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--border);
  /* Short values, so a full-rail-width list would read as mostly empty. */
  max-width: 52rem;
}

dl.meta > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

dl.meta dt { color: var(--muted); flex: 0 0 12rem; }
dl.meta dd { color: var(--fg); margin: 0; }

@media (max-width: 34rem) {
  dl.meta dt { flex-basis: 100%; }
}

/* ---------- tables ---------- */

/* Tables earn more width than prose but less than the full rail. */
.table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; max-width: 58rem; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  min-width: 30rem;
}

th, td {
  text-align: left;
  padding: 0.625rem 1rem 0.625rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--fg);
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}

td { color: var(--muted); }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--border);
  padding: 2rem 0 2.5rem;
  font-size: 0.8125rem;
}

footer.site nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
}

footer.site a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

footer.site a:hover { color: var(--fg); border-bottom-color: var(--border-strong); }

.legal {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.7;
}

.legal .entity { color: var(--fg); }

@media (max-width: 34rem) {
  main { padding: 2.5rem 0 3.5rem; }
  .shell { padding: 0 1.125rem; }
  h2 { margin-top: 2.25rem; }
}