/* The Privacy and Resources pages use the industry kit (industry.css) for their hero, ruled rows,
   comparison, bands and steps. This file adds only what those pages need beyond it: the diagrams in
   the hero slot (`kit-art.mjs`), resource cards and a few spacing joins. Type, colour and section
   rhythm still come from the shared system. */

/* ---- hero slot: a diagram instead of a photograph ---- */
/* The slot keeps the industry hero's 4:3 shape as a minimum and grows with its diagram, so nothing
   inside is ever clipped. It carries no card: the strip below the hero already states the facts.

   The minimum is a min-height in container units, not `aspect-ratio`: WebKit keeps an
   aspect-ratio box at its ratio when the diagram inside is taller, so the diagram ran out of the
   frame in Safari (test plan, PRR-13). The figure is the container the units measure. */
.kit-scene {
  container-type: inline-size;
  aspect-ratio: auto;
  overflow: visible;
}
/* Each diagram lays itself out by the width it is given (a container query), so the same picture
   works in the narrow half of a two-column hero and across a phone. */
.kit-scene-ground {
  container: kit-scene / inline-size;
  display: grid;
  align-content: center;
  height: auto;
  padding: clamp(18px, 2.4vw, 32px);
  background: linear-gradient(180deg, #121826 0%, #090d15 100%);
  color: var(--color-body);
}
@media (min-width: 1024px) {
  .kit-scene-ground {
    min-height: 75cqw;
  }
}

/* Shared diagram parts. Rounded chips belong to the picture, as in the menu scenes; the page around
   the picture keeps its square planes. */
.kd-zone {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 10px;
  background: rgba(150, 170, 210, 0.04);
}
.kd-inside {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.06);
}
.kd-outside {
  border-style: dashed;
  border-color: rgba(157, 183, 220, 0.26);
  background: transparent;
}
.kd-zone-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.kd-inside > .kd-zone-label {
  color: var(--lp-eyebrow);
}
.kd-node-list {
  display: grid;
  gap: 8px;
}
.kd-node {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.72);
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-ink);
}
.kd-node svg {
  flex: none;
  color: var(--color-accent);
}
.kd-node.is-muted {
  color: var(--color-muted);
  background: transparent;
  text-decoration: line-through;
  text-decoration-color: rgba(241, 175, 152, 0.7);
}
.kd-node.is-muted svg {
  color: var(--lp-faint);
}
.kd-node.is-lit {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.1);
}
.kd-core {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.kd-tower {
  display: block;
  width: auto;
  height: clamp(86px, 9vw, 128px);
}
.kd-core-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
}

/* The closed way out: a dashed rule with a mark on it, and a short note that runs along the rule.
   The mark and the note sit in flow, centred together on the rule, so the note can never run past
   the zones or out of the frame, whatever the diagram's height or width. */
.kd-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  min-width: 34px;
}
.kd-wall::before {
  content: '';
  position: absolute;
  inset: 0 50%;
  border-left: 1.5px dashed rgba(74, 163, 255, 0.7);
}
.kd-wall-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(74, 163, 255, 0.6);
  border-radius: 50%;
  background: #0b0f17;
  font-size: 17px;
  line-height: 1;
  color: var(--color-accent);
}
.kd-wall-note {
  position: relative;
  padding: 6px 0;
  background: #0b0f17;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
}

/* Privacy overview */
.kd-boundary,
.kd-path,
.kd-lanes,
.kd-places {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.kd-boundary,
.kd-path {
  grid-template-columns: minmax(0, 2.1fr) auto minmax(0, 1fr);
}
.kd-boundary .kd-inside {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}
.kd-boundary .kd-inside > .kd-zone-label {
  grid-column: 1 / -1;
}
.kd-boundary .kd-outside,
.kd-places .kd-outside {
  align-content: center;
}

/* Where your data goes */
.kd-steps,
.kd-lane-steps,
.kd-anatomy ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kd-steps li,
.kd-anatomy li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.72);
  font-size: 14px;
  color: var(--color-ink);
}
.kd-steps svg,
.kd-anatomy svg {
  color: var(--color-accent);
}
.kd-step-index {
  font-size: 11px;
  color: var(--lp-faint);
}
.kd-step-name {
  min-width: 0;
}
.kd-step-where {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-positive);
}
.kd-path .kd-outside {
  align-content: center;
}

