/*! Rail design system 1.0.0 (2026-10-23). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Rail base: document defaults, zero-specificity resets inside .rl-page, type roles,
   containers and helpers. Load after tokens.css and before every component. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rl-canvas);
  color: var(--rl-body);
  font-family: var(--rl-font-sans);
  font-size: var(--rl-fs-6);
  line-height: var(--rl-lh-body);
  font-weight: var(--rl-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.rl-page),
:where(.rl-page) *,
:where(.rl-page) *::before,
:where(.rl-page) *::after {
  box-sizing: border-box;
}

:where(.rl-page) :where(h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, pre, table, blockquote, fieldset) {
  margin: 0;
}

:where(.rl-page) :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

:where(.rl-page) :where(img, video) {
  height: auto;
}

:where(.rl-page) :where(h1, h2, h3, h4, h5) {
  color: var(--rl-ink);
  font-weight: var(--rl-weight-semibold);
  text-wrap: balance;
}

:where(.rl-page) :where(h1) {
  font-size: var(--rl-fs-1);
  line-height: var(--rl-lh-display);
  letter-spacing: var(--rl-track-display);
}

:where(.rl-page) :where(h2) {
  font-size: var(--rl-fs-2);
  line-height: var(--rl-lh-heading);
  letter-spacing: var(--rl-track-heading);
}

:where(.rl-page) :where(h3) {
  font-size: var(--rl-fs-4);
  line-height: var(--rl-lh-snug);
}

:where(.rl-page) :where(h4, h5) {
  font-size: var(--rl-fs-6);
  line-height: var(--rl-lh-snug);
}

:where(.rl-page) :where(p, li, dd) {
  text-wrap: pretty;
}

:where(.rl-page) :where(a) {
  color: var(--rl-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--rl-dur) var(--rl-ease);
}

:where(.rl-page) :where(a:hover) {
  color: var(--rl-ink);
}

:where(.rl-page) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

:where(.rl-page) :where(code, kbd, samp) {
  font-family: var(--rl-font-mono);
  font-size: 0.875em;
}

:where(.rl-page) :where(p code, li code, td code, dd code) {
  background: var(--rl-code-bg);
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-inline);
  padding: 1px 6px;
  color: var(--rl-code-ink);
  overflow-wrap: anywhere;
}

:where(.rl-page) :where(strong, b) {
  color: var(--rl-ink);
  font-weight: var(--rl-weight-semibold);
}

:where(.rl-page) ::selection {
  background: var(--rl-accent-soft);
  color: var(--rl-ink);
}

/* Type roles as classes, for when the element and the look differ */
.rl-display {
  font-size: var(--rl-fs-1);
  line-height: var(--rl-lh-display);
  letter-spacing: var(--rl-track-display);
  font-weight: var(--rl-weight-semibold);
  color: var(--rl-ink);
}

.rl-title {
  font-size: var(--rl-fs-2);
  line-height: var(--rl-lh-heading);
  letter-spacing: var(--rl-track-heading);
  font-weight: var(--rl-weight-semibold);
  color: var(--rl-ink);
}

.rl-subtitle {
  font-size: var(--rl-fs-4);
  line-height: var(--rl-lh-snug);
  font-weight: var(--rl-weight-semibold);
  color: var(--rl-ink);
}

.rl-lede {
  font-size: var(--rl-fs-5);
  line-height: 1.6;
  color: var(--rl-muted);
}

.rl-small {
  font-size: var(--rl-fs-7);
  line-height: 1.55;
}

.rl-caption {
  font-size: var(--rl-fs-8);
  line-height: 1.5;
  color: var(--rl-muted);
}

.rl-mono {
  font-family: var(--rl-font-mono);
  font-feature-settings: "zero" 1;
}

.rl-muted {
  color: var(--rl-muted);
}

/* Muted second line inside a heading. Never style `h1 span` or `h2 span`: the reveal script wraps words in spans. */
.rl-sub {
  display: block;
  color: var(--rl-muted);
}

/* Containers: sections own vertical padding, containers own width */
.rl-container {
  width: 100%;
  max-width: var(--rl-content);
  margin-inline: auto;
}

.rl-container--narrow {
  max-width: var(--rl-narrow);
}

.rl-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-4);
}

.rl-stack--tight {
  gap: var(--rl-space-2);
}

.rl-stack--loose {
  gap: var(--rl-space-6);
}

.rl-grid {
  display: grid;
  gap: var(--rl-space-5);
}

.rl-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rl-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rl-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .rl-grid--3,
  .rl-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rl-grid--2,
  .rl-grid--3,
  .rl-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rl-center {
  text-align: center;
}

.rl-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rl-skip {
  position: absolute;
  left: var(--rl-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--rl-space-2) var(--rl-space-4);
  border-radius: var(--rl-radius-btn);
  background: var(--rl-btn);
  color: var(--rl-btn-ink);
  font-weight: var(--rl-weight-semibold);
  text-decoration: none;
}

.rl-skip:focus {
  top: var(--rl-space-3);
  color: var(--rl-btn-ink);
}

/* Inline arrow link: "Read the docs" with an arrow-up-right icon after the label */
.rl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--rl-weight-medium);
  text-decoration: none;
  color: var(--rl-accent-strong);
}

.rl-link svg {
  flex: none;
  transition: transform var(--rl-dur) var(--rl-ease);
}

.rl-link:hover {
  color: var(--rl-ink);
}

.rl-link:hover svg {
  transform: translate(2px, -2px);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(.rl-page) :where(a),
  .rl-link svg {
    transition: none;
  }
}

/* ---- frame ---- */
/* Frame: the ruled page. Two hairline rails run the full height of .rl-page; every
   .rl-section is full bleed with a top hairline and a hollow node where that line crosses
   each rail. Wide screens get ruler ticks outside the rails. */

.rl-page {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: clip;
  background-color: var(--rl-canvas);
  color: var(--rl-body);
}

.rl-page::before,
.rl-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rl-hair);
  z-index: 1;
  pointer-events: none;
}

.rl-page::before {
  left: var(--rl-rail);
}

