/* Rebuild the engineering reference with Ariel layouts and shared identity tokens. */
.bs-page {
  --bs-bg: var(--page-bg);
  --bs-card: var(--page-surface);
  --bs-soft: var(--page-surface-soft);
  --bs-text: var(--page-text);
  --bs-copy: var(--page-copy);
  --bs-muted: var(--page-muted);
  --bs-line: var(--page-border);
  --bs-accent: var(--page-accent);
  --bs-mint: #a2d8c7;
  --bs-caution: #d79b91;
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--font-interface);
  line-height: 1.65;
}
html[data-ariel-theme="light"] .bs-page {
  --bs-mint: #23715e;
  --bs-caution: #92574e;
}
.bs-page :where(h1, h2, h3, p, ol) {
  margin: 0;
}
.bs-page :where(h1, h2, h3) {
  font-family: var(--font-interface);
  line-height: 1.14;
  letter-spacing: -0.055em;
}
.bs-page :where(h1, h2) em {
  color: var(--bs-accent);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 450;
}
.bs-page :focus-visible {
  outline: 2px solid var(--bs-accent);
  outline-offset: 5px;
}
.bs-page :where(a, button, summary) {
  cursor: pointer;
}
.bs-page svg {
  display: block;
}
.bs-page [hidden] {
  display: none;
}
.bs-container {
  inline-size: min(100% - var(--page-gutter) * 2, 82rem);
  padding-inline: 0;
}
.bs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block-end: 1px solid var(--bs-line);
  background: radial-gradient(
    ellipse at 78% 42%,
    color-mix(in srgb, var(--bs-accent) 10%, transparent),
    transparent 50%
  );
}
.bs-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(100% / 12 - 1px),
    var(--bs-line) calc(100% / 12 - 1px) calc(100% / 12)
  );
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  opacity: 0.14;
  pointer-events: none;
}
.bs-shell {
  padding-block: calc(var(--header-height) + 1.5rem) 1.7rem;
}
.bs-crumb {
  --ariel-gap: 0.9rem;
  color: var(--bs-muted);
  font-size: 0.76rem;
  font-weight: 720;
}
.bs-crumb a:hover,
.bs-crumb > span:nth-child(2) {
  color: var(--bs-accent);
}
.bs-hero__grid {
  --ariel-gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: 3.5rem 2rem;
}
.bs-hero__copy {
  position: relative;
  z-index: 2;
}
.bs-kicker {
  --ariel-gap: 0.8rem;
  flex-wrap: nowrap;
  color: var(--bs-accent);
  font-size: 0.68rem;
  font-weight: 830;
  line-height: 1.4;
  letter-spacing: 0.15em;
}
.bs-kicker__signal {
  flex: 0 0 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--bs-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-accent) 12%, transparent);
}
.bs-hero h1 {
  max-inline-size: 12ch;
  margin-block: 1.9rem 1.6rem;
  font-size: clamp(2.7rem, 10.5vi, 4.25rem);
  font-weight: 790;
}
.bs-hero__lead {
  max-inline-size: 56ch;
  color: var(--bs-copy);
  font-size: clamp(1.05rem, 1.4vi, 1.22rem);
  line-height: 1.85;
}
.bs-inline-link {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  gap: 1.75rem;
  margin-block-start: 2.3rem;
  padding-block-end: 0.42rem;
  border-block-end: 1px solid var(--bs-accent);
  font-size: 0.86rem;
  font-weight: 800;
}
.bs-inline-link > span:last-child {
  flex-shrink: 0;
  color: var(--bs-accent);
  font-size: 1.1rem;
}
.bs-inline-link:hover {
  color: var(--bs-accent);
}
.bs-figure {
  position: relative;
  inline-size: 100%;
  max-inline-size: 24rem;
  aspect-ratio: 600 / 530;
  margin-inline: auto;
  color: var(--bs-mint);
}
.bs-figure__grain {
  position: absolute;
  inset: 8%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--bs-mint) 15%, transparent),
    transparent 62%
  );
  filter: blur(24px);
}
.bs-figure__svg {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
.bs-figure__orbit {
  fill: none;
  stroke: var(--bs-line);
  stroke-width: 1;
}
.bs-figure__orbit--dashed {
  stroke-dasharray: 4 9;
  opacity: 0.8;
}
.bs-figure__trace {
  fill: none;
  stroke: var(--bs-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.85;
}
.bs-figure__trace--accent {
  stroke: var(--bs-mint);
  stroke-width: 3;
}
.bs-figure__node {
  fill: var(--bs-accent);
  stroke: var(--bs-bg);
  stroke-width: 5;
}
.bs-figure__node--done {
  fill: var(--bs-mint);
}
.bs-figure__tick {
  fill: none;
  stroke: var(--bs-bg);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bs-figure__target > rect:first-child {
  fill: var(--bs-card);
  stroke: var(--bs-accent);
  stroke-width: 2;
}
.bs-figure__target > rect:not(:first-child) {
  fill: var(--bs-soft);
  stroke: var(--bs-line);
  stroke-width: 2;
}
.bs-figure__target circle {
  fill: var(--bs-mint);
}
.bs-figure__target path {
  stroke: var(--bs-accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.bs-figure__tag {
  position: absolute;
  max-inline-size: 66%;
  padding: 0.5em 0.7em;
  border: 1px solid var(--bs-line);
  border-radius: 0.25rem;
  background: var(--bs-bg);
  color: var(--bs-copy);
  font-size: clamp(0.57rem, 1.5vi, 0.7rem);
  font-weight: 820;
  letter-spacing: 0.11em;
}
.bs-figure__tag--first {
  inset-block-start: 15%;
  inset-inline-start: 0;
}
.bs-figure__tag--second {
  inset-block-end: 15%;
  inset-inline-start: 0;
}
.bs-figure__tag--third {
  inset-block-start: 2%;
  inset-inline-start: 50%;
}
.bs-figure__tag--last {
  inset-inline-end: 0;
  inset-block-end: 10%;
  border-color: color-mix(in srgb, var(--bs-mint) 45%, transparent);
  color: var(--bs-mint);
}
.bs-figure__caption {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: -1rem;
  color: var(--bs-muted);
  font-size: 0.57rem;
  font-weight: 820;
  letter-spacing: 0.18em;
}
.bs-figure__caption i {
  color: var(--bs-accent);
  font-style: normal;
}
.bs-hero__bottom {
  --ariel-gap: 0.5rem 1rem;
  justify-content: space-between;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--bs-line);
  color: var(--bs-muted);
  font-size: 0.63rem;
  font-weight: 780;
  letter-spacing: 0.13em;
}
.bs-nav {
  border-block-end: 1px solid var(--bs-line);
  background: var(--bs-bg);
}
.bs-nav__inner {
  --ariel-gap: 0.8rem clamp(1rem, 2.5vi, 2.8rem);
  padding-block: 1.15rem;
}
.bs-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 2rem;
  color: var(--bs-copy);
  font-size: 0.75rem;
  font-weight: 730;
}
.bs-nav a b {
  color: var(--bs-accent);
  font-size: 0.61rem;
  font-weight: 800;
}
.bs-nav a:hover {
  color: var(--bs-accent);
}
.bs-section {
  padding-block: clamp(5rem, 9vi, 8.5rem);
}
.bs-section--recovery {
  background: var(--bs-card);
}
.bs-section--handoff {
  background: var(--bs-soft);
}
.bs-heading {
  --ariel-gap: 1.5rem 3.2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4.5vi, 4rem);
}
.bs-index {
  --ariel-gap: 0.85rem;
  flex-wrap: nowrap;
  color: var(--bs-muted);
  font-size: 0.67rem;
  font-weight: 830;
  letter-spacing: 0.11em;
  line-height: 1.5;
}
.bs-index > span:first-child {
  padding-inline-end: 0.8rem;
  border-inline-end: 1px solid var(--bs-accent);
  color: var(--bs-accent);
}
.bs-index > span:first-child,
.bs-nav a b,
.bs-step__no,
.bs-display__count,
.bs-ssh__sequence b,
.bs-observability__stream > span,
.bs-observability__rows > div > span,
.bs-principle__num {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.bs-heading h2,
.bs-handoff__copy h2 {
  margin-block-start: 1.5rem;
  font-size: clamp(2.5rem, 5vi, 4.6rem);
  font-weight: 780;
}
.bs-heading > p {
  max-inline-size: 55ch;
  color: var(--bs-copy);
  font-size: 1rem;
  line-height: 1.9;
}
.bs-workbench {
  overflow: clip;
  border: 1px solid var(--bs-line);
  border-radius: 0.75rem;
  background: var(--bs-card);
  box-shadow: 0 20px 70px rgb(0 0 0 / 5%);
}
.bs-workbench__heading {
  --ariel-gap: 0.5rem 1.3rem;
  justify-content: space-between;
  padding: 1rem clamp(1.25rem, 3vi, 2rem);
  border-block-end: 1px solid var(--bs-line);
}
.bs-workbench__eyebrow {
  color: var(--bs-accent);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}
.bs-workbench__note {
  color: var(--bs-muted);
  font-size: 0.72rem;
}
.bs-workbench__layout {
  --ariel-gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.bs-steps {
  --ariel-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  border-block-end: 1px solid var(--bs-line);
}
.bs-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.2rem;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 1.15rem 1.2rem;
  border: 0;
  border-block-end: 1px solid var(--bs-line);
  background: transparent;
  color: var(--bs-copy);
  font: inherit;
  text-align: start;
}
.bs-step:last-child {
  border-block-end: 0;
}
.bs-step__no {
  color: var(--bs-muted);
  font-size: 0.65rem;
  font-weight: 820;
}
.bs-step__name {
  font-size: 0.92rem;
  font-weight: 800;
}
.bs-step__arrow {
  color: var(--bs-muted);
  font-size: 1.1rem;
}
.bs-step:hover,
.bs-step[aria-pressed="true"] {
  background: var(--bs-soft);
}
.bs-step[aria-pressed="true"] {
  color: var(--bs-text);
  box-shadow: inset 3px 0 var(--bs-accent);
}
.bs-step[aria-pressed="true"] :where(.bs-step__no, .bs-step__arrow) {
  color: var(--bs-accent);
}
.bs-display {
  min-inline-size: 0;
  background:
    radial-gradient(
      circle at 72% 35%,
      color-mix(in srgb, var(--bs-accent) 8%, transparent),
      transparent 48%
    ),
    var(--bs-soft);
}
.bs-display__panel {
  min-block-size: 30rem;
  padding: clamp(1.75rem, 4vi, 3.4rem);
}
.bs-display__top {
  --ariel-gap: 1rem;
  flex-wrap: nowrap;
  justify-content: space-between;
  color: var(--bs-muted);
  font-size: 0.63rem;
  font-weight: 820;
  letter-spacing: 0.13em;
}
.bs-display__top > span:first-child {
  color: var(--bs-mint);
}
.bs-display__glyph {
  position: relative;
  display: grid;
  inline-size: 8.2rem;
  block-size: 8.2rem;
  place-items: center;
  margin: 1.75rem auto 2.15rem;
  border: 1px dashed var(--bs-line);
  border-radius: 50%;
  background: var(--bs-card);
}
.bs-display__glyphring {
  position: absolute;
  inset: -12px;
  border: 1px solid color-mix(in srgb, var(--bs-accent) 40%, transparent);
  border-inline-end-color: transparent;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.bs-display__glyphcore {
  color: var(--bs-accent);
  font-family: var(--font-editorial);
  font-size: 3.25rem;
  line-height: 1;
}
.bs-display__panel h3 {
  max-inline-size: 26ch;
  margin-block-end: 1rem;
  font-size: clamp(1.5rem, 2.8vi, 2rem);
  font-weight: 780;
}
.bs-display__panel > p {
  max-inline-size: 58ch;
  color: var(--bs-copy);
  font-size: 0.91rem;
  line-height: 1.84;
}
.bs-display__technical {
  margin-block-start: 2rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--bs-line);
}
.bs-display__technical b {
  color: var(--bs-mint);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
}
.bs-display__technical p {
  margin-block-start: 0.6rem;
  color: var(--bs-copy);
  font-size: 0.84rem;
}
.bs-workbench__footer {
  --ariel-gap: 1rem;
  flex-wrap: nowrap;
  align-items: start;
  padding: 1.2rem clamp(1.25rem, 3vi, 2rem);
  border-block-start: 1px solid var(--bs-line);
  color: var(--bs-muted);
  font-size: 0.81rem;
}
.bs-workbench__symbol {
  flex-shrink: 0;
  color: var(--bs-mint);
  font-size: 1.1rem;
  line-height: 1;
}
.bs-outcomes {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.bs-outcome {
  padding: clamp(1.6rem, 3.2vi, 2.4rem);
  border: 1px solid var(--bs-line);
  border-radius: 0.5rem;
  background: var(--bs-bg);
}
.bs-outcome__mark {
  display: grid;
  inline-size: 3.3rem;
  block-size: 3.3rem;
  place-items: center;
  margin-block-end: 1rem;
  border: 1px solid var(--bs-line);
  border-radius: 50%;
  font-family: var(--font-editorial);
  font-size: 1.8rem;
}
.bs-outcome--good .bs-outcome__mark {
  color: var(--bs-mint);
}
.bs-outcome--back .bs-outcome__mark {
  color: var(--bs-accent);
}
.bs-outcome--stop .bs-outcome__mark {
  color: var(--bs-caution);
}
.bs-outcome__micro,
.bs-overline {
  color: var(--bs-accent);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.bs-outcome h3 {
  margin-block: 0.7rem 0.8rem;
  font-size: clamp(1.35rem, 2vi, 1.72rem);
  font-weight: 780;
}
.bs-outcome > p:last-child {
  color: var(--bs-copy);
  font-size: 0.87rem;
  line-height: 1.85;
}
.bs-ssh {
  --ariel-gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(2.5rem, 5vi, 5rem);
  padding-block: clamp(2.2rem, 4vi, 4rem);
  border-block: 1px solid var(--bs-line);
}
.bs-ssh h3 {
  max-inline-size: 18ch;
  margin-block: 1.15rem 1.3rem;
  font-size: clamp(1.8rem, 3.2vi, 3rem);
}
.bs-ssh__copy > p {
  max-inline-size: 56ch;
  color: var(--bs-copy);
  font-size: 0.9rem;
  line-height: 1.9;
}
.bs-ssh__copy .bs-ssh__caution {
  margin-block-start: 1rem;
  color: var(--bs-text);
  font-weight: 700;
}
.bs-ssh__sequence {
  padding: 0;
  list-style: none;
}
.bs-ssh__sequence li {
  --ariel-gap: 1rem;
  flex-wrap: nowrap;
  padding-block: 1.2rem;
  border-block-end: 1px solid var(--bs-line);
  font-size: 0.9rem;
  font-weight: 750;
}
.bs-ssh__sequence li:first-child {
  border-block-start: 1px solid var(--bs-line);
}
.bs-ssh__sequence b {
  display: grid;
  flex: 0 0 2.4rem;
  block-size: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bs-bg);
  color: var(--bs-accent);
  font-size: 0.65rem;
}
.bs-clarity {
  --ariel-gap: 0.65rem;
  margin-block-start: 1.7rem;
  color: var(--bs-copy);
  font-size: 0.83rem;
  line-height: 1.75;
}
.bs-clarity strong {
  flex-shrink: 0;
  color: var(--bs-accent);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
}
.bs-observability {
  --ariel-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  border: 1px solid var(--bs-line);
  border-radius: 0.75rem;
  background: var(--bs-card);
}
.bs-observability__map {
  display: grid;
  min-inline-size: 0;
  place-items: center;
  align-content: center;
  padding: 3.5rem 1rem;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--bs-accent) 14%, transparent),
      transparent 70%
    ),
    var(--bs-soft);
}
.bs-observability__origin,
.bs-observability__edge {
  max-inline-size: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bs-line);
  background: var(--bs-card);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-align: center;
}
.bs-observability__origin {
  border-radius: 0.35rem;
  color: var(--bs-accent);
}
.bs-observability__streams {
  --ariel-gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr);
  inline-size: min(100%, 20rem);
  padding-block: 1.4rem;
}
.bs-observability__stream {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-muted);
  font-size: 0.57rem;
}
.bs-observability__stream i {
  inline-size: 100%;
  border-block-start: 1px dashed var(--bs-accent);
}
.bs-observability__stream > span {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  place-items: center;
  border: 1px solid var(--bs-line);
  border-radius: 50%;
  color: var(--bs-mint);
  font-weight: 800;
}
.bs-observability__stream b {
  font-size: 0.6rem;
  letter-spacing: 0.11em;
}
.bs-observability__edge {
  border-color: color-mix(in srgb, var(--bs-mint) 40%, var(--bs-line));
  color: var(--bs-mint);
}
.bs-observability__edge > span:last-child {
  margin-inline-start: 0.6rem;
}
.bs-observability__detail {
  padding: clamp(1.6rem, 3.8vi, 3rem);
}
.bs-observability__heading {
  --ariel-gap: 1rem;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-block-end: 1.4rem;
  border-block-end: 1px solid var(--bs-line);
  color: var(--bs-accent);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.bs-observability__dot {
  flex: 0 0 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--bs-mint);
}
.bs-observability__rows > div {
  --ariel-gap: 1rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-block: 1.55rem;
  border-block-end: 1px solid var(--bs-line);
}
.bs-observability__rows > div > span {
  color: var(--bs-muted);
  font-size: 0.68rem;
  font-weight: 850;
}
.bs-observability__rows h3 {
  margin-block-end: 0.5rem;
  font-size: 1.15rem;
  font-weight: 790;
}
.bs-observability__rows p {
  color: var(--bs-copy);
  font-size: 0.85rem;
  line-height: 1.85;
}
.bs-visibility__foot {
  margin-block-start: 1.25rem;
  color: var(--bs-muted);
  font-size: 0.75rem;
}
.bs-handoff__layout {
  --ariel-gap: 4rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.bs-handoff__copy {
  max-inline-size: 37rem;
}
.bs-handoff__copy > p:not(.bs-index) {
  margin-block-start: 1.35rem;
  color: var(--bs-copy);
  font-size: 0.93rem;
  line-height: 1.88;
}
.bs-handoff__art {
  --ariel-gap: 0.15rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr) minmax(0, 1fr);
  min-block-size: 19rem;
  align-items: center;
  padding: clamp(1rem, 3vi, 2.5rem);
  border: 1px solid var(--bs-line);
  border-radius: 0.75rem;
  background: var(--bs-bg);
}
.bs-handoff__service,
.bs-handoff__server {
  --ariel-gap: 0.5rem;
  min-block-size: 10rem;
  align-items: center;
  justify-content: center;
  font-size: 0.54rem;
  font-weight: 850;
  text-align: center;
}
.bs-handoff__service {
  color: var(--bs-muted);
  letter-spacing: 0.08em;
}
.bs-handoff__service-icon {
  display: grid;
  inline-size: 3.1rem;
  block-size: 3.1rem;
  place-items: center;
  margin-block-end: 0.5rem;
  border: 1px solid var(--bs-line);
  border-radius: 50%;
  color: var(--bs-accent);
  font-family: var(--font-editorial);
  font-size: 2rem;
}
.bs-handoff__service small,
.bs-handoff__server small {
  color: var(--bs-muted);
  font-size: 0.59rem;
  letter-spacing: 0.1em;
}
.bs-handoff__bridge {
  --ariel-gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
  color: var(--bs-muted);
  text-align: center;
}
.bs-handoff__bridge > span {
  font-size: clamp(0.55rem, 1.6vi, 0.9rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.bs-handoff__bridge b {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}
.bs-handoff__server {
  color: var(--bs-text);
  letter-spacing: 0.09em;
}
.bs-handoff__rack {
  --ariel-gap: 0;
  inline-size: 4rem;
  block-size: 4.2rem;
  justify-content: space-around;
  margin-block-end: 0.5rem;
  padding: 0.45rem;
  border: 1px solid var(--bs-mint);
  border-radius: 0.4rem;
}
.bs-handoff__rack > span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  block-size: 0.8rem;
  padding-inline: 0.35rem;
  border: 1px solid var(--bs-line);
  border-radius: 0.2rem;
  background: var(--bs-soft);
}
.bs-handoff__rack > span i {
  inline-size: 0.25rem;
  block-size: 0.25rem;
  border-radius: 50%;
  background: var(--bs-mint);
}
.bs-handoff__caption {
  grid-column: 1 / -1;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bs-line);
  color: var(--bs-mint);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-align: center;
}
.bs-principles {
  border-block-start: 1px solid var(--bs-line);
}
.bs-principle {
  border-block-end: 1px solid var(--bs-line);
}
.bs-principle summary {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.7rem;
  align-items: center;
  gap: 0.55rem;
  padding-block: 1.55rem;
  list-style: none;
}
.bs-principle summary::-webkit-details-marker {
  display: none;
}
.bs-principle__num {
  color: var(--bs-accent);
  font-size: 0.67rem;
  font-weight: 840;
}
.bs-principle summary > span:nth-child(2) {
  font-size: clamp(1rem, 2vi, 1.38rem);
  font-weight: 780;
  letter-spacing: -0.035em;
}
.bs-principle__plus {
  display: grid;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  justify-self: end;
  place-items: center;
  border: 1px solid var(--bs-line);
  border-radius: 50%;
  color: var(--bs-accent);
  font-size: 1.1rem;
  font-weight: 400;
}
.bs-principle[open] .bs-principle__plus {
  transform: rotate(45deg);
}
.bs-principle summary:hover {
  color: var(--bs-accent);
}
.bs-principle__inside {
  max-inline-size: 60rem;
  padding: 0 0.25rem 1.7rem 2.15rem;
}
.bs-principle__inside p {
  color: var(--bs-copy);
  font-size: 0.89rem;
  line-height: 1.9;
}
.bs-principle__inside .bs-principle__tech {
  margin-block-start: 0.8rem;
  color: var(--bs-muted);
  font-size: 0.81rem;
}
.bs-final {
  --ariel-gap: 1.3rem 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(3.6rem, 6vi, 6rem);
  padding-block-start: 1.8rem;
  border-block-start: 1px solid var(--bs-line);
}
.bs-final h3 {
  max-inline-size: 29ch;
  margin-block-start: 0.85rem;
  font-size: clamp(1.7rem, 3vi, 2.7rem);
}
.bs-final__links {
  --ariel-gap: 1.25rem 2rem;
}
.bs-final__links a {
  padding-block-end: 0.35rem;
  border-block-end: 1px solid var(--bs-accent);
  font-size: 0.85rem;
  font-weight: 800;
}
.bs-final__links a:hover {
  color: var(--bs-accent);
}
/* Use the same single layout transition as the shared template. */
@media (min-width: 64rem) {
  .bs-shell {
    padding-block-start: calc(var(--header-height) + 2rem);
  }
  .bs-hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    padding-block: 4.2rem 4.5rem;
  }
  .bs-hero h1 {
    font-size: clamp(3.05rem, 8vi, 6.5rem);
  }
  .bs-figure {
    max-inline-size: 35rem;
  }
  .bs-figure__tag--third {
    inset-inline-start: 55%;
  }
  .bs-figure__tag--last {
    inset-block-end: 15%;
  }
  .bs-hero__bottom {
    --ariel-gap: 1rem;
  }
  .bs-heading {
    grid-template-columns: minmax(0, 1.13fr) minmax(0, 0.87fr);
  }
  .bs-workbench__layout {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
  .bs-steps {
    border-block-end: 0;
    border-inline-end: 1px solid var(--bs-line);
  }
  .bs-step {
    padding: 1.5rem 2.1rem;
  }
  .bs-display__panel {
    min-block-size: 33rem;
  }
  .bs-outcomes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bs-outcome__mark {
    margin-block-end: 2rem;
  }
  .bs-ssh {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  }
  .bs-ssh__sequence li {
    --ariel-gap: 1.5rem;
  }
  .bs-clarity {
    --ariel-gap: 1.5rem;
    flex-direction: row;
  }
  .bs-observability {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .bs-observability__map {
    min-block-size: 29rem;
  }
  .bs-handoff__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .bs-handoff__art {
    --ariel-gap: 0.6rem;
  }
  .bs-handoff__service {
    font-size: 0.62rem;
  }
  .bs-handoff__server {
    font-size: 0.64rem;
  }
  .bs-handoff__service-icon {
    inline-size: 3.9rem;
    block-size: 3.9rem;
  }
  .bs-principle summary {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
    gap: 0.8rem;
  }
  .bs-principle__plus {
    inline-size: 1.8rem;
    block-size: 1.8rem;
  }
  .bs-principle__inside {
    padding-inline: 3.3rem 2.8rem;
  }
  .bs-final {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: end;
  }
}