/* ============================================
   SPIRE LIGHT — DATASET PAGE (datasheet layout)
   ============================================

   Replaces the old three-card sidebar + twelve-stacked-block product page.
   The complaint it answers is navigation: the previous page had three
   competing "get a sample" surfaces, two identical full-height forms in the
   middle of the column, and the same spec values printed in the sidebar, the
   specifications table and the FAQ. Nothing told you where you were.

   The layout here is a single measured column with numbered sections and a
   sticky index bar, in the "precise instrument" register the landing page
   uses: ink headings, hairline rules, mono for every label and numeral, and
   cyan reserved for live signal (active section, primary action, toggles).
   ============================================ */

.dsx {
  --dsx-measure: 780px;
  --dsx-rule: var(--hairline-soft);
  --dsx-rule-strong: var(--hairline);

  /* Vertical rhythm (--dsx-tight … --dsx-major) and the Open Props size
     scale under it both come from css/props.css, which every page using
     this stylesheet must load first. */
  padding-bottom: var(--dsx-major);
  background:
    radial-gradient(ellipse 900px 420px at 50% -140px, var(--cyan-50), transparent 70%),
    var(--bg-deep);
}

/* The shell holds two columns: a fixed index rail in the left gutter and the
   reading column. Everything the buyer reads keeps one left edge at the body
   column, so the rail never competes with the content for the margin. */
.dsx__inner {
  max-width: 1080px;
}

.dsx-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, var(--dsx-measure));
  gap: var(--dsx-sect);
  align-items: start;
}
.dsx-body { min-width: 0; }

@media (max-width: 1040px) {
  .dsx-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */

.dsx .breadcrumb {
  margin-bottom: var(--size-7);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}

/* ── Hero ───────────────────────────────────────────────────────── */

.dsx-hero {
  padding-bottom: var(--dsx-sect);
}

/* Kicker: category, language and delivery model on one mono line instead of
   a row of coloured pills. */
.dsx-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dsx-tight) var(--dsx-item);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--cyan-700);
}
.dsx-hero__kicker span:not(:last-child)::after {
  content: "/";
  margin-left: var(--size-2);
  color: var(--border-light);
}
.dsx-hero__kicker .dsx-hero__kicker-muted { color: var(--text-dim); }

.dsx-hero__title {
  margin: var(--dsx-item) 0 0;
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.dsx-hero__lead {
  max-width: 62ch;
  margin: var(--dsx-group) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-body);
}
.dsx-hero__lead p { margin: 0; }
.dsx-hero__lead p + p { margin-top: var(--dsx-item); }
.dsx-hero__lead strong { color: var(--ink); font-weight: var(--fw-semibold); }

.dsx-hero__note {
  max-width: 62ch;
  margin: var(--dsx-group) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}

.dsx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsx-item);
  margin-top: var(--dsx-block);
}

/* ── Key-figure readout ─────────────────────────────────────────── */
/* The four numbers a buyer scans for, as an instrument strip rather than a
   pricing card floating beside the text. Mono numerals, hairline cells. */

.dsx-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--dsx-block) 0 0;
  border: 1px solid var(--dsx-rule-strong);
  background: var(--bg-deep);
}
.dsx-readout__cell {
  padding: var(--dsx-group) var(--dsx-group);
  border-right: 1px solid var(--dsx-rule);
}
.dsx-readout__cell:last-child { border-right: 0; }
.dsx-readout__key {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.dsx-readout__val {
  display: block;
  margin-top: var(--dsx-tight);
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dsx-readout__unit {
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
@media (max-width: 620px) {
  .dsx-readout { grid-template-columns: repeat(2, 1fr); }
  .dsx-readout__cell { border-bottom: 1px solid var(--dsx-rule); }
  .dsx-readout__cell:nth-child(2n) { border-right: 0; }
  .dsx-readout__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── Section index rail ─────────────────────────────────────────── */
/* Previously a full-width sticky bar pinned under the site header, which read
   as a second navigation menu stacked on the first. As a rail it sits beside
   the text, numbered to match the section headings. */

.dsx-index {
  position: sticky;
  top: calc(var(--header-height) + var(--dsx-block));
  padding-top: var(--dsx-tight);
}
.dsx-index__title {
  margin: 0 0 var(--dsx-item);
  padding-bottom: var(--dsx-item);
  border-bottom: 1px solid var(--dsx-rule);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-dim);
}
.dsx-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dsx-index__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--dsx-tight);
  padding: var(--dsx-tight) 0 var(--dsx-tight) var(--dsx-item);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.dsx-index__link:hover { color: var(--ink); }
/* Active marker is the one place cyan appears in the rail: it is live state. */
.dsx-index__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent-bright);
  transform: translateY(-50%);
  transition: height var(--dur-normal) var(--ease-out);
}
.dsx-index__link[aria-current="true"] {
  color: var(--ink);
  font-weight: var(--fw-medium);
}
.dsx-index__link[aria-current="true"]::before { height: 100%; }
.dsx-index__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.dsx-index__link[aria-current="true"] .dsx-index__num { color: var(--accent-bright); }
/* Was solid ink: a black slab in the left gutter, the same objection the
   pricing panel drew. The hero already carries the loud primary, so in the
   rail this only has to stay reachable. Outlined. */
