/* The public page. Only tokens from tokens.css. */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); }
h1, h2, h3, .wordmark { font-family: var(--font-display); font-weight: 400; font-style: normal; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: var(--color-accent-ink); }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.quiet { color: var(--color-ink-3); font-size: var(--text-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.panel { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: var(--space-lg); }

.button { font: inherit; font-weight: 600; min-height: var(--target); padding: 0 var(--space-lg); border-radius: var(--radius-pill); display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.button.primary { background: var(--color-accent); color: var(--color-on-accent); }
.button.primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.text-link { font-weight: 600; text-underline-offset: 4px; }

/* The mark. */
.mark { flex: none; }
.mark-person { fill: none; stroke: var(--color-bone); stroke-width: 2.5; }
.mark-dot { fill: var(--color-bone); }
.mark-ai { fill: none; stroke: var(--color-accent); stroke-width: 5; }

.site-top, main, .site-foot { max-width: 1120px; margin: 0 auto; padding-left: var(--space-md); padding-right: var(--space-md); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-lg); }
.wordmark { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; }
.site-top nav { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.site-top nav a:not(.button) { color: var(--color-ink-2); text-decoration: none; font-weight: 500; }
.site-top nav a:not(.button):hover { color: var(--color-ink); }

main { display: flex; flex-direction: column; gap: var(--space-4xl); padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.hero { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 760px; }
.hero h1 { font-size: var(--text-display); line-height: var(--leading-tight); }
.lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 36em; }

/* The example handoff, drawn like the Overview's timeline. */
.handoff { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 760px; }
.handoff h2, .steps h2, .install h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.thread { list-style: none; margin: 0; padding: 0; }
.thread-item { display: grid; grid-template-columns: 3.5rem 20px minmax(0, 1fr); gap: var(--space-sm); }
.thread-time { color: var(--color-ink-3); padding-top: var(--space-3xs); white-space: nowrap; }
.thread-wire { display: flex; flex-direction: column; align-items: center; }
.thread-wire::after { content: ""; flex: 1; width: 2px; background: var(--color-rule); }
.thread-item:last-child .thread-wire::after { display: none; }
.jack { width: 14px; height: 14px; margin-top: var(--space-2xs); border-radius: 50%; background: var(--color-line-1); }
.jack.line-3 { background: var(--color-line-3); }
.jack.line-4 { background: var(--color-line-4); }
.thread-link { display: flex; flex-direction: column; gap: var(--space-2xs); padding-bottom: var(--space-lg); }
.thread-head { display: flex; flex-wrap: wrap; column-gap: var(--space-xs); align-items: baseline; }
.thread-who { font-weight: 600; }
.thread-where, .thread-body { color: var(--color-ink-2); }

/* Three steps: a real sequence, so they're numbered. */
.steps { display: flex; flex-direction: column; gap: var(--space-xl); }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-md); }
.steps li { display: flex; flex-direction: column; gap: var(--space-sm); }
.step-number { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-accent-ink); }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-2); }

.see { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-md); }
.see h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.see ul { margin: 0; padding-left: var(--space-lg); line-height: 1.9; }

.install { display: flex; flex-direction: column; gap: var(--space-md); max-width: 760px; }
.install p { color: var(--color-ink-2); }
.todo { color: var(--color-ink-3); font-size: var(--text-sm); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }

.site-foot { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-lg); padding-bottom: var(--space-2xl); border-top: var(--rule); color: var(--color-ink-3); font-size: var(--text-sm); }