/* Access and control */
.kd-access {
  display: grid;
  gap: 14px;
}
.kd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.kd-grid-head {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.kd-grid-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: var(--color-ink);
}
.kd-grid-row svg {
  flex: none;
  color: var(--lp-faint);
}
.kd-cell {
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  color: var(--lp-faint);
}
.kd-cell.is-open {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.1);
  color: var(--color-accent);
}
.kd-decision {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Setup and support */
.kd-lane {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px dashed rgba(157, 183, 220, 0.26);
  border-radius: 10px;
}
.kd-lane.kd-inside {
  border-style: solid;
  align-content: center;
}
.kd-lane-steps li {
  padding: 9px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.72);
  font-size: 14px;
  color: var(--color-ink);
}
.kd-lane-note,
.kd-place-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
}
body.page-inner main .kd-lane-note,
body.page-inner main .kd-place-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
}
.kd-lane-note svg,
.kd-place-note svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}
.kd-lanes {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

/* Resources: the shelf */
.kd-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.kd-shelf {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 10px;
  background: rgba(12, 15, 22, 0.72);
}
.kd-shelf svg {
  color: var(--lp-faint);
}
.kd-shelf.is-lit {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.08);
}
.kd-shelf.is-lit svg {
  color: var(--color-accent);
}
.kd-shelf-kind {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.kd-shelf-name {
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-ink);
}

/* A walkthrough task's parts */
.kd-anatomy {
  display: grid;
  gap: 12px;
}
.kd-anatomy li {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.kd-anatomy li.is-lit {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.1);
}

/* Two places the work can happen */
.kd-places {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kd-places .kd-zone {
  justify-items: center;
  text-align: center;
}
.kd-places .kd-zone-label {
  justify-self: stretch;
  text-align: left;
}
.kd-cloud {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--lp-faint);
}
.kd-places .kd-place-note {
  justify-content: center;
  text-align: left;
}
/* Pricing: a seat for each person, in two rows of three. */
.kd-seats {
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 10px 14px;
}
.kd-seats .kd-core-name {
  grid-column: 1 / -1;
}

/* Workflow value: the comparison a team runs. Empty slots, to be filled by the team's own figures. */
.kd-measure {
  display: grid;
  gap: 14px;
}
.kd-measure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.kd-slot {
  height: 40px;
  border: 1px dashed rgba(157, 183, 220, 0.3);
  border-radius: 8px;
}
.kd-slot.is-lit {
  border-color: rgba(74, 163, 255, 0.5);
  background: rgba(74, 163, 255, 0.06);
}

/* Research: the note as a page */
.kd-note {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 10px;
  background: rgba(12, 15, 22, 0.72);
}
.kd-note-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.kd-note ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kd-note li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-ink);
}
.kd-note li.is-lit {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.08);
}
.kd-note-line {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* ---- a general workflow pattern, set like an industry case ---- */
body.page-inner main .kit-pattern-lead {
  margin: 10px 0 0;
  max-width: 70ch;
  color: var(--color-muted);
}
.kit-pattern-lead strong {
  color: var(--color-ink);
  font-weight: 500;
}
.kit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit-chips li {
  padding: 6px 10px;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-control, 2px);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-body);
}
.kit-pattern-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit-pattern-steps li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-body);
}
.kit-pattern-steps .mono {
  font-size: 11px;
  line-height: 2;
  color: var(--lp-faint);
}

/* ---- research: the note card and the source library ---- */
.kit-note-link {
  margin-top: var(--space-md);
}
.kit-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.kit-library-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
body.page-inner main .kit-library-group h3 {
  margin: 0;
  font-size: 20px;
}
.kit-library-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit-library-list li {
  display: grid;
  gap: 2px;
}
.kit-library-list .mono {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
.kit-library-list a {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 4px;
}
.kit-library-list a:hover,
.kit-library-go:hover {
  color: var(--color-accent);
}
.kit-library-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  font-size: 14px;
  color: var(--color-accent);
}
.kit-library-shared {
  grid-column: 1 / -1;
}
.kit-library-shared .kit-library-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- a comparison: the short version, prose rows and the sources ---- */
.kit-short .story-heading {
  max-width: 900px;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
}
.kit-short .story-heading .mono {
  display: block;
  margin-bottom: 12px;
  color: var(--lp-eyebrow);
}
body.page-inner main .kit-short .story-heading p {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-ink);
}
.kit-prose {
  border-bottom: 1px solid var(--color-rule);
}
.kit-prose-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 120px;
}
body.page-inner main .kit-prose-row h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}
body.page-inner main .kit-prose-row p {
  margin: 0 0 14px;
  max-width: 70ch;
}
body.page-inner main .kit-prose-row p:last-child {
  margin-bottom: 0;
}
.kit-source-list {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--space-md);
  padding-left: 22px;
}
.kit-source-list a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 4px;
}
.kit-source-list a:hover {
  color: var(--color-accent);
}

/* The research note's own process map, restacked as numbered rows for the picture slot. */
.kit-scene-map .research-process-map {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.kit-scene-map .research-process-map figcaption {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-eyebrow);
}
.kit-scene-map .research-process-map ol {
  grid-template-columns: 1fr;
  gap: 8px;
}
.kit-scene-map .research-process-map li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.72);
}
.kit-scene-map .research-process-map li:last-child {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.08);
}
.kit-scene-map .research-process-map li::after {
  content: none !important;
}
.kit-scene-map .research-process-map li > span {
  grid-row: span 2;
  font-size: 11px;
}
.kit-scene-map .research-process-map strong {
  margin-top: 0;
  font-size: 15px;
}
.kit-scene-map .research-process-map small {
  margin-top: 2px;
  font-size: 13px;
}

