/* ==========================================================================
   OnyLab foundation
   ========================================================================== */

:root {
  /* Brand */
  --olb-flame: #f34605;
  --olb-flame-dark: #c93a04;

  /* Surfaces and text */
  --olb-canvas: #fefefe;
  --olb-surface-secondary: #f4f3f0;
  --olb-surface-contrast: #0c0c0e;
  --olb-text-primary: #0c0c0e;
  --olb-text-secondary: #666c78;
  --olb-text-on-contrast: #fefefe;
  --olb-text-on-contrast-secondary: #b9bcc4;

  /* Borders and state */
  --olb-border-subtle: #e7e5e0;
  --olb-border-default: #d2cfc8;
  --olb-border-strong: #9a968d;
  --olb-border-on-contrast: #35353b;
  --olb-focus: var(--olb-flame);
  --olb-color-info: #1f5fa8;
  --olb-color-success: #17683d;
  --olb-color-warning: #8a5a05;
  --olb-color-error: #a8231c;

  /* Data */
  --olb-chart-1: #0c0c0e;
  --olb-chart-2: #666c78;
  --olb-chart-3: #f34605;
  --olb-chart-4: #1f5fa8;
  --olb-chart-5: #17683d;
  --olb-chart-6: #8a5a05;

  /* Rhythm and shape */
  --olb-space-1: 0.25rem;
  --olb-space-2: 0.5rem;
  --olb-space-3: 0.75rem;
  --olb-space-4: 1rem;
  --olb-space-5: 1.25rem;
  --olb-space-6: 1.5rem;
  --olb-space-8: 2rem;
  --olb-space-10: 2.5rem;
  --olb-space-12: 3.5rem;
  --olb-space-16: 5.5rem;
  --olb-radius-small: 2px;
  --olb-radius: 4px;

  /* Type family */
  --olb-font-display: "Syne", sans-serif;
  --olb-font-sans: "DM Sans", sans-serif;
  --olb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type size */
  --olb-type-display: clamp(2.25rem, 6vw, 4.25rem);
  --olb-type-page-title: clamp(2.125rem, 4.4vw, 3.125rem);
  --olb-type-title: clamp(1.75rem, 3vw, 2.25rem);
  --olb-type-section: clamp(1.375rem, 2.2vw, 1.5rem);
  --olb-type-subsection: 1.25rem;
  --olb-type-lede: clamp(1.125rem, 1.5vw, 1.3125rem);
  --olb-type-body: 1.0625rem;
  --olb-type-compact: 0.9375rem;
  --olb-type-label: 0.875rem;
  --olb-type-metadata: 0.8125rem;

  /* Type weight and leading */
  --olb-weight-regular: 400;
  --olb-weight-medium: 500;
  --olb-weight-heading: 600;
  --olb-weight-semibold: 700;
  --olb-weight-display: 800;
  --olb-leading-body: 1.6;
  --olb-leading-compact: 1.5;
  --olb-leading-caption: 1.45;
  --olb-leading-display: 1.02;
  --olb-leading-page-title: 1.06;
  --olb-leading-title: 1.12;
  --olb-leading-section: 1.2;
  --olb-leading-subsection: 1.3;
  --olb-leading-lede: 1.5;

  /* Motion */
  --olb-transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.olb-page {
  margin: 0;
  background: var(--olb-canvas);
  color: var(--olb-text-primary);
  font-family: var(--olb-font-sans);
  font-size: var(--olb-type-body);
  line-height: var(--olb-leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Grounds and grid
   -------------------------------------------------------------------------- */

.olb-band {
  background: var(--olb-canvas);
  color: var(--olb-text-primary);
}

.olb-band[data-tone="secondary"] {
  background: var(--olb-surface-secondary);
}

.olb-band[data-tone="contrast"] {
  background: var(--olb-surface-contrast);
  --olb-text-primary: var(--olb-text-on-contrast);
  --olb-text-secondary: var(--olb-text-on-contrast-secondary);
  --olb-border-subtle: var(--olb-border-on-contrast);
  --olb-border-default: var(--olb-border-on-contrast);
  --olb-border-strong: #55555d;
  color: var(--olb-text-primary);
}

.olb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: var(--olb-space-8);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 32px;
}

.olb-grid > * {
  min-width: 0;
}

.olb-span-4 { grid-column: span 4; }
.olb-span-5 { grid-column: span 5; }
.olb-span-6 { grid-column: span 6; }
.olb-span-7 { grid-column: span 7; }
.olb-span-8 { grid-column: span 8; }
.olb-span-12 { grid-column: 1 / -1; }

/* Offsets that keep an empty gutter column between two unequal peers. */
.olb-custom-track-9-4 { grid-column: 9 / span 4; }

.olb-section {
  padding-block: var(--olb-space-16);
}

/* --------------------------------------------------------------------------
   Flow primitives
   -------------------------------------------------------------------------- */

.olb-flow > * {
  margin-block: 0;
}

.olb-flow > * + * {
  margin-block-start: var(--olb-space-4);
}

.olb-stack {
  display: grid;
  gap: var(--olb-space-6);
}

.olb-stack > * {
  margin-block: 0;
}

.olb-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--olb-space-4) var(--olb-space-6);
}