.dsx-index__cta {
  display: block;
  margin-top: var(--dsx-block);
  padding: 0.625rem var(--dsx-item);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--cyan-700);
  background: transparent;
  border: 1px solid var(--dsx-rule-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.dsx-index__cta:hover {
  border-color: var(--accent);
  background: var(--cyan-50);
  color: var(--cyan-700);
}

/* Below the two-column breakpoint the rail has nowhere to go, so it lies down
   as a scrollable strip at the top of the column. Deliberately not sticky: a
   pinned secondary bar directly under the site header is what this replaced. */
@media (max-width: 1040px) {
  .dsx-index {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--size-3);
    margin-bottom: var(--size-8);
    padding: 0;
    border-top: 1px solid var(--dsx-rule-strong);
    border-bottom: 1px solid var(--dsx-rule-strong);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dsx-index::-webkit-scrollbar { display: none; }
  .dsx-index__title { display: none; }
  .dsx-index__list {
    display: flex;
    align-items: center;
    gap: var(--size-5);
  }
  .dsx-index__link {
    padding: var(--size-2) 0;
    white-space: nowrap;
  }
  .dsx-index__link::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    transform: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .dsx-index__link[aria-current="true"]::before { height: 2px; opacity: 1; }
  .dsx-index__num { display: none; }
  .dsx-index__cta { display: none; }
}

/* ── Sections ───────────────────────────────────────────────────── */

.dsx-section {
  padding-top: var(--dsx-sect);
  scroll-margin-top: calc(var(--header-height) + var(--dsx-block));
}
.dsx-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--dsx-item);
  margin-bottom: var(--dsx-block);
}
.dsx-section__idx {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
}
.dsx-section__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
/* Hairline that runs from the title to the right edge of the measure, so the
   eye reads each section as a ruled band on a datasheet. */
.dsx-section__rule {
  flex: 1;
  height: 1px;
  background: var(--dsx-rule);
  transform: translateY(-4px);
}

.dsx-prose {
  max-width: 68ch;
  color: var(--text-body);
  line-height: var(--lh-body);
}
.dsx-prose p { margin: 0; }
.dsx-prose p + p { margin-top: var(--dsx-item); }
.dsx-prose strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* ── Specification datasheet ────────────────────────────────────── */
/* One table. The old page split these values across a sidebar card and a
   separate specifications block, so formats and capacity printed twice. */

.dsx-spec {
  margin: 0;
  border-top: 1px solid var(--dsx-rule-strong);
}
.dsx-spec__row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: var(--dsx-group);
  align-items: baseline;
  padding: var(--dsx-item) 0;
  border-bottom: 1px solid var(--dsx-rule);
}
.dsx-spec__key {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--text-muted);
}
.dsx-spec__val {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-strong);
}
.dsx-spec__val--mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dsx-spec__sep {
  margin: 0 var(--size-2);
  color: var(--border-light);
}
@media (max-width: 600px) {
  .dsx-spec__row {
    grid-template-columns: 1fr;
    gap: var(--dsx-tight);
  }
}

/* Status footnote: the three custom-collection caveats, previously their own
   sidebar card. They qualify the table, so they sit under it. */
.dsx-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsx-tight) var(--dsx-group);
  margin-top: var(--dsx-group);
  padding-top: var(--dsx-item);
}
.dsx-status__item {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.dsx-status__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--size-2);
  vertical-align: 2px;
  background: var(--accent-bright);
}