/* ---- tables: the caption is for assistive technology; the heading above says the same ---- */
.kit-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.page-inner main .ind-columns + .overview-boundary {
  margin-top: var(--space-lg);
}

/* ---- the links after an accountability card ---- */
.kit-aside-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-lg);
  margin-top: var(--space-md);
}

/* ---- cards: the industries overview card, in rows of two, three or four ---- */
.kit-cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-card-slot {
  display: contents;
}
:is(#article-guides, #industry-analysis) .article-card-slot > .ind-overview-card {
  grid-column: auto;
}
@media (max-width: 1100px) {
  #article-guides .article-card-slot:last-child > .ind-overview-card,
  #industry-analysis .article-card-slot:only-child > .ind-overview-card {
    grid-column: 1 / -1;
  }
}
#industry-analysis .kit-cards > .kit-cards {
  display: contents;
}
/* Inner translation containers must not make every card the tablet grid's last child. */
#industry-analysis .kit-cards > .kit-cards:not(:only-child) > .ind-overview-card {
  grid-column: auto;
}
#industry-analysis .ind-overview-card strong {
  text-wrap: balance;
}
.kit-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kit-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Six cards (the guides index) read as two even rows, never five and one left alone. */
.kit-cards-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A card's figure reads as the case's own number, at the size the industry cases give it beside a
   picture. */
.kit-figure {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}
.kit-figure > span {
  display: grid;
  gap: 2px;
}
.kit-figure b {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.kit-figure b + span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* ---- figures: big numbers over a short caption, ruled above, as the Product pages set them
   (design system, form 4). The pricing page's saving against AI plans. ---- */
.kit-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}
.kit-figures li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
}
.kit-figure-number {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
body.page-inner main .kit-figure-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-muted);
}
@media (max-width: 767px) {
  .kit-figures {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .kit-figure-number {
    font-size: 40px;
  }
}

/* ---- the pricing page: a system's size under its name, and the space between its parts ---- */
.pr-size {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-muted);
}
.pr-prices + .overview-boundary,
.pr-purchase {
  margin-top: var(--space-lg);
}
.pr-advantages {
  margin-top: var(--space-xl);
}

/* ---- terms and what they mean, set like the three-column row ---- */
.kit-defs {
  margin: 0;
}
.kit-defs dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.kit-defs dd {
  margin: 10px 0 0;
  font-size: var(--body-size);
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---- source links under a table ---- */
body.page-inner main .kit-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  margin-top: var(--space-md);
  font-size: 14px;
}
.kit-sources .mono {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--lp-faint);
}
.kit-sources a {
  color: var(--color-body);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 4px;
}
.kit-sources a:hover {
  color: var(--color-accent);
}

/* ---- narrow screens ---- */
@media (max-width: 1100px) {
  .kit-cards-3,
  .kit-cards-4,
  .kit-cards-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kit-cards-3 > :last-child {
    grid-column: 1 / -1;
  }
  .kit-cards-6 > :last-child {
    grid-column: auto;
  }
}
@media (max-width: 1023px) {
  .kit-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kit-prose-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}
@media (max-width: 760px) {
  .kit-library,
  .kit-library-shared .kit-library-list {
    grid-template-columns: 1fr;
  }
  .kit-cards-2,
  .kit-cards-3,
  .kit-cards-4,
  .kit-cards-6 {
    grid-template-columns: 1fr;
  }
}
@container kit-scene (max-width: 560px) {
  .kd-boundary,
  .kd-lanes,
  .kd-path {
    grid-template-columns: 1fr;
  }
  .kd-wall {
    flex-direction: row;
    min-height: 34px;
  }
  .kd-wall::before {
    inset: 50% 0;
    border-left: 0;
    border-top: 1.5px dashed rgba(74, 163, 255, 0.7);
  }
  /* Across the picture, the rule's note reads across beside the mark. */
  .kd-wall-note {
    padding: 0 6px;
    writing-mode: horizontal-tb;
  }
  .kd-decision {
    grid-template-columns: 1fr;
  }
}
@container kit-scene (max-width: 400px) {
  .kd-places,
  .kd-library {
    grid-template-columns: 1fr;
  }
  .kd-shelf {
    min-height: 0;
  }
  .kd-step-where {
    display: none;
  }
}

/* ================================================================================================
   Security, Customers, Resources and Docs (Xinyu, October 4, 2026). The same kit, plus the parts
   these pages add: the network and stack diagrams, open questions, role ticks, detail rows, case
   facts, the use-case library, the value calculator, comparison columns, downloads and the docs
   layout. Colours come from the tokens, so the light appearance follows without its own rules.
   ================================================================================================ */

