/* Copyset site. Tokens mirror DESIGN.md ("The Box"): warm paper, slate ink, the chalkboard, cobalt for the
   brand, plate yellow for effort. */
@font-face {
  font-family: 'Big Shoulders';
  src: url('bigshoulders-800.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
:root {
  --paper: #f8f5f0; --paper-2: #eeeae2; --hairline: #ddd9d0;
  --ink: #131a23; --ink-2: #515962; --cobalt: #215ee5; --yellow: #fdd625;
  --board: #172721; --board-2: #25362f; --chalk: #f5f3ec; --chalk-2: #b1beb8;
  --display: 'Big Shoulders', 'Arial Narrow', system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --gutter: clamp(16px, 5vw, 64px); --max: 1080px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); }
a { color: var(--cobalt); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
header.top { display: flex; align-items: center; gap: 10px; padding: 18px 0; }
header.top img { width: 36px; height: 36px; border-radius: 9px; }
header.top a { font: 800 26px/1 var(--display); letter-spacing: 1px; color: var(--ink); text-decoration: none; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(24px, 6vw, 72px) 0; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.98; margin: 0; }
h1 { font-size: clamp(56px, 9vw, 112px); }
h2 { font-size: clamp(32px, 5vw, 48px); margin: 40px 0 12px; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 18px 0 26px; }
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 15px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.soon { display: inline-block; margin-left: 12px; color: var(--ink-2); font-size: 15px; }
.board { background: var(--board) url('board.png'); background-size: cover; color: var(--chalk); border-radius: 26px; padding: 30px; transform: rotate(-2deg); box-shadow: 0 30px 60px rgba(19,26,35,.25); }
.board .no { font: 800 16px var(--display); letter-spacing: 1px; color: var(--chalk-2); }
.board .title { font: 800 54px/1 var(--display); text-transform: uppercase; margin: 14px 0 18px; }
.board .line { display: flex; justify-content: space-between; align-items: center; font: 800 26px/1.35 var(--display); text-transform: uppercase; }
.board .dose { color: var(--yellow); border: 2px solid var(--yellow); border-radius: 50%; padding: 0 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 24px 0 64px; }
.step .n { font: 800 44px/1 var(--display); color: var(--cobalt); }
.step h3 { margin: 6px 0 4px; font-size: 19px; }
.step p { margin: 0; color: var(--ink-2); }
.doc { max-width: 720px; padding-bottom: 64px; }
.doc h1 { font-size: clamp(44px, 7vw, 72px); margin-top: 24px; }
.doc li { margin: 6px 0; }
footer { border-top: 1px solid var(--hairline); padding: 28px 0 40px; color: var(--ink-2); font-size: 14px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
footer a { color: var(--ink-2); }
@media (max-width: 760px) { .hero, .steps { grid-template-columns: 1fr; } .board .title { font-size: 42px; } .board .line { font-size: 21px; } }
footer nav.langs { margin-top: 4px; } footer nav.langs a { font-size: 13px; }