/* Roundly benefit clips: three cropped phone screens that each play one
   short moment when they scroll into view, then rest on the result. Every
   class starts rb- so nothing here reaches the rest of the page, and nothing
   depends on the hero demo's files. Inside the phone everything is sized in
   em off one font size that follows the phone's width. */

.rb-clip {
  --rb-ctl: #58616B;
  display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 300px; margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* On a slate section: only the Play again link changes. */
.rb-clip.rb-on-dark { --rb-ctl: #D7DDE5; }
.rb-clip *, .rb-clip *::before, .rb-clip *::after { box-sizing: border-box; }

.rb-phone { width: 100%; border: 7px solid #11161D; border-radius: 28px; overflow: hidden; background: #11161D; box-shadow: 0 18px 44px rgba(20,26,34,.22); isolation: isolate; }
.rb-screen { container-type: inline-size; background: #F4F6F8; }
.rb-app {
  position: relative; overflow: hidden;
  font-size: 12px; font-size: 4.3cqw; line-height: 1.3; color: #2B3440; text-align: left;
  -webkit-user-select: none; user-select: none; font-variant-numeric: tabular-nums;
}
.rb-owed .rb-app { height: 28.2em; }
.rb-due .rb-app { height: 29em; }
.rb-day .rb-app { height: 28.4em; }
.rb-app svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the app's slate tab bar, slimmed ---- */
.rb-bar { display: flex; align-items: center; gap: .15em; padding: .45em .5em; background: #2B3440; white-space: nowrap; overflow: hidden; }
.rb-mark { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; margin-right: .3em; border-radius: .4em; background: #F4DC52; color: #2B3440; font-size: .95em; font-weight: 800; letter-spacing: -.05em; }
.rb-tab { flex: none; display: flex; align-items: center; gap: .3em; padding: .42em .45em; border-radius: .45em; color: #C9D1DB; font-size: .92em; }
.rb-tab-on { background: #F4DC52; color: #2B3440; font-weight: 600; }
.rb-badge { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: 1em; background: #F4DC52; color: #2B3440; font-weight: 700; }
.rb-tab-on .rb-badge { background: #2B3440; color: #F4DC52; }

/* ---- shared pieces ---- */
.rb-body { padding: .8em .75em 0; }
.rb-h { position: relative; margin-bottom: .55em; padding-bottom: .35em; font-size: 1.35em; font-weight: 750; letter-spacing: -.02em; }
.rb-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.1em; height: .18em; border-radius: .1em; background: #F4DC52; }
.rb-list { position: relative; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.rb-card { margin-bottom: .5em; padding: .65em .75em; border: 1px solid #D6DCE3; border-radius: .75em; background: #fff; transition: transform .45s cubic-bezier(.3,.7,.3,1), opacity .35s, background-color .3s, border-color .3s; }
.rb-top { display: flex; justify-content: space-between; gap: .5em; font-size: 1.08em; font-weight: 700; }
.rb-meta { margin: .1em 0 .45em; font-size: .92em; color: #58616B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-v { display: inline-block; }
.rb-up { color: #188038; }
.rb-press { transform: scale(.94); }
.rb-pop { animation: rb-pop .45s ease-out; }
.rb-alt { display: none; }

/* ---- 1. Owed ---- */
.rb-total { margin-bottom: .45em; font-size: 2em; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; color: #B06000; }
.rb-total small { margin-left: .3em; font-size: .5em; font-weight: 600; letter-spacing: 0; color: #58616B; }
.rb-chase { display: inline-flex; align-items: center; height: 2.5em; padding: 0 1em; border: 1px solid #1DA851; border-radius: .45em; background: #25D366; color: #fff; font-size: .95em; font-weight: 700; }
.rb-pay { display: flex; gap: .45em; margin-top: .4em; }
.rb-pair { display: flex; height: 2.6em; border: 1px solid #75808C; border-radius: .5em; overflow: hidden; }
.rb-pair span { display: flex; align-items: center; padding: 0 .9em; background: #fff; font-size: .95em; font-weight: 650; transition: background-color .25s, color .25s, transform .15s; }
.rb-pair span + span { border-left: 1px solid #75808C; }
.rb-pair .rb-pl { padding: 0 .7em; background: #F4F6F8; color: #58616B; font-size: .92em; font-weight: 400; }
.rb-more { display: flex; align-items: center; gap: .4em; padding: 0 .8em; border: 1px solid #75808C; border-radius: .5em; background: #fff; font-size: .95em; font-weight: 650; }
.rb-caret { width: 0; height: 0; border-top: .38em solid #2B3440; border-left: .28em solid transparent; border-right: .28em solid transparent; }
.rb-orow.rb-paid .rb-bank { background: #188038; color: #fff; }
.rb-orow.rb-gone { opacity: 0; transform: translateX(106%); }

/* ---- 2. Due now ---- */
/* Four rows do not fit, so the fourth peeks in under a soft fade. */
.rb-due .rb-card { margin-bottom: .45em; padding: .55em .75em; }
.rb-due .rb-meta { margin-bottom: .3em; }
.rb-due .rb-app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(rgba(244,246,248,0), #F4F6F8); pointer-events: none; }
.rb-line { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.rb-tag { padding: .28em .65em; border-radius: 2em; font-size: .92em; font-weight: 600; transition: background-color .3s, color .3s; }
.rb-late { background: #FFF0DF; color: #8A4300; }
.rb-now { background: #E8ECF1; color: #2B3440; }
.rb-book { display: inline-flex; align-items: center; height: 2.3em; padding: 0 .95em; border: 1px solid #F4DC52; border-radius: .55em; background: #F4DC52; font-size: .95em; font-weight: 650; white-space: nowrap; transition: background-color .25s, border-color .25s, transform .15s; }
.rb-booked .rb-tag { background: #E6F4EA; color: #137333; animation: rb-pop .45s ease-out; }
.rb-booked .rb-book { background: #fff; border-color: #75808C; }
.rb-booked .rb-orig { display: none; }
.rb-booked .rb-alt { display: inline; }

/* ---- 3. A worker's day ---- */
.rb-tally { margin-bottom: .6em; font-size: 1.02em; font-weight: 650; }
.rb-job { display: flex; align-items: center; gap: .55em; margin-bottom: .35em; padding: .5em .55em .5em .6em; border: 1px solid #D6DCE3; border-radius: .7em; background: #fff; transition: background-color .3s, border-color .3s; }
.rb-time { flex: none; padding: .1em .38em; border-radius: .35em; background: #2B3440; color: #fff; font-weight: 700; transition: background-color .3s; }
.rb-who { flex: 1; min-width: 0; }
.rb-l1 { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.rb-name { font-size: 1.05em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-st { display: block; font-size: .92em; color: #58616B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-state { position: relative; flex: none; width: 4.3em; height: 1.55em; }
.rb-state > span { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: .25em; height: 100%; padding: 0 .55em; border-radius: 2em; font-size: .92em; font-weight: 700; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.rb-state svg { width: 1em; height: 1em; stroke-width: 3.2; }
.rb-nx { background: #F4DC52; color: #2B3440; }
.rb-ok { background: #188038; color: #fff; }
.rb-next .rb-nx, .rb-done .rb-ok { opacity: 1; transform: none; }
.rb-done .rb-nx { opacity: 0; transform: scale(.6); }
.rb-job.rb-done { background: #F3FAF5; border-color: #9FD2AE; }
.rb-done .rb-time { background: #188038; }
.rb-dir { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1px solid #D4D4D4; border-radius: .55em; background: #F1F3F4; }
.rb-dir svg { width: 1.2em; height: 1.2em; }
.rb-mk { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 3.75em; border: .17em solid #F4DC52; border-radius: .7em; box-shadow: 0 0 0 .2em rgba(244,220,82,.3); pointer-events: none; transition: transform .45s cubic-bezier(.3,.7,.3,1); }

/* ---- the finger tap ---- */
.rb-tap { position: absolute; left: 0; top: 0; z-index: 9; width: 2.8em; height: 2.8em; margin: -1.4em 0 0 -1.4em; border-radius: 50%; background: rgba(43,52,64,.32); box-shadow: 0 0 0 .15em rgba(255,255,255,.95), 0 .2em .8em rgba(0,0,0,.3); opacity: 0; pointer-events: none; }
.rb-tap::after { content: ""; position: absolute; inset: -.15em; border-radius: 50%; border: .15em solid rgba(255,255,255,.9); opacity: 0; }
.rb-tapping { animation: rb-tap .6s ease-out; }
.rb-tapping::after { animation: rb-ring .6s ease-out; }
@keyframes rb-tap { 0% { opacity: 0; transform: scale(1.6); } 22% { opacity: 1; transform: scale(1); } 40% { transform: scale(.82); } 70% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1); } }
@keyframes rb-ring { 0%, 30% { opacity: 0; transform: scale(1); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes rb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- Play again, shown once a clip has played ---- */
.rb-again { -webkit-appearance: none; appearance: none; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--rb-ctl); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; visibility: hidden; -webkit-tap-highlight-color: transparent; }
.rb-clip[data-rb-state="done"] .rb-again { visibility: visible; }
.rb-again:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* No movement: instant changes while a clip resets, and always for anyone
   who has asked their phone for less motion. */
.rb-snap * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rb-clip *, .rb-clip *::before, .rb-clip *::after { transition: none !important; animation: none !important; }
  .rb-again { display: none; }
}