/* Offer pages (lane A): /launch-review/, /shadow-test/, /engagements/, /sample-report/.
   Components live in /css/cf.css; tokens in /css/cf-tokens.css. Anything here that two or more pages share
   (.cf-steps, .cf-problems) is listed in the lane report for promotion to cf.css. */

/* ---------- Page opener: the exhibit tab with an H1 ---------- */
.offer-open { padding-bottom: var(--cf-s-7); }
.offer-open .cf-exhibit { margin-bottom: var(--cf-s-6); }
.offer-open .cf-exhibit__title { font-size: var(--cf-fs-3xl); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-track-h1); max-width: 20em; }
.offer-open .cf-exhibit__lead { max-width: 38rem; }
.offer-keyline {
  margin-top: var(--cf-s-4);
  font-family: var(--cf-font-mono);
  font-size: var(--cf-fs-sm);
  color: var(--cf-blue-deep);
}
.offer-formwrap { max-width: 40rem; }
.offer-formwrap .cf-form__fine { margin-top: var(--cf-s-3); }
.offer-fine { margin-top: var(--cf-s-5); }
.offer-alt { margin-top: var(--cf-s-5); }
.offer-note { color: var(--cf-ink-3); max-width: var(--cf-measure); }
.offer-note + .offer-note { margin-top: var(--cf-s-3); }

/* Two columns that stack on phones */
.offer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-s-7); }
.offer-grid__col { min-width: 0; }
.offer-grid__col .cf-exhibit { margin-bottom: var(--cf-s-5); }
.offer-grid__col .cf-exhibit__title { font-size: var(--cf-fs-xl); }
@media (min-width: 62rem) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-s-8); } }

/* ---------- Numbered steps (promote to cf.css as .cf-steps) ---------- */
.cf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-s-4); counter-reset: cf-step; }
.cf-steps__item {
  position: relative;
  min-width: 0;
  padding: var(--cf-s-5) var(--cf-s-5) var(--cf-s-5) calc(var(--cf-s-5) + 3.25rem);
  background: var(--cf-paper);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r-3);
  box-shadow: var(--cf-shadow-1);
  counter-increment: cf-step;
}
.cf-steps__item::before {
  content: counter(cf-step, decimal-leading-zero);
  position: absolute;
  left: var(--cf-s-5);
  top: var(--cf-s-5);
  font-family: var(--cf-font-mono);
  font-size: var(--cf-fs-lg);
  font-weight: var(--cf-w-bold);
  color: var(--cf-blue);
  line-height: 1.3;
}
.cf-steps__title { font-size: var(--cf-fs-lg); }
.cf-steps__item p { margin-top: var(--cf-s-2); color: var(--cf-ink-2); }
@media (min-width: 62rem) {
  .cf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-steps__item { padding: calc(var(--cf-s-5) + 2rem) var(--cf-s-5) var(--cf-s-5); }
  .cf-steps__item::before { left: var(--cf-s-5); top: var(--cf-s-5); }
}
/* Compact: inside a rung, always a single column of plain rows */
.cf-steps--compact { gap: 0; border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); background: var(--cf-paper); overflow: hidden; }
.cf-steps--compact .cf-steps__item { border: 0; border-top: 1px solid var(--cf-line); border-radius: 0; box-shadow: none; padding: var(--cf-s-4) var(--cf-s-4) var(--cf-s-4) calc(var(--cf-s-4) + 2.75rem); }
.cf-steps--compact .cf-steps__item:first-child { border-top: 0; }
.cf-steps--compact .cf-steps__item::before { left: var(--cf-s-4); top: var(--cf-s-4); font-size: var(--cf-fs-base); }
.cf-steps--compact .cf-steps__title { font-size: var(--cf-fs-base); }
@media (min-width: 62rem) {
  .cf-steps--compact { grid-template-columns: minmax(0, 1fr); }
  .cf-steps--compact .cf-steps__item { padding: var(--cf-s-4) var(--cf-s-4) var(--cf-s-4) calc(var(--cf-s-4) + 2.75rem); }
  .cf-steps--compact .cf-steps__item::before { left: var(--cf-s-4); top: var(--cf-s-4); }
}

/* ---------- Launch review: controls and tags ---------- */
.offer-controls { max-width: var(--cf-measure); margin-top: var(--cf-s-7); }
.offer-controls h3 { font-size: var(--cf-fs-xl); }
.offer-controls__list { margin: var(--cf-s-4) 0 0; padding-left: 1.4em; display: grid; gap: var(--cf-s-3); }
.offer-controls__list li::marker { color: var(--cf-blue); font-family: var(--cf-font-mono); font-weight: var(--cf-w-bold); }
.offer-controls__note { margin-top: var(--cf-s-3); font-size: var(--cf-fs-sm); color: var(--cf-ink-3); }
.offer-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cf-s-3); }
.offer-needs li { padding: var(--cf-s-3) var(--cf-s-4); background: var(--cf-paper); border: 1px solid var(--cf-line); border-left: 3px solid var(--cf-blue); border-radius: var(--cf-r-2); }
.offer-needs + .offer-note { margin-top: var(--cf-s-4); }
.offer-tags { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cf-s-3) var(--cf-s-3); align-items: center; max-width: var(--cf-measure); color: var(--cf-ink-3); }
.offer-tags .cf-tag { justify-self: start; }
.offer-grid .cf-byline { margin-top: var(--cf-s-3); }