.rl-page::after {
  right: var(--rl-rail);
}

/* Ruler ticks: short every 24px, long every 120px, just outside each rail.
   The offsets compensate for how background-position treats percentages.
   If you change --rl-content, raise the breakpoint to content + 2 x gutter + 84px. */
@media (min-width: 1380px) {
  .rl-page {
    background-image:
      repeating-linear-gradient(to bottom, var(--rl-hair-strong) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, var(--rl-hair) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(to bottom, var(--rl-hair-strong) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, var(--rl-hair) 0 1px, transparent 1px 24px);
    background-size: 12px 100%, 7px 100%, 12px 100%, 7px 100%;
    background-repeat: no-repeat;
    background-position:
      left calc(50% - var(--rl-content) / 2 - var(--rl-gutter) - 10px) top 0,
      left calc(50% - var(--rl-content) / 2 - var(--rl-gutter) - 7.5px) top 0,
      right calc(50% - var(--rl-content) / 2 - var(--rl-gutter) - 10px) top 0,
      right calc(50% - var(--rl-content) / 2 - var(--rl-gutter) - 7.5px) top 0;
  }
}

/* Section shell */
.rl-section {
  position: relative;
  padding-block: var(--rl-section-pad);
  padding-inline: calc(var(--rl-rail) + var(--rl-gutter));
  border-top: 1px solid var(--rl-hair);
  background: transparent;
  scroll-margin-top: calc(var(--rl-nav-h) + 16px);
}

.rl-section::before,
.rl-section::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rl-hair-strong);
  border-radius: 50%;
  background: var(--rl-canvas);
  z-index: 2;
}

.rl-section::before {
  left: calc(var(--rl-rail) - 3px);
}

.rl-section::after {
  right: calc(var(--rl-rail) - 3px);
}

/* First section under the nav, or any section that continues the one above */
.rl-section--flush {
  border-top: 0;
}

:is(.rl-section--flush)::before,
:is(.rl-section--flush)::after {
  display: none;
}

.rl-section--tight {
  padding-block: var(--rl-space-8);
}

.rl-section--no-bottom {
  padding-bottom: 0;
}

/* Full-bleed contrast bands. Content stays inside the rails; the band redraws its own
   rails above the page rails and hides its nodes. */
.rl-section--tint,
.rl-section--deep {
  z-index: 2;
}

.rl-section--tint {
  --rl-canvas: var(--rl-well);
  background: var(--rl-well);
}

:is(.rl-section--tint)::before,
:is(.rl-section--tint)::after,
:is(.rl-section--deep)::before,
:is(.rl-section--deep)::after {
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--rl-hair);
}

:is(.rl-section--tint)::before,
:is(.rl-section--deep)::before {
  left: var(--rl-rail);
}

:is(.rl-section--tint)::after,
:is(.rl-section--deep)::after {
  right: var(--rl-rail);
}

/* Deep band: remaps the working tokens so every component inside reads correctly */
.rl-section--deep {
  --rl-canvas: var(--rl-deep);
  --rl-surface: var(--rl-deep-surface);
  --rl-well: var(--rl-deep-surface);
  --rl-code-bg: var(--rl-deep);
  --rl-ink: var(--rl-deep-ink);
  --rl-body: var(--rl-deep-body);
  --rl-muted: var(--rl-deep-muted);
  --rl-hair: var(--rl-deep-hair);
  --rl-hair-strong: var(--rl-deep-line-control);
  --rl-line-control: var(--rl-deep-line-control);
  --rl-accent: var(--rl-deep-accent);
  --rl-accent-strong: var(--rl-deep-accent);
  --rl-accent-soft: var(--rl-deep-surface);
  --rl-accent-ink: var(--rl-deep-btn-ink);
  --rl-btn: var(--rl-deep-btn);
  --rl-btn-hover: var(--rl-deep-ink);
  --rl-btn-ink: var(--rl-deep-btn-ink);
  --rl-focus: var(--rl-deep-accent);
  --rl-code-ink: var(--rl-deep-ink);
  --rl-code-comment: var(--rl-deep-muted);
  --rl-code-string: var(--rl-deep-string);
  --rl-code-keyword: var(--rl-deep-accent);
  color-scheme: dark;
  background: var(--rl-deep);
  color: var(--rl-body);
  border-top-color: var(--rl-deep-hair);
}

.rl-section--deep + .rl-section {
  border-top-color: transparent;
}

/* ---- buttons ---- */
/* Buttons: 6px corners, flat fills, one primary per view. */

.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--rl-line-control);
  border-radius: var(--rl-radius-btn);
  background: var(--rl-surface);
  color: var(--rl-ink);
  font: inherit;
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-medium);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--rl-dur) var(--rl-ease),
    border-color var(--rl-dur) var(--rl-ease),
    color var(--rl-dur) var(--rl-ease);
}

.rl-btn:hover {
  border-color: var(--rl-ink);
  color: var(--rl-ink);
}

.rl-btn:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

.rl-btn svg {
  flex: none;
}

.rl-btn--primary {
  border-color: var(--rl-btn);
  background: var(--rl-btn);
  color: var(--rl-btn-ink);
}

:is(.rl-btn--primary):hover {
  border-color: var(--rl-btn-hover);
  background: var(--rl-btn-hover);
  color: var(--rl-btn-ink);
}

.rl-btn--secondary {
  background: var(--rl-surface);
}

.rl-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--rl-accent-strong);
}

:is(.rl-btn--ghost):hover {
  border-color: transparent;
  background: var(--rl-accent-soft);
  color: var(--rl-ink);
}

.rl-btn--sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--rl-fs-7);
}

.rl-btn--lg {
  min-height: 52px;
  padding: 12px 24px;
  font-size: var(--rl-fs-5);
}

.rl-btn--block {
  display: flex;
  width: 100%;
}

.rl-btn--icon {
  width: 44px;
  padding: 0;
}

.rl-btn--icon.rl-btn--sm {
  width: 36px;
}

.rl-btn[aria-disabled="true"],
.rl-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (pointer: coarse) {
  .rl-btn--sm {
    min-height: 44px;
  }

  .rl-btn--icon.rl-btn--sm {
    width: 44px;
  }
}

/* Action group: a primary and at most one secondary, wrapping on small screens */
.rl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rl-space-3);
}

.rl-actions--center {
  justify-content: center;
}

@media (max-width: 479px) {
  .rl-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .rl-actions--stack-sm .rl-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-btn {
    transition: none;
  }
}

/* ---- badges ---- */
/* Badges (status, metadata) and chips (requirements under hero actions). Pills are for
   these and for tabs only, never for buttons. */

.rl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-well);
  color: var(--rl-ink);
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.rl-badge--accent {
  background: var(--rl-accent-soft);
  color: var(--rl-accent-strong);
}

.rl-badge--ok {
  background: var(--rl-ok-soft);
  color: var(--rl-ok);
}

.rl-badge--warn {
  background: var(--rl-warn-soft);
  color: var(--rl-warn);
}

.rl-badge--danger {
  background: var(--rl-danger-soft);
  color: var(--rl-danger);
}

.rl-badge--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rl-hair-strong);
}

.rl-badge--mono {
  font-family: var(--rl-font-mono);
  font-weight: var(--rl-weight-regular);
}

/* Status dot inside a badge; the badge text carries the meaning, the dot only echoes it */
.rl-badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Requirement chips: a row under the hero actions */
.rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-chips--center {
  justify-content: center;
}

.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-pill);
  background: var(--rl-surface);
  color: var(--rl-body);
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-medium);
  line-height: 1.4;
}

.rl-chip svg {
  flex: none;
  color: var(--rl-accent-strong);
}

/* ---- nav ---- */
/* Nav: sticky top bar aligned to the rails, with a theme toggle and a mobile disclosure. */

.rl-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-inline: calc(var(--rl-rail) + var(--rl-gutter));
  border-bottom: 1px solid var(--rl-hair);
  background: color-mix(in srgb, var(--rl-canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

/* The bar redraws the rails so they stay continuous under the blur */
.rl-nav::before,
.rl-nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rl-hair);
}

.rl-nav::before {
  left: var(--rl-rail);
}

.rl-nav::after {
  right: var(--rl-rail);
}

.rl-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--rl-space-6);
  max-width: var(--rl-content);
  min-height: var(--rl-nav-h);
  margin-inline: auto;
}

.rl-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rl-ink);
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-semibold);
  text-decoration: none;
}

.rl-nav__brand:hover {
  color: var(--rl-ink);
}

.rl-nav__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rl-radius-tile);
  background: var(--rl-btn);
  color: var(--rl-btn-ink);
}

.rl-nav__links {
  display: flex;
  align-items: center;
  gap: var(--rl-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--rl-radius-btn);
  color: var(--rl-body);
  font-size: var(--rl-fs-7);
  font-weight: var(--rl-weight-medium);
  text-decoration: none;
}

.rl-nav__link:hover,
.rl-nav__link[aria-current="page"] {
  background: var(--rl-well);
  color: var(--rl-ink);
}

.rl-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--rl-space-2);
  margin-left: auto;
}

.rl-nav__toggle {
  display: none;
}

/* Theme toggle: shows a moon in light, a sun in dark */
.rl-theme-toggle .rl-theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .rl-theme-toggle .rl-theme-toggle__sun {
  display: block;
}

:root[data-theme="dark"] .rl-theme-toggle .rl-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rl-theme-toggle .rl-theme-toggle__sun {
    display: block;
  }

  :root:not([data-theme="light"]) .rl-theme-toggle .rl-theme-toggle__moon {
    display: none;
  }
}

/* Mobile: links collapse into a disclosure panel under the bar */
@media (max-width: 899px) {
  .rl-nav__inner {
    flex-wrap: wrap;
    gap: var(--rl-space-3);
  }

  .rl-nav__toggle {
    display: inline-flex;
  }

  .rl-nav__menu {
    order: 3;
    width: 100%;
  }

  .rl-nav.has-menu .rl-nav__menu:not(.is-open) {
    display: none;
  }

  .rl-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--rl-space-2) 0 var(--rl-space-4);
    border-top: 1px solid var(--rl-hair);
  }

  .rl-nav__link {
    min-height: 44px;
    font-size: var(--rl-fs-6);
  }

  .rl-nav__cta {
    display: none;
  }
}

@media (max-width: 899px) and (min-width: 520px) {
  .rl-nav__cta {
    display: inline-flex;
  }
}

/* ---- section-header ---- */
/* Section header: centered h2 with an optional muted second line and one intro paragraph.
   The split variant puts the header in a 4/11 column beside 7/11 content. */

.rl-head {
  max-width: 720px;
  margin: 0 auto var(--rl-space-8);
  text-align: center;
}

.rl-head__intro {
  margin-top: var(--rl-space-4);
  font-size: var(--rl-fs-5);
  line-height: 1.6;
  color: var(--rl-muted);
}

.rl-head__actions {
  margin-top: var(--rl-space-5);
}

.rl-head .rl-head__list {
  margin-top: var(--rl-space-5);
  text-align: left;
}

.rl-head--start {
  margin-left: 0;
  text-align: left;
}

.rl-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--rl-space-8);
  align-items: start;
}

.rl-split .rl-head {
  margin: 0;
  text-align: left;
}

.rl-split--sticky > .rl-head {
  position: sticky;
  top: calc(var(--rl-nav-h) + var(--rl-space-6));
}

@media (max-width: 959px) {
  .rl-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rl-space-6);
  }

  .rl-split--sticky > .rl-head {
    position: static;
  }
}

@media (max-width: 760px) {
  .rl-head {
    margin-bottom: var(--rl-space-7);
  }

  .rl-head__intro {
    font-size: var(--rl-fs-6);
  }
}

/* ---- reveal ---- */
/* Blur-reveal headings. reveal.js splits h1/h2 text into .rl-w word spans and adds
   .rl-reveal only when motion is allowed, so no-JS and reduced-motion visitors see static text. */

.rl-reveal .rl-w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.28em);
  transition:
    opacity var(--rl-dur-reveal) var(--rl-ease),
    filter var(--rl-dur-reveal) var(--rl-ease),
    transform var(--rl-dur-reveal) var(--rl-ease);
  transition-delay: calc(var(--rl-i, 0) * 60ms);
  will-change: opacity, filter, transform;
}

.rl-reveal.is-in .rl-w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rl-reveal .rl-w {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ---- divider ---- */
/* Divider ornament: line, node, icon tile, node, line. Sits above a section header on two
   or three major sections per page. */

.rl-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--rl-space-7);
}

.rl-divider__line {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--rl-hair-strong);
}

.rl-divider__line::before {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rl-hair-strong);
  border-radius: 50%;
  background: var(--rl-canvas);
}

.rl-divider__line:first-child::before {
  left: 0;
}

.rl-divider__line:last-child::before {
  right: 0;
}

.rl-divider__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline: 10px;
  border: 1px solid var(--rl-hair-strong);
  border-radius: var(--rl-radius-tile);
  background: var(--rl-surface);
  color: var(--rl-accent-strong);
}

/* ---- hero ---- */
/* Hero: the Stage. A centered heading group, a CTA pair, requirement chips below the
   actions, then (optionally) a stage window and a facts strip that ends the band. */

.rl-hero {
  padding-top: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
}

.rl-hero.rl-section--no-bottom {
  padding-bottom: 0;
}

.rl-hero__group {
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}

.rl-hero__group h1 .rl-sub {
  margin-top: 2px;
}

.rl-hero__lede {
  max-width: 680px;
  margin: var(--rl-space-5) auto 0;
  font-size: var(--rl-fs-5);
  line-height: 1.6;
  color: var(--rl-muted);
}

.rl-hero__actions {
  justify-content: center;
  margin-top: var(--rl-space-6);
}

.rl-hero__chips {
  justify-content: center;
  margin-top: var(--rl-space-5);
}

/* Left-aligned variant for inner pages: no stage, heading group on the left */
.rl-hero--start .rl-hero__group {
  margin-left: 0;
  text-align: left;
}

.rl-hero--start .rl-hero__lede {
  margin-left: 0;
}

.rl-hero--start .rl-hero__actions,
.rl-hero--start .rl-hero__chips {
  justify-content: flex-start;
}

.rl-hero__stage {
  margin-top: var(--rl-space-8);
}

@media (max-width: 760px) {
  .rl-hero__lede {
    margin-top: var(--rl-space-4);
    font-size: var(--rl-fs-6);
  }

  .rl-hero__actions {
    margin-top: var(--rl-space-5);
  }

  .rl-hero__stage {
    margin-top: var(--rl-space-7);
  }
}

/* ---- stage ---- */
/* Stage: a coded browser window that shows the product. It is decorative (aria-hidden),
   fades out at the bottom, and every label inside names something the product really has. */

.rl-stage {
  position: relative;
}

.rl-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-window);
  background: var(--rl-surface);
  box-shadow: var(--rl-shadow-window);
}

.rl-stage--fade .rl-window {
  height: var(--rl-stage-h);
  border-bottom: 0;
  border-radius: var(--rl-radius-window) var(--rl-radius-window) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.rl-window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rl-hair);
  background: var(--rl-surface);
}

.rl-window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rl-hair-strong);
}

.rl-window__address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-inline: auto;
  padding: 4px 14px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-well);
  color: var(--rl-muted);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-8);
}

.rl-window__spacer {
  width: 44px;
}

/* Mock primitives: compose app screens from these instead of screenshots */
.rl-mock {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: calc(100% - 44px);
  min-height: 0;
}

.rl-mock__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--rl-hair);
  background: var(--rl-canvas);
}

.rl-mock__project {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 6px 8px;
  color: var(--rl-ink);
  font-size: var(--rl-fs-7);
  font-weight: var(--rl-weight-semibold);
}

.rl-mock__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--rl-accent-soft);
  color: var(--rl-accent-strong);
}

.rl-mock__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--rl-muted);
  font-size: var(--rl-fs-7);
}

.rl-mock__item.is-active {
  background: var(--rl-surface);
  box-shadow: inset 0 0 0 1px var(--rl-hair);
  color: var(--rl-ink);
  font-weight: var(--rl-weight-medium);
}

.rl-mock__main {
  min-width: 0;
  padding: 20px 24px;
}

.rl-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rl-mock__title {
  color: var(--rl-ink);
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-semibold);
}

.rl-mock__filters {
  display: flex;
  gap: 6px;
}

.rl-mock__list {
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-panel);
  overflow: hidden;
}

.rl-mock__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
  border-top: 1px solid var(--rl-hair);
  font-size: var(--rl-fs-7);
  color: var(--rl-body);
}

.rl-mock__row:first-child {
  border-top: 0;
}

.rl-mock__row--head {
  background: var(--rl-well);
  color: var(--rl-muted);
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-medium);
}

.rl-mock__branch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--rl-ink);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-mock__branch svg {
  flex: none;
  color: var(--rl-muted);
}

.rl-mock__meta {
  color: var(--rl-muted);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-mock__bar {
  display: block;
  height: 8px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-well);
}

.rl-mock__bar--short {
  width: 36%;
}

.rl-mock__bar--mid {
  width: 58%;
}

.rl-mock__bar--long {
  width: 82%;
}

@media (max-width: 760px) {
  .rl-mock {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-mock__side {
    display: none;
  }

  .rl-mock__main {
    padding: 16px;
  }

  .rl-mock__row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .rl-mock__row > :nth-child(n + 3) {
    display: none;
  }

  .rl-mock__filters {
    display: none;
  }

  .rl-window__spacer {
    display: none;
  }

  .rl-window__address {
    max-width: none;
    margin-left: 12px;
    margin-right: 0;
  }
}

/* ---- facts-strip ---- */
/* Facts strip: four verifiable facts in cells split by hairlines, running edge to edge
   between the rails. Ends a hero or opens a section. */

.rl-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 calc(-1 * var(--rl-gutter));
  padding: 0;
  border-top: 1px solid var(--rl-hair);
  list-style: none;
}

.rl-facts--bottom {
  border-bottom: 1px solid var(--rl-hair);
}

.rl-facts__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rl-space-3);
  padding: var(--rl-space-6) var(--rl-space-5);
  border-left: 1px solid var(--rl-hair);
}

.rl-facts__item:first-child {
  padding-left: var(--rl-gutter);
  border-left: 0;
}

.rl-facts__item:last-child {
  padding-right: var(--rl-gutter);
}

.rl-facts__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-tile);
  background: var(--rl-surface);
  color: var(--rl-accent-strong);
}

.rl-facts__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rl-facts__title {
  color: var(--rl-ink);
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-semibold);
  line-height: 1.35;
}

.rl-facts__detail {
  color: var(--rl-muted);
  font-size: var(--rl-fs-7);
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .rl-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rl-facts__item:nth-child(odd) {
    padding-left: var(--rl-gutter);
    border-left: 0;
  }

  .rl-facts__item:nth-child(even) {
    padding-right: var(--rl-gutter);
  }

  .rl-facts__item:nth-child(n + 3) {
    border-top: 1px solid var(--rl-hair);
  }
}

@media (max-width: 560px) {
  .rl-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-facts__item,
  .rl-facts__item:nth-child(n) {
    border-left: 0;
    padding: var(--rl-space-5) var(--rl-gutter);
  }

  .rl-facts__item + .rl-facts__item {
    border-top: 1px solid var(--rl-hair);
  }
}

/* ---- cards ---- */
/* Cards: 12px corners, one hairline, surface fill, no shadow. A product card opens with a
   well that holds a small coded UI. The whole card is clickable only with --link. */

.rl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-card);
  background: var(--rl-surface);
}

.rl-card__well {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 216px;
  padding: var(--rl-space-5);
  border-bottom: 1px solid var(--rl-hair);
  background: var(--rl-well);
  overflow: hidden;
}

.rl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rl-space-2);
  padding: var(--rl-space-5);
}

.rl-card__title {
  color: var(--rl-ink);
  font-size: var(--rl-fs-5);
  font-weight: var(--rl-weight-semibold);
  line-height: 1.35;
}

.rl-card__text {
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  line-height: 1.6;
}

.rl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-3);
  margin-top: auto;
  padding-top: var(--rl-space-3);
}

/* Whole-card link: the title link stretches over the card */
.rl-card--link {
  transition: border-color var(--rl-dur) var(--rl-ease);
}

:is(.rl-card--link):hover {
  border-color: var(--rl-line-control);
}

.rl-card--link .rl-card__title a {
  color: inherit;
  text-decoration: none;
}

.rl-card--link .rl-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

:is(.rl-card--link):focus-within {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

.rl-card--link .rl-card__title a:focus-visible {
  outline: none;
}

.rl-card--pad {
  padding: var(--rl-space-5);
}

/* Mini UI pieces that live inside a well */
.rl-mini {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-panel);
  background: var(--rl-surface);
  box-shadow: 0 12px 24px -18px rgba(13, 18, 26, 0.35);
  font-size: var(--rl-fs-8);
  color: var(--rl-body);
}

.rl-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rl-hair);
  color: var(--rl-ink);
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-semibold);
}

.rl-mini__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.rl-mini__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.rl-mini__mono {
  font-family: var(--rl-font-mono);
  color: var(--rl-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-mini__muted {
  color: var(--rl-muted);
}

.rl-mini__row--error {
  margin-inline: -6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--rl-danger-soft);
  color: var(--rl-danger);
}

.rl-mini__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--rl-accent-soft);
  color: var(--rl-ink);
  line-height: 1.45;
}

.rl-mini__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rl-accent);
  color: var(--rl-accent-ink);
  font-size: 10px;
  font-weight: var(--rl-weight-semibold);
}

.rl-mini__field {
  padding: 6px 10px;
  border: 1px solid var(--rl-line-control);
  border-radius: var(--rl-radius-input);
  background: var(--rl-surface);
  color: var(--rl-ink);
  font-family: var(--rl-font-mono);
  letter-spacing: 0.12em;
}

.rl-mini__stack {
  display: grid;
  gap: 5px;
}

/* Visual-only switch and meter for mock UIs (aria-hidden contexts) */
.rl-switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-hair-strong);
}

.rl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rl-surface);
}

.rl-switch.is-on {
  background: var(--rl-accent);
}

.rl-switch.is-on::after {
  left: 14px;
}

.rl-meter {
  display: block;
  height: 6px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-well);
  overflow: hidden;
}

.rl-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rl-accent);
}

.rl-meter--ok > span {
  background: var(--rl-ok);
}

@media (prefers-reduced-motion: reduce) {
  .rl-card--link {
    transition: none;
  }
}

/* ---- bento ---- */
/* Bento: a 6-column grid of cards. Five cards read best: two wide (span 3) on top,
   three narrow (span 2) below. Four cards: all span 3. Six: all span 2. */

.rl-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--rl-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-bento > * {
  grid-column: span 2;
}

.rl-bento > .rl-bento__wide {
  grid-column: span 3;
}

.rl-bento > .rl-bento__full {
  grid-column: 1 / -1;
}

.rl-bento .rl-card {
  height: 100%;
}

.rl-bento .rl-bento__wide .rl-card__well {
  height: 256px;
}

@media (max-width: 1023px) {
  .rl-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rl-bento > *,
  .rl-bento > .rl-bento__wide {
    grid-column: span 1;
  }

  .rl-bento > .rl-bento__wide:first-child,
  .rl-bento > .rl-bento__full {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .rl-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-bento > *,
  .rl-bento > .rl-bento__wide,
  .rl-bento > .rl-bento__wide:first-child {
    grid-column: 1 / -1;
  }

  .rl-bento .rl-card__well,
  .rl-bento .rl-bento__wide .rl-card__well {
    height: auto;
    min-height: 200px;
  }
}

/* ---- features ---- */
/* Features: bare columns separated by hairlines, no cards. Icon tile, title, one or two lines. */

.rl-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rl-hair);
  list-style: none;
}