/* ── Pricing ────────────────────────────────────────────────────── */
/* Was a solid ink panel, which landed as a black box dropped into an
   otherwise light page. The figure now carries itself on paper, in the same
   register as the hero readout. */

.dsx-price {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: var(--dsx-block);
  align-items: start;
}
@media (max-width: 720px) {
  .dsx-price { grid-template-columns: 1fr; gap: var(--dsx-block); }
}

.dsx-price__figure {
  padding-left: var(--dsx-group);
  border-left: 2px solid var(--accent-bright);
}
.dsx-price__amount {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.dsx-price__unit {
  display: block;
  max-width: 22ch;
  margin-top: var(--dsx-item);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}
.dsx-price__min {
  display: block;
  margin-top: var(--dsx-group);
  padding-top: var(--dsx-item);
  border-top: 1px solid var(--dsx-rule);
  font-size: var(--fs-xs);
  color: var(--cyan-700);
}
.dsx-price__detail { min-width: 0; }

.dsx-bands {
  width: 100%;
  border-collapse: collapse;
}
.dsx-bands caption {
  padding-bottom: var(--dsx-item);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-align: left;
  color: var(--text-muted);
}
.dsx-bands tr { border-top: 1px solid var(--dsx-rule); }
.dsx-bands tr:last-child { border-bottom: 1px solid var(--dsx-rule); }
.dsx-bands td {
  padding: var(--dsx-item) 0;
  font-size: var(--fs-small);
  color: var(--text-strong);
}
.dsx-bands td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}
.dsx-bands__unit { color: var(--text-dim); }
.dsx-price__note {
  margin-top: var(--dsx-group);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Request: sample and quote as two tabs, one block ───────────── */
/* Both panels render open in the HTML so the copy stays crawlable and the
   page still works with no JS; the script below collapses them into tabs. */

/* The two request paths are a choice, so they get a segmented control on a
   framed panel. As two flat tab labels over an unframed form the block had no
   edges and read as a stray pair of links. */
.dsx-request {
  padding: var(--dsx-block);
  border: 1px solid var(--dsx-rule-strong);
  background: var(--bg-deep);
}
@media (max-width: 600px) {
  .dsx-request { padding: var(--dsx-group); }
}
.dsx-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--dsx-block);
  padding: 3px;
  border: 1px solid var(--dsx-rule);
  border-radius: var(--radius-md);
  background: var(--bg-section);
}
.dsx-tab {
  padding: 0.5rem 1.25rem;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.dsx-tab:hover { color: var(--ink); }
.dsx-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--bg-deep);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.10);
}
.dsx-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dsx-panel { scroll-margin-top: calc(var(--header-height) + 56px); }
/* No-JS: each panel keeps a visible heading. The script hides these once the
   tab strip is live, because the tab label then names the panel. */
.dsx-panel__head {
  margin: 0 0 var(--size-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.dsx-panel + .dsx-panel {
  margin-top: var(--dsx-block);
  padding-top: var(--dsx-block);
  border-top: 1px solid var(--dsx-rule);
}
.dsx-tabs[data-live="true"] ~ .dsx-panel + .dsx-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Form surfaces: flush to the column, no card. The old page wrapped each form
   in a bordered panel, which made two large boxes fight for attention. */
.dsx .sample-request-section {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.dsx .sample-request-form .form-field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-body);
}
.dsx .sample-request-form input[type="text"],
.dsx .sample-request-form input[type="email"],
.dsx .sample-request-form select,
.dsx .sample-request-form textarea {
  border-radius: var(--radius-sm);
  border-color: var(--dsx-rule-strong);
  background: var(--bg-deep);
}
.dsx .sample-request-form input:focus,
.dsx .sample-request-form select:focus,
.dsx .sample-request-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}
.dsx .form-disclosure {
  border-color: var(--dsx-rule-strong);
  border-radius: var(--radius-sm);
}

/* ── Locale switcher ────────────────────────────────────────────── */

.dsx .region-select {
  max-width: none;
  margin-top: 0;
  border-color: var(--dsx-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
}
.dsx .region-select__summary {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  padding: var(--size-3) var(--size-5);
}
.dsx .region-select__panel { padding: 0 var(--size-5) var(--size-3); }
.dsx .region-select__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  max-height: 340px;
}
.dsx .region-select__link { border-radius: var(--radius-sm); }
.dsx .region-select__code { font-family: var(--font-mono); }

/* ── FAQ ────────────────────────────────────────────────────────── */