/* ---------- Engagements: one block per rung ---------- */
.offer-rungs { display: grid; gap: var(--cf-s-7); }
.offer-rung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-s-4); padding-top: var(--cf-s-6); border-top: 1px solid var(--cf-line-strong); }
.offer-rung:first-child { border-top: 0; padding-top: 0; }
.offer-rung__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--cf-s-4); align-content: start; }
.offer-rung__num { grid-row: 1 / span 2; font-family: var(--cf-font-mono); font-size: var(--cf-fs-num); font-weight: var(--cf-w-bold); line-height: 1; color: var(--cf-blue); }
.offer-rung__name { font-size: var(--cf-fs-xl); }
.offer-rung__days { font-family: var(--cf-font-mono); font-size: var(--cf-fs-sm); color: var(--cf-ink-3); }
.offer-rung__body { min-width: 0; display: grid; gap: var(--cf-s-4); }
.offer-rung__lead { font-size: var(--cf-fs-lg); color: var(--cf-ink-2); max-width: var(--cf-measure); }
.offer-rung__out { display: grid; gap: var(--cf-s-2); margin: 0; padding: var(--cf-s-4); background: var(--cf-blue-wash); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); font-size: var(--cf-fs-sm); }
.offer-rung__out > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--cf-s-3); }
.offer-rung__out dt { padding-top: 2px; font-family: var(--cf-font-mono); font-size: var(--cf-fs-xs); text-transform: uppercase; letter-spacing: var(--cf-track-label); color: var(--cf-muted); }
.offer-rung__out dd { margin: 0; color: var(--cf-ink); font-weight: var(--cf-w-semibold); }
@media (min-width: 62rem) {
  .offer-rung { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--cf-s-7); }
  .offer-rung__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--cf-s-2); }
  .offer-rung__num { grid-row: auto; }
}
.offer-allprod { margin-top: var(--cf-s-5); }
.offer-position { margin-top: var(--cf-s-4); max-width: var(--cf-measure); font-size: var(--cf-fs-lg); color: var(--cf-ink); }

/* Buyer problems: markup generated by scripts/products/template.mjs renderProblems (promote to cf.css) */
.cf-problems { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-s-5); }
.cf-problem { min-width: 0; padding: var(--cf-s-5); background: var(--cf-paper); border: 1px solid var(--cf-line); border-top: 3px solid var(--cf-blue); border-radius: var(--cf-r-3); box-shadow: var(--cf-shadow-1); }
.cf-problem__title { font-size: var(--cf-fs-lg); }
.cf-problem__blurb { margin-top: var(--cf-s-2); font-size: var(--cf-fs-sm); color: var(--cf-ink-3); }
.cf-problem__list { list-style: none; margin: var(--cf-s-4) 0 0; padding: 0; display: grid; gap: 0; }
.cf-problem__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cf-s-1) var(--cf-s-3); padding: var(--cf-s-3) 0; border-top: 1px solid var(--cf-line); }
.cf-problem__link, .cf-problem__name { font-weight: var(--cf-w-semibold); }
.cf-problem__link { display: inline-block; padding-block: var(--cf-s-1); }
.cf-problem__time { font-family: var(--cf-font-mono); font-size: var(--cf-fs-xs); text-transform: uppercase; letter-spacing: var(--cf-track-label); color: var(--cf-muted); }
.cf-problem__line { flex-basis: 100%; font-size: var(--cf-fs-sm); color: var(--cf-ink-2); }
@media (min-width: 48rem) { .cf-problems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cf-problem:nth-child(5) { grid-column: 1 / -1; } }

/* ---------- Sample report ---------- */
.offer-sample-banner { padding-block: var(--cf-s-3); background: var(--cf-unconfirmed-tint); border-bottom: 1px solid var(--cf-line-strong); }
.offer-sample-banner .cf-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-s-2) var(--cf-s-3); }
.offer-sample-banner p { margin: 0; font-size: var(--cf-fs-sm); color: var(--cf-ink); flex: 1 1 18rem; }
.offer-sample-banner .cf-tag { flex: none; }
.cf-exhibit__tab .cf-tag { flex: none; }
.offer-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cf-s-3); margin: 0; }
.offer-facts > div { padding: var(--cf-s-4); background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); }
.offer-facts dt { font-family: var(--cf-font-mono); font-size: var(--cf-fs-xs); text-transform: uppercase; letter-spacing: var(--cf-track-label); color: var(--cf-muted); }
.offer-facts dd { margin: var(--cf-s-1) 0 0; color: var(--cf-ink); font-weight: var(--cf-w-semibold); }
@media (min-width: 48rem) { .offer-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer-num { font-family: var(--cf-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-table tbody th { width: 20%; font-family: var(--cf-font-mono); font-weight: var(--cf-w-regular); white-space: nowrap; }
.offer-table th, .offer-table td { vertical-align: middle; }
.offer-table td .offer-bar { display: block; height: 6px; margin-top: var(--cf-s-1); width: min(var(--w, 0%), 100%); min-width: 2px; background: var(--cf-blue); border-radius: 3px; }
.offer-read { margin-top: var(--cf-s-5); max-width: var(--cf-measure); padding: var(--cf-s-4); background: var(--cf-blue-wash); border: 1px solid var(--cf-line); border-left: 3px solid var(--cf-blue); border-radius: var(--cf-r-2); }
.offer-reasons { list-style: none; margin: 0; padding: 0; max-width: var(--cf-measure); border: 1px solid var(--cf-line); border-radius: var(--cf-r-3); background: var(--cf-paper); overflow: hidden; }
.offer-reasons li { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-s-4); padding: var(--cf-s-3) var(--cf-s-4); border-top: 1px solid var(--cf-line); }
.offer-reasons li:first-child { border-top: 0; }
.offer-reasons code { overflow-wrap: anywhere; color: var(--cf-ink); }
.cf-finding[data-status="sample"] { --status: var(--cf-blue-light); }
@media (min-width: 48rem) { #findings .cf-findings__group { grid-template-columns: repeat(3, minmax(0, 1fr)); } }