.olb-cluster > * {
  margin-block: 0;
}

.olb-reading {
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

.olb-display,
.olb-title,
.olb-heading-24,
.olb-heading-20,
.olb-heading-16 {
  font-family: var(--olb-font-display);
  margin-block: 0;
  text-wrap: balance;
}

.olb-display {
  font-size: var(--olb-type-display);
  font-weight: var(--olb-weight-display);
  line-height: var(--olb-leading-display);
  letter-spacing: -0.03em;
}

.olb-title {
  font-size: var(--olb-type-page-title);
  font-weight: var(--olb-weight-semibold);
  line-height: var(--olb-leading-page-title);
  letter-spacing: -0.02em;
}

.olb-heading-24 {
  font-size: var(--olb-type-section);
  font-weight: var(--olb-weight-semibold);
  line-height: var(--olb-leading-section);
  letter-spacing: -0.015em;
}

.olb-heading-20 {
  font-size: var(--olb-type-subsection);
  font-weight: var(--olb-weight-heading);
  line-height: var(--olb-leading-subsection);
  letter-spacing: -0.01em;
}

.olb-heading-16 {
  font-size: var(--olb-type-body);
  font-weight: var(--olb-weight-heading);
  line-height: var(--olb-leading-subsection);
}

.olb-lede {
  font-size: var(--olb-type-lede);
  font-weight: var(--olb-weight-regular);
  line-height: var(--olb-leading-lede);
  margin-block: 0;
}

.olb-label {
  font-size: var(--olb-type-label);
  font-weight: var(--olb-weight-medium);
  line-height: var(--olb-leading-compact);
  margin-block: 0;
}

.olb-meta,
.olb-caption {
  font-size: var(--olb-type-metadata);
  line-height: var(--olb-leading-caption);
  color: var(--olb-text-secondary);
  margin-block: 0;
}

.olb-note {
  font-size: var(--olb-type-compact);
  line-height: var(--olb-leading-compact);
  color: var(--olb-text-secondary);
  margin-block: 0;
}

.olb-mono {
  font-family: var(--olb-font-mono);
  font-size: 0.94em;
}

.olb-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.olb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
}

.olb-band a:not(.olb-button):not(.olb-identity) {
  color: var(--olb-flame-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.olb-band[data-tone="contrast"] a:not(.olb-button):not(.olb-identity) {
  color: var(--olb-flame);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--olb-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.olb-skip-link {
  position: absolute;
  left: 32px;
  top: -3.5rem;
  z-index: 10;
  padding: var(--olb-space-2) var(--olb-space-4);
  background: var(--olb-surface-contrast);
  color: var(--olb-text-on-contrast);
  font-size: var(--olb-type-label);
  text-decoration: none;
  transition: top var(--olb-transition);
}

.olb-skip-link:focus-visible {
  top: var(--olb-space-4);
}

.olb-header {
  padding-block: var(--olb-space-8) 0;
}

.olb-masthead {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--olb-space-4) var(--olb-space-6);
}

.olb-identity {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}

/* Wordmark and product name share one baseline without joining the link name. */
.olb-custom-masthead-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--olb-space-4);
}

.olb-wordmark,
.olb-logo {
  display: block;
  height: auto;
}

.olb-wordmark { width: 132px; }
.olb-logo { width: 112px; }

.olb-context {
  font-family: var(--olb-font-display);
  font-size: var(--olb-type-subsection);
  font-weight: var(--olb-weight-heading);
  letter-spacing: -0.01em;
  padding-inline-start: var(--olb-space-4);
  border-inline-start: 1px solid var(--olb-border-default);
}

.olb-document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--olb-space-2) var(--olb-space-6);
  font-size: var(--olb-type-label);
  color: var(--olb-text-secondary);
}