/* A hero with no picture runs its copy across the page and keeps its proof strip. */
.kit-hero:not(:has(> figure)) {
  grid-template-columns: minmax(0, 1fr);
}
body.page-inner main .kit-hero:not(:has(> figure)) .lead {
  max-width: 62ch;
}
.kit-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 8px;
  border: 1px solid rgba(74, 163, 255, 0.45);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---- network diagram: one boundary, the internet outside it ---- */
.kd-network {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.42fr);
  align-items: stretch;
  gap: 0;
}
.kd-net-inside {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid rgba(74, 163, 255, 0.55);
  border-radius: 10px;
  background: rgba(74, 163, 255, 0.06);
}
.kd-net-inside > .kd-zone-label {
  color: var(--lp-eyebrow);
}
.kd-net-matrix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.5);
}
.kd-net-parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kd-net-parts li {
  padding: 6px 8px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-ink);
}
.kd-network .kd-node.is-muted,
.kd-stack .kd-node.is-muted {
  text-decoration: none;
}
.kd-net-edge {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
}
.kd-net-edge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--color-rule-strong);
}
.kd-net-edge span {
  position: relative;
  padding: 2px 4px;
  background: var(--color-paper);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.kd-net-outside {
  display: grid;
  align-self: center;
  align-content: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(157, 183, 220, 0.26);
  border-radius: 10px;
}
@container kit-scene (max-width: 520px) {
  .kd-network {
    grid-template-columns: minmax(0, 1fr);
  }
  .kd-net-edge {
    width: auto;
    height: 34px;
  }
  .kd-net-edge::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    border-top: 0;
    border-left: 1.5px dashed var(--color-rule-strong);
  }
  .kd-net-edge span {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* ---- stack diagram: the layers on the system ---- */
.kd-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 14px;
  align-items: stretch;
}
.kd-stack-layers {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kd-stack-layers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--lp-glass-rule);
  border-radius: 8px;
  background: rgba(12, 15, 22, 0.6);
}
.kd-stack-layers li.is-lit {
  border-color: rgba(74, 163, 255, 0.45);
  background: rgba(74, 163, 255, 0.1);
}
.kd-stack-side {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  border: 1px dashed rgba(74, 163, 255, 0.45);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-ink);
}
.kd-stack-side svg {
  color: var(--color-accent);
}
@container kit-scene (max-width: 520px) {
  .kd-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the approvals strip, as on How Matrix works ---- */
.kit-flow {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit-flow li {
  position: relative;
  padding: 26px var(--space-sm) 0 0;
  color: var(--color-body);
}
.kit-flow li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-rule-strong);
}
.kit-flow li::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper);
}
.kit-flow li:nth-last-child(2) {
  color: var(--color-ink);
}
.kit-flow li:nth-last-child(2)::after {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
@media (max-width: 767px) {
  .kit-flow {
    grid-auto-flow: row;
  }
  .kit-flow li {
    padding: 0 0 14px 26px;
  }
  .kit-flow li::before {
    top: 6px;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }
}

/* ---- questions with their answers, all open ---- */
.kit-faq {
  display: grid;
  gap: var(--space-xl);
}
body.page-inner main .kit-faq-label {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lp-eyebrow);
}
.kit-faq dl {
  margin: 0;
  border-top: 1px solid var(--color-rule);
}
.kit-faq-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule);
}
.kit-faq-item dt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
.kit-faq-item dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}
.kit-faq-item dd a,
.kit-faq-end a:not(.text-link) {
  color: var(--color-ink);
}
.kit-faq-short + .text-link {
  margin-top: var(--space-lg);
}
body.page-inner main .kit-faq-end {
  margin-top: var(--space-xl);
  color: var(--color-body);
}
.kit-faq-end .text-link {
  display: inline-flex;
}
@media (max-width: 767px) {
  .kit-faq-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---- yes/no grid ---- */
.kit-ticks {
  overflow-x: auto;
}
.kit-ticks table {
  width: 100%;
  border-collapse: collapse;
}
.kit-ticks caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.kit-ticks :is(th, td) {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-rule);
  text-align: center;
  font-size: 15px;
}
.kit-ticks thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kit-ticks tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
}
.kit-ticks td.is-yes {
  color: var(--color-accent);
}
.kit-ticks td.is-no {
  color: var(--lp-faint);
}
.kit-ticks-label {
  display: none;
}
@media (max-width: 767px) {
  .kit-ticks thead {
    display: none;
  }
  .kit-ticks tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .kit-ticks tbody th {
    grid-column: 1 / -1;
    padding: 0 0 6px;
    border: 0;
  }
  .kit-ticks td {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    text-align: left;
  }
  .kit-ticks-label {
    display: inline;
    font-size: 11px;
    color: var(--color-muted);
  }
}

