/* THE OFFER PAGES' FURNITURE — served as /brand-world/system.css and shared
   by /training and /brand-world. (It was /brand-system/brand-system.css until
   the two offers merged on 2026-08-16; the old path is a 301 now.) It borrows
   the method page's furniture and adds only the promise, the price at the
   fold, the deliverables and the guarantee. Warmer than the method page and
   still quiet: this is the page where someone is deciding whether to spend
   money, and a page that shouts while asking is a page that doesn't trust its
   own offer. */

.system h1 {
  margin-top:40px;
}

/* the promise is the largest thing here, and the only thing above the fold */
.promise {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.38;
  letter-spacing: -0.012em;
  max-width: 34ch;
  margin-top:16px;
}

/* ---- the price at the fold ---- */

/* the figure a visitor came for, in the accent, at the lead-paragraph step of
   the scale — the same size .early already uses. No new size is authored. */
.price-fold {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  color: var(--text-primary); /* ink, not olive: below the 22px display-colour threshold */
  font-weight: 600;
  margin-top:12px;
}

/* what the price buys, straight under it — outside a .band, so it declares
   its own measure and rhythm rather than inheriting the reset's zero */
.fold {
  margin-top:20px;
}

.fold p {
  max-width: 62ch;
  margin:14px 0;
}

/* the price lines, and the nine steps, which read the same way: one item per
   rule, no bullets, the thing that identifies it first */
.prices {
  list-style: none;
  margin:20px 0 0;
  padding:0;
  max-width: 62ch;
}

.prices li {
  padding:10px 0;
  border-top: 1px solid var(--line);
}

.prices li strong {
  font-weight: 600;
  margin-right:10px;
  color: var(--text-accent);
}

/* ---- what exists afterwards ---- */

.deliverables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
  margin-top:28px;
}

.deliverable {
  padding-top:16px;
  border-top: 1px solid var(--line);
}

.deliverable h3 {
  /* 18-20px — reading scale, not display: stays on the ink */
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.3;
  margin:0 0 8px;
}

.deliverable p {
  font-size: 14px;
  line-height: 1.62;
  opacity: 0.84;
}

.deliverable code {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 12px;
}

/* ---- the guarantee ---- */

.guarantee {
  margin-top:24px;
  padding-left:16px;
  border-left: 2px solid var(--teal);
  max-width: 58ch;
}

.guarantee p {
  margin:16px 0;
  font-size: 16px;
  line-height: 1.62;
}

.early {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  max-width: 44ch;
}

@media (max-width: 809px) {
  .deliverables {
    grid-template-columns: minmax(0, 1fr);
  }
}