/* leadgen — the Studio system (the studio-design-system skill's tokens.css) with the elements docs/DESIGN.md adds.
   Every value is the artboards' in docs/design/. Every colour is a token; dark mode is real. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Doto"; src: url("/fonts/doto-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #0B0C0F; --muted: #6B7078; --line: #E6E8EC; --chip: #F1F2F4; --dot: #C9CCD2;
  --accent: #F26B21; --accent-ink: #C24F0F; --accent-soft: #FFF1E8; --no: #C43B3B;
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Doto", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B0C0F; --surface: #14161B; --ink: #F2F3F5; --muted: #9AA0AA; --line: #23262D; --chip: #1B1E25; --dot: #3A3E47;
    --accent: #F58A4B; --accent-ink: #FFA36B; --accent-soft: #2A1A10; --no: #E36A6A; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: var(--sans); -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
button, input, textarea { font-family: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Page column: phone values; on a laptop the same in a centred column (grammar, "Page column"). */
main { max-width: 600px; margin: 0 auto; padding: 22px 20px 64px; display: flex; flex-direction: column; gap: 32px; }
main.loose { gap: 36px; }

nav.top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
nav.top .mark { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
nav.top .links { display: flex; gap: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
nav.top .links .on { color: var(--ink); font-weight: 700; }

h1 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.direction { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -0.015em; color: var(--muted); }
.direction b { color: var(--ink); font-weight: 600; }
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; }
.g6 { gap: 6px; } .g10 { gap: 10px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g18 { gap: 18px; }
.mt8 { margin-top: 8px; }
.small { font-size: 13px; color: var(--muted); }
.center { align-self: center; text-align: center; }
.num { font-variant-numeric: tabular-nums; }
/* Counts with a thousands comma keep proportional figures: Schibsted Grotesk's tabular comma is a digit wide. */

/* Fields */
.field-label { font-size: 12px; color: var(--muted); }
input.field { height: 48px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; }
textarea.field { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; line-height: 1.5; resize: vertical; }
.error { margin: 0; font-size: 14px; line-height: 1.45; color: var(--no); }

/* The one pill; secondary actions are chips or underlined text. */
.pill { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; }
.pill[disabled] { opacity: .5; cursor: default; }
.under { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.actions .pill { flex: 1; }
.chipbtn { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; }
.chipbtn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Product tile: a rounded square with the product's initial (a person stays round). */
.tile { display: flex; align-items: center; justify-content: center; background: var(--chip); color: var(--muted); font-weight: 700; flex: 0 0 auto; }
.tile.big { width: 64px; height: 64px; border-radius: 16px; font-size: 24px; }
.tile.compact { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.tile.list { width: 48px; height: 48px; border-radius: 12px; font-size: 19px; }
.head { display: flex; gap: 14px; align-items: flex-start; }
.head.compact { align-items: center; }
.head .name { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.head.compact .name { font-size: 20px; line-height: 1.1; }
.head .line { font-size: 15px; line-height: 1.35; }
.head .meta { font-size: 13px; font-weight: 500; color: var(--muted); }
.head .meta a { text-decoration: underline; text-underline-offset: 3px; }
.head .text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.head.compact .text { gap: 1px; }

/* A bordered note (the tag read's, the risk note). */
.note { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.note b { display: block; font-weight: 700; }
.note span { color: var(--muted); }

/* The one question */
.question { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.question .lead { font-size: 15px; color: var(--muted); }
.question textarea { border: 0; padding: 0; margin: 0; background: transparent; font-size: 16px; line-height: 1.45; resize: none; outline: none; width: 100%; field-sizing: content; min-height: 3lh; }
.question.role textarea { min-height: 2lh; }
.question:focus-within { border-color: var(--muted); }

/* Level rows (before sorting) */
.rows { display: flex; flex-direction: column; }
.level { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.level .rung { flex: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 24px; }
.level .body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.level .title { display: flex; align-items: center; gap: 2px; }
.level .title .n { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.level .sentence { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* The ? explainer: an 18px ring in a 44px hit area; open, it fills with ink and pushes the rows down. */
.qmark { width: 44px; height: 44px; margin: -12px -12px -12px -6px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.qmark span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.qmark[aria-expanded="true"] span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.explain { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--chip); }
.explain[hidden] { display: none; }
.explain .what { font-size: 14px; line-height: 1.45; }
.explain .against { font-size: 13px; color: var(--muted); }

/* Coverage line */
.cover { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cover .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cover .ch { font-size: 15px; font-weight: 600; }
.cover .posts { font-size: 15px; font-weight: 500; }
.cover .posts.s { font-size: 13px; }
.cover .how { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cover.soon { flex-direction: row; align-items: baseline; justify-content: space-between; }
.cover.soon .ch, .cover.soon .how { color: var(--muted); }

/* Live block ("Right now"): one per page at most. */
.live { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); }
.live.tight { gap: 8px; }
.live .lab { display: flex; align-items: center; gap: 8px; }
.live .lab i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.live .lab span { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.live .big { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.live .say { font-size: 15px; line-height: 1.45; }
.live .say b { font-weight: 700; }
.live .foot { font-size: 12px; color: var(--muted); }
.bar { height: 4px; border-radius: 2px; background: var(--line); display: flex; }
.bar span { height: 4px; border-radius: 2px; background: var(--accent); transition: width .4s; }

/* Count rows (sorting, the project's ladder) */
.count { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.count .rung { flex: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.count .n { flex: 1; font-size: 15px; font-weight: 600; }
.count .k { font-size: 15px; font-weight: 500; }
.count.off .n, .count.off .k { color: var(--muted); }

/* Level tiles (after sorting, on First batch) */
.ltile { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tick { flex: 0 0 44px; width: 44px; height: 44px; margin: -10px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tick span { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--dot); display: flex; align-items: center; justify-content: center; color: var(--bg); }
.tick span svg { display: none; }
.tick[aria-pressed="true"] span { background: var(--ink); border-color: var(--ink); }
.tick[aria-pressed="true"] span svg { display: block; }
.ltile .body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ltile .first { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ltile .first > span { display: flex; align-items: center; gap: 2px; }
.ltile .nm { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.ltile .k { font-size: 17px; font-weight: 700; }
.ltile .post { font-size: 14px; line-height: 1.45; }
.ltile .who { font-size: 13px; color: var(--muted); }
.ltile .add { display: none; }
.ltile.off .k, .ltile.off .post { color: var(--muted); }
.ltile.off .add { display: inline; }
.makers { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.makers .what { font-size: 15px; font-weight: 600; }
.makers .why { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* Reach summary */
.reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reach div { display: flex; flex-direction: column; }
.reach b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.reach span { font-size: 13px; color: var(--muted); }

/* Batch rows with the reading cursor */
.feed { position: relative; padding-left: 22px; display: flex; flex-direction: column; }
.feed::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 0; width: 1px; background: var(--line); }
.feed article { position: relative; display: flex; flex-direction: column; gap: 6px; }
.feed article + article { padding-top: 26px; margin-top: 28px; border-top: 1px solid var(--line); }
.feed article::before { content: ""; position: absolute; left: -20px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); transition: background .12s; }
.feed article + article::before { top: 32px; }
.feed article[data-current]::before { background: var(--accent); }
.feed .stamp { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.feed .t { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.feed .ex { font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.feed .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 2px; }
.feed .h { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chans { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.chan { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Rows with handles */
.hrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; text-align: left; cursor: pointer; font-size: inherit; }
.hrow .text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.hrow .k { font-size: 12px; color: var(--muted); }
.hrow .v { font-size: 15px; font-weight: 500; }
.hrow .hint { font-size: 12px; color: var(--muted); }
.hrow svg { color: var(--muted); flex: 0 0 16px; }
.plist { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.plist .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.plist .nm { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.plist .st { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.plist .st i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plist .mt { font-size: 13px; color: var(--muted); }
.plist svg { color: var(--muted); flex: 0 0 16px; }
form.inline { display: contents; }

/* 5d: §17's pages, the footer that links them from every page, and the admin page's tables. */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.foot-links a { text-decoration: underline; text-underline-offset: 3px; }
.doc section { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.doc p { margin: 0; font-size: 15px; line-height: 1.55; }
.doc p b { font-weight: 600; }
/* 7c: a list in a doc or on the home page reads as rows with a hairline, no bullets. */
.doc ul.lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doc ul.lines li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.doc ul.lines li:first-child { padding-top: 4px; }
/* The comparison stays in the reading column, including on a phone. */
/* Match the workspace's default Blue-violet tokens (public/workspace.css). Opt-in public pages only. */
:root[data-theme="violet"] {
  color-scheme: light;
  --bg: #F7F3FF; --surface: #FFFFFF; --ink: #252944; --muted: #636579;
  --line: #DED9E8; --accent: #2E3A6A;
}
[data-theme="violet"] main { max-width: 840px; }
[data-theme="violet"] a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.compare { padding: 36px 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.compare h1 { font-size: 34px; line-height: 1.12; font-weight: 700; }
.compare .direction { font-size: 17px; }
.compare .under { color: var(--accent); }
.compare section { scroll-margin-top: 24px; margin-top: 18px; }
.doc .compare-source { color: var(--muted); font-size: 13px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.compare-table caption { text-align: left; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); }
.compare-table th { font-weight: 600; }
.compare-table thead th { color: var(--muted); font-size: 12px; }
.compare-table th:first-child { width: 30%; padding-right: 16px; }
@media (max-width: 600px) {
  [data-theme="violet"] main { padding: 22px 14px 40px; gap: 24px; }
  .compare { padding: 24px 18px; }
  .compare h1 { font-size: 28px; }
  .compare-table th:first-child { width: 34%; padding-right: 12px; }
}
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 500; }
.tbl th[scope="row"], .tbl thead th:first-child { text-align: left; }
.tbl thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-left: 10px; }
.tbl td { padding-left: 10px; white-space: nowrap; }
.tbl tr.acct th, .tbl tr.acct td { font-weight: 700; }
.tbl tr.sub th { padding-left: 14px; font-weight: 500; color: var(--muted); }
.tbl tr.sub td { color: var(--muted); }
.tbl tr.total th, .tbl tr.total td { border-bottom: 0; }

/* 2026-10-04: Posting guidelines (web/posting.ts). A caution, so its border is ink, not --line; a part per platform;
   on a batch page the founder's own account as three choices (chosen = ink, as a chosen chip), the advice for it, and
   a 13/600 line on each person it changes. */
.guide { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border-radius: 12px; border: 1px solid var(--ink); }
.guide h2 { font-size: 17px; }
.guide .part { display: flex; flex-direction: column; gap: 4px; }
.guide .part + .part { padding-top: 14px; border-top: 1px solid var(--line); }
.guide .part > b { font-size: 14px; font-weight: 700; }
.guide .part > p { margin: 0; font-size: 14px; line-height: 1.5; }
.standing { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.standing .k { font-size: 13px; font-weight: 600; }
.standing .advice { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .12s; }
.choice:hover { border-color: var(--dot); }
.choice b { font-size: 14px; font-weight: 700; }
.choice span { font-size: 12px; line-height: 1.3; color: var(--muted); }
.choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice[aria-pressed="true"] span { color: var(--bg); opacity: .75; }
.feed .warn { font-size: 13px; font-weight: 600; line-height: 1.4; }