/* ---- plain lists and the review kit ---- */
.kit-list {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.kit-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-body);
}
.kit-list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-accent);
}
.kit-ticklist li::before {
  width: 10px;
  height: 5px;
  top: 0.5em;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
}
.kit-review {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.kit-review .ind-case-label {
  display: block;
  margin-bottom: var(--space-sm);
}
.kit-review .ind-accountability {
  margin: 0;
}
@media (max-width: 900px) {
  .kit-review {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- detail rows: a short title, then the detail ---- */
.kit-detail {
  border-top: 1px solid var(--color-rule);
}
.kit-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: 110px;
}
body.page-inner main .kit-detail-row h3 {
  margin: 0;
  font-size: 18px;
  color: var(--color-ink);
}
body.page-inner main .kit-detail-row p {
  margin: 0 0 12px;
  color: var(--color-body);
}
.kit-detail-row .kit-list {
  margin-bottom: 12px;
}
.kit-detail-body > :last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .kit-detail-row {
    grid-template-rows: auto 1fr;
    row-gap: 14px;
  }
  .kit-detail-row > h3 {
    grid-area: 1 / 1;
  }
  .kit-detail-body {
    grid-area: 1 / 2 / 3 / 3;
  }
  .kit-detail-go {
    grid-area: 2 / 1;
  }
}
@media (max-width: 767px) {
  .kit-detail-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
.kit-written {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-rule-strong);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
}
.kit-mapping + .kit-mapping {
  margin-top: var(--space-xl);
}
body.page-inner main .kit-mapping-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-sm);
  font-size: 20px;
  color: var(--color-ink);
}
.kit-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.kit-split .story-heading {
  margin: 0;
}
body.page-inner main .kit-split p {
  margin: 0 0 var(--space-md);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-body);
}
@media (max-width: 900px) {
  .kit-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}

/* ---- customers ---- */
.cs-hero.kit-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.cs-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
body.page-inner main .cs-steps p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
}
body.page-inner main .cs-headline {
  margin: var(--space-md) 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}
.cs-facts {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.cs-facts dl {
  display: grid;
  margin: 0;
}
.cs-facts dl > div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-rule);
}
.cs-facts dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cs-facts dd {
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
}
.cs-results + .ev-tag {
  margin-top: var(--space-md);
}
.cs-how .ind-window {
  max-width: 920px;
}
.cs-cards .ind-overview-card .ev-tag,
.cs-small-card .ev-tag {
  margin-top: auto;
}
.cs-small-card {
  border-style: dashed !important;
}
.cs-small-card:hover {
  background: var(--color-surface) !important;
}
.cs-challenge .story-heading p {
  max-width: 68ch;
}
@media (max-width: 1023px) {
  .cs-hero.kit-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .cs-facts dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---- resources hub ---- */
.rs-stages ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}
.rs-stages a {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-top: 2px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-body);
  text-decoration: none;
  transition: background var(--dur-feedback) var(--ease-out);
}
.rs-stages a:hover {
  background: var(--color-surface-raised);
}
.rs-stages .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-eyebrow);
}
.rs-stages strong {
  font-size: 18px;
  color: var(--color-ink);
}
.rs-stage {
  scroll-margin-top: 100px;
}
@media (max-width: 900px) {
  .rs-stages ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .rs-stages ol {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- downloads ---- */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  scroll-margin-top: 110px;
}
body.page-inner main .dl-card h3 {
  margin: 0;
  font-size: 20px;
  color: var(--color-ink);
}
body.page-inner main .dl-card p {
  margin: 0;
  font-size: 15px;
  color: var(--color-body);
}
.dl-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-muted);
}
@media (max-width: 1100px) {
  .dl-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .dl-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- use-case library ---- */
.uc-filters {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.uc-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.uc-filter legend {
  float: left;
  width: 7em;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.uc-chip input {
  position: absolute;
  opacity: 0;
}
.uc-chip span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  font-size: 14px;
  color: var(--color-body);
  cursor: pointer;
}
.uc-chip input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-ink);
}
.uc-chip input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
body.page-inner main .uc-count {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
}
.uc-clear {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-ink);
  text-decoration: underline;
  cursor: pointer;
}
.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.uc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.uc-card[hidden] {
  display: none;
}
.uc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.uc-tags > .mono,
.uc-role,
.uc-layer {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.uc-tags > .mono {
  color: var(--lp-eyebrow);
}
body.page-inner main .uc-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-ink);
}
.uc-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.uc-card dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.uc-card dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-body);
}
.uc-foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
}
body.page-inner main .uc-empty {
  margin-top: var(--space-lg);
  color: var(--color-body);
}
@media (max-width: 1100px) {
  .uc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .uc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .uc-filter legend {
    float: none;
    width: 100%;
  }
}

