/* User guide: an extension of the existing docs, using Railbed's design tokens.
   Product examples are semantic HTML with synthetic values, not screenshots of merchant data. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --radius-xs: 4px; --radius-s: 6px; --radius-m: 8px; --radius-l: 10px;
  --type-ui: 400 14px/1.45 var(--font-sans);
  --type-ui-s: 400 13px/1.4 var(--font-sans);
  --type-ui-xs: 400 12px/1.35 var(--font-sans);
  --type-title: 500 15px/1.35 var(--font-sans);
  --type-explainer-body: 400 1rem/1.6 var(--font-sans);
  --type-explainer-title: 500 1rem/1.4 var(--font-sans);
  --type-amount-l: 400 46px/1.08 var(--font-serif);
  --type-amount-m: 400 36px/1.1 var(--font-serif);
  --type-h1: 400 56px/1.06 var(--font-serif);
  --type-h1-m: 400 38px/1.08 var(--font-serif);
  --guide-header: 104px;
}
.dcollections { border-top: 1px solid var(--border-subtle); }
.dcollections > div { display: flex; align-items: stretch; gap: var(--space-7); max-width: 1360px; margin: auto; padding: 0 var(--space-8); }
.dcollections a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; text-decoration: none; font: var(--type-ui); color: var(--muted); }
.dcollections a:hover { color: var(--ink); }
.dcollections a[aria-current] { color: var(--ink); border-color: var(--ink); font-weight: 500; }
.dcollections .dcollections__api { margin-left: auto; }
.dnav, .dtoc { top: var(--head-h, var(--guide-header)); max-height: calc(100dvh - var(--head-h, var(--guide-header))); }
.dhelp { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); text-decoration: none; font: var(--type-ui-s); }
.dhelp strong { font-weight: 500; }
.dhelp span { color: var(--muted); }
.docs--guide h1 { font: var(--type-h1); max-width: 16ch; }
.docs--guide .dlead { font-size: 18px; }
.docs--guide .dnav__group + .dnav__group { margin-top: var(--space-7); }
.docs--guide .prose > ol { counter-reset: guide-step; list-style: none; padding: 0; margin-top: var(--space-6); }
.docs--guide .prose > ol > li { counter-increment: guide-step; position: relative; padding: 0 0 var(--space-5) var(--space-12); margin: 0; }
.docs--guide .prose > ol > li::before { content: counter(guide-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: var(--type-ui); }
.docs--guide .prose > ol > li:not(:last-child)::after { content: ''; position: absolute; top: var(--space-8); bottom: var(--space-1); left: 14px; width: 1px; background: var(--border); }
.docs--guide .cards { gap: 0 var(--space-6); border-top: 1px solid var(--border); }
.docs--guide .card { padding: var(--space-6) var(--space-7) var(--space-6) 0; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.docs--guide .card:hover { background: var(--wash); }
.docs--guide .card__arrow { right: var(--space-1); top: var(--space-6); }
.docs--guide .table td.nw { white-space: normal; }
.dsearch__input::placeholder { color: var(--muted); }
.dcontents { display: none; margin: var(--space-5) 0 var(--space-8); border-block: 1px solid var(--border); }
.dcontents summary { padding: var(--space-3) 0; cursor: pointer; font: var(--type-ui); }
.dcontents .dtoc__label { display: none; }
.dcontents .rail { margin: 0 0 var(--space-4); }
.dcontents .rail a { padding-block: var(--space-2); }
html:not(.js) .dsearch__input, html:not(.js) .dsearch__key { display: none; }
.dsearch__fallback { font: var(--type-ui-xs); color: var(--muted); }
@media (max-width: 1180px) { .dcontents { display: block; } }

/* Process and decision components: one shared explanation feeds HTML, Markdown and AI search. */
.payment-flow { background: var(--wash); }
.flow-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font: var(--type-ui); }
.prose .payment-flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.prose .payment-flow li { position: relative; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-6) var(--space-5); }
.payment-flow li + li { border-left: 1px solid var(--border); }
.flow-number { position: absolute; top: var(--space-6); right: var(--space-5); color: var(--muted); font: var(--type-ui-xs); font-variant-numeric: tabular-nums; }
.records-model-label { color: var(--muted); font: var(--type-ui-xs); padding-bottom: var(--space-2); }
.flow-symbol { color: var(--ink); margin-bottom: var(--space-2); }
.payment-flow strong { font: var(--type-explainer-title); }
.prose .payment-flow p { font: var(--type-explainer-body); color: var(--body); margin: 0; }
.payment-flow li small { margin-top: auto; padding-top: var(--space-2); }
.flow-checkpoint { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface); }
.flow-checkpoint svg { flex-shrink: 0; color: var(--green); }
.flow-checkpoint strong { display: block; margin-bottom: var(--space-1); }
.status-picker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--wash); border-bottom: 1px solid var(--border); }
.status-picker label { font: var(--type-ui); }
.status-picker select { min-height: 44px; max-width: 100%; min-width: 160px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-s); font: var(--type-ui); color: var(--ink); background: var(--surface); }
.status-explainer { padding: var(--space-6); background: var(--surface); }
.status-explainer + .status-explainer { border-top: 1px solid var(--border); }
.status-label { color: var(--muted); font: var(--type-ui-s); }
.status-explainer--ready .status-label { color: var(--green); }
.status-explainer--review .status-label { color: var(--amber); }
.prose .status-explainer h3 { font: 400 28px/1.2 var(--font-serif); margin: var(--space-3) 0; scroll-margin-top: 0; }
.prose .status-explainer p { font: var(--type-explainer-body); margin: var(--space-3) 0; }
.status-action { border-left: 1px solid var(--border-input); padding: var(--space-3) var(--space-4); margin-top: var(--space-5); background: var(--wash); }
.status-action strong { font: var(--type-explainer-title); }
.status-action p:last-child { margin-bottom: 0; }
.status-explainer--ready .status-action { border-color: var(--green); }
.status-explainer--review .status-action { border-color: var(--amber); }
.prose .status-explainer .status-note { color: var(--muted); font: var(--type-ui-s); margin-top: var(--space-5); }
.status-explainer > a { font: var(--type-ui); }
html:not(.js) .status-picker { display: none; }

