/* Limits as Leverage — matches the video design language exactly:
   same palette, same left-aligned editorial column, same node motif. */

:root {
  --bg:      #FBF8F4;   /* warm paper, not clinical white */
  --bg-2:    #F4EFE8;   /* cards sit slightly deeper than the page */
  --ink:     #1F1A16;   /* warm near-black; pure black reads cold */
  --ink-dim: #7D726A;
  --accent:  #C08472;   /* clay rose - static pages, read slowly */
  --rule:    #E3DACE;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.09rem/1.68 "Helvetica Neue", Helvetica, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 4.5rem 1.5rem 6rem; }

/* the node motif, same mark as the videos */
.mark {
  display: block; margin-bottom: 3.5rem;
  /* letter-spacing would break the box-drawing rule into dashes -
     the segments must butt against each other to read as one line. */
  color: #C4B4A4; font-size: .95rem; letter-spacing: 0;
}

h1 {
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.12; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 1rem;
}
h2 {
  font-size: 1.2rem; letter-spacing: -.01em; font-weight: 700;
  margin: 3rem 0 .75rem;
}
h2::before {
  content: ""; display: block; width: 2.2rem; height: 2px;
  background: var(--accent); margin-bottom: 1rem;
}

.lede { font-size: 1.2rem; color: var(--ink-dim); margin: 0 0 2.5rem; line-height: 1.55; }
p { margin: 0 0 1.15rem; }
strong { color: var(--ink); font-weight: 700; }
em { color: var(--accent); font-style: normal; }
a { color: var(--accent); text-underline-offset: .2em; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 3.5rem 0; }

/* form */
.card {
  background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.75rem; margin: 2.5rem 0;
}
.card p:last-child { margin-bottom: 0; }
.fineprint { font-size: .875rem; color: var(--ink-dim); margin-top: 1rem; }

input[type=email], input[type=text] {
  width: 100%; padding: .85rem 1rem; margin-bottom: .75rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 7px;
  font: inherit; font-size: 1rem;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

button, .btn {
  display: inline-block; width: 100%; padding: .9rem 1.25rem;
  background: var(--accent); color: #241E1A;
  border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem;
  text-align: center; text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.07); }

/* footer */
footer {
  border-top: 1px solid var(--rule); margin-top: 4.5rem; padding-top: 1.5rem;
  font-size: .875rem; color: var(--ink-dim);
}
footer a { color: var(--ink-dim); }
footer nav a { margin-right: 1.25rem; }

ol, ul { padding-left: 1.15rem; }
li { margin-bottom: .5rem; }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}
pre {
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.1rem; color: var(--ink); line-height: 1.55;
  /* Wrap rather than scroll. A prompt is meant to be READ before it is
     trusted, and nobody scrolls a code block sideways on a phone. pre-wrap
     keeps the intentional line breaks while folding the long lines. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .875rem;
  max-height: 26rem; overflow-y: auto;   /* long block stays skimmable */
}

/* Pages whose main content is a wide block get more room than prose needs. */
.wrap.wide { max-width: 46rem; }

.copyrow { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.copybtn {
  width: auto; padding: .5rem .9rem; font-size: .875rem;
  background: var(--accent); color: #241E1A; border: 0; border-radius: 6px;
  cursor: pointer; font-weight: 700;
}
.copybtn:hover { filter: brightness(1.07); }
.copynote { font-size: .875rem; color: var(--ink-dim); }

@media (max-width: 30rem) { .wrap { padding-top: 3rem; } }