/* ==========================================================================
   rebuild.css · component layer for the homepage rebuild
   --------------------------------------------------------------------------
   Loads AFTER ../assets/styles.css. Every colour, radius and easing below
   resolves to a variable declared in the global :root, so token changes there
   flow through here.

   ONE deliberate exception: --font-display is overridden below, scoped to the
   rebuild. See the note on that block.

   All classes are prefixed .rb- so they cannot collide with the global sheet.
   Reused from styles.css without redefinition: .container .eyebrow .lede
   .btn(+variants) .card .grid .italic-serif .nav .footer
   ========================================================================== */

/* Display face, scoped to the rebuild ------------------------------------- */
/* Instrument Sans replaces Fraunces here only. Overriding the token rather
   than restyling elements means all 28 rules in styles.css that reference
   var(--font-display) follow automatically. The existing 51 pages never load
   this file, so they keep Fraunces until the rebuild is promoted. */
:root {
  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Headings run at 600. A sans at display size needs negative tracking to stop
   it reading loose; the larger the type, the tighter it wants to be. */
h1,
h2,
h3 {
  font-weight: 600;
}
h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.022em;
  line-height: 1.14;
}
h3 {
  letter-spacing: -0.012em;
}

/* Pulled quotes stay at reading weight. Bolding a supplier's own words would
   editorialize them. */
.rb-callquote,
.rb-demoquote {
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Figures and the monogram carry the heading weight. */
.rb-monogram,
.rb-metric .rb-val,
.rb-step strong {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Accent phrase -----------------------------------------------------------
   The .italic-serif class stays in the markup so the pattern survives if the
   display face changes again, but here it renders as neither italic nor
   serif: it inherits the sans and steps DOWN in weight and colour instead.
   Contrast of --ink-500 on white is 5.6:1, above the WCAG AA 4.5:1 floor. */
.italic-serif {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-500);
}
/* Same idea on dark panels, where --ink-500 would disappear. */
.rb-dark .italic-serif,
.rb-product.rb-assist .italic-serif,
.rb-case .italic-serif,
.rb-finalbox .italic-serif {
  color: rgba(255, 255, 255, 0.62);
}

/* Overrides to the global sheet, scoped to the rebuild -------------------- */
/* No leading rule on eyebrows here. styles.css draws one via .eyebrow::before;
   this file loads after it, so the rule is suppressed on rebuild pages only
   and the existing site is unaffected. */
.eyebrow::before {
  display: none;
}

/* Section rhythm ---------------------------------------------------------- */
.rb-section {
  padding: clamp(72px, 9vw, 128px) 0;
}
.rb-section.rb-tight {
  padding: clamp(48px, 6vw, 88px) 0;
}
.rb-soft {
  background: var(--mist-100);
}
.rb-dark {
  background: var(--teal-900);
  color: #fff;
}
.rb-dark p {
  color: rgba(255, 255, 255, 0.72);
}
.rb-dark .eyebrow {
  color: var(--coral-300);
}
.rb-dark .eyebrow::before {
  background: var(--coral-300);
}
.rb-dark .lede {
  color: rgba(255, 255, 255, 0.82);
}

/* Shared heading block ---------------------------------------------------- */
.rb-head {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.rb-head.rb-end {
  align-items: end;
}
.rb-head h2 {
  margin-top: 14px;
}

/* Hero -------------------------------------------------------------------- */
.rb-hero {
  padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
  background:
    radial-gradient(circle at 82% 12%, rgba(210, 231, 236, 0.55), transparent 42%),
    linear-gradient(180deg, #fff, var(--mist-100));
}
.rb-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4.5vw, 56px);
  align-items: center;
}
.rb-hero h1 {
  margin: 18px 0 22px;
  max-width: 16ch;
}
.rb-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.rb-micro {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--ink-500);
  font-size: 13px;
}
.rb-micro span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-500);
  flex: none;
}

/* Live negotiation stage -------------------------------------------------- */
.rb-stage {
  background: var(--teal-900);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 34px 85px -30px rgba(10, 46, 56, 0.45);
  position: relative;
  overflow: hidden;
}
.rb-stage::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -80px;
  top: -100px;
  border-radius: 50%;
  background: rgba(210, 231, 236, 0.07);
}
.rb-stagebar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 6px 14px;
}
.rb-stagegrid {
  display: grid;
  grid-template-columns: 1fr 264px;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.rb-call {
  background: var(--teal-800);
  border: 1px solid var(--line-on-dark);
  border-radius: 16px;
  padding: 22px;
  min-height: 380px;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.rb-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.rb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mist-300);
  color: var(--teal-900);
  font-size: 12px;
  font-weight: 600;
  flex: none;
}
.rb-person strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.rb-person small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.rb-callquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.36;
  margin: auto 0 16px;
}
.rb-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}
.rb-cards {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rb-whisper {
  background: #fff;
  border-radius: 14px;
  padding: 17px;
  border-top: 3px solid var(--coral-500);
}
.rb-whisper.rb-move {
  border-top-color: var(--teal-600);
}
.rb-whisper .rb-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--coral-ink);
  text-transform: uppercase;
}
.rb-whisper.rb-move .rb-tag {
  color: var(--teal-600);
}
.rb-whisper strong {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin: 7px 0 5px;
  color: var(--ink-900);
}
.rb-whisper p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-700);
}

/* Trust line -------------------------------------------------------------- */
.rb-trustline {
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}
.rb-trustrow {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.rb-trustrow strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-900);
}
.rb-trustrow span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  text-transform: uppercase;
}

/* Capability-gap problem cards -------------------------------------------- */
.rb-problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.rb-problem {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.rb-problem .rb-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--coral-ink);
  text-transform: uppercase;
}
.rb-problem h3 {
  margin: 12px 0 8px;
  font-size: 1.15rem;
}
.rb-problem p {
  margin: 0;
  color: var(--ink-700);
}

/* Four-step arc ----------------------------------------------------------- */
.rb-arc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.rb-arcstep {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  min-height: 216px;
  display: flex;
  flex-direction: column;
}
.rb-arcstep.rb-active {
  background: var(--teal-900);
  color: #fff;
  border-color: var(--teal-900);
}
.rb-arcstep.rb-active p {
  color: rgba(255, 255, 255, 0.72);
}
.rb-arcstep .rb-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--coral-ink);
  margin-bottom: 26px;
  text-transform: uppercase;
}
.rb-arcstep.rb-active .rb-num {
  color: var(--coral-300);
}
.rb-arcstep h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}
.rb-arcstep p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-700);
}

/* Two-product split ------------------------------------------------------- */
.rb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.rb-product {
  border-radius: 22px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rb-product.rb-assist {
  background: var(--teal-900);
  color: #fff;
}
.rb-product.rb-assist p {
  color: rgba(255, 255, 255, 0.75);
}
.rb-product.rb-auto {
  background: var(--mist-200);
  border: 1px solid var(--mist-300);
}
.rb-product .rb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-ink);
}
.rb-product.rb-assist .rb-label {
  color: var(--coral-300);
}
.rb-product h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 14px 0 12px;
}
.rb-product ul {
  padding-left: 18px;
  margin: 6px 0 26px;
  line-height: 1.95;
  font-size: 15px;
  color: inherit;
}
.rb-product.rb-assist ul {
  color: rgba(255, 255, 255, 0.8);
}
.rb-product.rb-auto ul {
  color: var(--ink-700);
}
.rb-product .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Demo / signal breakdown ------------------------------------------------- */
.rb-demo {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4vw, 48px);
  /* Not center: centring the right column against the demo panel means any
     change in the panel's height shifts that column by half of it. The live
     hero grid uses start for the same reason. */
  align-items: start;
}
.rb-demo-card {
  background: #fff;
  border-radius: 22px;
  padding: 26px;
  color: var(--ink-900);
  box-shadow: 0 30px 70px -30px rgba(10, 46, 56, 0.35);
}
.rb-demoquote {
  padding: 22px;
  border-radius: 14px;
  background: var(--mist-100);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  margin: 14px 0 6px;
  color: var(--ink-900);
}
.rb-signal {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.rb-signal b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--coral-ink);
  text-transform: uppercase;
}
.rb-signal.rb-move b {
  color: var(--teal-600);
}
.rb-signal strong {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}
.rb-signal p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-700);
}