.dsx .faq-list { border-top-color: var(--dsx-rule-strong); }
.dsx .faq-item { border-bottom-color: var(--dsx-rule); }

/* ── Add-on / affect block ──────────────────────────────────────── */

.dsx-addon {
  padding: var(--size-7);
  border: 1px solid var(--dsx-rule-strong);
  border-left: 2px solid var(--accent-bright);
  background: var(--bg-section);
}
.dsx-addon h2,
.dsx-addon h3 {
  margin: 0 0 var(--size-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.dsx-addon p { margin: var(--size-2) 0; color: var(--text-body); line-height: var(--lh-body); }
.dsx-addon ul {
  list-style: none;
  margin: var(--size-3) 0;
  padding: 0;
}
.dsx-addon li {
  position: relative;
  padding-left: var(--size-5);
  margin: var(--size-2) 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-body);
}
.dsx-addon li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--border-light);
}
.dsx-addon a { color: var(--cyan-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer link rails: related configurations and guides ───────── */

.dsx-rail { padding-top: var(--dsx-sect); }
/* The first block after the numbered sections opens the reference area: the
   pages you go to next, not facts about this configuration. */
.dsx-section + .dsx-rail {
  margin-top: var(--dsx-major);
  padding-top: var(--dsx-sect);
  border-top: 1px solid var(--dsx-rule-strong);
}
.dsx-rail__title {
  margin: 0 0 var(--dsx-item);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.dsx-links {
  border-top: 1px solid var(--dsx-rule-strong);
}
.dsx-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dsx-group);
  padding: var(--dsx-group) 0;
  border-bottom: 1px solid var(--dsx-rule);
  text-decoration: none;
  transition: padding-left var(--dur-normal) var(--ease-out);
}
.dsx-link:hover { padding-left: var(--dsx-tight); }
.dsx-link__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: 1.4;
}
.dsx-link:hover .dsx-link__name { color: var(--cyan-700); }
.dsx-link__meta {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Closing action ─────────────────────────────────────────────── */

.dsx-close {
  margin-top: var(--dsx-major);
  padding-top: var(--dsx-sect);
  border-top: 1px solid var(--dsx-rule-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dsx-block);
}
.dsx-close__text {
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.dsx-close__text strong {
  display: block;
  margin-bottom: var(--size-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.dsx-close__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-item); }

@media (pointer: coarse) {
  .dsx-index__link { min-height: 44px; align-items: center; }
  .dsx-tab { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsx-index__link::before,
  .dsx-link { transition: none; }
}

/* ── Sample bundle manifest ─────────────────────────────────────── */

.dsx-bundle {
  margin-bottom: var(--size-7);
  padding: var(--size-3) var(--size-5);
  border: 1px solid var(--dsx-rule-strong);
  background: var(--bg-section);
}
.dsx-bundle__title {
  margin: 0 0 var(--dsx-item);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.dsx-bundle__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dsx-bundle__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size-3);
  padding: var(--size-2) 0;
  border-top: 1px solid var(--dsx-rule);
  font-size: var(--fs-small);
  color: var(--text-strong);
}
.dsx-bundle__count {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Preview-mode notice ────────────────────────────────────────── */

.dsx-preview-note {
  margin-bottom: var(--size-5);
  padding: var(--size-2) var(--size-3);
  border: 1px solid #fde68a;
  border-left: 2px solid #f59e0b;
  background: #fffbeb;
  font-size: var(--fs-small);
  color: #78350f;
}

/* ── Overrides for markup that arrives from shared modules ──────── */
/* renderAffectBlock emits a .product-block section, whose spacing and bottom
   rule belong to the old layout. Inside the add-on frame it is just content. */
.dsx-addon .product-block {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Panels are toggled with the hidden attribute; make sure no layout rule
   from the shared stylesheets overrides it. */
.dsx-panel[hidden],
.dsx-panel__head[hidden] { display: none; }

/* Per-panel guidance. The tab label names the panel; this line sets the
   expectation the old page carried in each form's section header (the sample
   path skips verification, the quote path does not). */
.dsx-panel__intro {
  max-width: 62ch;
  margin: 0 0 var(--size-5);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Optional standfirst under a reference-rail title, where the rail needs a
   line of context before its links. */
.dsx-rail__lead {
  max-width: 62ch;
  margin: calc(var(--size-3) * -1) 0 var(--size-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}