/* The masthead link is navigation, not the page's accent moment. */
.olb-band .olb-masthead .olb-document-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--olb-text-primary);
  text-decoration-color: var(--olb-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.olb-band .olb-masthead .olb-document-meta a:hover {
  text-decoration-color: currentColor;
}

.olb-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--olb-space-4) var(--olb-space-8);
  padding-block: var(--olb-space-12) var(--olb-space-10);
  font-size: var(--olb-type-label);
  color: var(--olb-text-secondary);
}

.olb-footer > * {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   Opening
   -------------------------------------------------------------------------- */

.olb-opening {
  padding-block: var(--olb-space-12) var(--olb-space-16);
}

.olb-opening-claim {
  display: grid;
  gap: var(--olb-space-6);
  align-content: start;
}

.olb-opening-claim > * {
  margin-block: 0;
}

.olb-opening-proof {
  display: grid;
  gap: var(--olb-space-6);
  align-content: start;
  padding-block-start: var(--olb-space-2);
}

.olb-opening-proof > * {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.olb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--olb-space-3) var(--olb-space-6);
  border: 1px solid transparent;
  border-radius: var(--olb-radius);
  background: var(--olb-flame-dark);
  color: #fefefe;
  font-family: var(--olb-font-sans);
  font-size: var(--olb-type-body);
  font-weight: var(--olb-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--olb-transition), color var(--olb-transition);
}

.olb-button:hover,
.olb-button:active {
  background: #0c0c0e;
  color: #fefefe;
}

.olb-band[data-tone="contrast"] .olb-button {
  background: var(--olb-flame);
  color: #0c0c0e;
}

.olb-band[data-tone="contrast"] .olb-button:hover,
.olb-band[data-tone="contrast"] .olb-button:active {
  background: #fefefe;
  color: #0c0c0e;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.olb-table-wrap {
  overflow-x: auto;
}

/* Below tablet the ledger scrolls inside its own region rather than breaking
   words to fit. The page itself never scrolls sideways. */
@media (max-width: 720px) {
  .olb-table-wrap table {
    min-width: 40rem;
  }
}

.olb-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--olb-type-compact);
  line-height: var(--olb-leading-compact);
}

.olb-table-wrap caption {
  caption-side: bottom;
  max-width: 76ch;
  padding-block-start: var(--olb-space-5);
  color: var(--olb-text-secondary);
  font-size: var(--olb-type-metadata);
  line-height: var(--olb-leading-caption);
  text-align: left;
}

.olb-table-wrap th,
.olb-table-wrap td {
  vertical-align: baseline;
  padding: var(--olb-space-4) var(--olb-space-6) var(--olb-space-4) 0;
  border-block-end: 1px solid var(--olb-border-subtle);
}

.olb-table-wrap th:last-child,
.olb-table-wrap td:last-child {
  padding-inline-end: 0;
}

.olb-table-wrap thead th {
  vertical-align: bottom;
  text-align: left;
  font-family: var(--olb-font-sans);
  font-size: var(--olb-type-label);
  font-weight: var(--olb-weight-medium);
  color: var(--olb-text-secondary);
  border-block-end-color: var(--olb-border-strong);
}

.olb-table-wrap tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--olb-weight-medium);
}

/* The row-label lane holds ordinary short labels on one line. */
.olb-table-wrap col.olb-custom-col-label { width: 20%; }
.olb-table-wrap col.olb-custom-col-before { width: 39%; }
.olb-table-wrap col.olb-custom-col-after { width: 41%; }

.olb-table-wrap thead th.olb-numeric,
.olb-table-wrap tbody td.olb-numeric {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Page-owned geometry
   -------------------------------------------------------------------------- */

/* Task field: one thing to write in, sized for the sentence or two it takes to
   name a task, with the action directly under it. */
.olb-custom-task-form {
  display: grid;
  gap: var(--olb-space-3);
  justify-items: start;
  max-width: 34rem;
}

/* A quiet surface rather than a boxed control: no rule around it until it has
   the visitor's attention, and no drag handle, because the field sizes itself
   to what is written in it. The cap keeps a long task from pushing the action
   off the screen; past it the field scrolls. */
.olb-custom-task-field {
  width: 100%;
  max-height: 18rem;
  padding: var(--olb-space-4);
  border: 1px solid transparent;
  border-radius: var(--olb-radius);
  background: var(--olb-surface-secondary);
  color: var(--olb-text-primary);
  font-family: var(--olb-font-sans);
  font-size: var(--olb-type-body);
  line-height: var(--olb-leading-body);
  resize: none;
  overflow-y: auto;
  transition:
    background var(--olb-transition),
    border-color var(--olb-transition);
}

/* The examples write themselves in the brand's own ink, so what the field is
   showing reads as a demonstration rather than as text already entered. The
   dark flame clears 4.5:1 on both the resting and the focused ground. */
.olb-custom-task-field::placeholder {
  color: var(--olb-flame-dark);
  opacity: 1;
}

.olb-custom-task-field:focus {
  background: var(--olb-canvas);
  border-color: var(--olb-border-default);
}

.olb-custom-task-field:focus-visible {
  outline: 2px solid var(--olb-focus);
  outline-offset: 2px;
}

/* Sequence: numeral lane, connective rule, content lane. */
.olb-custom-sequence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--olb-space-8);
}