/* Use-case tiles ---------------------------------------------------------- */
.rb-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.rb-uc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: #fff;
  display: block;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.rb-uc:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px -30px rgba(10, 46, 56, 0.22);
  border-color: rgba(10, 46, 56, 0.22);
}
.rb-uc h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rb-uc .rb-arrow {
  color: var(--coral-500);
  transition: transform 0.25s var(--ease);
}
.rb-uc:hover .rb-arrow {
  transform: translateX(4px);
}
.rb-uc p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-700);
}

/* Results metrics + case -------------------------------------------------- */
.rb-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}
.rb-metric {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: #fff;
}
.rb-metric .rb-sector {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--coral-ink);
  text-transform: uppercase;
}
.rb-metric .rb-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--teal-900);
  margin: 12px 0 8px;
}
.rb-metric p {
  font-size: 13px;
  margin: 0;
  color: var(--ink-500);
}
.rb-case {
  margin-top: 18px;
  background: var(--teal-900);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 40px);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: center;
}
.rb-case p {
  color: rgba(255, 255, 255, 0.75);
}
.rb-case h2 {
  margin: 14px 0 16px;
}
.rb-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rb-step {
  padding: 16px;
  border: 1px solid var(--line-on-dark);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.rb-step b {
  display: block;
  font-family: var(--font-mono);
  color: var(--coral-300);
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.rb-step strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  color: #fff;
}
.rb-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-500);
  max-width: 78ch;
}
.rb-dark .rb-note {
  color: rgba(255, 255, 255, 0.55);
}

/* Stack ------------------------------------------------------------------- */
.rb-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rb-stack-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 34px);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.rb-stack-card h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin: 14px 0 12px;
}
.rb-syscloud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}
.rb-sys {
  padding: 15px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* Security grid ----------------------------------------------------------- */
.rb-trustgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.rb-trust {
  padding: 24px;
  border-top: 2px solid var(--coral-500);
  background: var(--teal-800);
  border-radius: 0 0 14px 14px;
}
.rb-trust h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #fff;
}
.rb-trust p {
  font-size: 14px;
  margin: 0;
}

/* Founder ----------------------------------------------------------------- */
.rb-founder {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.rb-founder-card {
  background: linear-gradient(145deg, var(--mist-200), #fff);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rb-monogram {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  color: var(--teal-900);
  line-height: 1;
  margin-bottom: auto;
}
.rb-founder-card h3 {
  margin: 12px 0 4px;
}
.rb-founder-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-500);
}

/* Final CTA --------------------------------------------------------------- */
.rb-finalbox {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  border-radius: 26px;
  padding: clamp(34px, 4.5vw, 52px);
  color: #fff;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 30px;
  align-items: center;
}
.rb-finalbox p {
  color: rgba(255, 255, 255, 0.78);
}
.rb-finalbox h2 {
  margin: 14px 0 14px;
}

/* Insights listing -------------------------------------------------------- */
.rb-postgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.rb-post {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.rb-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px -30px rgba(10, 46, 56, 0.22);
  border-color: rgba(10, 46, 56, 0.22);
}
.rb-post .rb-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-ink);
}
.rb-post h3 {
  font-size: 1.2rem;
  margin: 12px 0 10px;
  line-height: 1.25;
}
.rb-post p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-700);
}
.rb-post .rb-readon {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--coral-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rb-post:hover .rb-readon .rb-arrow {
  transform: translateX(4px);
}

.rb-postlead {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 3.5vw, 40px);
  background: #fff;
  margin-top: 32px;
}
.rb-postlead h2 {
  margin: 14px 0 14px;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .rb-metrics,
  .rb-trustgrid,
  .rb-arc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-postgrid,
  .rb-usecases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .rb-hero-grid,
  .rb-head,
  .rb-demo,
  .rb-case,
  .rb-stack,
  .rb-founder,
  .rb-finalbox,
  .rb-split,
  .rb-postlead {
    grid-template-columns: 1fr;
  }
  .rb-stagegrid {
    grid-template-columns: 1fr;
  }
  .rb-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .rb-call {
    min-height: 300px;
  }
  .rb-callquote {
    margin-top: 32px;
  }
  .rb-product .btn {
    margin-top: 20px;
  }
}

@media (max-width: 620px) {
  .rb-arc,
  .rb-metrics,
  .rb-trustgrid,
  .rb-usecases,
  .rb-problems,
  .rb-syscloud,
  .rb-postgrid,
  .rb-steps {
    grid-template-columns: 1fr;
  }
  .rb-cards {
    grid-template-columns: 1fr;
  }
  .rb-signal {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rb-trustrow {
    gap: 12px;
  }
}

/* Motion preference ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rb-uc,
  .rb-post,
  .rb-uc:hover,
  .rb-post:hover,
  .rb-arrow {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   PORTED PROTOTYPE COMPONENTS
   --------------------------------------------------------------------------
   Layout geometry taken from the full-site prototype (whispor-updated-full-
   site.zip) and re-expressed in Whispor tokens. Grid ratios, gaps, radii and
   min-heights match the source; colours and type do not, by design.

   The prototype carried leftover purple from an earlier palette
   (--brand #6f3cff, .cta-box #21194b, .guide-cover #6f3cff, .timeline
   #ded7ff). All of it resolves to teal/coral here.
   ========================================================================== */

/* Page hero (interior pages) ---------------------------------------------- */
.rb-pagehero {
  padding: clamp(52px, 6.5vw, 74px) 0 clamp(40px, 5vw, 56px);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fff, var(--mist-100));
}
.rb-pagehero h1 {
  margin: 16px 0 18px;
  max-width: 20ch;
}
.rb-pagehero .lede {
  max-width: 62ch;
}

/* Kicker chip ------------------------------------------------------------- */
.rb-kicker {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--coral-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
}
.rb-dark .rb-kicker,
.rb-proofoutcome .rb-kicker {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Pills and bands --------------------------------------------------------- */
.rb-band {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rb-pill {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: var(--ink-700);
}
.rb-dark .rb-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-on-dark);
  color: rgba(255, 255, 255, 0.85);
}

/* Horizontal process flow ------------------------------------------------- */
.rb-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0;
}
.rb-chip {
  padding: 12px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  background: #fff;
  color: var(--ink-900);
}
.rb-flow .rb-arrow {
  color: var(--coral-500);
  font-weight: 500;
}
.rb-dark .rb-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-on-dark);
  color: #fff;
}