/* ---- value calculator ---- */
.vc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.vc-inputs,
.vc-results {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.vc-results {
  border-color: rgba(74, 163, 255, 0.45);
  background: var(--color-accent-tint);
}
.vc-field {
  display: grid;
  gap: 8px;
}
.vc-field label {
  font-size: 15px;
  color: var(--color-ink);
}
.vc-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vc-control input[type='number'] {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-rule-strong);
  background: var(--field-bg);
  font: inherit;
  font-size: 17px;
  color: var(--color-ink);
}
.vc-control input[type='range'] {
  flex: 1;
  accent-color: var(--color-accent);
}
.vc-affix,
.vc-range-value {
  min-width: 3em;
  font-size: 15px;
  color: var(--color-ink);
}
.vc-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-result {
  display: grid;
  gap: 2px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.vc-result strong {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.vc-result span {
  font-size: 16px;
  color: var(--color-ink);
}
.vc-result small {
  font-size: 11px;
  color: var(--color-muted);
}
body.page-inner main .vc-results p {
  margin: 0;
  color: var(--color-body);
}
.vc-results .ind-hero-actions {
  margin-top: 0;
}
.vc-notes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: var(--space-sm) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}
@media (max-width: 900px) {
  .vc {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- comparisons ---- */
.cmp-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.cmp-when > div {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.cmp-when > .is-matrix {
  border-color: rgba(74, 163, 255, 0.45);
  background: var(--color-accent-tint);
}
body.page-inner main .cmp-when h3 {
  margin: 0 0 var(--space-sm);
  font-size: 19px;
  color: var(--color-ink);
}
.cmp-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--color-body);
}
.kit-cards-compare {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .cmp-when,
  .kit-cards-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kit-source-list .ev-tag {
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- guides ---- */
.gd-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: var(--space-md);
  font-size: 15px;
}
.gd-source .mono {
  font-size: 12px;
  color: var(--color-muted);
}
.gd-source a {
  color: var(--color-ink);
}

/* ---- download form ---- */
.dl-gate {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  color: var(--color-body);
}
.dl-gate::backdrop {
  background: rgba(3, 5, 9, 0.72);
}
.dl-form,
.dl-done {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 28px;
}
.dl-gate h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-ink);
}
.dl-lead,
.dl-done p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.dl-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 24px;
  color: var(--color-muted);
  cursor: pointer;
}
.dl-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--color-ink);
}
.dl-field input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-rule-strong);
  background: var(--field-bg);
  font: inherit;
  color: var(--color-ink);
}
.dl-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.dl-consent a {
  color: var(--color-ink);
}
.dl-message {
  min-height: 1.2em;
  margin: 0;
  font-size: 14px;
  color: var(--color-error);
}
.dl-submit {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  background: var(--action-fill);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--action-ink);
  cursor: pointer;
}
.dl-submit:hover {
  background: var(--action-fill-hover);
}
.dl-submit:disabled {
  opacity: 0.6;
}
.dl-done .text-link {
  justify-self: start;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---- docs ---- */
.docs-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg) var(--space-section);
}
.docs-nav {
  position: sticky;
  top: 110px;
  align-self: start;
  display: grid;
  gap: var(--space-md);
}
.docs-home {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.docs-nav-group > .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-eyebrow);
}
.docs-nav ul {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.docs-nav a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* Every entry keeps the site's 44 px target. */
  min-height: 44px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--color-body);
  text-decoration: none;
}
.docs-nav a:hover,
.docs-nav a[aria-current] {
  background: var(--color-surface-raised);
  color: var(--color-ink);
}
.docs-nav a[aria-current] {
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.docs-badge {
  padding: 1px 6px;
  border: 1px solid var(--color-rule-strong);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.docs-head h1 {
  margin: 12px 0;
}
.docs-updated {
  font-size: 12px;
  color: var(--color-muted);
}
.docs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.docs-article h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: 26px;
  scroll-margin-top: 110px;
}
.docs-article h2:first-child {
  margin-top: 0;
}
body.page-inner main .docs-article p {
  color: var(--color-body);
}
.docs-toc {
  position: sticky;
  top: 110px;
  align-self: start;
  font-size: 13px;
}
.docs-toc .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.docs-toc ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.docs-toc a {
  color: var(--color-body);
  text-decoration: none;
}
.docs-toc a:hover {
  color: var(--color-ink);
}
.docs-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.docs-group-card {
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
body.page-inner main .docs-group-card h2 {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lp-eyebrow);
}
.docs-group-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-group-card a {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-body);
  text-decoration: none;
}
.docs-group-card a strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
}
.docs-group-card a > span:last-child {
  font-size: 14px;
}
@media (max-width: 1000px) {
  .docs-shell,
  .docs-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-main {
    display: contents;
  }
  .docs-main > .docs-head {
    order: -1;
  }
  .docs-nav,
  .docs-toc {
    position: static;
  }
  .docs-toc {
    order: -1;
  }
}
@media (max-width: 600px) {
  .docs-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Markdown documents: Docs and the regulation guides (templates/markdown.mjs) ---- */
.docs-article :is(ul, ol) {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--space-md);
  padding-left: 22px;
  color: var(--color-body);
}
.docs-article li {
  font-size: 16px;
  line-height: 1.6;
}
.docs-article li::marker {
  color: var(--color-muted);
}
.docs-article.article-checklist-story {
  max-width: 75ch;
}
.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}
.article-hero-copy {
  min-width: 0;
}
.article-hero h1 [data-l]:not([hidden]),
.article-hero h1 em {
  display: block;
}
.article-hero h1 br {
  display: none;
}
body.page-inner main .article-hero .lead {
  max-width: 65ch;
}
body.page-inner main .article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: var(--space-md);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-muted);
}
.article-dates > span {
  white-space: nowrap;
}
.article-cover {
  min-width: 0;
  margin: 0;
}
.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule-strong);
}
.article-cover figcaption {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.65;
}
.docs-article.article-reading-story {
  max-width: 75ch;
}
@media (max-width: 1023px) {
  .article-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
}
.docs-article .article-checklist {
  margin-top: var(--space-md);
}
.article-visual {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-rule-strong);
  border-bottom: 1px solid var(--color-rule);
}
body.page-inner main .article-visual .av-title {
  margin: 0 0 var(--space-lg);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.av-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.av-process-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.av-process-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.av-process-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.av-art {
  display: block;
  flex: none;
  width: 112px;
  height: 96px;
  color: var(--color-accent);
  pointer-events: none;
}
.av-art-surface {
  fill: var(--color-surface);
}
.av-art-muted {
  stroke: var(--color-muted);
}
.av-step {
  position: relative;
  min-width: 0;
  padding: 0 var(--space-md) 0 0;
  overflow-wrap: anywhere;
}
.av-step > .av-art {
  margin-bottom: var(--space-md);
}
.av-step::before {
  position: absolute;
  top: 48px;
  right: 0;
  left: 112px;
  border-top: 1px solid var(--color-rule-strong);
  content: '';
}
.av-step:last-child::before {
  display: none;
}
.av-step:last-child {
  padding-right: 0;
}
.av-step::after {
  display: none;
}
.av-step-number {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 12px;
  color: var(--color-muted);
}
.av-step strong {
  display: block;
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
body.page-inner main .av-step p {
  margin: var(--space-xs) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}
.av-caption {
  max-width: 75ch;
  margin-top: var(--space-lg);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
}
.av-sources {
  margin-top: var(--space-sm);
}
.av-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.av-tree-item[data-branch] {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-lg);
  align-items: center;
}
.av-tree .av-tree-children {
  display: grid;
  gap: var(--space-md);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-accent);
}
.av-tree-item,
.av-tree-node {
  position: relative;
  min-width: 0;
}
.av-tree-children > .av-tree-item > .av-tree-node::before {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-md));
  width: var(--space-md);
  border-top: 1px solid var(--color-accent);
  content: '';
}
.av-tree-item[data-branch] > .av-tree-node::after {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--space-lg));
  width: var(--space-lg);
  border-top: 1px solid var(--color-accent);
  content: '';
}
.av-tree-node {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-xs) 0;
  overflow-wrap: anywhere;
}
.av-tree-node > .av-art {
  width: 80px;
  height: 80px;
}
.av-tree-root > .av-tree-item > .av-tree-node {
  grid-template-columns: 112px minmax(0, 1fr);
}
.av-tree-root > .av-tree-item > .av-tree-node > .av-art {
  width: 112px;
  height: 96px;
}
.av-tree-node strong,
.av-document strong {
  display: block;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
body.page-inner main .av-detail p,
body.page-inner main .av-document p {
  margin: var(--space-xs) 0 0;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.6;
}
.av-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule-strong);
}
.av-detail {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  min-width: 0;
}
.av-detail > .av-art {
  width: 40px;
  height: 36px;
}
body.page-inner main .av-detail p {
  margin: 0;
}
.av-tree + .av-details > .av-detail:first-child {
  grid-column: 1 / -1;
  max-width: 80ch;
}
.av-document-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.av-document-panels-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.av-document {
  position: relative;
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}
.av-document::before {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid var(--color-rule-strong);
  border-left: 1px solid var(--color-rule-strong);
  background: var(--color-paper);
  content: '';
}
.av-document > .av-art {
  margin-bottom: var(--space-md);
}
.av-document[data-document-kind='conversation'] {
  padding: 0 var(--space-md) var(--space-md) 0;
  border: 0;
  background: transparent;
}
.av-document[data-document-kind='conversation']::before {
  display: none;
}
.av-document[data-document-kind='conversation'] > .av-art {
  width: 140px;
  height: 120px;
}
.av-document strong {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.av-document mark {
  padding: 1px 0;
  border-bottom: 1px solid var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-ink);
}
body.page-inner main .av-document p {
  white-space: pre-line;
}
.av-annotations {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-accent);
}
.av-annotations > div {
  display: grid;
  grid-template-columns: minmax(120px, 26%) minmax(0, 1fr);
  gap: var(--space-md);
}
.av-annotations dt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  min-width: 0;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.av-annotations dt > .av-art {
  width: 40px;
  height: 36px;
}
.av-annotations dd {
  min-width: 0;
  margin: 0;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.av-example-trace .av-document-panels {
  position: relative;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-accent);
}
.av-example-trace .av-document {
  position: relative;
}
.av-example-trace .av-document::after {
  position: absolute;
  bottom: calc(-1 * var(--space-md));
  left: 50%;
  height: var(--space-md);
  border-left: 1px solid var(--color-accent);
  content: '';
}
.av-example-trace .av-annotations {
  margin-top: 0;
  border-top: 0;
}
@media (max-width: 1100px) {
  .av-tree-item[data-branch] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .av-tree .av-tree-children {
    margin-left: var(--space-sm);
  }
  .av-tree-item[data-branch] > .av-tree-node::after {
    top: 100%;
    right: auto;
    left: var(--space-sm);
    width: 0;
    height: var(--space-md);
    border-top: 0;
    border-left: 1px solid var(--color-accent);
  }
  .av-tree-root > .av-tree-item > .av-tree-node {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .av-tree-root > .av-tree-item > .av-tree-node > .av-art {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
  }
}
@media (max-width: 760px) {
  .av-document-panels,
  .av-document-panels-3,
  .av-annotations > div,
  .av-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .av-annotations > div {
    gap: var(--space-xs);
  }
  .av-example-trace .av-document::after {
    display: none;
  }
}
body.page-inner main .av-axis-label {
  margin: 0 0 var(--space-sm);
  font-size: 16px;
  color: var(--color-body);
}
.av-scale {
  display: flex;
  justify-content: space-between;
  margin: 0 120px var(--space-sm) calc(30% + var(--space-md));
  font-size: 13px;
  color: var(--color-muted);
}
.av-chart dl {
  display: grid;
  gap: var(--space-md);
  margin: 0;
}
.av-chart-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}
.av-chart-row dt {
  min-width: 0;
  font-size: 16px;
  color: var(--color-body);
  overflow-wrap: anywhere;
}
.av-chart-row dd {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
}
.av-bar-track {
  display: block;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 16px;
}
.av-track {
  fill: var(--color-surface-raised);
}
.av-bar {
  fill: var(--color-accent);
}
.av-chart-value {
  flex: 0 0 96px;
  text-align: end;
  font-size: 14px;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.av-missing {
  font-size: 16px;
  color: var(--color-body);
}
@media (max-width: 1100px) {
  .av-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .av-step {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: var(--space-md);
    padding: 0 0 var(--space-lg);
  }
  .av-step > .av-art {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 80px;
    height: 80px;
    margin-bottom: 0;
  }
  .av-step-number,
  .av-step strong {
    grid-column: 2;
  }
  .av-step::before {
    top: 80px;
    right: auto;
    bottom: calc(-1 * var(--space-md));
    left: 40px;
    width: 0;
    border-top: 0;
    border-left: 1px solid var(--color-rule-strong);
  }
  .av-step::after {
    top: 5px;
  }
}
@media (max-width: 760px) {
  .av-chart-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
  .av-scale {
    margin-left: 0;
  }
}
.docs-article h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 19px;
}
body.page-inner main .docs-article p em {
  color: var(--color-muted);
}
.docs-article code {
  padding: 1px 6px;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--color-ink);
}
.md-table,
.md-table.labeled-scroll {
  margin: 0 0 var(--space-md);
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}
.md-table:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
.md-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
.md-table :is(th, td) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.md-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.md-table tbody th {
  font-weight: 500;
  color: var(--color-ink);
}
.md-table td {
  color: var(--color-body);
}
/* The Docs and guide tables have at most three columns: on a phone they fit the column and wrap,
   instead of scrolling sideways with their text cut off at the edge and no sign that they scroll. */
@media (max-width: 600px) {
  .md-table table {
    min-width: 0;
  }
  .md-table :is(th, td) {
    padding: 10px 8px;
  }
}
/* A value still to be supplied: an empty dashed slot, never the word "TBD". */
.md-pending {
  display: inline-block;
  width: 3.2em;
  height: 0.9em;
  border-bottom: 1px dashed var(--color-rule-strong);
  vertical-align: baseline;
}
body.page-inner main .gd-body {
  padding-top: var(--space-lg);
}
.gd-body .docs-body {
  margin-top: 0;
}
.gd-body .kit-library-list li {
  display: block;
}
.gd-body .kit-library-list .ev-tag {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}
.gd-source .ev-tag + .mono {
  margin-left: 4px;
}