/* Home page only. Tokens from assets/site.css; nothing here is shared with other pages. */

/* The live process designer: the way on to the demo under it, and the line shown where it cannot be drawn. */
#process .pd-after { margin-top: 24px; }
.pd-nojs { margin: 0; padding: 24px; color: var(--soft); }
/* The skip link past the diagram sits in the mockup frame, whose links are white: it keeps its own dark text. */
#process .skip-link { color: var(--charcoal); }
/* Stacked on a phone, the details come straight after the diagram and the legend last, so a tap visibly opens them.
   The demo keeps its own order. */
@container (max-width: 760px) {
  #process .pd-main { display: contents; }
  #process .pd-legend { order: 1; }
}

/* A quiet link under each stage's text. */
.stage .copy .more { font-size: 16px; font-weight: 500; }

/* The MCP call trace sits on the dark band; its notes follow it. */
.mcp-points { margin: clamp(28px, 4vw, 48px) 0 0; max-width: 44rem; }
.band-dark .ticks li { color: var(--soft); }

/* Knowledge packs: a short text, then its mockup, per pack. */
.packs-grid { gap: clamp(32px, 4vw, 56px); }
.pack { display: grid; gap: 24px; align-content: start; min-width: 0; }
.pack-copy { display: grid; gap: 10px; }
.pack-copy p { margin: 0; color: var(--soft); }
.packs-more { margin: clamp(28px, 4vw, 48px) 0 0; }

/* Lemon-law pack card: the drafted process as a numbered list. Not in the shared kit. */
.m-pack-steps { counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.m-pack-steps li { counter-increment: step; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.4; }
.m-pack-steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid var(--soft); border-radius: 50%;
  font: 500 11px/1 var(--mono); color: var(--white);
}
@container (max-width: 460px) {
  .m-pack-steps { grid-template-columns: minmax(0, 1fr); }
}

/* The headline is two sentences on two lines; it may wrap again on a phone. */
.hero .display { max-width: none; }

/* The rule table's caption sits above the scroll area, so a phone always sees it. */
.m-rule-cap { display: grid; gap: 2px; margin: 0; }

/* The trace's JSON wraps instead of hiding the subject and attachments behind a scrollbar. */
#mcp .m-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The three-column rule table fits a phone without sideways scrolling, so Result and Clause stay visible. */
.pack .m-table { min-width: 0; }
@container (max-width: 520px) {
  .pack .m-table th, .pack .m-table td { padding: 9px 8px; font-size: 13px; }
}