/* Proof / results --------------------------------------------------------- */
.rb-proof {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 3.5vw, 40px);
  align-items: start;
}
.rb-kpi {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: #fff;
}
.rb-metricrow {
  border-top: 1px solid var(--line-soft);
  padding: 18px 0;
}
.rb-metricrow:first-of-type {
  border-top: 0;
}
.rb-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal-900);
  margin: 8px 0 6px;
}
.rb-proofcase {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 32px);
  background: #fff;
  margin-top: 18px;
}
.rb-proofhead {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 0.55fr);
  gap: 16px;
  align-items: start;
}
.rb-proofnum {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--teal-900);
}
.rb-proofflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.rb-proofstep {
  padding: 16px;
  border-radius: 12px;
  background: var(--mist-100);
  border: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink-700);
}
.rb-proofoutcome {
  margin-top: 18px;
  background: var(--teal-900);
  color: #fff;
  border-radius: 14px;
  padding: 22px;
}
.rb-proofoutcome p {
  color: rgba(255, 255, 255, 0.78);
  margin: 8px 0 0;
}

/* Timeline (About) -------------------------------------------------------- */
.rb-timeline {
  border-left: 2px solid var(--mist-300);
  padding-left: 28px;
}
.rb-timeline .rb-t {
  position: relative;
  margin: 0 0 30px;
}
.rb-timeline .rb-t::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--coral-500);
  left: -34px;
  top: 7px;
}

/* Editorial notice -------------------------------------------------------- */
.rb-notice {
  background: var(--mist-100);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral-500);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  color: var(--ink-700);
  font-size: 14px;
}

/* Guides ------------------------------------------------------------------ */
.rb-guiderow {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 14px 0;
  background: #fff;
}
.rb-guidecover {
  height: 140px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--teal-900), var(--teal-600));
  color: #fff;
  padding: 14px;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: flex-end;
}

/* Resource + spot-buy tiles ----------------------------------------------- */
.rb-resource,
.rb-spotstep {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: #fff;
}

/* Transcript blocks inside .rb-stage --------------------------------------- */
.rb-transcript {
  padding: 4px 2px;
}
.rb-speaker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.rb-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.36;
  color: #fff;
  margin: 12px 0 18px;
}
.rb-live {
  color: var(--coral-300);
}

/* Chat / supplier exchange ------------------------------------------------- */
.rb-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rb-bubble {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 88%;
}
.rb-bubble.rb-supplier {
  background: var(--mist-200);
  color: var(--ink-900);
  align-self: flex-start;
}
.rb-bubble.rb-ai {
  background: var(--teal-900);
  color: #fff;
  align-self: flex-end;
}

/* Demo tabs --------------------------------------------------------------- */
.rb-demotabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rb-demotab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
}
.rb-demotab[aria-selected="true"] {
  background: var(--teal-900);
  border-color: var(--teal-900);
  color: #fff;
}

/* Comparison table -------------------------------------------------------- */
.rb-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 14.5px;
}
.rb-table th,
.rb-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.rb-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line);
}
.rb-table tbody td:first-child {
  color: var(--ink-900);
  font-weight: 500;
}
.rb-table td {
  color: var(--ink-700);
}

/* Small print + inline icon ------------------------------------------------ */
.rb-small {
  font-size: 13px;
  color: var(--ink-500);
}
.rb-icon {
  font-size: 20px;
  color: var(--coral-500);
  display: block;
  margin-bottom: 10px;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .rb-proof,
  .rb-proofhead,
  .rb-guiderow {
    grid-template-columns: 1fr;
  }
  .rb-proofflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .rb-proofflow {
    grid-template-columns: 1fr;
  }
  .rb-flow {
    gap: 8px;
  }
  .rb-table {
    font-size: 13px;
  }
  .rb-table th,
  .rb-table td {
    padding: 10px 8px;
  }
}

/* Remaining ported components --------------------------------------------- */
.rb-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.rb-spotflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.rb-resourcefeature {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
}
.rb-resourcelist {
  display: grid;
  gap: 12px;
}
.rb-editorial {
  background: var(--teal-900);
  color: #fff;
  border-radius: 22px;
  padding: clamp(26px, 3vw, 34px);
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rb-editorial p {
  color: rgba(255, 255, 255, 0.75);
}
.rb-editorial h2,
.rb-editorial h3 {
  color: #fff;
}

@media (max-width: 900px) {
  .rb-kpis,
  .rb-spotflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-resourcefeature {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .rb-kpis,
  .rb-spotflow {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CONTRAST + BADGE CORRECTIONS
   --------------------------------------------------------------------------
   styles.css sets `h1,h2,h3,h4 { color: var(--ink-900) }`, and --ink-900 is
   #0a2e38, the exact value of --teal-900. Any heading on a teal panel was
   therefore rendering at a 1:1 contrast ratio: invisible, which read as whole
   sections going missing.

   Fixed in two passes: headings on dark surfaces go white, then light
   surfaces NESTED inside those dark sections (cards, tiles, whisper panels)
   have the ink colour re-asserted so they do not flip to white-on-white.
   ========================================================================== */

/* Pass 1: headings on dark surfaces --------------------------------------- */
.rb-dark h1,
.rb-dark h2,
.rb-dark h3,
.rb-dark h4,
.rb-stage h1,
.rb-stage h2,
.rb-stage h3,
.rb-stage h4,
.rb-call h3,
.rb-call h4,
.rb-arcstep.rb-active h3,
.rb-product.rb-assist h2,
.rb-product.rb-assist h3,
.rb-case h2,
.rb-case h3,
.rb-finalbox h2,
.rb-finalbox h3,
.rb-proofoutcome h2,
.rb-proofoutcome h3,
.rb-proofoutcome h4,
.rb-editorial h2,
.rb-editorial h3,
.rb-guidecover h3,
.rb-guidecover h4,
.rb-bubble.rb-ai h3,
.rb-bubble.rb-ai b {
  color: #fff;
}

/* Pass 2: light surfaces nested inside dark sections ---------------------- */
.rb-dark .card h1,
.rb-dark .card h2,
.rb-dark .card h3,
.rb-dark .card h4,
.rb-dark .rb-kpi h3,
.rb-dark .rb-kpi h4,
.rb-dark .rb-proofstep h3,
.rb-dark .rb-resource h3,
.rb-dark .rb-spotstep h3,
.rb-dark .rb-demo-card h2,
.rb-dark .rb-demo-card h3,
.rb-dark .rb-whisper strong,
.rb-dark .rb-guiderow h3 {
  color: var(--ink-900);
}
.rb-dark .card p,
.rb-dark .rb-kpi p,
.rb-dark .rb-proofstep,
.rb-dark .rb-resource p,
.rb-dark .rb-spotstep p,
.rb-dark .rb-demo-card p,
.rb-dark .rb-whisper p,
.rb-dark .rb-guiderow p {
  color: var(--ink-700);
}
.rb-dark .card .rb-value,
.rb-dark .rb-kpi .rb-value {
  color: var(--teal-900);
}

/* Badge / kicker ----------------------------------------------------------
   Pale coral field with coral text, per the reference. The prototype's own
   later override (#f8ebe7 on #c86255) is the same intent; these are the
   token equivalents. */
.rb-kicker {
  background: var(--coral-500);
  color: #fff;
}
.rb-kicker,
.rb-dark .rb-kicker,
.rb-proofoutcome .rb-kicker,
.rb-editorial .rb-kicker {
  background: rgba(224, 122, 95, 0.12);
  color: var(--coral-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.rb-dark .rb-kicker,
.rb-editorial .rb-kicker {
  background: rgba(242, 179, 162, 0.16);
  color: var(--coral-300);
}

/* Leading label inside step tiles ----------------------------------------
   The prototype writes these as `<b>01 · Ingest</b>Contracts, spend...` with
   no separator, so the label ran into the sentence. */
.rb-proofstep b,
.rb-spotstep b,
.rb-resource b,
.rb-kpi b,
.rb-chip b {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ink-900);
}
.rb-dark .rb-proofstep b,
.rb-proofoutcome b {
  color: inherit;
}
.rb-bubble b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
}

/* ==========================================================================
   DESIGN STANDARDS
   --------------------------------------------------------------------------
   The prototype was a clickable wireframe: its spacing was ad hoc (11 gap
   values, 10 padding values) and 9 of 21 pages stacked two identical white
   sections with no separation. This layer imposes one scale and one rhythm
   across every page. Layout and content stay as designed; only the system
   underneath them is normalised.
   ========================================================================== */

.rb-section,
.rb-pagehero {
  /* 4px-based spacing scale, scoped to the rebuild */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
}

/* 1 · Section rhythm ------------------------------------------------------
   Consistent vertical measure, and a hairline between two same-coloured
   sections so stacked white blocks still read as separate. */
.rb-section {
  padding: clamp(64px, 7.5vw, 104px) 0;
}
.rb-section + .rb-section:not(.rb-soft):not(.rb-dark) {
  padding-top: 0;
}
.rb-soft + .rb-soft,
.rb-dark + .rb-dark {
  padding-top: 0;
}

/* 2 · Section header stack ------------------------------------------------
   eyebrow → heading → lede, with one rhythm everywhere rather than each
   component inventing its own margins. */
.rb-section > .container > .eyebrow,
.rb-pagehero > .container > .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.rb-section > .container > h2,
.rb-section > .container > .rb-head h2 {
  margin: 0 0 var(--sp-3);
  max-width: 22ch;
}
.rb-section > .container > .lede {
  margin: 0 0 var(--sp-5);
  max-width: 64ch;
}
.rb-section > .container > .grid,
.rb-section > .container > .rb-flow,
.rb-section > .container > .rb-proofflow,
.rb-section > .container > .rb-kpis,
.rb-section > .container > .rb-band,
.rb-section > .container > .rb-usecases,
.rb-section > .container > .rb-table,
.rb-section > .container > .rb-timeline {
  margin-top: var(--sp-5);
}

/* 3 · One gap scale -------------------------------------------------------
   Was: 8, 10, 11, 12, 14, 16, 18, 20, 22, 24, 30px. Now three steps. */
.grid.cols-2,
.grid.cols-3,
.grid.cols-4 {
  gap: var(--sp-4);
}
.rb-proofflow,
.rb-kpis,
.rb-spotflow,
.rb-steps,
.rb-usecases,
.rb-arc,
.rb-metrics {
  gap: var(--sp-3);
}
.rb-band,
.rb-flow,
.rb-cards,
.rb-resourcelist,
.rb-demotabs,
.rb-syscloud {
  gap: var(--sp-2);
}

/* 4 · Card standardisation ------------------------------------------------
   One padding, one radius, equal heights so rows do not run ragged, and a
   consistent internal rhythm. */
.card,
.rb-kpi,
.rb-resource,
.rb-spotstep,
.rb-proofstep,
.rb-problem {
  padding: 28px;
  border-radius: var(--radius-lg);
}
.grid > .card,
.rb-kpis > .rb-kpi,
.rb-proofflow > .rb-proofstep,
.rb-spotflow > .rb-spotstep,
.rb-resourcelist > .rb-resource {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card > .rb-kicker,
.rb-kpi > .rb-kicker,
.rb-resource > .rb-kicker {
  align-self: flex-start;
  margin-bottom: var(--sp-3);
}
.card h3,
.rb-kpi h3,
.rb-resource h3,
.rb-spotstep h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--sp-2);
}
.card p,
.rb-kpi p,
.rb-resource p,
.rb-spotstep p,
.rb-proofstep p {
  margin: 0 0 var(--sp-2);
  font-size: 15px;
  line-height: 1.6;
}
.card p:last-child,
.rb-kpi p:last-child,
.rb-resource p:last-child,
.rb-spotstep p:last-child {
  margin-bottom: 0;
}
/* Label-and-value lists inside cards, e.g. "Commercial: last rate, ...".
   These were running together with no row separation. */
.card p > b:first-child,
.rb-kpi p > b:first-child {
  color: var(--ink-900);
  font-weight: 600;
}
.card p + p {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
}

/* 5 · Badge ---------------------------------------------------------------
   Was mono 10px/500 in coral-ink at 12% tint: too light to hold. Now the
   body face at 600, tighter tracking, deeper field. */
.rb-kicker,
.rb-dark .rb-kicker,
.rb-proofoutcome .rb-kicker,
.rb-editorial .rb-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 6px;
  background: rgba(224, 122, 95, 0.16);
  color: var(--coral-ink);
}
.rb-dark .rb-kicker,
.rb-editorial .rb-kicker,
.rb-proofoutcome .rb-kicker {
  background: rgba(242, 179, 162, 0.2);
  color: var(--coral-300);
}

/* 6 · Buttons -------------------------------------------------------------
   One primary per action group; anything after it steps down. */
.rb-actions .btn + .btn {
  margin-left: 0;
}
.rb-actions {
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* 7 · Page hero -----------------------------------------------------------
   Same measure on all 21 pages. */
.rb-pagehero h1 {
  max-width: 19ch;
  margin: var(--sp-3) 0 var(--sp-4);
}
.rb-pagehero .lede {
  max-width: 60ch;
  margin: 0;
}
.rb-pagehero .rb-actions {
  margin-top: var(--sp-5);
}

/* 8 · Dark panels get room ------------------------------------------------ */
.rb-editorial,
.rb-proofoutcome,
.rb-finalbox {
  padding: clamp(28px, 3.5vw, 44px);
}
.rb-finalbox {
  gap: var(--sp-6);
}

/* ==========================================================================
   FORMS, FEATURED POST, GUIDES  +  SPACING CORRECTION
   ========================================================================== */

/* Spacing correction ------------------------------------------------------
   An earlier rule zeroed top padding on consecutive sections to avoid double
   gaps. With alternating backgrounds that produced uneven measures instead:
   a tinted band would sit flush to the one above it. Every section now owns
   the same vertical measure. */
.rb-section + .rb-section:not(.rb-soft):not(.rb-dark),
.rb-soft + .rb-soft,
.rb-dark + .rb-dark {
  padding-top: clamp(64px, 7.5vw, 104px);
}

/* Forms -------------------------------------------------------------------
   The prototype shipped bare placeholder-only inputs. These use the .form and
   .field system already in styles.css, so fields match contact.html exactly. */
.rb-formsplit {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.rb-formwrap {
  max-width: 860px;
}
.rb-formpanel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 40px);
}
.rb-formpanel h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}
.rb-formpanel .lede {
  margin: 0 0 28px;
  font-size: 16px;
}
.rb-formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.rb-formpanel .field label span[aria-hidden] {
  color: var(--coral-500);
}
.rb-formfoot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.rb-formnote {
  margin: 0;
  font-size: 13px;
  color: var(--ink-500);
  max-width: 42ch;
}
/* Visible keyboard focus, which the prototype had none of. */
.rb-formpanel input:focus-visible,
.rb-formpanel select:focus-visible,
.rb-formpanel textarea:focus-visible,
.btn:focus-visible,
.rb-post:focus-visible,
.rb-featured:focus-visible,
.rb-uc:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* Featured post ----------------------------------------------------------- */
.rb-featured {
  display: block;
  background: var(--teal-900);
  border-radius: 24px;
  padding: clamp(32px, 4.5vw, 56px);
  color: #fff;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.rb-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -34px rgba(10, 46, 56, 0.5);
}
.rb-featured-body {
  max-width: 62ch;
}
.rb-featured h2 {
  color: #fff;
  margin: 16px 0 14px;
  max-width: 20ch;
}
.rb-featured p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 58ch;
}
.rb-featured .rb-kicker {
  background: rgba(242, 179, 162, 0.2);
  color: var(--coral-300);
}

/* Guides ------------------------------------------------------------------ */
.rb-guidelist {
  display: grid;
  gap: 16px;
}
.rb-guiderow {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 0;
  background: #fff;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.rb-guiderow:hover {
  border-color: rgba(10, 46, 56, 0.22);
  box-shadow: 0 20px 60px -34px rgba(10, 46, 56, 0.22);
}
.rb-guidecover {
  height: 132px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--teal-900), var(--teal-600));
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.rb-guidebody h3 {
  margin: 12px 0 8px;
  font-size: 1.2rem;
}
.rb-guidebody p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 62ch;
}
.rb-guideaction .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .rb-formsplit,
  .rb-formgrid {
    grid-template-columns: 1fr;
  }
  .rb-guiderow {
    grid-template-columns: 96px 1fr;
  }
  .rb-guideaction {
    grid-column: 1 / -1;
  }
  .rb-guidecover {
    height: 96px;
    font-size: 12px;
  }
}
@media (max-width: 620px) {
  .rb-guiderow {
    grid-template-columns: 1fr;
  }
  .rb-guidecover {
    height: 72px;
  }
  .rb-formfoot {
    gap: 14px;
  }
}

/* ==========================================================================
   DARK-PANEL BUTTONS  +  BIO CARDS
   ========================================================================== */

/* .btn-ghost is transparent with --ink-900 text. On a teal panel that renders
   dark-on-dark and the button disappears. Any ghost/outline button inside a
   dark surface flips to the on-dark treatment. */
.rb-dark .btn-ghost,
.rb-dark .btn-outline,
.rb-product.rb-assist .btn-ghost,
.rb-editorial .btn-ghost,
.rb-proofoutcome .btn-ghost,
.rb-finalbox .btn-ghost,
.rb-case .btn-ghost,
.rb-stage .btn-ghost,
.rb-featured .btn-ghost,
.rb-bio-head .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: var(--line-on-dark);
}
.rb-dark .btn-ghost:hover,
.rb-product.rb-assist .btn-ghost:hover,
.rb-editorial .btn-ghost:hover,
.rb-proofoutcome .btn-ghost:hover,
.rb-finalbox .btn-ghost:hover,
.rb-case .btn-ghost:hover,
.rb-featured .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Bio cards (About). The prototype set these inline with the older purple
   palette; the markup now carries classes so they resolve to brand tokens. */
.rb-bio {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rb-bio-head {
  min-height: 200px;
  padding: 30px;
  background: linear-gradient(150deg, var(--teal-900), var(--teal-700));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rb-bio-head h2 {
  color: #fff;
  margin: 12px 0 4px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.rb-bio-head > div:last-child {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.rb-bio-head .rb-kicker {
  align-self: flex-start;
  background: rgba(242, 179, 162, 0.2);
  color: var(--coral-300);
}

/* Second card reads as the lighter counterpart of the pair. */
.rb-bio-head-light {
  background: linear-gradient(150deg, var(--mist-200), var(--mist-100));
  color: var(--ink-900);
}
.rb-bio-head-light h2 {
  color: var(--ink-900);
}
.rb-bio-head-light > div:last-child {
  color: var(--ink-500);
}
.rb-bio-head-light .rb-kicker {
  background: rgba(224, 122, 95, 0.16);
  color: var(--coral-ink);
}

.rb-bio-body {
  padding: 28px;
}
.rb-bio-body p {
  margin: 0 0 var(--sp-3, 16px);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}
.rb-bio-body p + p {
  padding-top: var(--sp-3, 16px);
  border-top: 1px solid var(--line-soft);
}
.rb-bio-body p:last-child {
  margin-bottom: 0;
}

/* Proof-head cells ---------------------------------------------------------
   Sibling cells use a block .rb-proofnum for the figure, but one uses a bare
   inline <b>. That sat beside the inline-block badge and wrapped across it.
   Both now stack the badge above a block-level value. */
.rb-proofhead .rb-kicker {
  display: inline-block;
  margin-bottom: 10px;
}
.rb-proofhead > div > b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--teal-900);
}

/* ==========================================================================
   NAV SCROLL STATE  +  CENTERED HERO
   ========================================================================== */

/* styles.css sets .nav to --mist-300 permanently. Here it starts white and
   takes the tint only once the page has scrolled, so the hero reads as one
   uninterrupted field. Driven by assets/rebuild.js. */
.nav {
  background: #fff;
  border-bottom-color: transparent;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.nav.is-scrolled {
  background: var(--mist-300);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(10, 46, 56, 0.04);
}

/* Centered homepage hero. The supporting visual is gone, so the column
   narrows and centres; min-height preserves the original section height
   rather than letting the hero collapse upward. */
.rb-hero-centered {
  min-height: 580px;
  display: flex;
  align-items: center;
  text-align: center;
  padding: clamp(72px, 9vw, 104px) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 231, 236, 0.5), transparent 60%),
    linear-gradient(180deg, #fff, var(--mist-100));
}
.rb-hero-centered > .container {
  max-width: 900px;
}
.rb-hero-centered h1 {
  max-width: 100%;
  margin: 20px auto 24px;
}
.rb-hero-centered .lede {
  max-width: 62ch;
  margin: 0 auto;
}
.rb-hero-centered .rb-actions {
  justify-content: center;
  margin-top: 34px;
}
.rb-hero-centered .rb-micro {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 620px) {
  .rb-hero-centered {
    min-height: 0;
    padding: clamp(56px, 12vw, 80px) 0;
  }
}

/* Founder card ------------------------------------------------------------
   The prototype rendered initials in a tinted box as a stand-in. The real
   photo ships with the site, so the card is now photo-led: image on top,
   caption beneath. Grayscale matches the treatment on the live about page. */
.rb-founder-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.rb-founder-photo {
  background: var(--mist-200);
}
.rb-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 530 / 638;
  object-fit: cover;
  filter: grayscale(1);
}
.rb-founder-meta {
  padding: 24px 28px 28px;
}
.rb-founder-meta .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
}
.rb-founder-meta h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.rb-founder-meta p {
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
}

/* Bio card with a photo ---------------------------------------------------
   Only the founder has a portrait on file, so the paired card keeps its
   typographic header. Both cards stay the same height via the grid. */
.rb-bio-photo {
  background: var(--mist-200);
}
.rb-bio-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 530 / 500;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1);
}
.rb-bio-head-caption {
  min-height: 0;
  padding: 24px 30px;
  background: var(--teal-900);
}

/* Framework marks ---------------------------------------------------------
   Whispor's own visual references to each framework. Deliberately NOT styled
   as certification seals: the AICPA SOC 2 mark is trademarked and licensed
   only post-audit, and GDPR and the EU AI Act have no official logo at all. */
.rb-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4, 24px);
  margin-top: var(--sp-5, 32px);
}
.rb-mark {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.rb-mark-glyph {
  width: 56px;
  height: 56px;
  color: var(--teal-900);
  margin-bottom: 18px;
}
.rb-mark-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rb-mark h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}
.rb-mark-status {
  margin: 0 0 14px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral-ink);
  font-weight: 500;
}
.rb-mark p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}
.rb-notice b {
  color: var(--ink-900);
}

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

/* Card illustrations ------------------------------------------------------
   Line drawings replacing the prototype's single repeated glyph. Stroke
   inherits currentColor so the same icon works on light and dark surfaces;
   .rb-ico-accent picks up coral for the one element that should carry it. */
.rb-ico {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--teal-700);
  margin-bottom: 18px;
}
.rb-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rb-ico .rb-ico-accent {
  stroke: var(--coral-500);
}
.rb-dark .rb-ico,
.rb-product.rb-assist .rb-ico,
.rb-editorial .rb-ico {
  color: rgba(255, 255, 255, 0.82);
}
.rb-dark .rb-ico .rb-ico-accent,
.rb-product.rb-assist .rb-ico .rb-ico-accent,
.rb-editorial .rb-ico .rb-ico-accent {
  stroke: var(--coral-300);
}

/* Footer social ----------------------------------------------------------
   Sits in the legal row, ahead of Privacy. The mark carries it on its own, so
   the word "LinkedIn" is gone and the accessible name lives on aria-label.
   Extra right margin keeps it clear of the legal links, which are separated
   only by a middot. */
.footer-legal .rb-social {
  display: inline-flex;
  align-items: center;
  margin-right: 22px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s var(--ease);
  vertical-align: middle;
}
.footer-legal .rb-social svg {
  display: block;
}
.footer-legal .rb-social:hover {
  color: #fff;
}
.footer-legal .rb-social:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   ILLUSTRATION FIXES
   ========================================================================== */

/* Icons inside a white card that sits in a dark section were inheriting the
   dark-section white stroke, leaving only the coral accent element visible.
   Same nested-surface problem already fixed for headings and body copy. */
.rb-dark .card .rb-ico,
.rb-dark .rb-kpi .rb-ico,
.rb-dark .rb-uc .rb-ico,
.rb-dark .rb-resource .rb-ico,
.rb-dark .rb-spotstep .rb-ico {
  color: var(--teal-700);
}

/* Use-case tile with a full illustration above the label. */
.rb-uc-illo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rb-uc-art {
  display: block;
  background: var(--mist-100);
  border-bottom: 1px solid var(--line-soft);
}
.rb-uc-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 250;
}
.rb-uc-illo h3 {
  margin: 0;
  padding: 20px 24px 22px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rb-uc-illo p {
  padding: 0 24px 22px;
  margin: -8px 0 0;
}

/* The four-stage loop ------------------------------------------------------
   Replaces a row of unlabelled chips that gave no clue what the stages were
   or why they were in that order. */
.rb-loop {
  margin-top: var(--sp-5, 32px);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5, 32px);
}
.rb-loop-head h3 {
  margin: 12px 0 0;
  font-size: 1.25rem;
  max-width: 34ch;
}
.rb-loop-steps {
  list-style: none;
  margin: var(--sp-5, 32px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3, 16px);
  counter-reset: loop;
}
.rb-loop-steps li {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
/* connector between stages, and a return arc implied by the last one */
.rb-loop-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--coral-500);
}
.rb-loop-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--coral-ink);
  margin-bottom: 10px;
}
.rb-loop-steps strong {
  display: block;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.rb-loop-steps span:not(.rb-loop-n) {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}
@media (max-width: 900px) {
  .rb-loop-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-loop-steps li:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .rb-loop-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CARD + COVER ILLUSTRATIONS
   Drawings sit at their native geometry (170x110 for cards, 140x132 for guide
   covers) and are centred in the slot rather than stretched, matching how
   styles.css handles `.step .illu`.
   ========================================================================== */
.rb-cardillu {
  height: 110px;
  margin: 2px 0 18px;
}
.rb-cardillu svg {
  display: block;
  width: 170px;
  height: 110px;
  max-width: 100%;
}
.card .rb-kicker + h3 {
  margin-top: 0;
}

.rb-guidecover {
  position: relative;
  overflow: hidden;
}
.rb-guidecover svg {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 132px;
  pointer-events: none;
}
.rb-guidecover span {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .rb-guidecover svg {
    top: 0;
    width: 96px;
    height: 96px;
  }
}
@media (max-width: 620px) {
  .rb-guidecover svg {
    width: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   USE-CASE STRIP COLUMN COUNT
   styles.css sets .steps to four across, which strands the last row when the
   count is not a multiple of four (six tiles read 4+2, five read 4+1). Three
   across gives 3+3 and 3+2.
   ========================================================================== */
.rb-steps-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .rb-steps-3,
  .rb-steps-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .rb-steps-3,
  .rb-steps-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ILLUSTRATION SCALE INSIDE THE TILES
   styles.css pins `.step .illu` to a 110px slot with the art capped at its
   170px native width. That was sized for the live site's four narrow columns;
   at three columns the cell is roughly 570px and the drawing floats in the
   middle of it looking undersized. The art is vector with a viewBox, so it
   scales proportionally: the slot becomes auto-height and the drawing takes
   the tile width up to a cap, with `height: auto` keeping 170:110 intact.
   ========================================================================== */
.rb-steps-3 .step .illu,
.rb-steps-4 .step .illu {
  height: auto;
  margin: 22px 0 26px;
}
.rb-steps-3 .step .illu svg,
.rb-steps-4 .step .illu svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 170 / 110;
}
@media (max-width: 1100px) {
  .rb-steps-3 .step .illu svg,
  .rb-steps-4 .step .illu svg {
    max-width: 280px;
  }
}
@media (max-width: 900px) {
  .rb-steps-3 .step .illu svg,
  .rb-steps-4 .step .illu svg {
    max-width: 320px;
  }
}

/* Same reasoning for the Negotiation Intelligence / Assist card art. */
.rb-cardillu {
  height: auto;
}
.rb-cardillu svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 170 / 110;
}

/* ==========================================================================
   USE-CASE TILES AS DISCRETE CARDS
   `.steps` in styles.css is a ruled grid: hairlines between cells, no gap, no
   surface of its own. Each tile is a link to a solution page, but a cell in a
   ruled table gives no affordance that it can be clicked. These sit on
   --mist-100, so lifting them onto white cards with a gap makes the boundaries
   read as objects, and the hover state confirms they are interactive.
   ========================================================================== */
.rb-steps-3,
.rb-steps-4 {
  border-top: 0;
  gap: 18px;
}
.rb-steps-3 .step,
.rb-steps-4 .step {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 28px 26px 30px;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.rb-steps-3 .step:hover,
.rb-steps-4 .step:hover,
.rb-steps-3 .step:focus-visible,
.rb-steps-4 .step:focus-visible {
  border-color: rgba(10, 46, 56, 0.22);
  box-shadow: 0 22px 60px -34px rgba(10, 46, 56, 0.3);
  transform: translateY(-3px);
}
/* The "Read more" arrow nudges with the card, so the whole tile reads as one
   control rather than a card with a link loose inside it. */
.rb-steps-3 .step span[style],
.rb-steps-4 .step span[style] {
  transition: transform 0.3s var(--ease);
}
.rb-steps-3 .step:hover span[style],
.rb-steps-4 .step:hover span[style] {
  transform: translateX(4px);
}
/* The drawing sits on its own tint so it reads as a figure inside the card
   rather than floating in the padding. */
.rb-steps-3 .step .illu,
.rb-steps-4 .step .illu {
  background: var(--mist-100);
  border-radius: 10px;
  padding: 16px 12px;
  margin: 18px 0 22px;
}

/* styles.css zeroes `.step:first-child`'s left border for its ruled-grid
   layout. These are separate cards, so every edge has to come back - and the
   reset it overrides carries a pseudo-class, so this needs one too. */
.rb-steps-3 .step:first-child,
.rb-steps-4 .step:first-child,
.rb-steps-3 .step:nth-child(n),
.rb-steps-4 .step:nth-child(n) {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   TWO-MODE SPLIT: HEADING + GLYPHS
   The section arrived as a bare pair of cards with no heading and no artwork.
   The glyphs are the live site's, so the wave animation is ported with them
   rather than reinvented: nine bars pulsing on staggered delays, which reads
   as listening. Behind a reduced-motion guard, since it loops forever.
   ========================================================================== */
.rb-splithead {
  max-width: 68ch;
  margin: 0 0 clamp(28px, 3vw, 44px);
}
.rb-splithead h2 {
  margin: 10px 0 14px;
}
.rb-splithead .lede {
  margin: 0;
}
.rb-modeart {
  margin: 0 0 22px;
}
.rb-modeart svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  border-radius: 12px;
}

.wave-bars rect {
  transform-origin: center;
  animation: pulseWave 1.4s ease-in-out infinite;
}
.wave-bars rect:nth-child(2) {
  animation-delay: 0.15s;
}
.wave-bars rect:nth-child(3) {
  animation-delay: 0.3s;
}
.wave-bars rect:nth-child(4) {
  animation-delay: 0.45s;
}
.wave-bars rect:nth-child(5) {
  animation-delay: 0.6s;
}
.wave-bars rect:nth-child(6) {
  animation-delay: 0.35s;
}
.wave-bars rect:nth-child(7) {
  animation-delay: 0.5s;
}
.wave-bars rect:nth-child(8) {
  animation-delay: 0.25s;
}
.wave-bars rect:nth-child(9) {
  animation-delay: 0.1s;
}
@keyframes pulseWave {
  0%,
  100% {
    opacity: 0.5;
    transform: scaleY(0.9);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wave-bars rect {
    animation: none;
    opacity: 1;
  }
}

/* Heading block for the three-layer architecture section. */
.rb-archhead {
  max-width: 68ch;
  margin: 0 0 clamp(28px, 3vw, 44px);
}
.rb-archhead h2 {
  margin: 10px 0 14px;
}
.rb-archhead .lede {
  margin: 0;
}

/* ==========================================================================
   HOW IT WORKS: ARCHITECTURE ROW + LOOP TRACK
   Two adjacent rows of identical white cards gave the page no hierarchy
   between its architecture and its sequence. The three layer cards keep the
   card treatment and gain drawings, chip lists and a direction marker; the
   loop below is deliberately demoted to a ruled track so the two rows stop
   competing, and gains a real return arc so "the last one feeds the first"
   is something you can see rather than only read.
   ========================================================================== */
.rb-arch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.rb-archcard {
  display: flex;
  flex-direction: column;
}
.rb-archillu {
  background: var(--mist-100);
  border-radius: 10px;
  padding: 14px 12px;
  margin: 0 0 18px;
}
/* Capped and centred: at full card width the drawing runs ~190px tall and
   dominates the heading and chips beneath it. 240px caps it near 155px. */
.rb-archillu svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 170 / 110;
}
/* Card 3's heading wrapped to two lines and pushed its body below the other
   two. Balanced wrapping plus a reserved two-line box keeps the row aligned. */
.rb-archcard h3 {
  margin: 8px 0 14px;
  text-wrap: balance;
  min-height: 2.6em;
}

/* Chip lists: the contents used to be middot run-ons that did not scan. */
.rb-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rb-chips li {
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--mist-100);
  border: 1px solid var(--line);
  color: var(--ink-700);
}

/* Direction marker: these are stages, not three parallel boxes. */
@media (min-width: 901px) {
  .rb-archcard:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13px;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--coral-500);
    border-right: 1.5px solid var(--coral-500);
    transform: translateY(-50%) rotate(45deg);
  }
  .rb-archcard {
    position: relative;
  }
}
@media (max-width: 900px) {
  .rb-arch {
    grid-template-columns: 1fr;
  }
  .rb-archcard h3 {
    min-height: 0;
  }
}

/* ---- loop track ---- */
.rb-loop-track {
  gap: 0;
}
.rb-loop-track li {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 2px solid var(--line);
  padding: 18px 20px 20px 0;
}
.rb-loop-track li:first-child {
  border-top-color: var(--coral-500);
}
/* the old 10x1px coral dash between cards; the arc replaces it */
.rb-loop-track li:not(:last-child)::after {
  display: none;
}
.rb-loop-arc {
  position: relative;
  height: 30px;
  margin-top: 4px;
}
/* left / right / bottom borders make a U: the return path from 04 back to 01,
   at a single stroke weight regardless of how wide the track gets. */
.rb-loop-arcline {
  height: 22px;
  margin: 0 14px;
  border: 1.4px dashed var(--coral-500);
  border-top: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.rb-loop-archead {
  position: absolute;
  left: 9px;
  top: -4px;
  width: 12px;
  height: 10px;
}
.rb-loop-arclabel {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 10px;
  font-size: 12px;
  color: var(--coral-ink, var(--coral-500));
}
@media (max-width: 900px) {
  .rb-loop-track {
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .rb-loop-arc {
    display: none;
  }
}
@media (max-width: 560px) {
  .rb-loop-track {
    grid-template-columns: 1fr;
  }
}

/* The two-mode section heading. `.rb-section > .container > h2` caps headings
   at 22ch, which broke "Human where judgment matters. Autonomous where scale
   matters." across three lines with a single orphaned word on the last. The
   longer of its two sentences is 31 characters, so 34ch lets it sit on two,
   and balanced wrapping keeps them near-equal. Scoped, so every other section
   heading keeps the tighter 22ch measure. */
.rb-section > .container > h2.rb-modehead,
.rb-splithead h2.rb-modehead {
  max-width: 34ch;
  text-wrap: balance;
}

/* ==========================================================================
   DARK CASE PANEL
   Eyebrow, heading, paragraph and button were stacked on `.card p`'s 12px
   body-copy margin, so the block read as one dense slab. A heading wants air
   under it and a call to action wants clear separation from the prose that
   sets it up. Scoped to this panel so ordinary cards keep tight body spacing.
   ========================================================================== */
.rb-casepanel .eyebrow {
  margin-bottom: var(--sp-3);
}
.rb-casepanel h2 {
  margin: 0 0 var(--sp-4);
}
.rb-casepanel p {
  margin: 0 0 var(--sp-5);
  max-width: 52ch;
}
.rb-casepanel .btn {
  margin-top: var(--sp-1);
}

/* ==========================================================================
   ASSIST QUALIFIER
   Replaces a row of inert pills that read as interactive filters. These are
   statements the reader checks themselves against, so each gets a tick and
   room to be read, in two columns so the block fills the band instead of
   sitting in its left third.
   ========================================================================== */
.rb-signals {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
  max-width: 80ch;
}
.rb-signals li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-700);
}
.rb-signals svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--coral-500);
}
@media (max-width: 820px) {
  .rb-signals {
    grid-template-columns: 1fr;
  }
}

/* Section head for the "in the room" band. The heading used to sit inside the
   right column, where it read as a caption for the pills rather than the title
   of the section. Lifted above both columns to match every other section on
   the page. */
.rb-roomhead {
  max-width: var(--container);
  margin: 0 auto clamp(28px, 3vw, 44px);
  padding: 0 28px;
}
.rb-roomhead h2 {
  margin: 10px 0 0;
  max-width: 28ch;
}

/* Legend for the live demo: the three card types the shared script emits. */
.rb-legend {
  margin: var(--sp-5) 0 0;
}
.rb-legend > div {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.rb-legend dt {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* coral-500 measures 4.45:1 on these dark panels, just under AA. coral-400
     is the same hue family at 5.60:1. */
  color: var(--coral-400, #ea937d);
  margin-bottom: 6px;
}
.rb-legend dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   AUTONOMOUS: HOW IT RUNS
   The five-step timeline ran as a single narrow column down the left of a
   full-width section with no heading, so half the band was empty and the
   steps started cold. Title and lede take a rail on the left, the timeline
   the right. The rail sticks while the steps scroll past it.
   ========================================================================== */
.rb-runsplit {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.rb-runhead {
  position: sticky;
  top: 104px;
}
.rb-runhead h2 {
  margin: 10px 0 14px;
  max-width: 22ch;
}
.rb-runhead .lede {
  margin: 0;
}
/* The pill is a bare step number now, so it needs to sit tight to the heading
   rather than read as a label of its own. */
.rb-timeline .rb-t .rb-kicker {
  margin-bottom: 8px;
}
.rb-timeline .rb-t .rb-chips {
  margin-top: 10px;
}
@media (max-width: 900px) {
  .rb-runsplit {
    grid-template-columns: 1fr;
  }
  .rb-runhead {
    position: static;
  }
}

/* ==========================================================================
   USE-CASE FLOW STEPS
   Was a flex row of bare verb chips joined by arrows: "Surface", "Trade",
   "Capture" carried no meaning alone, restated the heading above them, and
   the arrows wrapped to line-ends pointing at nothing on narrow screens.
   Now a three-across grid so six steps read 3+3 and five read 3+2, the same
   rule as the use-case tiles, with the owner and the action stated.
   ========================================================================== */
.rb-steps-flow {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
}
.rb-steps-flow li {
  padding: 18px 0 20px;
  border-top: 2px solid var(--line);
}
.rb-steps-flow li:nth-child(-n + 3) {
  border-top-color: var(--coral-500);
}
.rb-stepn {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--coral-500);
  margin-bottom: 8px;
}
.rb-stepowner {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.rb-stepowner.you {
  background: var(--teal-900);
  color: #fff;
}
.rb-stepowner.whispor {
  background: rgba(224, 122, 95, 0.14);
  color: var(--coral-ink, #b4553a);
}
.rb-steps-flow strong {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.rb-stepdesc {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
}
@media (max-width: 900px) {
  .rb-steps-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-steps-flow li:nth-child(-n + 3) {
    border-top-color: var(--line);
  }
  .rb-steps-flow li:nth-child(-n + 2) {
    border-top-color: var(--coral-500);
  }
}
@media (max-width: 560px) {
  .rb-steps-flow {
    grid-template-columns: 1fr;
  }
  .rb-steps-flow li:nth-child(-n + 3),
  .rb-steps-flow li:nth-child(-n + 2) {
    border-top-color: var(--line);
  }
  .rb-steps-flow li:first-child {
    border-top-color: var(--coral-500);
  }
}

/* Security page: the propagation steps and the nine controls now carry the
   home page's icon treatment. The steps sit in a tighter 4-up grid than a
   card, so their icon runs smaller and the label follows it on its own line. */
.rb-proofstep .rb-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
}
.rb-proofstep b {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-900);
}
.rb-proofbody {
  display: block;
  line-height: 1.6;
}
/* No dark inversion here. `.rb-proofstep` sets its own mist-100 background, so
   these cards stay light even though the band around them is rb-dark. Treating
   them as dark painted a white icon and a white label onto a white card. */
.rb-proofstep .rb-ico {
  color: var(--teal-700);
}
.rb-dark .rb-proofstep b,
.rb-dark .rb-proofstep .rb-proofbody {
  color: var(--ink-900);
}
.rb-dark .rb-proofstep .rb-proofbody {
  color: var(--ink-700);
}

/* Signal doctrine: the claim is a contrast between what Whispor records and
   what it refuses to infer, so it gets a picture beside the prose instead of
   leaving half the band empty. */
.rb-doctrinesplit {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.rb-doctrinecopy .lede {
  margin-bottom: 0;
}
.rb-doctrine svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 320 / 240;
}
@media (max-width: 900px) {
  .rb-doctrinesplit {
    grid-template-columns: 1fr;
  }
}

/* Stage icons on the loop track, and the arc label's backdrop. The label masks
   the dashed return line behind it, so it has to match the band it sits on:
   how-it-works runs this on white, Negotiation Intelligence on mist. */
.rb-loop-track .rb-ico {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
}
.rb-soft .rb-loop-arclabel {
  background: var(--mist-100);
}

/* ==========================================================================
   GUIDE COVERS: ART ABOVE THE LABEL
   The art was absolutely positioned across the whole cover with the label
   bottom-aligned underneath it, so the gap between them was whatever the
   drawing's empty lower strip happened to leave. Nothing controlled it, and
   the label ended up sitting on the artwork. Now a centred column: drawing on
   top, label below, with a real gap between them.
   ========================================================================== */
.rb-guidecover {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 14px;
  text-align: center;
}
.rb-guidecover svg {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 104px;
  height: auto;
  aspect-ratio: 132 / 88;
}
.rb-guidecover span {
  position: static;
  display: block;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .rb-guidecover {
    height: auto;
    min-height: 148px;
    font-size: 12.5px;
  }
  .rb-guidecover svg {
    width: 100%;
    max-width: 96px;
    height: auto;
  }
}
@media (max-width: 620px) {
  .rb-guidecover {
    min-height: 168px;
    gap: 18px;
  }
  .rb-guidecover svg {
    max-width: 132px;
    height: auto;
  }
}

/* ==========================================================================
   CONTACT DEMO TABS
   Each tab now switches a panel. All three panels share one viewBox, so the
   card holds a single height and selecting a tab cannot resize it.
   ========================================================================== */
.rb-demopanels {
  margin-top: 20px;
}
.rb-demopanel[hidden] {
  display: none;
}
.rb-demopanel svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 660 / 404;
}
.rb-demotab {
  cursor: pointer;
}
.rb-demotab:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* Provenance line under the home page signal mock: states where the measures
   come from, in the same register as the security page's doctrine note. */
.rb-demofoot {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-600, var(--ink-700));
  opacity: 0.85;
}

/* ==========================================================================
   HOME SIGNAL CARD
   The mock sat on a white card inside a dark band, which made it the loudest
   thing on the page and set it apart from the equivalent panel on the Assist
   page. Same surface as .hero-demo there, and narrower: the grid gave the card
   more width than the copy, which is the wrong way round when the copy is the
   argument and the card is the evidence.
   ========================================================================== */
.rb-demo.rb-signalsplit {
  grid-template-columns: 1fr 0.86fr;
  align-items: center;
}
.rb-demo-card.rb-signalcard,
.card.rb-memorycard {
  background: linear-gradient(180deg, #0e3b47 0%, #0b2f39 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    0 12px 30px -14px rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 22px;
  max-width: 470px;
  margin-left: auto;
}
.rb-signalcard .eyebrow {
  color: #e8a892;
}
/* Both bubbles are Whispor's, so neither should be indented as a reply. */
.rb-signalcard .rb-bubble.rb-ai {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  align-self: stretch;
  max-width: 100%;
}
.rb-signalcard .rb-demofoot {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
@media (max-width: 900px) {
  .rb-demo.rb-signalsplit {
    grid-template-columns: 1fr;
  }
  .rb-demo-card.rb-signalcard {
    max-width: 100%;
    margin-left: 0;
  }
}

/* The memory card is a record, not a chat panel: it needs the dark surface but
   not the signal card's narrow measure or right alignment. */
.card.rb-memorycard {
  max-width: none;
  margin-left: 0;
  padding: 26px;
}
.rb-memorycard .rb-kicker {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 4px;
}
.rb-memorycard .rb-legend {
  margin-top: 8px;
}
.rb-memorycard .rb-legend dt {
  font-size: 11.5px;
}