/* ============================================================
   Rulebase composition — the rest of the site.
   ------------------------------------------------------------
   The landing page is one composition. A website needs a second
   one: a shorter hero, a section palette the sub-pages draw
   from, and a nav that is the same object on every page.

   Nothing here restyles the landing page. It adds the section
   types the inner pages need, in the same vocabulary:

     · 100px inset instead of a centred max-width container
     · sub-1.0 leading on display type
     · hairline rules doing the work borders would do elsewhere
     · the accent spent only on the claim, the status and the
       number that counts (see accent.css)

   Colour, type and radii still resolve through the tokens in
   theme.css. There are no literals below that a theme
   could not have set.
   ============================================================ */

/* ---------------------------------------------------------- */
/* Shared nav — one object, every page                         */
/* ------------------------------------------------------------
   The landing nav sits inside the dark hero. Inner pages keep
   that, so the nav never changes colour between pages. */

/* Direct children throughout. These describe the links sitting on
   the bar itself — cream on the dark hero, with a hairline under
   the one you are on. Every .rb-menu-item is an anchor inside
   .rb-nav-links as well, so unscoped they also reached into the
   dropdown: the entry for the current page came out white on a
   near-white panel, with a white 1px rule drawn under it. */
.rb-nav-links > a[aria-current='page'] { color: #FFFFFF; }
.rb-nav-links > a {
  position: relative;
  padding-bottom: 2px;
  transition: color 160ms var(--ease);
}
.rb-nav-links > a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.rb-nav-burger { display: none; }

/* ---------------------------------------------------------- */
/* Workforce band                                              */
/* ------------------------------------------------------------
   Measured off their `workforce-section`:

     section     padding 120px 100px 0
     h2          60 / 56 / -1.8px, max-width 838, mb 24
     lead        14 / 20, max-width 428, mb 80
     content     card-bg, radius 4, height 719, overflow hidden
     panel       flex, gap 40, height 100%
     left        width 563, flex-shrink 0, padding 24
     panel h3    36 / 41 / -.9px, max-width 454
     item list   pinned to the bottom of the left column
     item        flex, space-between, padding 20px 0,
                 hairline on top, none on the first
     name        14 / 20 / 500      desc  14 / 20, opacity .5
     right       flex 1, min-width 0, padding 10
     right-inner white, radius 4, fills, overflow hidden

   The one deliberate departure: theirs carries a second row of
   outer tabs above the card, because Rulebase sells two product
   lines. Distrify's four modules are already the rail further
   up the page, so a second two-way split there said the same
   thing twice. The card stands on its own instead.             */

.rb-wf-h2 {
  max-width: 838px;
  margin-bottom: 24px;
  line-height: 0.9334;
  letter-spacing: -0.03em;
}
.rb-wf-lead {
  max-width: 428px;
  margin-bottom: 80px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.0064em;
  color: var(--c-ink);
}

.rb-wf-content {
  background: var(--c-surface-warm);
  border-radius: 4px;
  height: 719px;
  overflow: hidden;
}
.rb-wf-panel { display: flex; gap: 40px; height: 100%; }

.rb-wf-left {
  flex-shrink: 0;
  width: 563px;
  padding: 24px;
  position: relative;
}
.rb-wf-h3 {
  font-family: var(--f-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.139;
  letter-spacing: -0.025em;
  max-width: 454px;
  text-wrap: balance;
}

/* The list sits at the foot of the left column, not under the
   statement — which is what gives the card its weight. */
.rb-wf-items { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.rb-wf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--c-line-strong);
  cursor: pointer;
  text-decoration: none;
}
.rb-wf-item:first-child { border-top: 0; }
.rb-wf-name {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.0064em;
  color: var(--c-ink);
}
.rb-wf-desc {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.0064em;
  color: var(--c-ink);
  opacity: .5;
  margin-top: 6px;
  text-wrap: pretty;
}
.rb-wf-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rb-wf-arrow circle { transition: stroke 200ms var(--ease); }
.rb-wf-item:hover .rb-wf-arrow circle,
.rb-wf-item[aria-selected='true'] .rb-wf-arrow circle { stroke: var(--c-ink-3); }
.rb-wf-item[aria-selected='true'] .rb-wf-desc { opacity: .72; }

.rb-wf-right { flex: 1; min-width: 0; padding: 10px; }
.rb-wf-right-inner {
  background: var(--c-surface);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The visual inside the white panel */
.rb-wf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line);
  font-size: 12.5px;
  color: var(--c-ink-3);
  flex: none;
}
.rb-wf-body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.rb-wf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--c-surface-warm);
  border-radius: 4px;
  padding: 11px 13px;
  font-size: 13px;
}
.rb-wf-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.rb-wf-kpis > div {
  background: var(--c-surface-warm);
  border-radius: 4px;
  padding: 12px 13px;
}
.rb-wf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rb-wf-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--c-ink-3);
}

@media (max-width: 1180px) {
  .rb-wf-left { width: 46%; }
}
@media (max-width: 900px) {
  .rb-wf-content { height: auto; }
  .rb-wf-panel { flex-direction: column; gap: 0; }
  .rb-wf-left { width: 100%; padding: 24px 24px 0; }
  .rb-wf-items { position: static; margin-top: 24px; }
  .rb-wf-right { flex: none; width: 100%; height: 420px; padding: 20px; }
  .rb-wf-lead { margin-bottom: 40px; }
}

/* ---------------------------------------------------------- */
/* Sub-page hero                                               */
/* ------------------------------------------------------------
   Shorter than the landing hero and split 54/46 rather than
   52/48, because inner headlines run shorter and the aside
   carries a single artefact instead of a stacked promo. */

.rb-phero {
  position: relative;
  background: var(--c-dark);
  color: var(--c-on-dark);
  overflow: hidden;
  display: grid;
  /* Two proportions, because two very different things sit in
     the right column.

     The partner animation is drawn at 760px and has to lay out at
     full size, so those pages get 42/58 (.rb-phero-wide). Every
     other hero carries a single card artefact perhaps 560px wide;
     giving that 58% of an 1880px screen stretched it into a thin
     band with a lot of dark around it, and starved the headline
     at the same time. They get an even split. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  /* The page gutter lives here, on the grid, not on the columns.
     It used to sit on .rb-phero-left, which also carries the
     measure — and because everything on this site is border-box,
     a 284px gutter at 1880px ate more than half of a 548px
     max-width and left the headline 264px to wrap in. That is
     where the one-word-per-line column came from. */
  padding: 0 100px 72px;
}
.rb-phero-wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
.rb-phero-noart { display: block; padding-bottom: 96px; }

.rb-phero-left {
  position: relative;
  z-index: 2;
  padding: 148px 0 56px;
  max-width: 46ch;
  /* Still a column: the logo plate is align-self:flex-start and
     drops next to the kicker without it. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The artefact, across the whole measure instead of 46% of the
   viewport. This is the point of the change: the partner
   animation was drawn at 760px and squeezed into roughly 600,
   which truncated part numbers and stacked labels three deep. */
.rb-phero-stage {
  position: relative;
  z-index: 2;
  padding: 148px 0 56px;
  min-width: 0;
}

/* The partner's own mark, on a light plate because the hero is
   dark and most of these logos are drawn for white. */
.rb-phero-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: #F7F7F4;
  border-radius: var(--r-tile);
  padding: 10px 14px;
  margin-bottom: 26px;
}
.rb-phero-logo img { height: 26px; width: auto; max-width: 170px; object-fit: contain; display: block; }

.rb-phero-kicker {
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(247, 247, 244, .48);
  margin-bottom: 22px;
}
/* width, not just max-width.
   ---------------------------------------------------------------
   align-items:flex-start makes every child of the column shrink to
   fit, and `text-wrap: balance` on .rb-display will then happily
   pick the measure itself — it equalises line lengths, and the
   narrowest ribbon it can find equalises them perfectly. On an
   1880px screen "One record per part, not four exports of it."
   collapsed to a 211px column six lines deep, one word per line.

   Filling the column takes the choice away: balance now balances
   inside a measure the layout decided, which is what it is for. */
.rb-phero-h1 {
  color: #F7F7F4;
  width: 100%;
  max-width: 17ch;
  text-wrap: balance;
}
.rb-phero-lead {
  margin-top: 22px;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: -0.0056em;
  color: rgba(247, 247, 244, .72);
  text-wrap: pretty;
}
.rb-phero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }


/* A single artefact, never more than one.

   The 420px cap here is what kept the partner animation small: it
   was sized for the old 46% panel and survived the move to a
   full-width stage, so the artefact went on scaling itself down
   into a column that no longer existed. Two rules for the same
   selector, and the older one won by position. */
.rb-phero-art {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
}
/* The mock artefacts are still cards and still want a card's
   measure; only the animation uses the full stage.

   `min()` rather than a flat 560: a fixed cap is a floor as well
   as a ceiling, and at 375px it pushed the document to 455. */
.rb-phero-art > .rb-mock:not(.rb-mock-bare) { max-width: min(560px, 100%); }
.rb-phero-art .rb-mock { min-width: 0; }
.rb-phero-art .rb-mock-row, .rb-phero-art .rb-kpis { min-width: 0; }
.rb-phero-art .rb-mock-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A mock is a white surface and must never inherit the cream
   text of a dark parent — which is exactly what happens when
   one sits in the hero. The landing hero worked around this
   per element; this fixes it at the source. */
.rb-mock { color: var(--c-ink); }

/* The base mock row is a three-column grid. The hero artefact
   carries a status cell as well, so it declares four. */
.rb-mock-row-4 { grid-template-columns: minmax(0, 1fr) auto auto auto; }

/* Crumb rail under the hero: where you are in the site. */
.rb-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 100px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-canvas);
  font-size: 12.5px;
  color: var(--c-ink-4);
}
.rb-crumb a:hover { color: var(--c-ink); }
.rb-crumb i { font-style: normal; opacity: .4; }

/* ---------------------------------------------------------- */
/* Section heads                                               */
/* ---------------------------------------------------------- */

.rb-shead { max-width: 62ch; }
.rb-eyebrow {
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-4);
  margin-bottom: 20px;
  display: block;
}
.rb-shead .rb-lead { margin-top: 20px; }

/* ---------------------------------------------------------- */
/* Card grid                                                   */
/* ------------------------------------------------------------
   Rulebase cards have no shadow and no fill by default. The
   rule between them is the card. */

.rb-pcards {
  display: grid;
  gap: 1px;
  margin-top: 56px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.rb-pcards[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
.rb-pcards[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
.rb-pcards[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }

.rb-pcard {
  background: var(--c-canvas);
  padding: 34px 30px 38px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A card standing on a picture.
   ---------------------------------------------------------------
   The picture is the card's ground, not an illustration above the
   text: it fills the top of the card, the words sit under it on
   the canvas, and the join is the card's own edge rather than a
   frame around the image.

   4 / 3, not the tall portrait it would be at the source's 16:9
   or at the 328x398 the reference uses. A column of tall cards
   pushes the words that matter below the fold; squarer keeps the
   picture large enough to read as stone and the sentence in the
   same glance. */
.rb-pcard-pic { padding: 0 0 30px; overflow: hidden; }
.rb-pcard-shot {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--c-surface-warm);
  overflow: hidden;
}
.rb-pcard-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The renders are lit for a white studio, so on the canvas they
     read a shade brighter than everything around them. */
  filter: saturate(.92) brightness(.99);
}
.rb-pcard-pic .rb-pcard-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 30px 0;
}
.rb-pcard:not(.rb-pcard-pic) .rb-pcard-body {
  display: contents;
}

@media (max-width: 900px) {
  /* Wider than tall on a phone, where a 4/3 picture in a
     single column would be most of the screen. */
  .rb-pcard-shot { aspect-ratio: 16 / 9; }
}
.rb-pcard .rb-glyph { color: var(--c-ink); opacity: .9; }
.rb-pcard h3 {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.rb-pcard p {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.0064em;
  color: var(--c-ink-3);
  text-wrap: pretty;
}
.rb-pcard-more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rb-pcard-more svg { transition: transform 200ms var(--ease); }
.rb-pcard:hover .rb-pcard-more svg { transform: translateX(3px); }

/* A card grid on the soft band inverts its own fill. */
.rb-band-soft .rb-pcard { background: var(--c-surface-soft); }
.rb-dark .rb-pcards { background: rgba(247, 247, 244, .14); border-color: rgba(247, 247, 244, .14); }
.rb-dark .rb-pcard { background: var(--c-dark); color: #F7F7F4; }
.rb-dark .rb-pcard p { color: rgba(247, 247, 244, .66); }

/* ---------------------------------------------------------- */
/* Alternating split rows                                      */
/* ---------------------------------------------------------- */

.rb-prow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 88px 0;
  border-bottom: 1px solid var(--c-line);
}
.rb-prow:last-child { border-bottom: 0; }
.rb-prow[data-flip='1'] > *:first-child { order: 2; }
.rb-prow h3 {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: 16px;
}
.rb-prow > div > .rb-lead { margin-top: 18px; max-width: 44ch; }

/* The notes under a use case are a list, so they are set as one.
   They used to carry an icon plate each, which put three 44px
   tiles down the left of a three-line list: the plates were the
   loudest thing in the block and they said nothing, since the
   same dot field appeared beside every line. A bullet is enough
   to mark a list item, and it leaves the words as the thing you
   see. */
.rb-plist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.rb-plist li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink-2);
}
.rb-plist li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-ink);
}
.rb-plist .rb-glyph { display: none; }

/* ---------------------------------------------------------- */
/* Numbered steps                                              */
/* ---------------------------------------------------------- */

.rb-steps { margin-top: 56px; border-top: 1px solid var(--c-line); }
.rb-step {
  display: grid;
  grid-template-columns: 92px 1fr 1.15fr;
  gap: 40px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--c-line);
}
.rb-step-n {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--c-ink-4);
  padding-top: 4px;
}
.rb-step h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.rb-step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-3);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- */
/* Figure band                                                 */
/* ------------------------------------------------------------
   `.rb-figure` is the accent's third question — which number
   counts — so it is deliberately the only tinted thing here. */

.rb-figs {
  display: grid;
  gap: 1px;
  margin-top: 52px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.rb-fig { background: var(--c-canvas); padding: 34px 30px; }
.rb-figure {
  font-family: var(--f-display);
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -0.03em;
  display: inline-block;
}
.rb-fig-l {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink-3);
  max-width: 26ch;
}
.rb-band-soft .rb-fig { background: var(--c-surface-soft); }

/* ---------------------------------------------------------- */
/* Spec / comparison table                                     */
/* ---------------------------------------------------------- */

.rb-ptable { margin-top: 52px; border-top: 1px solid var(--c-line); }
.rb-ptable-row {
  display: grid;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink-2);
}
.rb-ptable-row.is-head {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-4);
  padding: 14px 0;
}
.rb-ptable-row > *:first-child { color: var(--c-ink); }

/* ---------------------------------------------------------- */
/* FAQ                                                          */
/* ---------------------------------------------------------- */

.rb-faq { margin-top: 48px; border-top: 1px solid var(--c-line); }
.rb-faq-item { border-bottom: 1px solid var(--c-line); }
.rb-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.rb-faq-q i {
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  position: relative;
}
.rb-faq-q i::before,
.rb-faq-q i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--c-ink-3);
  transition: transform 220ms var(--ease);
}
.rb-faq-q i::after { transform: rotate(90deg); }
.rb-faq-item[data-open='true'] .rb-faq-q i::after { transform: rotate(0deg); }
.rb-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--ease);
}
.rb-faq-item[data-open='true'] .rb-faq-a { grid-template-rows: 1fr; }
.rb-faq-a > div { overflow: hidden; }
.rb-faq-a p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--c-ink-3);
  max-width: 68ch;
  padding-bottom: 28px;
  text-wrap: pretty;
}

/* ---------------------------------------------------------- */
/* Code panel                                                  */
/* ---------------------------------------------------------- */