.olb-custom-step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--olb-space-5);
}

.olb-custom-step::before {
  content: "";
  position: absolute;
  left: calc(1rem - 0.5px);
  top: 2.25rem;
  bottom: calc(var(--olb-space-8) * -1);
  border-inline-start: 1px solid var(--olb-border-default);
}

.olb-custom-step:last-child::before {
  display: none;
}

.olb-custom-step-index {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--olb-border-strong);
  border-radius: 50%;
  background: var(--olb-canvas);
  font-size: var(--olb-type-label);
  font-weight: var(--olb-weight-medium);
  font-variant-numeric: tabular-nums;
}

.olb-band[data-tone="contrast"] .olb-custom-step-index {
  background: var(--olb-surface-contrast);
}

.olb-band[data-tone="secondary"] .olb-custom-step-index {
  background: var(--olb-surface-secondary);
}

.olb-custom-step-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-block: 0;
}

.olb-custom-step-body {
  grid-column: 2;
  grid-row: 2;
  margin-block: var(--olb-space-2) 0;
  color: var(--olb-text-secondary);
  font-size: var(--olb-type-compact);
  line-height: var(--olb-leading-compact);
}

/* Aligned label and explanation rows. Shared label lane, no cards. */
.olb-custom-terms {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) minmax(0, 7fr);
  column-gap: 32px;
}

.olb-custom-terms > dt,
.olb-custom-terms > dd {
  min-width: 0;
  margin: 0;
  padding-block: var(--olb-space-5);
  border-block-start: 1px solid var(--olb-border-subtle);
}

.olb-custom-terms > dt:first-of-type,
.olb-custom-terms > dt:first-of-type + dd {
  padding-block-start: 0;
  border-block-start: 0;
}

.olb-custom-terms > dd {
  color: var(--olb-text-secondary);
}

/* Stated limits: three true peers on one row, each opened by a shared rule. */
.olb-custom-limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: var(--olb-space-8);
}

.olb-custom-limits > li {
  min-width: 0;
  padding-block-start: var(--olb-space-5);
  border-block-start: 1px solid var(--olb-border-default);
}

.olb-custom-limits > li > * {
  margin-block: 0;
}

.olb-custom-limits > li > * + * {
  margin-block-start: var(--olb-space-2);
}

/* --------------------------------------------------------------------------
   Reflow
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .olb-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 24px;
    padding-inline: 24px;
  }

  .olb-span-4,
  .olb-span-5,
  .olb-span-6,
  .olb-span-7,
  .olb-span-8,
  .olb-custom-track-9-4 {
    grid-column: 1 / -1;
  }

  .olb-section {
    padding-block: var(--olb-space-12);
  }

  .olb-opening {
    padding-block: var(--olb-space-10) var(--olb-space-12);
  }

  .olb-opening-proof {
    padding-block-start: 0;
  }

  /* Three peers stack rather than leave an orphan in a two-column row. */
  .olb-custom-limits {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--olb-space-6);
  }

  .olb-skip-link {
    left: 24px;
  }
}

@media (max-width: 600px) {
  .olb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    padding-inline: 20px;
  }

  .olb-identity {
    flex-wrap: wrap;
  }

  .olb-context {
    flex-basis: 100%;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .olb-custom-terms {
    grid-template-columns: minmax(0, 1fr);
  }

  .olb-custom-terms > dt {
    padding-block-end: 0;
  }

  .olb-custom-terms > dt + dd {
    padding-block-start: var(--olb-space-2);
    border-block-start: 0;
  }

  .olb-skip-link {
    left: 20px;
  }
}

/* Diagrams. Nodes are real text so the figures reflow and scale with the type
   scale; connectors are hairlines drawn outside each node box. */
