/* T-10880: the rails story. /for-business (the map of every side) and
   /how-it-works (one debt seen from each seat). Scoped under .rl so it never
   reshapes a shared component. Static by design: nothing loops. */

.rl {
  --rl-paper: var(--cream);
  --rl-paper-deep: var(--cream-tint);
  --rl-ink: var(--navy);
  --rl-ink-2: var(--navy-light);
  --rl-muted: var(--ink-muted);
  --rl-line: var(--border-cool);
  --rl-dark: var(--navy-ink);
  --rl-dark-2: var(--navy-deep);
  --rl-node: color-mix(in srgb, var(--navy-deep) 82%, var(--white));
  --rl-mint: var(--green-on-dark);
  --rl-on-dark: rgba(255,255,255,.82);
  --rl-on-dark-dim: rgba(255,255,255,.7);
  --rl-on-dark-line: rgba(255,255,255,.18);
  --rl-serif: var(--font-serif);
  --rl-sans: var(--font);
  color: var(--rl-ink);
  font-family: var(--rl-sans);
}
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }
.rl h1, .rl h2, .rl h3, .rl p, .rl ul, .rl ol { margin: 0; }
.rl ul, .rl ol { padding: 0; list-style: none; }
.rl a { color: inherit; }
.rl .rl-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .rl .rl-in { padding: 0 16px; } }
.rl .rl-sec { padding: 96px 0; }
@media (max-width: 700px) { .rl .rl-sec { padding: 64px 0; } }
.rl .rl-sec--deep { background: var(--rl-paper-deep); }
.rl .rl-kick { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--rl-muted); font-weight: 600; }
.rl .rl-h1 { font: 400 var(--fs-display) / 1.02 var(--rl-serif); letter-spacing: -.01em; margin-top: 14px; max-width: 900px; }
.rl .rl-h2 { font: 400 var(--fs-h2) / 1.06 var(--rl-serif); letter-spacing: -.01em; margin-top: 12px; max-width: 820px; }
.rl .rl-h1 em, .rl .rl-h2 em { font-style: italic; color: var(--rl-ink-2); }
.rl .rl-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--rl-ink-2); max-width: 640px; margin-top: 20px; }
.rl .rl-fine { font-size: var(--fs-md); color: var(--rl-muted); margin-top: 14px; max-width: 640px; }
.rl .rl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rl .rl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: var(--fs-md); text-decoration: none; border: 1px solid var(--rl-ink); color: var(--rl-ink); background: transparent; }
.rl .rl-btn--main { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.rl .rl-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.rl .rl-tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; border: 1px dashed var(--rl-muted); color: var(--rl-muted); }
.rl .rl-sample { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--rl-paper-deep); color: var(--rl-muted); }

/* hero and the map of every side */
.rl .rl-hero { padding: 48px 0 24px; }
.rl .rl-map { margin-top: 56px; background: var(--rl-dark); border-radius: 28px; padding: 28px 20px 22px; color: var(--white); }
.rl .rl-map svg { display: block; width: 100%; height: auto; }
.rl .rl-map svg.rl-map-sm { display: none; }
@media (max-width: 700px) { .rl .rl-map svg.rl-map-lg { display: none; } .rl .rl-map svg.rl-map-sm { display: block; } }
.rl .rl-map .m-lbl { font: 600 var(--fs-2xs) var(--rl-sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--rl-on-dark-dim); }
.rl .rl-map .m-nt { font: 600 var(--fs-md) var(--rl-sans); fill: var(--white); }
.rl .rl-map .m-sm { font-size: var(--fs-xs); }
.rl .rl-map .m-ns { font: 400 var(--fs-xs) var(--rl-sans); fill: var(--rl-on-dark-dim); }
.rl .rl-map .m-node { fill: var(--rl-node); stroke: var(--rl-on-dark-line); }
.rl .rl-map .m-node-soon { fill: none; stroke: rgba(255,255,255,.4); stroke-dasharray: 5 6; }
.rl .rl-map .m-rail { fill: none; stroke: var(--rl-mint); stroke-width: 2.5; }
.rl .rl-map .m-rail-soon { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; stroke-dasharray: 5 7; }
.rl .rl-map .m-hub { fill: var(--rl-dark-2); stroke: var(--rl-mint); stroke-width: 1.5; }
.rl .rl-map .m-halo { fill: var(--green); opacity: .16; }
.rl .rl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 10px; font-size: var(--fs-sm); color: var(--rl-on-dark); }
.rl .rl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rl .rl-legend i { display: inline-block; width: 22px; border-top: 2.5px solid var(--rl-mint); }
.rl .rl-legend i.soon { border-top: 2px dashed rgba(255,255,255,.5); }

/* today vs on the rails */
.rl .rl-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
@media (max-width: 800px) { .rl .rl-ba { grid-template-columns: 1fr; } }
.rl .rl-ba-card { border-radius: 22px; padding: 26px; border: 1px solid var(--rl-line); background: var(--white); }
.rl .rl-ba-card.today { background: var(--rl-paper-deep); }
.rl .rl-ba-card h3 { font-size: var(--fs-lead); margin: 10px 0 4px; }
.rl .rl-ba-card p { color: var(--rl-muted); font-size: var(--fs-md); margin-bottom: 14px; }
.rl .rl-ba-card svg { display: block; width: 100%; height: auto; }
.rl .rl-ba-card .bx { fill: var(--white); stroke: var(--rl-line); }
.rl .rl-ba-card .bt { font: 500 var(--fs-xs) var(--rl-sans); fill: var(--rl-ink); }
.rl .rl-ba-card .bm { font: 400 var(--fs-2xs) var(--rl-sans); fill: var(--rl-muted); }
.rl .rl-ba-card .brk { stroke: var(--rl-muted); stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; }
.rl .rl-ba-card .thin { stroke: var(--rl-line); stroke-width: 1.2; fill: none; }
.rl .rl-ba-card .ok { stroke: var(--green-deep); stroke-width: 2; fill: none; }
.rl .rl-ba-card .ok-soon { stroke: var(--green-deep); stroke-width: 2; fill: none; stroke-dasharray: 4 5; opacity: .5; }
.rl .rl-ba-card .hubx { fill: var(--green-light); stroke: var(--green-deep); stroke-width: 1.5; }
.rl .rl-pill { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--rl-line); color: var(--rl-ink-2); }
.rl .rl-pill.on { background: var(--green-light); color: var(--green-deep); }

/* every side, each in its own room */
.rl .rl-sides { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .rl .rl-sides { grid-template-columns: 1fr; } }
.rl .rl-side { display: flex; flex-direction: column; border-radius: 22px; padding: 26px; border: 1px solid var(--rl-line); background: var(--white); }
.rl .rl-side.center { background: var(--rl-ink); color: var(--white); border-color: var(--rl-ink); }
.rl .rl-side h3 { font: 400 var(--fs-amount-hero) / 1.1 var(--rl-serif); margin: 8px 0 14px; }
.rl .rl-side .rl-kick { color: var(--rl-muted); }
.rl .rl-side.center .rl-kick { color: var(--rl-on-dark-dim); }
.rl .rl-party { padding: 14px 0; border-top: 1px solid var(--rl-line); }
.rl .rl-side.center .rl-party { border-color: var(--rl-on-dark-line); }
.rl .rl-party b { display: block; font-size: var(--fs-body); }
.rl .rl-party span { display: block; font-size: var(--fs-md); color: var(--rl-muted); margin-top: 2px; }
.rl .rl-side.center .rl-party span { color: var(--rl-on-dark); }
.rl .rl-side .rl-more { margin-top: auto; padding-top: 14px; font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.rl .rl-side .rl-more + .rl-more { padding-top: 6px; margin-top: 0; }
.rl .rl-side.center .rl-more { color: var(--rl-mint); }

/* what moves on the rails */
.rl .rl-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 44px; background: var(--rl-line); border: 1px solid var(--rl-line); border-radius: 22px; overflow: hidden; }
@media (max-width: 860px) { .rl .rl-moves { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rl .rl-moves { grid-template-columns: 1fr; } }
.rl .rl-moves li { background: var(--rl-paper); padding: 26px; }
.rl .rl-moves .n { font: 400 var(--fs-h3) var(--rl-serif); color: var(--green-deep); }
.rl .rl-moves b { display: block; margin: 6px 0 4px; font-size: var(--fs-body); }
.rl .rl-moves span { display: block; font-size: var(--fs-md); color: var(--rl-muted); }

/* rails, not a driver */
.rl .rl-never { background: var(--rl-dark); color: var(--white); }
.rl .rl-never .rl-kick { color: var(--rl-on-dark-dim); }
.rl .rl-never .rl-h2 em { color: var(--rl-mint); }
.rl .rl-never .rl-lead { color: var(--rl-on-dark); }
.rl .rl-never-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .rl .rl-never-grid { grid-template-columns: 1fr; gap: 28px; } }
.rl .rl-never li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rl-on-dark-line); font-size: var(--fs-body); }
.rl .rl-never li:last-child { border-bottom: 1px solid var(--rl-on-dark-line); }
.rl .rl-never li b { min-width: 9.5em; font-weight: 500; color: var(--rl-on-dark-dim); }
.rl .rl-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; font-size: var(--fs-md); color: var(--rl-on-dark); }
.rl .rl-flow .rl-chipx { border: 1px solid var(--rl-on-dark-line); border-radius: 999px; padding: 8px 14px; color: var(--white); }
.rl .rl-flow .rl-to { color: var(--rl-mint); }
.rl .rl-flow .rl-flownote { flex-basis: 100%; font-size: var(--fs-base); }