.rb-codewrap {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.rb-code {
  background: var(--c-dark);
  border-radius: 6px;
  padding: 22px 24px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(247, 247, 244, .88);
  overflow-x: auto;
}
.rb-code .c { color: rgba(247, 247, 244, .42); }
.rb-code .k { color: #F7F7F4; }
.rb-code-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 24px;
}
.rb-code-tab {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 12px;
  margin-bottom: -1px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--c-ink-4);
  cursor: pointer;
}
.rb-code-tab[aria-selected='true'] { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ---------------------------------------------------------- */
/* Partner header block                                        */
/* ---------------------------------------------------------- */

.rb-partner-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 52px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
.rb-pmeta { background: var(--c-canvas); padding: 24px 26px; }
.rb-pmeta-k {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-4);
}
.rb-pmeta-v {
  margin-top: 9px;
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* ---------------------------------------------------------- */
/* Index rail — how an overview page lists its children        */
/* ---------------------------------------------------------- */

.rb-index { margin-top: 56px; border-top: 1px solid var(--c-line); }
.rb-index-row {
  display: grid;
  grid-template-columns: 56px 1fr 1.3fr 130px;
  gap: 32px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left 220ms var(--ease);
}
.rb-index-row:hover { padding-left: 10px; }
.rb-index-row h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.rb-index-row p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink-3);
  text-wrap: pretty;
}
.rb-index-go {
  justify-self: end;
  font-size: 13px;
  color: var(--c-ink-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rb-index-row:hover .rb-index-go { color: var(--c-ink); }

/* ---------------------------------------------------------- */
/* Responsive                                                  */
/* ------------------------------------------------------------
   The inset collapses before the grids do: Rulebase keeps its
   two-column blocks intact well down the range and gives up the
   100px gutter first. */

@media (max-width: 1180px) {
  /* Every element that carries the gutter, not just three of
     them — the footer, trust bar, CTA and dark band were still
     on 100px here while the sections had moved to 56, so nothing
     lined up below 1180. */
  .rb-wrap, .rb-nav, .rb-crumb,
  .rb-trust, .rb-pull, .rb-dark, .rb-catch, .rb-footer,
  .rb-problem-sticky { padding-left: var(--wrap-x); padding-right: var(--wrap-x); }
  .rb-phero { padding-inline: 56px; }
  .rb-prow { gap: 48px; }
  .rb-step { grid-template-columns: 68px 1fr 1fr; gap: 28px; }
  .rb-index-row { grid-template-columns: 44px 1fr 1.2fr 40px; gap: 22px; }
}

@media (max-width: 900px) {
  .rb-wrap, .rb-nav, .rb-crumb { padding-left: var(--wrap-x); padding-right: var(--wrap-x); }
  .rb-phero { min-height: 0; }
  .rb-nav-links { display: none; }
  .rb-pcards[data-cols='3'], .rb-pcards[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
  .rb-prow { grid-template-columns: 1fr; gap: 34px; padding: 56px 0; }
  .rb-prow[data-flip='1'] > *:first-child { order: 0; }
  .rb-step { grid-template-columns: 1fr; gap: 12px; }
  /* A grid track sized auto/1fr still takes its minimum from its
     content, and monospace code has no wrap points — without
     minmax(0,·) plus min-width:0 the track grows past the screen
     and takes the document with it. */
  .rb-codewrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rb-codewrap > * { min-width: 0; }
  .rb-index-row { grid-template-columns: 34px 1fr; gap: 16px; row-gap: 8px; }
  .rb-index-row p { grid-column: 2; }
  .rb-index-go { display: none; }
  .rb-sec { padding-top: 72px; }
}
@media (max-width: 560px) {
  .rb-pcards[data-cols='2'],
  .rb-pcards[data-cols='3'],
  .rb-pcards[data-cols='4'] { grid-template-columns: 1fr; }
  .rb-ptable-row { grid-template-columns: 1fr !important; gap: 6px; }
  .rb-ptable-row.is-head { display: none; }
}

/* The same centred measure for the sub-page chrome. These live
   here rather than in site.css because that file loads
   first, and `padding: 18px 100px` below would win over it. */
@media (min-width: 1513px) {
  .rb-crumb {
    padding-left: max(100px, 50% - 656px);
    padding-right: max(100px, 50% - 656px);
  }
  .rb-phero { padding-inline: max(100px, 50vw - 656px); }
}

/* ============================================================
   Plinth hero
   ------------------------------------------------------------
   The picture is the ground the words stand on. The outcrop is
   cut out along its ridge, so the boundary between the dark and
   the stone is the rock's own broken edge — no rule and no fade
   to invent one.

   It is anchored to the bottom and cropped from the top, so the
   mass always continues past the foot of the section. A rock
   fully inside the frame reads as an object on a table; one that
   runs off the bottom reads as bedrock.
   ============================================================ */

/* The rock is anchored to the bottom edge rather than carried
   there by the flow. That is the whole point: section height and
   rock height then move independently, and no combination of the
   two can leave an empty dark band between the rock and the white
   below it. The padding is what holds the section open under the
   copy; the rock rises out of the bottom of that space. */
.rb-plinth {
  position: relative;
  background: var(--c-dark);
  color: var(--c-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  /* Same 820px as the landing hero, so the two dark blocks are
     the same height on every page. The rock hangs off the bottom
     of that box rather than setting its size. */
  min-height: 820px;
}


/* No max-width here. With box-sizing: border-box the centring
   padding is taken OUT of it, so at 2000px the 900px box kept
   344px of gutter on each side and left 212px for the words —
   one per line. The gutter sets the position; the headline and
   lead cap their own measure in ch. */
.rb-plinth-copy {
  position: relative;
  z-index: 2;
  padding: 148px 100px 20px;
}
.rb-plinth-h1 {
  color: #F7F7F4;
  max-width: 17ch;
}
.rb-plinth-lead {
  margin-top: 24px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: -0.0056em;
  color: rgba(247, 247, 244, .72);
  text-wrap: pretty;
}
.rb-plinth-copy .rb-phero-cta { margin-top: 32px; }

/* The front rock: the whole picture, nothing cropped.

   The box carries the file's own 16:9, so `cover` has nothing to
   cut — the full massif is in frame, small enough to read as a
   mountain rather than a close-up, and the carved components sit
   clear of every edge.

   The cap has to be on the width, not the height: an explicit
   width beats aspect-ratio, so a max-height would leave an
   over-wide box and `cover` would start cropping again. 1102px
   is 620px at this ratio — past roughly 1900px viewport the
   picture stops growing instead of climbing into the nav. */
.rb-plinth-rock {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58%, 1102px);
  aspect-ratio: 2000 / 1125;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.rb-plinth-rock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rb-rock-pos, 50% 0%);
}
/* The front rock's own left border is feathered over 3% — about
   26px — so it dissolves into the ridge behind it. This is not
   the grey haze that got rejected earlier: that faded stone into
   black, which thins it out. Here there is rock behind the whole
   ramp, so it blends stone into stone and the border stops being
   a line. Under 2.6x magnification the join is what finally
   disappeared; at 1x it was already close. */
.rb-plinth-face {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%);
}

/* The mass carried on to the left, instead of stopping at the
   file's border.

   The picture has no left silhouette — column 0 is solid rock
   from y 0.58 down — so the border is a straight cut through the
   stone and no crop or mask removes it. What removes it is a
   second ridge behind: the same photograph, smaller, set so that
   its own skyline picks up exactly where the front rock's border
   ends and runs down to the corner of the section.

   The numbers are not eyeballed. Every value is a percentage of
   the front rock's box, so the join holds at any width:

     top 53.6% puts the back ridge's y-0.58 skyline on the section
              floor, which is also the front rock's bottom edge —
              so it meets the floor exactly and, being at 0.58,
              shows no cut of its own either
     left -36% / width 80% place its peak under the front rock's
              border, so the slope starts at the height the front
              border ends at

   Darkened and slightly blurred so it reads as stone further
   back rather than as the same photograph twice. */
/* Scoped through .rb-plinth-rock on purpose: the shared
   `.rb-plinth-rock img` rule above is one class plus one type and
   would otherwise out-specify a bare class here, pinning this to
   100% x 100% — which is exactly what it did on the first pass. */
.rb-plinth-rock .rb-plinth-ridge {
  position: absolute;
  left: -36%;
  /* 53.6, not 54: at 54 the two skylines met at exactly the same
     pixel, which leaves nothing for rounding and can open a dark
     hairline along the join. This lifts the back ridge ~2px so it
     runs behind the front border, and still lands its own skyline
     on the section floor rather than above it. */
  top: 53.6%;
  width: 80%;
  height: auto;
  object-fit: fill;
  z-index: 0;
  /* Barely darker, not obviously darker. A big tonal step across
     the join is what made the border read as a line even once
     there was rock on both sides of it. */
  filter: brightness(.94) contrast(.97);
}

/* Narrower screens give the picture more of the width, since
   there is less room beside the copy for it to sit in. The back
   ridge is measured off the front rock's own box, so it follows
   without needing its own numbers. */
@media (max-width: 1180px) {
  .rb-plinth { min-height: 760px; }
  .rb-plinth-rock { width: 78%; }
}
@media (max-width: 900px) {
  /* Uncropped at full width the picture is only 56vw tall, so the
     section has to open up by about that much or the stone rides
     up under the lead and the buttons. */
  .rb-plinth { min-height: 0; padding-bottom: 54vw; }
  .rb-plinth-rock { width: 100%; }
}

@media (max-width: 1180px) {
  .rb-plinth-copy { padding-left: 56px; padding-right: 56px; }
}
@media (min-width: 1513px) {
  .rb-plinth-copy { padding-left: max(100px, 50vw - 656px); padding-right: max(100px, 50vw - 656px); }
}
@media (max-width: 900px) {
  .rb-plinth-copy { padding: 120px 24px 40px; }
}

/* ============================================================
   Use case library
   ------------------------------------------------------------
   Twenty-eight cards behind two filter rows and a search box.
   The chips are the one place on the site with a selected state,
   so they take the same quiet treatment as the rest of the
   system: a hairline ring when idle, ink fill when chosen. No
   accent — a filter is navigation, not a claim.
   ============================================================ */

.rb-uc-filters {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rb-uc-row { display: flex; flex-wrap: wrap; gap: 8px; }

.rb-uc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.rb-uc-chip span {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-ink-4);
}
.rb-uc-chip:hover { background: var(--c-surface-warm); }
.rb-uc-chip[aria-selected='true'] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
}
.rb-uc-chip[aria-selected='true'] span { color: rgba(247, 247, 244, .55); }

