/* Sheaf Labs house style. The skeleton every public page shares: the eyebrow, the headline with one chalk
   phrase, the lede, the two buttons. Colour tokens stay in each page (a product may keep its own accent), and the
   chalkboard band belongs to the three lab pages only. Linked after the page's own styles so it wins on ties. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* One voice on every page (Sept 28 2026, the one-product site): headings in Inter Tight at weight 600,
   body in the system sans, small labels in IBM Plex Mono. Jack chose the face on the homepage. */
.eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin: 0 0 .9rem; }

.masthead h1, .band h1, .hero h1, header h1, main h1, h1 { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h2, .masthead h2, main h2, .paper h1, .paper h2 { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 600; letter-spacing: -.018em; line-height: 1.12; }

/* The signature: one phrase in the pink in every headline. Same face, no flourish. */
h1 .chalk { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; color: var(--pink-ink, #B81E63); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1 .chalk { color: var(--pink-ink, #FF9BC4); } }
:root[data-theme="dark"] h1 .chalk { color: var(--pink-ink, #FF9BC4); }
.band h1 .chalk { color: #FF9BC4; }

.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.5; max-width: 62ch; }

.btn.p { background: var(--blue, #2C46E8); color: #fff; border-color: var(--blue, #2C46E8); border-radius: 10px; font-weight: 700; }
.btn.p:hover { background: var(--blue-deep, #1B2CA8); }
.btn.s { border: 1px solid var(--line-strong, #D2D7E6); color: var(--ink, #121829); border-radius: 10px; font-weight: 700; }

sheaf-foot { display: block; }

/* Phone folds. On narrow screens nav.js folds each long main section after its heading and first block,
   behind a "Read more" tap. On wider screens everything is shown and the toggle is hidden. */
.fold-more { display: none; }
@media (max-width: 760px) {
  .fold > .fold-body { display: none; }
  .fold.open > .fold-body { display: block; }
  .fold > .fold-more { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 9px 14px; font: inherit; font-size: .92rem; font-weight: 700;
    color: var(--blue, #2C46E8); background: var(--blue-soft, rgba(44,70,232,.07)); border: 1px solid var(--blue-line, rgba(44,70,232,.22)); border-radius: 999px; cursor: pointer; }
  .fold.open > .fold-more { display: none; }
}

/* A soft arrival: every page fades in over a third of a second, so moving between the dark scene and any other page never flashes. */
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-fade .35s ease-out both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }