/* Product content uses the same readable scale as the launch page. */
.rb-micro { display: block; color: var(--gold); font: 13px/1.7 var(--mono); letter-spacing: .8px; overflow-wrap: anywhere; }
.rb-caption { font-size: 15px; color: var(--muted); line-height: 1.8; }
.rb-badge { display: inline-flex; align-items: center; border: 1px solid var(--line); padding: 5px 9px; font: 13px/1.6 var(--sans); color: var(--muted); }
.rb-badge.green { color: var(--green); border-color: #657553; background: #c1d3ae09; }
.rb-badge.warm { color: #dec099; border-color: #7b6248; }
.rb-workbench { border: 1px solid #657553; background: #151a15; box-shadow: 0 35px 85px #0003; }
.rb-workbench-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px; border-bottom: 1px solid var(--line); font: 13px/1.7 var(--mono); letter-spacing: .8px; }
.rb-workbench-top b { font-weight: 400; color: var(--muted); }
.rb-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid var(--line); scrollbar-color: #6a7955 #101610; scrollbar-width: thin; }
.rb-tabs::-webkit-scrollbar { height: 5px; }
.rb-tabs::-webkit-scrollbar-track { background: #101610; }
.rb-tabs::-webkit-scrollbar-thumb { background: #6a7955; }
.rb-tabs button { display: flex; gap: 13px; align-items: center; padding: 22px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 16px/1.5 var(--sans); text-align: left; }
.rb-tabs button span { font: 13px var(--mono); color: var(--dim); }
.rb-tabs button[aria-selected=true] { background: #c1d3ae0b; color: var(--text); border-bottom-color: var(--gold); }
.rb-tabs button[aria-selected=true] span { color: var(--gold); }
.rb-tabs button:hover { background: #c1d3ae08; color: var(--text); }
#rb-tour-panel { display: grid; grid-template-columns: .7fr 1.7fr; min-height: 585px; }
.rb-tour-aside { padding: 36px 28px; border-right: 1px solid var(--line); background: #101610; }
.rb-tour-aside h3 { font: 400 29px/1.45 var(--serif); margin: 24px 0 20px; text-wrap: balance; }
.rb-tour-aside p { font-size: 17px; line-height: 1.85; color: var(--muted); }
.rb-case-label { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--gold); }
.rb-tour-content { padding: 32px; min-width: 0; }
.rb-tour-controls { padding: 18px 28px; background: #101610; color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; font: 14px var(--mono); }
.rb-tour-controls > div { display: flex; align-items: center; gap: 18px; }
.rb-text-button,.rb-next { min-height: 44px; border: 0; padding: 9px 14px; font: 16px/1.5 var(--sans); background: transparent; color: var(--text); }
.rb-next { background: var(--gold); color: var(--bg); }
.rb-next:hover { background: #dac5a3; }
.rb-text-button:disabled { opacity: .35; cursor: default; }
.rb-details { margin-top: 20px; background: transparent; padding: 15px 20px; font-size: 15px; }
.rb-details p { font-size: 15px; line-height: 1.8; }
.rb-details summary { min-height: 24px; }
.rb-details a { display: inline-block; padding: 8px 0; }
.rb-timeline { list-style: none; margin: 0; padding: 0; }
.rb-timeline li { border: 1px solid var(--line); border-top: 0; }
.rb-timeline li:first-child { border-top: 1px solid var(--line); }
.rb-timeline li.is-open { background: #c1d3ae09; }
.rb-event { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 16px; background: transparent; color: var(--text); border: 0; padding: 17px 20px; text-align: left; }
.rb-event-position { color: var(--dim); font: 13px var(--mono); }
.rb-event small { display: block; color: var(--muted); font: 13px/1.6 var(--mono); }
.rb-event strong { display: block; font: 18px/1.8 var(--sans); }
.rb-event-state { font: 14px/1.7 var(--mono); color: var(--green); }
.rb-event-state > span { margin-left: 14px; }
.is-failure .rb-event-state { color: #dec099; }
.rb-event-detail { margin: 0 20px 20px 68px; border-top: 1px solid var(--line); padding-top: 16px; }
.rb-event-detail p { margin: 9px 0 18px; font-size: 17px; line-height: 1.8; }
.rb-record-fields { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 13px/1.8 var(--mono); color: var(--muted); }
.rb-record-fields code { font: inherit; }
.rb-experience-card { padding: 24px; border: 1px solid #62704f; background: linear-gradient(120deg,#28332350,#151a15); }
.rb-card-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.rb-condition { padding: 24px 0; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.rb-condition > span { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.rb-condition code { font: 21px/1.7 var(--mono); overflow-wrap: anywhere; }
.rb-condition b { color: var(--green); font-weight: 400; }
.rb-tour blockquote,.rb-returned-material blockquote { margin: 12px 0 24px; padding-left: 20px; border-left: 2px solid var(--gold); font-size: 18px; line-height: 1.9; }
.rb-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rb-ref { border: 1px solid #48583c; color: var(--green); background: #c1d3ae08; padding: 8px 10px; min-height: 44px; font: 14px var(--mono); margin: 8px 6px 0 0; }
.rb-ref:hover { background: #c1d3ae20; }
.rb-ref.warm { border-color: #705a43; color: #dec099; }
.rb-query-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.rb-query { display: flex; flex-direction: column; text-align: left; padding: 24px; min-width: 0; color: var(--muted); border: 1px solid var(--line); background: #121712; font-size: 16px; }
.rb-query.has-context { border-color: #667652; background: #26302066; }
.rb-query:hover { border-color: var(--gold); }
.rb-query strong { font: 400 25px/1.5 var(--serif); color: var(--text); margin: 14px 0 6px; }
.rb-query-count { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-top: 28px; font-size: 13px; }
.rb-query-count b { font: 38px var(--mono); color: var(--text); }
.rb-query-count > span { margin-left: auto; font-size: 22px; color: var(--gold); }
.rb-revision p { font-size: 17px; line-height: 1.85; margin: 12px 0 16px; }
.rb-old,.rb-new { padding: 22px 24px; border: 1px solid var(--line); }
.rb-old { color: var(--muted); }
.rb-new { border-color: #667652; background: #26302066; }
.rb-counter { display: flex; gap: 18px; padding: 20px 24px; color: #dec099; }
.rb-counter > span { font-size: 32px; }
.rb-counter p { margin-bottom: 0; }
.rb-consumer-chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 10px; }
.rb-exchange-parties { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.rb-exchange-parties > div { padding: 14px; border: 1px solid var(--line); }
.rb-exchange-parties p { font-size: 15px; color: var(--muted); margin: 8px 0 0; }
.rb-exchange-parties .brain-party { border-color: var(--gold); background: #c3ad880c; }
.rb-exchange-steps { list-style: none; padding: 0; margin: 24px 0; }
.rb-exchange-steps li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.rb-exchange-steps li span { color: var(--gold); font: 13px/2 var(--mono); }
.rb-rollback { color: var(--gold); padding: 14px 16px; border-left: 2px solid var(--gold); background: #c3ad8808; font-size: 15px; }
.rb-checks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.rb-checks b { display: block; color: var(--text); font: 28px/1.6 var(--mono); }
.rb-checks span { font-size: 13px; color: var(--muted); }
.rb-architecture { display: grid; grid-template-columns: 1fr 50px 1.35fr 50px 1fr; align-items: center; gap: 12px; padding: 38px 28px 24px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 25%,#53633e23,transparent 65%),#131713; }
.rb-stack-side h3 { font: 400 24px/1.5 var(--serif); margin: 15px 0 22px; }
.rb-stack-side > div { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 16px; color: var(--muted); }
.rb-stack-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold); font: 12px/1.7 var(--mono); }
.rb-stack-arrow b { font: 30px var(--sans); }
.rb-stack-core { border: 1px solid #718159; background: linear-gradient(135deg,#3a472f77,#162014); padding: 26px 24px; }
.rb-stack-core h3 { font: 400 32px/1.5 var(--serif); margin: 12px 0 24px; }
.rb-stack-core > div { border-top: 1px solid #566545; padding: 13px 0; display: flex; gap: 16px; font-size: 17px; }
.rb-stack-core > div span { font: 13px/2 var(--mono); color: var(--gold); }
.rb-stack-core p { font-size: 13px; color: var(--muted); padding-top: 12px; margin-bottom: 0; }
.rb-return-path { grid-column: 1/-1; text-align: center; font-size: 15px; color: var(--green); border: 1px solid #566545; border-top: 0; margin: 12px 8% 0; padding: 14px 20px; }
.rb-return-path span { margin-right: 12px; }
.rb-ownership { font-size: 15px; color: var(--muted); line-height: 1.9; max-width: 950px; }
.rb-distinctions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; margin-top: 40px; }
.rb-distinctions h3 { font: 400 24px/1.5 var(--serif); margin: 16px 0 12px; }
.rb-distinctions p { color: var(--muted); font-size: 17px; }
.rb-scenarios { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 26px; }
.rb-scenario { border: 1px solid var(--line); background: #141914; }
.rb-scene-visual { height: 255px; padding: 28px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(#87997209 1px,transparent 1px),linear-gradient(90deg,#87997209 1px,transparent 1px),radial-gradient(ellipse,#56684830,transparent 75%); background-size: 24px 24px,24px 24px,100% 100%; }
.rb-scene-nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.rb-scene-nodes > span { padding: 8px 5px; text-align: center; border: 1px solid #4d5c40; background: #141914; color: var(--text); font-size: 15px; }
.rb-scene-nodes small { display: block; color: var(--dim); font: 12px/1.5 var(--mono); }
.rb-scene-traces { height: 30px; display: flex; justify-content: space-around; width: 80%; margin: 0 auto; border-bottom: 1px solid #718159; }
.rb-scene-traces i { width: 1px; background: #718159; }
.rb-scene-memory { padding: 9px 12px; width: 72%; margin: 0 auto; text-align: center; background: #35472a; border: 1px solid #899971; color: var(--green); font: 400 20px/1.5 var(--serif); box-shadow: 0 12px 30px #0004; }
.rb-scene-bottom { display: block; text-align: center; margin-top: 15px; font-size: 13px; color: var(--muted); }
.scene-1 .rb-scene-memory { background: #414133; border-color: var(--gold); color: #ded3b8; }
.scene-2 .rb-scene-memory { background: #263b37; border-color: #6f9690; color: #b7d1cb; }
.rb-scene-copy { padding: 26px 24px; }
.rb-scene-copy h3 { font: 400 27px/1.4 var(--serif); margin: 16px 0; }
.rb-scene-lead { color: var(--text); font-size: 17px; }
.rb-scene-copy dl { padding-top: 18px; border-top: 1px solid var(--line); margin: 24px 0 0; }
.rb-scene-copy dt { font-size: 13px; color: var(--gold); margin-top: 20px; }
.rb-scene-copy dd { font-size: 16px; line-height: 1.85; color: var(--muted); margin: 7px 0 0; }
.rb-returned-material { padding-top: 22px; margin-top: 25px; border-top: 1px solid #4a573e; }
.rb-returned-material blockquote { font-size: 17px; margin-bottom: 12px; }
.rb-returned-material > code { font: 14px var(--mono); color: var(--gold); }
.rb-returned-material ol { margin: 14px 0 0; padding: 0; list-style: none; }
.rb-returned-material li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 9px 0; font-size: 15px; line-height: 1.8; color: var(--muted); }
.rb-returned-material li code { color: var(--gold); font: 13px/2 var(--mono); }
.rb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.rb-compare-basis { max-width: 920px; font-size: 15px; color: var(--muted); line-height: 1.85; margin: 0 0 28px; }
.rb-compare-flows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.rb-compare-flow { padding: 28px; background: #141814; border: 1px solid var(--line); min-width: 0; }
.rb-compare-flow.with-brain { background: linear-gradient(135deg,#29372377,#151a15); border-color: #6b7c53; }
.rb-compare-flow h3 { font: 400 28px/1.5 var(--serif); margin: 15px 0 28px; }
.rb-compare-flow ol { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 0; margin: 0; align-items: stretch; }
.rb-compare-flow li { border: 1px solid #46503e; padding: 15px 10px; text-align: center; font-size: 16px; line-height: 1.6; position: relative; display: grid; align-content: center; }
.rb-compare-flow li+li::before { content: '→'; position: absolute; left: -20px; width: 19px; top: 50%; transform: translateY(-50%); color: var(--dim); font: 16px var(--sans); }
.with-brain li { border-color: #71835a; color: var(--green); }
.with-brain li+li::before { color: var(--gold); }
.rb-compare-track { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.with-brain .rb-compare-track { border: 1px solid #536645; border-top: 0; color: var(--green); padding: 14px; text-align: center; }
.rb-compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 32px; text-align: left; }
.rb-compare-table th,.rb-compare-table td { padding: 24px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.rb-compare-table thead th { background: #181e17; color: var(--text); font-size: 16px; font-weight: 500; }
.rb-compare-table thead th:first-child { width: 20%; }
.rb-compare-table tbody th { color: var(--text); font: 400 21px/1.6 var(--serif); }
.rb-compare-table td { font-size: 17px; line-height: 1.85; color: var(--muted); }
.rb-compare-table .rb-compare-value { background: #27331f33; color: var(--text); }
.rb-compare-takeaway { padding-top: 38px; }
.rb-compare-takeaway h3 { font: 400 28px/1.6 var(--serif); max-width: 870px; margin: 0; }
.rb-compare-takeaway .cta { margin-top: 24px; }
.rb-compare-scope { margin-top: 30px; max-width: 1000px; }
.rb-compare-scope p { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 8px 0; }
@media (max-width:900px) {
  .rb-compare-flow { padding: 24px 20px; }
  .rb-compare-flow ol { grid-template-columns: 1fr; gap: 24px; }
  .rb-compare-flow li+li::before { content: '↓'; top: -24px; left: calc(50% - 10px); transform: none; }
  .rb-compare-table th,.rb-compare-table td { padding: 20px 16px; }
  .rb-compare-table tbody th { font-size: 20px; }
}
@media (max-width:700px) {
  .rb-compare-flows { grid-template-columns: 1fr; gap: 18px; }
  .rb-compare-table,.rb-compare-table tbody { display: block; }
  .rb-compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rb-compare-table tr { display: block; margin-top: 20px; border: 1px solid var(--line); }
  .rb-compare-table tbody th { display: block; border: 0; background: #1b2119; padding: 16px 20px; font-size: 23px; }
  .rb-compare-table td { display: block; border: 0; border-top: 1px solid var(--line); padding: 20px; }
  .rb-compare-table td::before { content: attr(data-label); display: block; color: var(--gold); font-size: 14px; margin-bottom: 10px; }
  .rb-compare-takeaway h3 { font-size: 26px; }
}
@media (max-width:1100px) {
  #rb-tour-panel { grid-template-columns: .8fr 1.5fr; }
  .rb-tour-aside { padding: 28px 22px; }
  .rb-tour-content { padding: 24px; }
  .rb-tabs button { flex-direction: column; align-items: flex-start; gap: 4px; padding: 17px; }
  .rb-architecture { grid-template-columns: 1fr 32px 1.3fr 32px 1fr; gap: 8px; padding-inline: 20px; }
  .rb-stack-core { padding: 20px 16px; }
  .rb-stack-core h3 { font-size: 28px; }
  .rb-scenarios { grid-template-columns: 1fr; }
  .rb-scenario { display: grid; grid-template-columns: .8fr 1.2fr; }
  .rb-scene-visual { height: 100%; min-height: 275px; display: flex; flex-direction: column; justify-content: center; border-bottom: 0; border-right: 1px solid var(--line); }
  .rb-scene-traces { flex-shrink: 0; }
}
@media (max-width:900px) {
  #rb-tour-panel { grid-template-columns: 1fr; }
  .rb-tour-aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .rb-tour-aside h3 { margin: 14px 0; }
  .rb-tour-aside h3 br { display: none; }
  .rb-case-label { margin-top: 16px; padding-top: 12px; }
  .rb-architecture { grid-template-columns: 1fr; padding: 26px; }
  .rb-stack-side > div { display: inline-block; margin-right: 18px; }
  .rb-stack-arrow { padding: 8px 0; flex-direction: row; justify-content: center; gap: 14px; }
  .rb-stack-arrow b { transform: rotate(90deg); }
  .rb-stack-core h3 { font-size: 32px; }
  .rb-stack-core { padding: 24px; }
  .rb-return-path { margin: 20px 0 0; }
  .rb-distinctions { gap: 24px; }
}
@media (max-width:600px) {
  .rb-workbench-top { padding: 18px; gap: 10px; }
  .rb-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; }
  .rb-tabs button { flex: 0 0 auto; padding: 15px 18px; min-width: 95px; }
  .rb-tour-aside { padding: 24px 20px; }
  .rb-tour-aside h3 { font-size: 28px; }
  .rb-tour-content { padding: 20px 14px; }
  .rb-event { padding: 14px 12px; gap: 10px; grid-template-columns: 22px 1fr auto; }
  .rb-event strong { font-size: 17px; }
  .rb-event small { font-size: 12px; overflow-wrap: anywhere; }
  .rb-event-state { font-size: 13px; }
  .rb-event-state > span { margin-left: 6px; }
  .rb-event-detail { margin: 0 12px 18px; }
  .rb-tour-controls { padding: 16px 14px; flex-direction: row; flex-wrap: wrap; }
  .rb-tour-controls > div { gap: 6px; margin-left: auto; }
  .rb-next,.rb-text-button { padding-inline: 10px; font-size: 15px; }
  .rb-experience-card { padding: 20px 16px; }
  .rb-condition code { font-size: 18px; }
  .rb-source-grid { grid-template-columns: 1fr; gap: 18px; }
  .rb-query-grid { grid-template-columns: 1fr; }
  .rb-query { padding: 22px; }
  .rb-query-count { margin-top: 16px; }
  .rb-old,.rb-new { padding: 20px 16px; }
  .rb-counter { padding: 20px 8px; gap: 12px; }
  .rb-exchange-parties { grid-template-columns: 1fr; }
  .rb-checks { gap: 10px; }
  .rb-details { padding: 15px; }
  .rb-architecture { padding: 22px 18px; }
  .rb-stack-side > div { display: block; margin-right: 0; }
  .rb-stack-core { padding: 24px 18px; }
  .rb-distinctions { grid-template-columns: 1fr; }
  .rb-scenario { display: block; }
  .rb-scene-visual { min-height: 265px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rb-scene-copy { padding: 24px 20px; }
  .rb-scene-copy h3 { font-size: 27px; }
}