.rb-uc-search { display: block; margin-top: 4px; }
.rb-uc-search input {
  width: 100%;
  max-width: 340px;
  padding: 9px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-input);
  background: var(--c-surface);
  font: inherit;
  font-size: 14px;
  color: var(--c-ink);
}
.rb-uc-search input::placeholder { color: var(--c-ink-4); }

.rb-uc-count {
  margin-top: 26px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-ink-4);
}

/* Same construction as the card grid elsewhere: the 1px gap over
   a line-coloured ground is the divider, not a border per card. */
.rb-uc-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.rb-uc-card {
  background: var(--c-canvas);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 120px;
}
.rb-uc-card[hidden] { display: none; }
/* The whole card is the target, not just the words in the title:
   a 23-item grid where only the heading is clickable is a grid
   people give up on. The link is stretched over the card and the
   card is the positioning context for it. */
.rb-uc-card { position: relative; }
.rb-uc-link { color: inherit; text-decoration: none; }
.rb-uc-link::after { content: ''; position: absolute; inset: 0; }
.rb-uc-card:hover { background: var(--c-surface); }
.rb-uc-card:hover .rb-uc-link { text-decoration: underline; text-underline-offset: 3px; }
.rb-uc-card .rb-glyph { color: var(--c-ink); opacity: .9; }
.rb-uc-card h3 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.rb-uc-card p {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.0064em;
  color: var(--c-ink-3);
  text-wrap: pretty;
}
.rb-uc-who {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

/* ============================================================
   The jobs in one platform category
   ------------------------------------------------------------
   The link between the module page and the library. Two columns
   of rows rather than cards: seven jobs is a list, and a list
   reads faster than a grid you have to scan in two directions.
   ============================================================ */
.rb-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--c-line);
}
.rb-job { border-bottom: 1px solid var(--c-line); }
.rb-job-link {
  display: grid;
  /* 44px because that is what .rb-glyph actually measures — the
     size argument to dotIcon only sizes the artwork inside the
     plate. A 24px track let every icon overlap its own title. */
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 4px 16px;
  padding: 22px 0;
  color: inherit;
  text-decoration: none;
}
.rb-job-link .rb-glyph { grid-row: 1 / span 3; margin-top: 1px; }
.rb-job-link svg:last-child { grid-column: 3; grid-row: 1; margin-top: 4px; color: var(--c-ink-4); transition: transform .18s ease; }
.rb-job-link:hover svg:last-child { transform: translateX(3px); color: var(--c-ink); }
.rb-job-t { grid-column: 2; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.rb-job-d { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--c-ink-3); }
.rb-job-who {
  grid-column: 2;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-4);
}
.rb-jobs-more { margin-top: 26px; font-size: 15px; }
.rb-jobs-more a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }
.rb-jobs-more svg { vertical-align: -2px; color: var(--c-ink-4); }

@media (max-width: 900px) {
  .rb-jobs { grid-template-columns: 1fr; gap: 0; }
}

/* A deep link arrives at one card out of twenty-eight; the ring
   is what tells you which one you were sent to. */
.rb-uc-card.is-target { box-shadow: inset 0 0 0 2px var(--c-ink); }

.rb-uc-empty { margin-top: 28px; font-size: 14px; color: var(--c-ink-3); }
.rb-uc-reset {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--c-ink);
  text-decoration: underline; cursor: pointer;
}

@media (max-width: 700px) {
  .rb-uc-grid { grid-template-columns: 1fr; }
}

/* An editorial warning band. The only place on the site that
   uses the critical accent as a fill rather than as emphasis,
   because the one thing it says is "do not publish this yet". */
.rb-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 14px 18px;
  border-radius: var(--r-tile);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-warm);
  font-size: 14px;
  line-height: 1.5;
}
.rb-banner strong {
  font-weight: 400;
  color: var(--c-bad);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 11px;
}
.rb-banner span { color: var(--c-ink-3); }

/* ============================================================
   Touch targets
   ------------------------------------------------------------
   `pointer: coarse` rather than a width breakpoint: the thing
   that decides whether 34px is big enough is the finger, not the
   viewport. A tablet in landscape is wide and still touched.
   ============================================================ */
@media (pointer: coarse), (max-width: 900px) {
  .rb-uc-chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .rb-code-tab { min-height: 44px; }
  .rb-faq-q { min-height: 48px; }
  .rb-index-row { padding-top: 20px; padding-bottom: 20px; }
  .rb-pcard-more, .rb-ch-cta { padding-top: 16px; padding-bottom: 8px; }
}

/* ============================================================
   Legal prose
   ------------------------------------------------------------
   The one place on the site meant to be read straight through
   rather than scanned, so it is a single column of continuous
   text with no cards, no grid and no accent.
   ============================================================ */

.rb-legal { max-width: 68ch; }
.rb-legal > .rb-lead { margin-bottom: 8px; }
.rb-legal-updated {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-ink-4);
  margin-bottom: 22px;
}
.rb-legal h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
}
.rb-legal p,
.rb-legal li {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.004em;
  color: var(--c-ink-2);
  text-wrap: pretty;
}
.rb-legal p { margin-bottom: 14px; }
.rb-legal ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.rb-legal li { margin-bottom: 8px; }
.rb-legal a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.rb-legal a:hover { color: var(--c-ink); }

/* Key/value pairs — a company address is a table of facts, not a
   paragraph, and reads far faster as one. */
.rb-legal dl { margin: 0 0 20px; }
.rb-legal dl > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
}
.rb-legal dt { font-size: 13px; color: var(--c-ink-4); }
.rb-legal dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }

@media (max-width: 700px) {
  .rb-legal dl > div { grid-template-columns: 1fr; gap: 2px; }
  .rb-legal h2 { font-size: 21px; margin-top: 36px; }
}

/* A hero with no artefact beside it: one column, and shorter,
   because there is nothing to balance against. */
.rb-phero-plain {
  display: block;
  min-height: 0;
}
.rb-phero-plain .rb-phero-left {
  padding-bottom: 64px;
  max-width: 62ch;
}

/* ============================================================
   The data-flow artefact
   ------------------------------------------------------------
   Rebuilt from the DS 2.0 partner heroes, which showed the same
   three beats: a request arrives from the customer's side,
   Distrify answers it, the answer lands back. Theirs was lime on
   slate; this is ink on greige, and the only coloured thing is
   the pulse on the live dot — the accent's second question,
   "what is live now", is exactly what that dot answers.

   Nothing animates until .is-running is set, which an
   IntersectionObserver does when the card is on screen.
   ============================================================ */