/* how the network grows */
.rl .rl-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; counter-reset: rlstep; }
@media (max-width: 860px) { .rl .rl-loop { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rl .rl-loop { grid-template-columns: 1fr; } }
.rl .rl-loop li { position: relative; padding: 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--rl-line); }
.rl .rl-loop li::before { counter-increment: rlstep; content: counter(rlstep); position: absolute; right: 18px; top: 8px; font: 400 var(--fs-amount-hero) var(--rl-serif); color: var(--rl-line); }
.rl .rl-loop b { display: block; font-size: var(--fs-body); margin-bottom: 6px; padding-right: 30px; }
.rl .rl-loop span { display: block; font-size: var(--fs-md); color: var(--rl-muted); }

/* how it works: the seat switcher */
.rl .rl-seat-hero { padding: 56px 0 0; text-align: center; }
.rl .rl-seat-hero .rl-h1 { margin-left: auto; margin-right: auto; max-width: 860px; }
.rl .rl-seat-hero .rl-lead { margin-left: auto; margin-right: auto; }
.rl .rl-switch-bar { position: static; top: 74px; z-index: 4; padding: 22px 0 16px; background: var(--rl-paper); border-bottom: 1px solid transparent; }
/* With no script the seats simply stack: no pinned bar, no label without controls. */
.rl.rl-tabs-on .rl-switch-bar { position: sticky; }
.rl:not(.rl-tabs-on) .rl-switch-label { display: none; }
.rl .rl-switch-label { text-align: center; font-size: var(--fs-sm); color: var(--rl-muted); margin-bottom: 10px; }
.rl .rl-switch { position: relative; display: flex; gap: 4px; max-width: 860px; margin: 0 auto; padding: 5px; overflow-x: auto; scrollbar-width: none; background: var(--white); border: 1px solid var(--rl-line); border-radius: 999px; }
.rl .rl-switch::-webkit-scrollbar { display: none; }
.rl .rl-switch[hidden] { display: none; }
.rl .rl-switch .rl-pillbg { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--rl-ink); transition: transform .35s cubic-bezier(.3,.7,.2,1), width .35s cubic-bezier(.3,.7,.2,1); }
.rl .rl-switch button { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; flex: 1 0 auto; border: 0; background: none; padding: 11px 14px; border-radius: 999px; font: 500 var(--fs-md) var(--rl-sans); color: var(--rl-muted); cursor: pointer; white-space: nowrap; transition: color .25s; }
/* The selected tab carries its own fill once the pill arrives, so it reads at rest
   with no moving part; leaving a tab drops the fill at once. */
