/* Take Counter site — Swiss sheet on studio black. Shared by all pages. */
:root {
  --paper: #F2EFE6;
  --ink: #111111;
  --red: #E5342A;
  --night: #0B0B0A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: "Helvetica Neue", "Neue Haas Grotesk Text Pro", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: clamp(16px, 4vw, 56px) clamp(12px, 3vw, 24px);
}
.sheet {
  max-width: 780px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(28px, 6vw, 64px);
}
.rule { height: 6px; background: var(--ink); border: 0; }
.rule--thin { height: 2px; }

header.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.masthead .brand { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.masthead .brand a { text-decoration: none; }
.masthead .platform { font-size: 14px; color: rgba(17,17,17,0.6); }

.counter { margin: clamp(40px, 9vw, 96px) 0 clamp(28px, 6vw, 56px); }
.counter .label {
  font-size: clamp(18px, 3.2vw, 26px);
  transition: color 0.2s ease;
}
.counter .label.recording { color: var(--red); }
.counter .number {
  font-size: clamp(110px, 26vw, 230px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.86;
  margin-left: -0.04em;
  transition: color 0.2s ease;
}
.counter .number.recording { color: var(--red); }

h1 {
  font-size: clamp(26px, 4.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: clamp(28px, 6vw, 56px) 0 16px;
  max-width: 16em;
}
p, li { font-size: 17px; line-height: 1.55; max-width: 36em; }
p + p { margin-top: 12px; }

section { margin: clamp(32px, 6vw, 56px) 0; }
section > .rule { margin-bottom: 20px; }
h2 { font-size: 15px; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 20px; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 8px; }

.daws { list-style: none; }
.daws li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
  max-width: none;
}
.daws .name { font-weight: 700; }
.daws .how { color: rgba(17,17,17,0.6); text-align: right; }

.features { list-style: none; }
.features li { padding: 6px 0; padding-left: 26px; position: relative; max-width: 38em; }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 12px;
  background: var(--ink);
}
.features li.rec::before { background: var(--red); border-radius: 50%; }

.buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.button {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 6px;
  border: 2px solid var(--ink);
}
.button--primary { background: var(--ink); color: var(--paper); }
.button--primary:hover { background: var(--paper); color: var(--ink); }
.button--secondary { background: transparent; color: var(--ink); }
.button--secondary:hover { background: var(--ink); color: var(--paper); }
.buy .note { font-size: 13px; color: rgba(17,17,17,0.6); flex-basis: 100%; }

a { color: inherit; }

/* Documentation typography */
code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(17,17,17,0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
pre {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 20px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 14px 0;
  max-width: 100%;
}
pre code { background: none; padding: 0; font-size: 14px; line-height: 1.5; }

.doc-list { list-style: none; }
.doc-list li { padding: 6px 0 6px 26px; position: relative; max-width: 38em; }
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 12px;
  background: var(--ink);
}

table.fields { border-collapse: collapse; width: 100%; margin: 14px 0; }
table.fields th, table.fields td {
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.45;
  padding: 8px 16px 8px 0;
  border-bottom: 2px solid var(--ink);
}
table.fields th { font-weight: 700; }
table.fields td:first-child { white-space: nowrap; font-weight: 700; }

/* Legal page placeholders — impossible to publish by accident without noticing. */
.placeholder {
  border: 2px dashed rgba(17,17,17,0.5);
  padding: 2px 8px;
  color: rgba(17,17,17,0.55);
  font-style: italic;
}

.stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 4px 0 18px; }
.stat .n { font-size: clamp(34px, 6vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat .c { font-size: 13px; color: rgba(17,17,17,0.6); margin-top: 6px; max-width: 11em; }

.signature { font-weight: 700; margin-top: 18px; }

footer { margin-top: clamp(40px, 8vw, 72px); }
footer .rule { margin-bottom: 14px; }
footer p { font-size: 12px; color: rgba(17,17,17,0.55); max-width: none; }
footer nav { display: flex; gap: 18px; margin-bottom: 10px; }
footer nav a { font-size: 13px; color: rgba(17,17,17,0.7); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
footer nav a:hover { color: var(--ink); }