.rb-flow-live { display: inline-flex; align-items: center; gap: 7px; }
.rb-flow-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rb-a, var(--c-ok));
  flex: none;
}
.rb-flow.is-running .rb-flow-live i { animation: rb-flow-pulse 1.9s ease-out infinite; }
@keyframes rb-flow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210, 68, 41, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(210, 68, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 68, 41, 0); }
}

.rb-flow-body {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: center;
  gap: 8px;
  padding: 20px 18px 16px;
}
.rb-flow-node { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rb-flow-icon { color: var(--c-ink); opacity: .85; }
.rb-flow-t {
  font-size: 13px; line-height: 1.3; letter-spacing: -0.006em;
  color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rb-flow-s { font-size: 11px; line-height: 1.35; color: var(--c-ink-4); }
.rb-flow-hub .rb-flow-t { font-family: var(--f-display); font-size: 15px; }

/* The rail is the line; the dots are what travels it. */
.rb-flow-rail { position: relative; height: 1px; background: var(--c-line-strong); }
.rb-flow-dot {
  position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-ink);
  opacity: 0;
}
.rb-flow.is-running .rb-flow-dot-1 { animation: rb-flow-go 2.4s linear infinite; }
.rb-flow.is-running .rb-flow-dot-2 { animation: rb-flow-go 2.4s linear infinite 1.2s; }
.rb-flow.is-running .rb-flow-dot-3 { animation: rb-flow-go 2.4s linear infinite .6s; }
.rb-flow.is-running .rb-flow-dot-4 { animation: rb-flow-go 2.4s linear infinite 1.8s; }
@keyframes rb-flow-go {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* The answer, arriving a row at a time. */
.rb-flow-rows { border-top: 1px solid var(--c-line); }
.rb-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 18px;
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
}
.rb-flow-row:last-child { border-bottom: 0; }
.rb-flow.is-running .rb-flow-row {
  animation: rb-flow-row 2.4s var(--ease) infinite;
  animation-delay: calc(var(--i) * .3s);
}
@keyframes rb-flow-row {
  0%   { opacity: 0; transform: translateY(4px); }
  18%  { opacity: 1; transform: none; }
  82%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.rb-flow-val { font-family: var(--f-mono); font-size: 12px; color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .rb-flow-row, .rb-flow-dot, .rb-flow-live i { animation: none !important; opacity: 1; }
}
@media (max-width: 560px) {
  .rb-flow-body { grid-template-columns: 1fr 28px 1fr; row-gap: 14px; }
  /* The return rail and the destination wrap to a second line
     rather than shrinking every node to nothing. */
  .rb-flow-rail-back { grid-column: 2; }
  .rb-flow-body > .rb-flow-node:last-child { grid-column: 3; }
}

/* ============================================================
   Partner hero animation
   ------------------------------------------------------------
   Ported from the design project's Partner Luminovo hero. The
   geometry, the beats and the timings are theirs; the palette is
   this system's — theirs ran lime on slate.

   Every keyframe exists twice, `-a` and `-b`. Re-assigning the
   same animation name does not restart it, so each cycle flips
   between the two copies. That is what makes the loop replay,
   and it is the design project's own device.
   ============================================================ */

.rb-fa {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(96px, .42fr) minmax(0, 1.28fr);
  align-items: center;
  /* Fluid up to 1100. Scaling it up was a mistake: a transform
     magnifies the hairlines and the 10.5px monospace along with
     everything else, so it stops looking drawn and starts looking
     zoomed. Laid out at the real width the type stays at its
     designed size and the columns simply get more room, which is
     what "bigger" should mean here.

     mountFlowAnim still scales it DOWN below 760, where the
     columns genuinely cannot hold their content. */
  width: 100%;
  max-width: 1100px;
  transform-origin: left top;
}
.rb-mock-bare { display: block; }
.rb-fa-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.rb-fa-theirs { border-color: var(--c-line-strong); box-shadow: var(--sh-hero); }

.rb-fa-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; min-height: 43px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-canvas);
  font-size: 12px; color: var(--c-ink);
}
.rb-fa-tool { font-family: var(--f-display); font-size: 14px; letter-spacing: -0.01em; }
.rb-fa-ref { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--c-ink-4); }

.rb-fa-body { padding: 16px 14px 18px; }
.rb-fa-cat { display: flex; align-items: center; gap: 12px; }
.rb-fa-cat-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-warm); color: var(--c-ink);
}
.rb-fa-cat-t { font-size: 13.5px; line-height: 1.3; color: var(--c-ink); }
.rb-fa-cat-s { font-family: var(--f-mono); font-size: 10.5px; line-height: 1.4; color: var(--c-ink-4); }

.rb-fa-rules { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 6px; }
.rb-fa-rule { display: flex; align-items: flex-start; gap: 8px; margin: -2px -4px; padding: 2px 4px; border-radius: 6px; }
.rb-fa-rule i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--rb-a, var(--c-ink)); margin-top: 6px; }
.rb-fa-rule span { font-size: 11.5px; line-height: 1.35; color: var(--c-ink-3); }

.rb-fa-mid { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.rb-fa-legs { display: flex; flex-direction: column; gap: 22px; }
.rb-fa-leg-label,
.rb-fa-leg-t {
  font-family: var(--f-mono); font-size: 10.5px; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-on-dark-2); padding-left: 12px;
}
.rb-fa-leg { display: flex; flex-direction: column; gap: 7px; }
.rb-fa-leg-t { text-transform: none; letter-spacing: 0; line-height: 1; }
.rb-fa-rail { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(247, 247, 244, .26); }
.rb-fa-rail i {
  position: absolute; top: -2px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rb-a, #F7F7F4);
  opacity: 0;
}

.rb-fa-drop-wrap { position: relative; padding: 13px 14px 0; }
.rb-fa-drop {
  position: relative; display: flex; align-items: center; gap: 10px;
  border: 1px dashed var(--c-line-strong); border-radius: 9px;
  padding: 9px 11px; background: var(--c-canvas); overflow: hidden;
}
.rb-fa-drop-icon { flex: none; color: var(--c-ok); display: inline-flex; }
.rb-fa-drop-text { min-width: 0; flex: 1 1 auto; }
.rb-fa-file { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.2; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-fa-status { font-size: 10px; line-height: 1.3; color: var(--c-ink-4); margin-top: 3px; }
.rb-fa-spin {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--c-line-strong); border-top-color: var(--c-ink);
  animation: rb-fa-spin 700ms linear infinite;
}
.rb-fa-check { flex: none; color: var(--c-ok); display: inline-flex; }
.rb-fa-prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--rb-a, var(--c-ink)); }
.rb-fa-cursor { position: absolute; left: 44px; top: 34px; filter: drop-shadow(0 1px 2px rgba(26, 23, 22, .45)); }