/* Visual examples. Product faces use the app's quiet square controls and Newsreader amounts. */
.guide-preview { margin: var(--space-8) 0; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--stone); color: var(--text); }
.guide-preview figcaption { padding: var(--space-3) var(--space-5); background: var(--wash); border-top: 1px solid var(--border); font: var(--type-ui-xs); color: var(--muted); }
.guide-preview small { font: var(--type-ui-xs); color: var(--muted); }
.guide-preview strong { font-weight: 500; }
.guide-preview .demo-amount { font: var(--type-amount-l); font-variant-numeric: tabular-nums; letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
.demo-amount small { font: var(--type-ui); color: var(--muted); letter-spacing: 0; }
.demo-monogram { display: grid; flex-shrink: 0; place-items: center; width: var(--space-10); height: var(--space-10); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--wash); color: var(--ink); font: 400 24px/1 var(--font-serif); }
.demo-status { display: inline-flex; gap: 6px; align-items: center; width: fit-content; padding: var(--space-1) var(--space-2); background: var(--wash); border-radius: var(--radius-xs); font: var(--type-ui-xs); white-space: nowrap; color: var(--muted); }
.demo-status > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.demo-status--paid { color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.demo-status--pending, .demo-status--test { color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.demo-tour-tabs { display: flex; padding: var(--space-3); gap: var(--space-1); background: var(--wash); border-bottom: 1px solid var(--border); }
.demo-tour-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-s); font: var(--type-ui-s); color: var(--muted); background: none; cursor: pointer; }
.demo-tour-tabs button > span { font-variant-numeric: tabular-nums; }
.demo-tour-tabs button:hover { color: var(--ink); background: var(--surface); }
.demo-tour-tabs button[aria-selected='true'] { color: var(--ink); border-color: var(--border-strong); background: var(--surface); }
.demo-tour-panel[hidden] { display: none; }
.demo-stage { display: grid; place-items: center; min-height: 364px; padding: var(--space-7); }
.prose .demo-explainer { margin: 0; min-height: 65px; display: flex; align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--surface); font: var(--type-explainer-body); color: var(--body); }
.demo-request { width: 100%; max-width: 368px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.demo-business { display: flex; align-items: center; gap: var(--space-3); font: var(--type-ui-s); }
.demo-business > span:nth-child(2) { flex: 1; }
.demo-business small { display: block; margin-top: 2px; }
.demo-business .demo-monogram { width: var(--space-8); height: var(--space-8); font-size: 20px; }
.demo-request .demo-amount { margin: var(--space-5) 0 var(--space-1); }
.demo-product { font: var(--type-title); }
.demo-details { margin: var(--space-5) 0; font: var(--type-ui-s); }
.demo-details > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.demo-details dt { color: var(--muted); }
.demo-details dd { margin: 0; text-align: right; }
.demo-button { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 42px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--ink); color: var(--surface); font: var(--type-ui-s); }
.demo-button svg { width: 16px; height: 16px; }
.demo-footnote { padding-top: var(--space-3); color: var(--muted); text-align: center; font: var(--type-ui-xs); }
.demo-checkout { display: grid; grid-template-columns: 1fr 1.1fr; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.demo-order { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); background: var(--wash); font: var(--type-ui-s); }
.demo-order > strong { margin-top: var(--space-3); font: var(--type-title); }
.demo-order .demo-amount { margin-top: var(--space-1); }
.demo-checkout-form { display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding: var(--space-6); }
.demo-checkout-form > strong { font: var(--type-title); }
.demo-field { margin-top: var(--space-4); font: var(--type-ui-xs); }
.demo-field > span { display: block; margin-bottom: var(--space-2); color: var(--text); }
.demo-input { min-height: 38px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); font: var(--type-ui-s); overflow-wrap: anywhere; }
.demo-receipt { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-6); text-align: center; font: var(--type-ui); }
.demo-check { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: 50%; color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
.demo-receipt > strong { font: 400 28px/1.15 var(--font-serif); }
.demo-receipt-note { color: var(--muted); font: var(--type-ui-s); }
.demo-editor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-6); align-items: center; }
.demo-editor-form { background: var(--surface); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-m); }
.demo-window-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font: var(--type-title); }
.demo-window-title > span { font: var(--type-ui-xs); color: var(--muted); }
.demo-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.demo-segments { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-xs); font: var(--type-ui-xs); }
.demo-segments > * { flex: 1; padding: var(--space-1); text-align: center; }
.demo-segments strong { background: var(--stone); border-radius: var(--radius-xs); }
.demo-editor-preview .demo-request { padding: var(--space-4); }
.demo-editor-preview .demo-business > .demo-status { display: none; }
.demo-editor-preview .demo-amount { font: var(--type-amount-m); }
.guide-preview--checkout { padding: var(--space-6) var(--space-6) 0; }
.guide-preview--checkout figcaption { margin: var(--space-6) calc(-1 * var(--space-6)) 0; }
.demo-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-6); }
.demo-plan { padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.demo-plan--featured { background: var(--rb-ink); color: var(--on-dark); border-color: var(--border-strong); }
.demo-plan-name { font: var(--type-title); }
.demo-plan > small { margin: var(--space-2) 0 var(--space-6); min-height: 32px; }
.demo-plan .demo-amount { font: var(--type-amount-m); }
.demo-plan-unit { font: var(--type-ui-xs); color: var(--muted); margin-top: var(--space-1); }
.demo-plan--featured .demo-amount { color: var(--on-dark); }
.demo-plan--featured small, .demo-plan--featured .demo-plan-unit { color: var(--on-dark-muted); }
.prose .demo-plan ul { padding: 0; margin: var(--space-6) 0; list-style: none; flex: 1; }
.prose .demo-plan li { padding: 0; margin: 0 0 var(--space-2); display: flex; gap: var(--space-2); font: var(--type-ui-xs); color: inherit; }
.demo-plan li svg { width: 14px; height: 14px; flex-shrink: 0; }
.demo-plan .demo-button { width: 100%; background: var(--stone); color: var(--ink); }
.demo-plan--featured .demo-button { background: var(--btn-on-dark-bg); color: var(--btn-on-dark-fg); }
.guide-preview--pricing > .demo-footnote { padding: 0 var(--space-5) var(--space-5); }
.demo-wallet { margin: var(--space-7) auto; max-width: 430px; background: var(--surface); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); }
.demo-wallet-hero { padding: var(--space-7); background: var(--rb-ink); color: var(--on-dark); font: var(--type-ui); }
.demo-wallet-hero > small { display: block; margin-top: var(--space-1); color: var(--on-dark-muted); }
.demo-wallet-hero .demo-amount { margin: var(--space-7) 0 var(--space-2); color: var(--on-dark); }
.demo-wallet-hero .demo-amount small { color: var(--on-dark-muted); }
.demo-wallet-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); font: var(--type-ui-s); }
.demo-wallet-body > span { color: var(--muted); }
.demo-wallet-body > strong { font: 400 26px/1.15 var(--font-serif); }
.demo-activity { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.demo-activity small { display: block; margin-top: var(--space-1); }
.demo-tracking { max-width: 340px; margin: var(--space-7) auto; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); display: flex; align-items: center; flex-direction: column; gap: var(--space-3); font: var(--type-ui-s); }
.demo-tracking .demo-details { align-self: stretch; margin: 0; }
.demo-tracking > strong { font: var(--type-title); margin-top: var(--space-3); }
.demo-payments { margin: var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.demo-payments .demo-window-title { margin-bottom: var(--space-5); }
.demo-table-head, .demo-payment-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 122px; gap: var(--space-3); padding: var(--space-3) 0; align-items: center; border-top: 1px solid var(--border-subtle); font: var(--type-ui-s); }
.demo-table-head { color: var(--muted); font: var(--type-ui-xs); }
.demo-payment-row small { display: block; margin-top: var(--space-1); }
.demo-payment-row strong { font-variant-numeric: tabular-nums; }
.demo-routing { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-8) var(--space-5); }
.demo-routing > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.demo-routing strong { font: var(--type-title); }
.demo-routing div > span { font: var(--type-ui-xs); color: var(--muted); }
.demo-routing-core { padding: var(--space-5) var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-s); }
.demo-flow-arrow { color: var(--muted); }
@media (max-width: 900px) {
  .dcollections > div { padding: 0 var(--space-5); gap: var(--space-6); }
  .docs--guide h1 { font: var(--type-h1-m); }
  .dnav { max-height: none; }
  html:not(.js) .dnav { display: block; }
  .docs--guide .dlead { font-size: 17px; }
  .docs--guide .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html:not(.js) .demo-tour-tabs, html:not(.js) .dtop__menu { display: none; }
@media (max-width: 640px) {
  .dtop__menu, .dsearch__input { min-height: 44px; }
  .dsearch__input, .status-picker select { font-size: 1rem; }
  .dcontents .rail a { min-height: 44px; display: flex; align-items: center; }
  .prose .payment-flow ol { grid-template-columns: 1fr; }
  .prose .payment-flow li { padding: var(--space-5) var(--space-5) var(--space-5) var(--space-14); gap: var(--space-2); }
  .payment-flow li + li { border-left: 0; border-top: 1px solid var(--border); }
  .flow-symbol { position: absolute; left: var(--space-5); top: var(--space-5); }
  .flow-number { display: none; }
  .flow-heading small { display: none; }
  .prose .records-model li { padding-left: var(--space-5); }
  .status-picker { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .status-explainer { padding: var(--space-5); }
  .dcollections a { font: var(--type-ui-s); min-height: 48px; }
  .docs--guide .cards { grid-template-columns: 1fr; }
  .demo-tour-tabs { padding: var(--space-2); }
  .demo-tour-tabs button { flex-direction: column; gap: var(--space-1); font: var(--type-ui-xs); min-height: 56px; padding: var(--space-2) var(--space-1); }
  .demo-stage { padding: var(--space-4); min-height: 386px; }
  .demo-request { padding: var(--space-4); }
  .demo-business .demo-status { padding: var(--space-1); }
  .demo-checkout { grid-template-columns: 1fr; }
  .demo-order { gap: var(--space-2); padding: var(--space-5); }
  .demo-order .demo-monogram { display: none; }
  .demo-order > strong { margin-top: 0; }
  .demo-checkout-form { gap: var(--space-3); padding: var(--space-5); }
  .demo-checkout-form .demo-field { margin-top: 0; }
  .demo-editor { grid-template-columns: 1fr; padding: var(--space-4); }
  .demo-editor-preview .demo-request { margin: auto; }
  .demo-pricing { grid-template-columns: 1fr; padding: var(--space-4); }
  .demo-plan { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: var(--space-5); }
  .demo-plan > small { grid-column: 1; margin: 0; min-height: 0; }
  .demo-plan .demo-amount { grid-column: 2; grid-row: 1 / span 2; }
  .demo-plan-unit { grid-column: 2; text-align: right; }
  .prose .demo-plan ul { grid-column: 1 / -1; margin: var(--space-3) 0; }
  .demo-plan .demo-button { grid-column: 1 / -1; }
  .demo-wallet, .demo-tracking { margin: var(--space-4); }
  .demo-wallet-hero { padding: var(--space-5); }
  .demo-wallet-hero .demo-amount { font: var(--type-amount-m); }
  .demo-payments { margin: var(--space-3); padding: var(--space-4); }
  .demo-table-head { display: none; }
  .demo-payment-row { grid-template-columns: 1fr auto; }
  .demo-payment-row .demo-status { grid-column: 1 / -1; }
  .demo-routing { flex-direction: column; padding: var(--space-6); }
  .demo-flow-arrow { transform: rotate(90deg); }
  .demo-routing > div { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo-tour-panel:not([hidden]) .demo-stage > * { animation: guide-step-in .24s var(--ease-out) both; }
  @keyframes guide-step-in { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}