.rl-features--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rl-feature {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-2);
  padding: var(--rl-space-6) var(--rl-space-6) var(--rl-space-6) 0;
  border-bottom: 1px solid var(--rl-hair);
}

.rl-feature + .rl-feature {
  padding-left: var(--rl-space-6);
  border-left: 1px solid var(--rl-hair);
}

.rl-features > .rl-feature:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

.rl-features--4 > .rl-feature:nth-child(3n + 1) {
  padding-left: var(--rl-space-6);
  border-left: 1px solid var(--rl-hair);
}

.rl-features--4 > .rl-feature:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}

.rl-feature__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--rl-space-2);
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-tile);
  background: var(--rl-surface);
  color: var(--rl-accent-strong);
}

.rl-feature__title {
  color: var(--rl-ink);
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-semibold);
  line-height: 1.4;
}

.rl-feature__text {
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  line-height: 1.6;
}

/* Check list: 6px accent dots; .rl-checks--no for what something does not do */
.rl-checks {
  display: grid;
  gap: var(--rl-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-checks > li {
  position: relative;
  padding-left: 18px;
  color: var(--rl-body);
}

.rl-checks > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-accent);
}

.rl-checks--no > li {
  color: var(--rl-muted);
}

.rl-checks--no > li::before {
  background: var(--rl-hair-strong);
}

/* Two columns: for split layouts where the header takes the other side */
.rl-features--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rl-features--2 > .rl-feature:nth-child(n) {
  padding-left: var(--rl-space-6);
  border-left: 1px solid var(--rl-hair);
}

.rl-features--2 > .rl-feature:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 1023px) {
  .rl-features,
  .rl-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rl-features > .rl-feature:nth-child(n),
  .rl-features--4 > .rl-feature:nth-child(n) {
    padding-left: var(--rl-space-6);
    border-left: 1px solid var(--rl-hair);
  }

  .rl-features > .rl-feature:nth-child(odd),
  .rl-features--4 > .rl-feature:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .rl-features,
  .rl-features--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-features > .rl-feature:nth-child(n),
  .rl-features--4 > .rl-feature:nth-child(n) {
    padding: var(--rl-space-5) 0;
    border-left: 0;
  }
}

/* ---- tabs ---- */
/* Tabs: pill chips with an icon, real tablist semantics. Without JS every panel shows,
   each under its own label, and the chip row stays hidden. */

.rl-tabs__list {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rl-space-2);
  margin: 0 0 var(--rl-space-6);
  padding: 0;
}

.rl-tabs.is-tabbed .rl-tabs__list {
  display: flex;
}

.rl-tabs--start .rl-tabs__list {
  justify-content: flex-start;
}

.rl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-pill);
  background: var(--rl-surface);
  color: var(--rl-body);
  font: inherit;
  font-size: var(--rl-fs-7);
  font-weight: var(--rl-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--rl-dur) var(--rl-ease), background-color var(--rl-dur) var(--rl-ease);
}

.rl-tab svg {
  flex: none;
  color: var(--rl-accent-strong);
}

.rl-tab:hover {
  border-color: var(--rl-line-control);
  color: var(--rl-ink);
}

.rl-tab[aria-selected="true"] {
  border-color: var(--rl-hair-strong);
  background: var(--rl-well);
  color: var(--rl-ink);
}

.rl-tab:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

.rl-tabs__panel + .rl-tabs__panel {
  margin-top: var(--rl-space-7);
}

.rl-tabs.is-tabbed .rl-tabs__panel + .rl-tabs__panel {
  margin-top: 0;
}

.rl-tabs__label {
  margin-bottom: var(--rl-space-4);
  color: var(--rl-ink);
  font-size: var(--rl-fs-5);
  font-weight: var(--rl-weight-semibold);
}

.rl-tabs.is-tabbed .rl-tabs__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rl-tabs__panel:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 6px;
  border-radius: var(--rl-radius-card);
}

@media (pointer: coarse) {
  .rl-tab {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-tab {
    transition: none;
  }
}

/* ---- code-block ---- */
/* Code block: window chrome with three dots, a filename and a copy button. Code scrolls
   sideways and never wraps. Optional token spans color keywords, strings and comments. */

.rl-code {
  overflow: hidden;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-card);
  background: var(--rl-code-bg);
}

.rl-code__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--rl-hair);
  background: var(--rl-surface);
}

.rl-code__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rl-hair-strong);
}

.rl-code__file {
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  color: var(--rl-muted);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-8);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rl-code__copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--rl-line-control);
  border-radius: var(--rl-radius-btn);
  background: var(--rl-surface);
  color: var(--rl-ink);
  font: inherit;
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-medium);
  line-height: 1.3;
  cursor: pointer;
}

.rl-code__copy:hover {
  border-color: var(--rl-ink);
}

.rl-code__copy:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 2px;
}

.rl-code pre {
  margin: 0;
  padding: var(--rl-space-5);
  overflow-x: auto;
  color: var(--rl-code-ink);
  font-family: var(--rl-font-mono);
  font-size: var(--rl-fs-7);
  line-height: 1.75;
  white-space: pre;
  tab-size: 2;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

.rl-code pre:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: -3px;
}

.rl-code code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.rl-code__k {
  color: var(--rl-code-keyword);
}

.rl-code__s {
  color: var(--rl-code-string);
}

.rl-code__c {
  color: var(--rl-code-comment);
}

.rl-code__p {
  color: var(--rl-code-comment);
  user-select: none;
}

@media (pointer: coarse) {
  .rl-code__copy {
    min-height: 44px;
  }
}

/* ---- pricing ---- */
/* Pricing: plan cards in a row. The recommended plan gets a cobalt hairline and a badge,
   nothing louder. Prices use the section-title size with tabular numerals. */

.rl-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rl-space-5);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-pricing--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin-inline: auto;
}

.rl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--rl-space-6);
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-card);
  background: var(--rl-surface);
}

.rl-plan--featured {
  border-color: var(--rl-accent);
  box-shadow: inset 0 0 0 1px var(--rl-accent);
}

.rl-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-3);
}