.rb-fa-thead,
.rb-fa-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 72px; gap: 10px; }
.rb-fa-thead {
  padding: 13px 14px 8px;
  font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-ink-4);
}
.rb-fa-thead span:nth-child(n+2) { text-align: right; }
.rb-fa-row { align-items: center; padding: 11px 14px; border-top: 1px solid var(--c-line); }
.rb-fa-row.is-offer { background: var(--c-surface-warm); box-shadow: inset 3px 0 0 var(--rb-a, var(--c-ink)); }
.rb-fa-row.is-muted { background: var(--c-canvas); }
.rb-fa-mpn { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.2; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-fa-row.is-muted .rb-fa-mpn { color: var(--c-ink-4); }
.rb-fa-who { font-size: 10px; line-height: 1.3; color: var(--c-ink-4); margin-top: 3px; }
.rb-fa-price, .rb-fa-stock { text-align: right; font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; }
.rb-fa-price { color: var(--c-ink); }
.rb-fa-stock { font-size: 11px; color: var(--c-ink-3); }

@keyframes rb-fa-spin { to { transform: rotate(360deg); } }

@keyframes rb-fa-drop-a { 0% { opacity: 0; transform: translate(-44px, -34px) scale(.9) rotate(-4deg); } 20% { opacity: 1; } 78% { transform: translate(2px, 2px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes rb-fa-drop-b { 0% { opacity: 0; transform: translate(-44px, -34px) scale(.9) rotate(-4deg); } 20% { opacity: 1; } 78% { transform: translate(2px, 2px) scale(1.02); } 100% { opacity: 1; transform: none; } }

@keyframes rb-fa-cursor-a { 0% { opacity: 0; transform: translate(-18px, -14px); } 25% { opacity: 1; } 70% { transform: none; } 100% { opacity: 0; transform: translate(4px, 4px); } }
@keyframes rb-fa-cursor-b { 0% { opacity: 0; transform: translate(-18px, -14px); } 25% { opacity: 1; } 70% { transform: none; } 100% { opacity: 0; transform: translate(4px, 4px); } }

@keyframes rb-fa-prog-a { from { width: 0; } to { width: 100%; } }
@keyframes rb-fa-prog-b { from { width: 0; } to { width: 100%; } }

@keyframes rb-fa-in-a  { 0% { left: 100%; opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { left: 0;    opacity: 0; transform: scale(1.9); } }
@keyframes rb-fa-in-b  { 0% { left: 100%; opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { left: 0;    opacity: 0; transform: scale(1.9); } }
@keyframes rb-fa-out-a { 0% { left: 0;    opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { left: 100%; opacity: 0; transform: scale(1.9); } }
@keyframes rb-fa-out-b { 0% { left: 0;    opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { left: 100%; opacity: 0; transform: scale(1.9); } }

@keyframes rb-fa-glow { 0% { background: rgba(247,244,241,.26); } 30%, 80% { background: var(--rb-a, #F7F7F4); } 100% { background: rgba(247,244,241,.26); } }

@keyframes rb-fa-flash-a { 0% { background: transparent; } 30%, 70% { background: var(--c-surface-warm); } 100% { background: transparent; } }
@keyframes rb-fa-flash-b { 0% { background: transparent; } 30%, 70% { background: var(--c-surface-warm); } 100% { background: transparent; } }

@keyframes rb-fa-offer-a { 0% { background: var(--c-canvas); } 40% { background: var(--c-surface-warm); } 100% { background: var(--c-surface-warm); } }
@keyframes rb-fa-offer-b { 0% { background: var(--c-canvas); } 40% { background: var(--c-surface-warm); } 100% { background: var(--c-surface-warm); } }

@keyframes rb-fa-pop-a { 0% { opacity: 0; transform: translateY(-5px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes rb-fa-pop-b { 0% { opacity: 0; transform: translateY(-5px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Stacked, and the connector turns on its side. */
@media (max-width: 900px) {
  .rb-fa { grid-template-columns: 1fr; gap: 14px; }
  .rb-fa-mid { align-self: auto; }
  .rb-fa-legs { flex-direction: row; align-items: flex-end; gap: 14px; }
  .rb-fa-leg { flex: 1 1 0; }
  .rb-fa-leg-label { display: none; }
  .rb-fa-leg-t, .rb-fa-leg-label { color: var(--c-ink-4); padding-left: 0; }
  .rb-fa-rail { background: var(--c-line-strong); }
  .rb-fa-rail i { background: var(--c-ink); }
}

/* The animation brings its own cards, so the wrapper adds none. */
.rb-mock-bare { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }


/* The hero at the wide-viewport gutter, like every other band. */
@media (min-width: 1513px) {
  .rb-phero { padding-inline: max(100px, 50vw - 656px); }
}
@media (max-width: 1180px) {
  .rb-phero { gap: 28px; padding-inline: 56px; }
}
/* One column below 900: two columns at phone width would give the
   artefact about 160px, which is no artefact at all. */
@media (max-width: 900px) {
  .rb-phero { display: block; padding: 0 24px 0; }
  .rb-phero-left  { padding: 120px 0 0; max-width: none; }
  .rb-phero-stage { padding: 36px 0 0; }
}

/* ---- search variant: Octopart, oemsecrets ------------------
   A marketplace result list. The competitors are grey skeleton
   bars on purpose — naming them would invite a comparison this
   page is not making — and yours is the only row with anything
   in it. */
.rb-fa-search { grid-template-columns: minmax(0, .8fr) minmax(96px, .36fr) minmax(0, 1.3fr); }
.rb-fa-legs-one { justify-content: center; gap: 10px; }
.rb-fa-transports { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; margin-bottom: 12px; }
.rb-fa-transports span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--c-on-dark);
}
.rb-fa-transports svg { color: var(--rb-a, var(--c-ok)); flex: none; }

.rb-fa-searchbox {
  flex: 1 1 auto; min-width: 96px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 7px; padding: 5px 7px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--c-ink); white-space: nowrap;
}
.rb-fa-searchbox svg { color: var(--c-ink-4); flex: none; }

.rb-fa-search .rb-fa-thead,
.rb-fa-search .rb-fa-row { grid-template-columns: minmax(0, 1fr) 66px 74px; }
.rb-fa-search .rb-fa-thead span:nth-child(2) { text-align: right; }

.rb-fa-skel { align-items: center; }
.rb-fa-skel span {
  display: block; height: 7px; border-radius: 4px;
  background: var(--c-line-strong); opacity: .7;
}
.rb-fa-skel span:nth-child(2) { opacity: .45; }
.rb-fa-skel-pill { height: 22px !important; border-radius: 999px; opacity: .3 !important; }

.rb-fa-yours { border-top: 1px solid var(--rb-a, var(--c-ink)); border-bottom: 1px solid var(--rb-a, var(--c-ink)); }
.rb-fa-you { font-size: 13px; color: var(--c-ink); }
.rb-fa-yours .rb-fa-who { font-family: var(--f-mono); font-size: 11px; color: var(--c-ink-2); }
.rb-fa-yours .rb-fa-who b { font-weight: 400; }
.rb-fa-buy {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 999px;
  background: var(--rb-a, var(--c-ink)); color: var(--c-on-accent);
  font-size: 11px; white-space: nowrap;
}

/* ---- wire variant: the ERP pages ---------------------------
   No driver. One 6s loop: a dot out, a dot back, and the ask and
   answer trading emphasis as each arrives. */
.rb-fa-wire { display: block; }
.rb-fa-wire-top { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.rb-fa-wire-end { padding: 16px; box-shadow: none; }
.rb-fa-wire-t { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink); height: 24px; }
.rb-fa-wire-s {
  margin-top: 14px; font-family: var(--f-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .11em; color: var(--c-ink-4);
}
.rb-fa-live {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--rb-a, var(--c-ok));
  animation: rb-fa-pulse-dot 1.8s ease-out infinite;
}
@keyframes rb-fa-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(210, 68, 41, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(210, 68, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 68, 41, 0); }
}
.rb-fa-wire-line { position: relative; }
.rb-fa-wire-line::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--c-line-strong);
}
.rb-fa-wire-dot {
  position: absolute; top: calc(50% - 4px);
  width: 8px; height: 8px; border-radius: 50%;
}
.rb-fa-wire-out  { background: var(--c-ink); animation: rb-fa-wire-r 6s linear infinite; }
.rb-fa-wire-back { background: var(--rb-a, var(--c-ink)); border: 1px solid var(--c-ink); box-sizing: border-box; animation: rb-fa-wire-l 6s linear infinite; }
@keyframes rb-fa-wire-r {
  0% { left: 0; opacity: 0; } 6% { opacity: 1; }
  34% { left: calc(100% - 8px); opacity: 1; }
  41%, 100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes rb-fa-wire-l {
  0%, 50% { left: calc(100% - 8px); opacity: 0; }
  56% { opacity: 1; }
  84% { left: 0; opacity: 1; }
  91%, 100% { left: 0; opacity: 0; }
}
.rb-fa-msgs { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.rb-fa-msg {
  display: grid; grid-template-columns: 14px 62px minmax(0, 1fr); gap: 10px; align-items: baseline;
  color: var(--c-on-dark);
}
.rb-fa-msg span { font-size: 14px; color: var(--c-on-dark-2); }
.rb-fa-msg em {
  font-style: normal; font-family: var(--f-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .11em; color: var(--c-on-dark-2);
}
.rb-fa-msg b { font-family: var(--f-mono); font-size: 11.5px; font-weight: 400; }
.rb-fa-ask { animation: rb-fa-msg-ask 6s linear infinite; }
.rb-fa-ans { animation: rb-fa-msg-ans 6s linear infinite; }
@keyframes rb-fa-msg-ask { 0%, 38% { opacity: 1; } 48%, 100% { opacity: .38; } }
@keyframes rb-fa-msg-ans { 0%, 50% { opacity: .38; } 60%, 92% { opacity: 1; } 100% { opacity: .38; } }

@media (prefers-reduced-motion: reduce) {
  .rb-fa-wire-dot, .rb-fa-ask, .rb-fa-ans, .rb-fa-live { animation: none !important; opacity: 1; }
}
/* Below FIT_FLOOR in flow-anim.js the artefact is no longer
   scaled, so it has to stack on its own. The rail is the one
   part that cannot survive the turn — a horizontal travel
   between two stacked cards points nowhere — so it becomes a
   short vertical run. */
@media (max-width: 620px) {
  .rb-fa { grid-template-columns: 1fr !important; gap: 14px; }
  .rb-fa-mid { min-height: 0; }
  .rb-fa-legs { align-items: flex-start; }
  .rb-fa-transports { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding-left: 0; margin-bottom: 8px; }
  .rb-fa-rail { width: 100%; }
  .rb-fa-wire-top { grid-template-columns: 1fr; gap: 12px; }
  .rb-fa-wire-line { height: 40px; }
  .rb-fa-search .rb-fa-thead,
  .rb-fa-search .rb-fa-row { grid-template-columns: minmax(0, 1fr) 62px 62px; }
}

/* ============================================================
   Use case detail panel
   ------------------------------------------------------------
   A drawer over the library rather than a page of its own. It
   comes in from the right on a desktop, where the list stays
   visible beside it, and up from the foot on a phone, where a
   side panel would be the whole screen anyway and a sheet is the
   gesture people expect.
   ============================================================ */
.rb-ucp { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.rb-ucp[hidden] { display: none; }
.rb-ucp-scrim {
  position: absolute; inset: 0;
  background: rgba(26, 23, 22, .38);
  animation: rb-ucp-fade 180ms var(--ease) both;
}
.rb-ucp-sheet {
  position: relative;
  width: min(560px, 100%);
  background: var(--c-canvas);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 56px 48px 48px;
  box-shadow: -24px 0 64px rgba(26, 23, 22, .18);
  animation: rb-ucp-in 240ms var(--ease) both;
}
@keyframes rb-ucp-fade { from { opacity: 0 } }
@keyframes rb-ucp-in { from { transform: translateX(24px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .rb-ucp-scrim, .rb-ucp-sheet { animation: none; }
}

.rb-ucp-x {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c-ink-3);
  background: none;
}
.rb-ucp-x:hover { background: var(--c-surface-warm); color: var(--c-ink); }

.rb-ucp-kicker {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c-ink-4);
}
.rb-ucp-h {
  font-family: var(--f-display);
  font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  margin-top: 12px;
  text-wrap: balance;
}
.rb-ucp-lede { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--c-ink-2); }
.rb-ucp-body { margin-top: 34px; display: flex; flex-direction: column; gap: 26px; }
.rb-ucp-body h3 {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c-ink-4); margin-bottom: 8px;
}
.rb-ucp-body p { font-size: 15px; line-height: 1.62; color: #1E1E1EDE; }
/* The objection is something a distributor says out loud, so it
   is set as speech rather than as a heading: a rule down the
   left, the sentence in the serif the brand uses for emphasis,
   and our answer underneath in the ordinary voice. No tinted box.
   The two of them are a short exchange, and an exchange reads
   better unboxed. */
.rb-ucp-obj { padding-left: 20px; border-left: 2px solid var(--c-line-strong); }
.rb-ucp-q {
  margin: 0;
  font-family: var(--mark-font);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.rb-ucp-q::before { content: '\201C'; }
.rb-ucp-q::after  { content: '\201D'; }
.rb-ucp-a { margin-top: 12px; }
.rb-ucp-cta { margin-top: 34px; }

/* The card title is a button now, so it has to stop looking like
   one and start looking like the heading it is. */
/* The title is a heading that happens to open a panel, so it has
   to shed everything a button brings with it: the border, the
   background and the focus ring's default box. The focus ring is
   put back on the card, which is the thing that actually moves. */
.rb-uc-link {
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; appearance: none;
}
.rb-uc-link:focus { outline: none; }
.rb-uc-card:focus-within { outline: 2px solid var(--c-ink); outline-offset: -2px; }

@media (max-width: 700px) {
  .rb-ucp { align-items: flex-end; }
  .rb-ucp-sheet {
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    padding: 44px 24px 32px;
    animation-name: rb-ucp-up;
  }
  @keyframes rb-ucp-up { from { transform: translateY(28px); opacity: 0 } }
}

/* ============================================================
   Use case rail
   ------------------------------------------------------------
   The tail of a pillar, scrolled sideways. A grid here would
   compete with the four sections above it and would say "there
   are a lot of these"; a rail says "there are more", which is
   the actual message. It runs to the page edge on purpose, so
   the cut card is the affordance rather than a scrollbar.
   ============================================================ */
.rb-ucrail {
  margin-top: 40px;
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 100px 4px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  scrollbar-width: thin;
}
.rb-ucrail-card {
  flex: none;
  width: 300px;
  scroll-snap-align: start;
  background: var(--c-canvas);
  border: 0;
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.rb-ucrail-card:hover { background: var(--c-surface); }
.rb-ucrail-card:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.rb-ucrail-t {
  font-size: 16px; line-height: 1.32; letter-spacing: -0.01em; color: var(--c-ink);
}
.rb-ucrail-d { font-size: 13.5px; line-height: 1.5; color: #1E1E1EAC; }
.rb-ucrail-who {
  margin-top: auto; padding-top: 12px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-ink-4);
}
@media (max-width: 1100px) { .rb-ucrail { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 900px)  { .rb-ucrail { padding-left: 24px; padding-right: 24px; } .rb-ucrail-card { width: 258px; } }
@media (min-width: 1513px) { .rb-ucrail { padding-inline: max(100px, 50vw - 656px); } }

/* ---------------------------------------------------------- */
/* Showcase: the claim, and the motion that carries it         */
/* ---------------------------------------------------------- */
/* Geometry taken from the reference rather than guessed at:
   an even split, a 4px radius, a fixed card height so the four
   read as a rhythm instead of four different boxes, and the
   visual bleeding to within 10px of the card edge. The colours
   and type are ours. */
.rb-shows { display: grid; gap: 16px; }
.rb-show {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 536px;
  border-radius: 4px;
  background: var(--c-surface-warm);
  overflow: hidden;
}
/* Every second card puts the visual on the left. Done with order
   rather than by reordering the markup, so the reading order
   stays claim-then-visual for a screen reader and for the
   single-column layout below. */
.rb-show-rev .rb-show-copy { order: 2; }
.rb-show-rev .rb-show-art { order: 1; }

.rb-show-copy { display: flex; flex-direction: column; padding: 32px; }
.rb-show-tag { display: flex; align-items: center; gap: 12px; }
.rb-show-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 4px;
  /* A shade darker than the plate it sits on, not lighter: in the
     reference the chip reads as cut into the card. A surface token
     would go the wrong way here, since every one of them is lighter
     than the warm plate. */
  background: rgba(30, 30, 30, .06); color: var(--c-ink);
  font-size: 14px;
}
.rb-show-l { font-size: 14px; color: var(--c-ink); }
.rb-show-h {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  max-width: 340px;
  margin-top: 24px;
}
/* Pushed to the foot of the column. The claim and the small print
   sit at the two ends with nothing between them, which is the
   whole trick of this layout. */
.rb-show-body {
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--c-ink-2);
  max-width: 360px;
}

/* The animation will sit here. Until it exists the prompt that
   produces it stands in its place, on the plate the animation
   would be drawn on. */
.rb-show-art { min-width: 0; padding: 10px; display: flex; }
/* The motion fills the plate.
   `contain`, not `cover`: the plate is fluid but the clips are a
   fixed 600x516, so cover trims the sides everywhere but at the
   1440 reference width, and takes 19.7% off each side on a phone.
   The still moments survive that because they sit centred; the
   moving phases do not.
   The band contain leaves is painted in the clips' own stage
   ground, `--dfy-canvas` in distrify-motion's config/brand.css,
   which they fill edge to edge. In that exact tone the band cannot
   be told from the clip and the plate just reads as airier. The
   page ground (#EFEDEB) and the card ground (#E4E1DF) are both a
   shade off and would show as a seam, so this value tracks the
   renderer and not the site. */
.rb-show-media {
  flex: 1; min-width: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 3px;
  background: #EFEDEA;
  display: block;
}
.rb-prompt {
  margin: 0; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-radius: 3px;
  background: var(--c-surface);
  overflow: hidden;
}
.rb-prompt-top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--c-line);
}
.rb-prompt-k {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.rb-prompt-t {
  margin: 0; padding: 16px 18px 20px;
  flex: 1; overflow: auto;
  font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--c-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rb-copy {
  margin-left: auto;
  font: inherit; font-size: 12px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 5px 11px;
  background: transparent;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.rb-copy:hover { background: var(--c-surface-warm); color: var(--c-ink); }
.rb-copy.is-done { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }

/* Below the split the card stacks and the claim always comes
   first, reversed or not: alternating sides means nothing in one
   column and only costs the reader their place. */
@media (max-width: 1200px) {
  .rb-show, .rb-show-rev { grid-template-columns: 1fr; height: auto; }
  .rb-show-rev .rb-show-copy { order: 1; }
  .rb-show-rev .rb-show-art { order: 2; }
  .rb-show-h, .rb-show-body { max-width: none; }
  .rb-show-art { height: 420px; padding: 0 32px 32px; }
}
@media (max-width: 620px) {
  .rb-show-copy { padding: 24px; }
  .rb-show-art { padding: 0 24px 24px; }
  .rb-show-h { font-size: 24px; line-height: 28px; }
}


/* ---------------------------------------------------------- */
/* The library: sticky search, a rail of facets, cards         */
/* ---------------------------------------------------------- */
/* Full-bleed within the wrap so the rule under it runs the width
   of the section, and sticky so the search is still there once
   you are down among the cards, which is exactly when you want
   it. */
.rb-libbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  margin: 0 calc(var(--wrap-x) * -1) 22px;
  padding: 16px var(--wrap-x);
  background: var(--c-bg, #EFEDEB);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-3);
}
.rb-libbar svg { flex: none; width: 16px; height: 16px; }
.rb-libbar input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 14px;
  color: var(--c-ink);
  background: none; border: 0; outline: none;
}
.rb-libbar input::placeholder { color: var(--c-ink-3); }
.rb-libbar input::-webkit-search-cancel-button { display: none; }
.rb-libclear {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink-3); background: none; border: 0; cursor: pointer;
}
.rb-libclear:hover { color: var(--c-ink); }

.rb-lib {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  column-gap: 96px; row-gap: 40px;
  align-items: start;
}
.rb-lib-filters { display: flex; flex-direction: column; gap: 30px; }
.rb-lib-main { min-width: 0; }

.rb-rail-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0 8px 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--c-ink-3); text-align: left;
}
.rb-rail-head:hover { color: var(--c-ink); }
.rb-rail-t {
  flex: 1;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.rb-rail-caret { flex: none; width: 16px; height: 16px; transition: transform .18s var(--ease); }
.rb-rail-grp[data-open="0"] .rb-rail-caret { transform: rotate(-90deg); }
.rb-rail-grp[data-open="0"] .rb-rail-list { display: none; }
.rb-rail-list { margin: 0; padding: 0; list-style: none; }
.rb-rail-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 3px 8px;
  border: 0; border-radius: 4px; cursor: pointer;
  font: inherit; background: none; text-align: left;
  transition: background-color .12s var(--ease);
}
.rb-rail-row:hover:not(:disabled) { background: rgba(30, 30, 30, .06); }
.rb-rail-row[aria-pressed="true"] { background: rgba(30, 30, 30, .12); }
.rb-rail-l { flex: 1; font-size: 14px; line-height: 26px; color: var(--c-ink-3); }
.rb-rail-row[aria-pressed="true"] .rb-rail-l { color: var(--c-ink); }
/* Tabular figures so the column of counts does not shuffle
   sideways every time the search narrows it. */
.rb-rail-n {
  font-family: var(--f-mono); font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-4, var(--c-ink-3));
}
.rb-rail-row:disabled { cursor: default; opacity: .38; }

/* Below the split the rail goes above the cards, as two columns
   of facets rather than one long list to scroll past. */
@media (max-width: 1100px) {
  .rb-lib { grid-template-columns: 1fr; row-gap: 32px; }
  .rb-lib-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
  }
}
@media (max-width: 620px) {
  .rb-lib-filters { grid-template-columns: 1fr; }
}


/* At 60px on a 56px line the h1 overhangs its box by 12px inside a
   hero that clips; a longer line would lose its descenders. */
.rb-phero-h1 { padding-bottom: .08em; }

/* Footer links measured 28px tall on a phone; 44px is the floor a
   thumb can hit. Padding, not a display change: an earlier version
   set inline-flex here, which overrode the column's display:block
   and ran every link in a column together on one line. The column
   keeps its stacked links and each one grows to 44px. */
.rb-footer-col a { padding: 8px 0; line-height: 28px; }


/* ============================================================
   Customer story
   ------------------------------------------------------------
   A story is read, not scanned: chapters with a sticky title on
   the left and prose on the right, quotes inside the prose.
   ============================================================ */
.rb-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 96px;
  align-items: start;
}
.rb-story-head { position: sticky; top: 96px; }
.rb-story-head .rb-h2 { max-width: 16ch; }
.rb-story-body p {
  font-size: 18px; line-height: 1.6; color: var(--c-ink-2);
  margin: 0 0 22px; max-width: 58ch; text-wrap: pretty;
}
.rb-story-body p:last-child { margin-bottom: 0; }
.rb-story-quote {
  margin: 34px 0; padding: 26px 30px;
  border-left: 2px solid var(--c-ink);
  background: var(--c-surface-soft);
  border-radius: 0 6px 6px 0;
}
.rb-band-soft .rb-story-quote { background: var(--c-canvas); }
.rb-story-quote p {
  font-family: var(--f-display); font-size: 24px; line-height: 1.3;
  letter-spacing: -0.02em; color: var(--c-ink); margin: 0; max-width: 34ch;
}
.rb-story-quote footer { margin-top: 16px; font-size: 14px; color: var(--c-ink-4); display: flex; flex-direction: column; gap: 2px; }
.rb-story-quote footer b { font-weight: 500; color: var(--c-ink-2); }
@media (max-width: 900px) {
  .rb-story { grid-template-columns: 1fr; gap: 24px; }
  .rb-story-head { position: static; }
}

/* The motion plate in a hero or a row: the render is transparent,
   the marble is the ground it stands on, light even in the dark hero. */
.rb-art-motion {
  margin: 0; border-radius: 8px; overflow: hidden;
  background: #EFEDEA url('../assets/library/marble-white-faint-1200.webp') 45% 50% / cover;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
}
.rb-art-clip { display: block; width: 100%; height: auto; }


/* The Luminovo flow with the customer's ERP wired in on the left
   (homepage Telcona section). Five columns: ERP, wire, account,
   connector, tool. */
.rb-fa-erp { grid-template-columns: minmax(0, .72fr) 64px minmax(0, .86fr) minmax(96px, .42fr) minmax(0, 1.28fr); max-width: 1180px; }
.rb-fa-erpcard .rb-fa-thead, .rb-fa-erpcard .rb-fa-row { grid-template-columns: minmax(0, 1fr) 58px 58px; }
.rb-fa-erpcard .rb-fa-row { padding: 10px 14px; }
.rb-fa-erpwire { position: relative; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.rb-fa-erpwire .rb-fa-wire-line { height: 9px; }
.rb-fa-erpwire .rb-fa-leg-t { padding-left: 0; text-align: center; color: var(--c-ink-4); }
@media (max-width: 620px) {
  .rb-fa-erp { grid-template-columns: 1fr; }
  .rb-fa-erpwire { display: none; }
}

/* Phone: hero buttons stack full width instead of squeezing side
   by side; fact and contact grids go to one column so an e-mail
   address is never clipped. */
@media (max-width: 520px) {
  .rb-phero-cta { flex-direction: column; align-items: stretch; }
  .rb-phero-cta .rb-btn { justify-content: center; }
  .rb-partner-meta { grid-template-columns: 1fr; }
}