.olb-custom-diagram {
  margin: 0;
  display: grid;
  gap: var(--olb-space-5);
}

.olb-custom-diagram-intro {
  max-width: 62ch;
}

.olb-custom-node {
  margin: 0;
  padding: var(--olb-space-3) var(--olb-space-4);
  border: 1px solid var(--olb-border-default);
  border-radius: var(--olb-radius-small);
  font-size: var(--olb-type-compact);
  line-height: var(--olb-leading-compact);
}

/* Two contrasted sequences sharing one label lane and one chain lane. */
.olb-custom-models {
  display: grid;
  gap: var(--olb-space-6);
}

.olb-custom-model {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  column-gap: var(--olb-space-5);
  align-items: center;
}

.olb-custom-model-name {
  margin: 0;
  color: var(--olb-text-secondary);
}

.olb-custom-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--olb-space-3) 2.6rem;
}

.olb-custom-chain > li {
  position: relative;
}

.olb-custom-chain > li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: -2.2rem;
  top: 50%;
  width: 1.8rem;
  border-block-start: 1px solid var(--olb-border-strong);
}

.olb-custom-chain > li + li::after {
  content: "";
  position: absolute;
  inset-inline-start: -0.85rem;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  transform: translateY(-50%) rotate(45deg);
  border-block-start: 1px solid var(--olb-border-strong);
  border-inline-end: 1px solid var(--olb-border-strong);
}

.olb-custom-node-you {
  border-color: var(--olb-border-strong);
  font-weight: var(--olb-weight-medium);
}

/* The split: what arrives, who runs it, and which of the two paths it takes. */
.olb-custom-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 3.4rem;
  align-items: center;
}

.olb-custom-team {
  position: relative;
  border: 1px solid var(--olb-border-default);
  border-radius: var(--olb-radius-small);
  padding: var(--olb-space-4);
  display: grid;
  gap: var(--olb-space-3);
}

.olb-custom-team-name {
  margin: 0;
  color: var(--olb-text-secondary);
}

.olb-custom-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--olb-space-2);
  font-size: var(--olb-type-compact);
  line-height: var(--olb-leading-compact);
}

.olb-custom-outcomes {
  display: grid;
  gap: var(--olb-space-5);
}

.olb-custom-outcome {
  position: relative;
}

.olb-custom-outcome-return {
  border-color: var(--olb-flame);
  color: var(--olb-flame-dark);
}

.olb-custom-team::before,
.olb-custom-outcome::before {
  content: "";
  position: absolute;
  inset-inline-start: -3rem;
  top: 50%;
  width: 2.6rem;
  border-block-start: 1px solid var(--olb-border-strong);
}

.olb-custom-team::after,
.olb-custom-outcome::after {
  content: "";
  position: absolute;
  inset-inline-start: -0.85rem;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  transform: translateY(-50%) rotate(45deg);
  border-block-start: 1px solid var(--olb-border-strong);
  border-inline-end: 1px solid var(--olb-border-strong);
}

.olb-custom-outcome-return::before,
.olb-custom-outcome-return::after {
  border-color: var(--olb-flame);
}

@media (max-width: 960px) {
  .olb-custom-model {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--olb-space-3);
    align-items: start;
  }
}

/* Stacked: every connector turns to point down the page. */
@media (max-width: 720px) {
  .olb-custom-chain {
    display: grid;
    gap: 2.2rem;
  }

  .olb-custom-split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.2rem;
  }

  .olb-custom-chain > li + li::before,
  .olb-custom-team::before,
  .olb-custom-outcome::before {
    inset-inline-start: var(--olb-space-5);
    top: -1.8rem;
    width: 0;
    height: 1.4rem;
    border-block-start: 0;
    border-inline-start: 1px solid var(--olb-border-strong);
  }

  .olb-custom-chain > li + li::after,
  .olb-custom-team::after,
  .olb-custom-outcome::after {
    inset-inline-start: calc(var(--olb-space-5) - 0.18rem);
    top: -0.6rem;
    transform: rotate(135deg);
  }

  .olb-custom-outcome-return::before,
  .olb-custom-outcome-return::after {
    border-color: var(--olb-flame);
  }
}

/* Language switch: its own line at the foot of every page, so changing
   language is always available without competing with the page's own action. */
.olb-custom-language {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--olb-space-3);
  padding-block-start: var(--olb-space-5);
  border-block-start: 1px solid var(--olb-border-subtle);
}

.olb-custom-language-label {
  color: var(--olb-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}