/*!
 * connect-your-agent/connect-your-agent.css
 * ------------------------------------------------------------------
 * Page chrome only. The timeline itself is styled by
 * /assets/css/connect-agent-timeline.css, which the coach dashboard loads
 * too, so nothing in this file may describe a step, a chip or a panel.
 *
 * PARCHMENT, NOT DARK. The page this replaces carried data-mz-theme="dark"
 * because it sat between a marketing site and a black console, and a cream
 * page feeding a black console read as two products. The console is the
 * parchment dashboard now, so a dark setup page between a parchment homepage
 * and a parchment dashboard would be that same problem pointing the other
 * way. Tokens only, so it follows whatever the ground becomes next.
 */

.cat-wrap {
  padding-block: var(--space-6) var(--space-8);
  max-width: 820px;
}

.cat-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrow-accent);
}

.cat-title {
  margin: 0 0 var(--space-3);
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: var(--type-display);
  line-height: 1.05;
  color: var(--ink-primary);
}

.cat-lede {
  margin: 0 0 var(--space-6);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 64ch;
}

/* ---------------------------------------------------------- boundaries */

.cat-boundaries {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-soft);
}

.cat-boundaries h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: var(--type-title);
  color: var(--ink-primary);
}

.cat-never-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cat-never-list li {
  padding: var(--space-3);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* INLINE, not a block. Four of the five boundaries lead with a bold sentence
   and then continue in plain text, but the fourth is one sentence whose bold
   stops mid way: "Members come back as counts and opaque refs", then ", never
   names." As a block that orphans the tail onto its own line as a fragment.
   The shipped page kept it inline for exactly this reason. */
.cat-never-list strong {
  font-weight: 550;
  color: var(--ink-primary);
}

@media (max-width: 520px) {
  .cat-wrap { padding-block: var(--space-5) var(--space-6); }
  .cat-lede { font-size: 16px; }
}