.rl-plan__name {
  color: var(--rl-ink);
  font-size: var(--rl-fs-5);
  font-weight: var(--rl-weight-semibold);
  line-height: 1.3;
}

.rl-plan__desc {
  margin-top: var(--rl-space-2);
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  line-height: 1.6;
}

.rl-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--rl-space-5);
  padding-top: var(--rl-space-5);
  border-top: 1px solid var(--rl-hair);
}

.rl-plan__amount {
  color: var(--rl-ink);
  font-size: var(--rl-fs-2);
  font-weight: var(--rl-weight-semibold);
  line-height: 1;
  letter-spacing: var(--rl-track-heading);
  font-variant-numeric: tabular-nums;
}

.rl-plan__term {
  color: var(--rl-muted);
  font-size: var(--rl-fs-7);
}

.rl-plan__cta {
  margin-top: var(--rl-space-5);
}

.rl-plan__list {
  display: grid;
  gap: 10px;
  margin: var(--rl-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.rl-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--rl-body);
  font-size: var(--rl-fs-7);
  line-height: 1.55;
}

.rl-plan__list svg {
  flex: none;
  margin-top: 2px;
  color: var(--rl-accent-strong);
}

.rl-pricing__note {
  margin-top: var(--rl-space-5);
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  text-align: center;
}

/* Comparison table that follows the plan row */
.rl-pricing__compare {
  margin-top: var(--rl-space-8);
}

@media (max-width: 1023px) {
  .rl-pricing {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .rl-pricing--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .rl-plan {
    padding: var(--rl-space-5);
  }
}

/* ---- faq ---- */
/* FAQ: a panel accordion built on details/summary. Usually sits in the right column of
   .rl-split with the section header on the left. */

.rl-faq {
  display: grid;
  gap: var(--rl-space-3);
}

.rl-faq__item {
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-panel);
  background: var(--rl-surface);
  transition: border-color var(--rl-dur) var(--rl-ease);
}

.rl-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-5);
  min-height: 64px;
  padding: 18px 20px 18px 24px;
  border-radius: calc(var(--rl-radius-panel) - 1px);
  color: var(--rl-ink);
  font-size: var(--rl-fs-6);
  font-weight: var(--rl-weight-semibold);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--rl-dur) var(--rl-ease);
}

.rl-faq__q::-webkit-details-marker {
  display: none;
}

.rl-faq__q:hover {
  background: var(--rl-accent-soft);
}

.rl-faq__q:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 2px;
}

/* Plus that turns into a minus */
.rl-faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rl-hair);
  border-radius: 6px;
  background: var(--rl-well);
}

.rl-faq__icon::before,
.rl-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  border-radius: 1px;
  background: var(--rl-accent-strong);
  transition: transform var(--rl-dur-fast) var(--rl-ease);
}

.rl-faq__icon::after {
  transform: rotate(90deg);
}

.rl-faq__item[open] {
  border-color: var(--rl-line-control);
}

.rl-faq__item[open] .rl-faq__q {
  border-bottom: 1px solid var(--rl-hair);
  border-radius: calc(var(--rl-radius-panel) - 1px) calc(var(--rl-radius-panel) - 1px) 0 0;
  background: var(--rl-accent-soft);
}

.rl-faq__item[open] .rl-faq__icon {
  border-color: var(--rl-accent);
  background: var(--rl-accent);
}

.rl-faq__item[open] .rl-faq__icon::before,
.rl-faq__item[open] .rl-faq__icon::after {
  background: var(--rl-accent-ink);
}

.rl-faq__item[open] .rl-faq__icon::after {
  transform: rotate(0deg);
}

.rl-faq__a {
  padding: 20px 24px 24px;
  color: var(--rl-body);
  font-size: var(--rl-fs-6);
  line-height: 1.7;
}

.rl-faq__a > * + * {
  margin-top: var(--rl-space-3);
}

.rl-faq__contact {
  margin-top: var(--rl-space-5);
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
}

@media (max-width: 640px) {
  .rl-faq__q {
    padding: 16px 16px 16px 20px;
  }

  .rl-faq__a {
    padding: 16px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-faq__item,
  .rl-faq__q,
  .rl-faq__icon::before,
  .rl-faq__icon::after {
    transition: none;
  }
}

/* ---- forms ---- */
/* Forms: labelled fields, 6px inputs with a 3:1 control border, cobalt focus ring,
   errors in words under the field. */

.rl-form {
  display: grid;
  gap: var(--rl-space-5);
}

.rl-form--card {
  padding: var(--rl-space-6);
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-card);
  background: var(--rl-surface);
}

.rl-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rl-space-4);
}

.rl-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rl-label {
  color: var(--rl-ink);
  font-size: var(--rl-fs-7);
  font-weight: var(--rl-weight-medium);
  line-height: 1.4;
}

.rl-label__optional {
  color: var(--rl-muted);
  font-weight: var(--rl-weight-regular);
}

.rl-input,
.rl-select,
.rl-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rl-line-control);
  border-radius: var(--rl-radius-input);
  background: var(--rl-surface);
  color: var(--rl-ink);
  font: inherit;
  font-size: var(--rl-fs-6);
  line-height: 1.4;
  transition: border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}

.rl-input::placeholder,
.rl-textarea::placeholder {
  color: var(--rl-muted);
  opacity: 1;
}

.rl-textarea {
  min-height: 120px;
  resize: vertical;
}

.rl-select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rl-muted) 50%),
    linear-gradient(135deg, var(--rl-muted) 50%, transparent 50%);
  background-position: right 18px top 50%, right 13px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.rl-input:hover,
.rl-select:hover,
.rl-textarea:hover {
  border-color: var(--rl-ink);
}

.rl-input:focus-visible,
.rl-select:focus-visible,
.rl-textarea:focus-visible {
  border-color: var(--rl-focus);
  outline: 3px solid color-mix(in srgb, var(--rl-focus) 35%, transparent);
  outline-offset: 0;
}

.rl-input[aria-invalid="true"],
.rl-select[aria-invalid="true"],
.rl-textarea[aria-invalid="true"] {
  border-color: var(--rl-danger);
}