.rl .rl-switch button[aria-selected="true"] { color: var(--white); background-color: var(--rl-ink); transition: color .25s, background-color 0s .35s; }
.rl .rl-switch button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.rl .rl-switch button small { font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; }
.rl .rl-same { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-base); color: var(--rl-muted); text-align: center; }
.rl .rl-same b { color: var(--rl-ink); }
.rl .rl-same i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); }
.rl .rl-seat { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 36px 0 56px; scroll-margin-top: 140px; }
@media (max-width: 880px) { .rl .rl-seat { grid-template-columns: 1fr; gap: 28px; } }
.rl .rl-seats.is-tabs .rl-seat[hidden] { display: none; }
.rl .rl-seats:not(.is-tabs) .rl-seat + .rl-seat { border-top: 1px solid var(--rl-line); }
.rl .rl-who { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; }
.rl .rl-seat .rl-h2 { margin: 10px 0 14px; }
.rl .rl-seat .rl-intro { font-size: var(--fs-body); color: var(--rl-ink-2); margin-bottom: 22px; }
.rl .rl-steps { counter-reset: rlseat; }
.rl .rl-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rl-line); }
.rl .rl-steps li::before { counter-increment: rlseat; content: counter(rlseat); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 1px solid var(--rl-line); font-size: var(--fs-sm); font-weight: 600; color: var(--rl-ink-2); }
.rl .rl-steps b { display: block; }
.rl .rl-steps span { display: block; font-size: var(--fs-md); color: var(--rl-muted); }
.rl .rl-not { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--rl-paper-deep); font-size: var(--fs-md); color: var(--rl-ink-2); }
.rl .rl-not b { color: var(--rl-ink); }
.rl .rl-join { margin-top: 18px; padding: 16px; border-radius: 14px; border: 1px solid var(--rl-line); background: var(--white); font-size: var(--fs-md); color: var(--rl-ink-2); }
.rl .rl-join b { color: var(--rl-ink); }
.rl .rl-join .rl-join-fine { margin-top: 6px; font-size: var(--fs-base); color: var(--rl-muted); }
.rl .rl-join .rl-more { margin-top: 8px; }
.rl .rl-seat .rl-more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: var(--fs-md); }
.rl .rl-screen { background: var(--rl-dark); border-radius: 26px; padding: 20px; color: var(--white); box-shadow: 0 24px 60px rgba(11,42,31,.18); }
.rl .rl-screen .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: var(--fs-xs); color: var(--rl-on-dark-dim); }
.rl .rl-screen .bar i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.rl .rl-screen .bar span { margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.08); }
.rl .rl-panel { background: var(--rl-dark-2); border: 1px solid var(--rl-on-dark-line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.rl .rl-panel:last-child { margin-bottom: 0; }
.rl .rl-panel.soon { border-style: dashed; }
.rl .rl-panel .k { font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--rl-on-dark-dim); }
.rl .rl-panel .big { font: 400 var(--fs-amount-hero) / 1.1 var(--rl-serif); }
.rl .rl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rl-on-dark-line); font-size: var(--fs-base); }
.rl .rl-panel .k + .rl-row, .rl .rl-panel .big + .rl-row { margin-top: 6px; }
.rl .rl-row .m { font-size: var(--fs-sm); color: var(--rl-on-dark-dim); }
.rl .rl-row .t { flex: none; width: 58px; font-size: var(--fs-xs); color: var(--rl-on-dark-dim); }
.rl .rl-row.tl { justify-content: flex-start; }
.rl .rl-chip { white-space: nowrap; font-size: var(--fs-2xs); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rl-on-dark-line); color: var(--rl-on-dark); }
.rl .rl-chip.on { border-color: var(--rl-mint); color: var(--white); }
.rl .rl-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--rl-paper); color: var(--rl-ink); margin-bottom: 12px; }
.rl .rl-card .mono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rl-ink); color: var(--white); font-weight: 700; font-size: var(--fs-sm); }
.rl .rl-card .nm { flex: 1; }
.rl .rl-card .nm span { display: block; font-size: var(--fs-xs); color: var(--rl-muted); }
.rl .rl-pay { text-align: right; }
.rl .rl-pay span { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--green-deep); color: var(--white); font-size: var(--fs-base); font-weight: 600; }
.rl .rl-cap { margin-top: 10px; text-align: right; font-size: var(--fs-xs); color: var(--rl-on-dark-dim); }
.rl .rl-seat-nav { display: flex; justify-content: center; gap: 10px; padding-bottom: 24px; }
.rl .rl-seat-nav[hidden] { display: none; }
.rl .rl-seat-nav button { -webkit-appearance: none; appearance: none; border: 1px solid var(--rl-line); background: var(--white); border-radius: 999px; padding: 9px 16px; font: 500 var(--fs-base) var(--rl-sans); color: var(--rl-ink-2); cursor: pointer; }
.rl .rl-seat-nav button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* every seat, one history */
.rl .rl-lanes { display: grid; gap: 10px; margin-top: 40px; }
.rl .rl-lane { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; }
@media (max-width: 700px) { .rl .rl-lane { grid-template-columns: 1fr; gap: 6px; } }
.rl .rl-lane > span { font-size: var(--fs-md); color: var(--rl-on-dark); }
.rl .rl-track { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--rl-on-dark-line); }
.rl .rl-ev { white-space: nowrap; font-size: var(--fs-sm); padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.09); color: var(--white); }
.rl .rl-ev.on { color: var(--white); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--rl-mint); }
.rl .rl-ev.soon { background: none; border: 1px dashed rgba(255,255,255,.4); color: var(--rl-on-dark-dim); }
.rl .rl-note { margin-top: 22px; max-width: 720px; font-size: var(--fs-md); color: var(--rl-on-dark); }
.rl .rl-end { text-align: center; }
.rl .rl-end .rl-h2, .rl .rl-end .rl-lead { margin-left: auto; margin-right: auto; }
.rl .rl-end .rl-actions { justify-content: center; }

/* a tag inside a bold title stays inline, whatever list it sits in */
.rl .rl-row span.rl-tag { margin-left: 6px; border-color: var(--rl-on-dark-dim); color: var(--rl-on-dark); }
.rl b > span.rl-tag { display: inline-block; margin: 0 0 0 6px; font-size: var(--fs-2xs); color: var(--rl-muted); }

@media (prefers-reduced-motion: reduce) { .rl * { transition: none !important; } }
html[data-calm="1"] .rl * { transition: none !important; }