.rl-hint {
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  line-height: 1.5;
}

.rl-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rl-danger);
  font-size: var(--rl-fs-prose-sm);
  font-weight: var(--rl-weight-medium);
  line-height: 1.5;
}

.rl-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--rl-body);
  font-size: var(--rl-fs-7);
  line-height: 1.5;
  cursor: pointer;
}

.rl-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--rl-accent);
}

/* Inline form: one input and one button on a line (waitlist, newsletter) */
.rl-inline-form {
  display: flex;
  gap: var(--rl-space-2);
  max-width: 480px;
}

.rl-inline-form .rl-input {
  flex: 1;
  min-width: 0;
}

.rl-inline-form--center {
  margin-inline: auto;
}

.rl-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-4);
}

@media (max-width: 640px) {
  .rl-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-form--card {
    padding: var(--rl-space-5);
  }

  .rl-inline-form {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-input,
  .rl-select,
  .rl-textarea {
    transition: none;
  }
}

/* ---- tables ---- */
/* Tables: a rounded surface container, a well header row, hairline rows, mono numerals.
   Under 640px each row becomes a labelled stack (cells carry data-label). */

.rl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rl-hair);
  border-radius: var(--rl-radius-card);
  background: var(--rl-surface);
}

.rl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rl-fs-7);
  line-height: 1.5;
  text-align: left;
}

.rl-table caption {
  padding: var(--rl-space-4) var(--rl-space-5);
  border-bottom: 1px solid var(--rl-hair);
  color: var(--rl-muted);
  font-size: var(--rl-fs-7);
  text-align: left;
}

.rl-table th,
.rl-table td {
  padding: 14px var(--rl-space-5);
  border-top: 1px solid var(--rl-hair);
  vertical-align: top;
}

.rl-table thead th {
  border-top: 0;
  background: var(--rl-well);
  color: var(--rl-ink);
  font-size: var(--rl-fs-7);
  font-weight: var(--rl-weight-semibold);
  white-space: nowrap;
}

.rl-table tbody th {
  color: var(--rl-ink);
  font-weight: var(--rl-weight-medium);
}

.rl-table td {
  color: var(--rl-body);
}

.rl-table .rl-num {
  font-family: var(--rl-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rl-table .rl-yes,
.rl-table .rl-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rl-table .rl-yes svg {
  color: var(--rl-ok);
}

.rl-table .rl-no {
  color: var(--rl-muted);
}

.rl-table--compact th,
.rl-table--compact td {
  padding-block: 10px;
}

.rl-table tr.rl-table__group th {
  background: var(--rl-canvas);
  color: var(--rl-muted);
  font-size: var(--rl-fs-8);
  font-weight: var(--rl-weight-semibold);
}

@media (max-width: 640px) {
  .rl-table-wrap {
    overflow: visible;
  }

  .rl-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rl-table--stack tr {
    display: block;
    padding: var(--rl-space-3) 0;
    border-top: 1px solid var(--rl-hair);
  }

  .rl-table--stack tbody tr:first-child {
    border-top: 0;
  }

  .rl-table--stack th,
  .rl-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--rl-space-4);
    padding: 6px var(--rl-space-4);
    border-top: 0;
  }

  .rl-table--stack tbody th {
    font-size: var(--rl-fs-6);
  }

  .rl-table--stack td::before {
    content: attr(data-label);
    color: var(--rl-muted);
    font-weight: var(--rl-weight-medium);
  }

  .rl-table--stack tr.rl-table__group {
    padding: 0;
  }
}

/* ---- cta ---- */
/* CTA close: centered. An accent tile with one icon, a two-tone h2, one line of intro,
   the CTA pair and a quiet row of text links. No glow, no dark band. */

.rl-cta {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.rl-cta__tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--rl-space-6);
  border-radius: var(--rl-radius-card);
  background: var(--rl-accent);
  color: var(--rl-accent-ink);
}

.rl-cta__intro {
  margin-top: var(--rl-space-4);
  color: var(--rl-muted);
  font-size: var(--rl-fs-5);
  line-height: 1.6;
}

.rl-cta__actions {
  justify-content: center;
  margin-top: var(--rl-space-6);
}

.rl-cta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rl-space-2) var(--rl-space-5);
  margin: var(--rl-space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--rl-fs-7);
}

.rl-cta__links a {
  color: var(--rl-muted);
  text-decoration: none;
}

.rl-cta__links a:hover {
  color: var(--rl-ink);
  text-decoration: underline;
}

.rl-cta__form {
  margin-top: var(--rl-space-6);
}

@media (max-width: 760px) {
  .rl-cta__intro {
    font-size: var(--rl-fs-6);
  }
}

/* ---- footer ---- */
/* Footer: a ruled section with the brand and one line on the left, link columns on the right,
   and a bottom bar with legal text. */

.rl-footer {
  padding-block: var(--rl-space-8) var(--rl-space-6);
}

.rl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--rl-space-8);
}

.rl-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-3);
  max-width: 320px;
}

.rl-footer__about {
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
  line-height: 1.6;
}

.rl-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rl-space-6);
}

.rl-footer__title {
  margin-bottom: var(--rl-space-3);
  color: var(--rl-ink);
  font-size: var(--rl-fs-prose-sm);
  font-weight: var(--rl-weight-semibold);
}

.rl-footer__links {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--rl-muted);
  font-size: var(--rl-fs-7);
  text-decoration: none;
}

.rl-footer__links a:hover {
  color: var(--rl-ink);
  text-decoration: underline;
}

.rl-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-3);
  margin-top: var(--rl-space-8);
  padding-top: var(--rl-space-5);
  border-top: 1px solid var(--rl-hair);
  color: var(--rl-muted);
  font-size: var(--rl-fs-prose-sm);
}

.rl-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rl-footer__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rl-ok);
}

@media (pointer: coarse) {
  .rl-footer__links a {
    min-height: 44px;
  }
}

@media (max-width: 899px) {
  .rl-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rl-space-7);
  }
}

@media (max-width: 560px) {
  .rl-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}