/* Roundly moving phone demo. Every class starts rd- so nothing here can
   reach the rest of the page. Inside the phone everything is sized in em off
   one font size that follows the phone's width, so the picture keeps its
   proportions from a 360px phone up to a desktop. */

.rd-demo {
  --rd-cap: #fff; --rd-dot: rgba(255,255,255,.34); --rd-dot-on: #F4DC52; --rd-ctl: rgba(255,255,255,.78);
  display: grid; justify-items: center; gap: 8px; justify-self: center;
  width: 100%; max-width: 340px; margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* For a white or pale section of the page. */
.rd-demo.rd-on-light { --rd-cap: #2B3440; --rd-dot: #C3CAD3; --rd-dot-on: #2B3440; --rd-ctl: #58616B; }
.rd-demo *, .rd-demo *::before, .rd-demo *::after { box-sizing: border-box; }

.rd-phone { width: min(300px, 78vw); border-radius: 34px; overflow: hidden; border: 8px solid #11161D; background: #11161D; box-shadow: 0 30px 70px rgba(0,0,0,.45); isolation: isolate; }
.rd-screen { position: relative; container-type: inline-size; aspect-ratio: 780 / 1500; overflow: hidden; background: #F4F6F8; }
@supports not (aspect-ratio: 1) { .rd-screen { height: 546px; } }
.rd-app {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-size: 12px; font-size: 4.25cqw; line-height: 1.3; color: #2B3440; text-align: left;
  -webkit-user-select: none; user-select: none; font-variant-numeric: tabular-nums;
}
.rd-app svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-app b { font-weight: inherit; }

/* ---- the app's slate header with the lemon tab ---- */
.rd-bar { flex: none; background: #2B3440; padding: .6em .7em .45em; }
.rd-bar-top { display: flex; align-items: center; gap: .5em; height: 2.6em; }
.rd-brand { display: flex; align-items: center; gap: .5em; margin-right: auto; color: #fff; font-weight: 700; font-size: .95em; }
.rd-mark { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .42em; background: #F4DC52; color: #2B3440; font-weight: 800; font-size: 1.05em; letter-spacing: -.05em; }
.rd-help { display: flex; align-items: center; gap: .35em; padding: .38em .85em .38em .4em; border-radius: 2em; background: #fff; font-weight: 700; font-size: .95em; }
.rd-help i { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #2B3440; color: #fff; font-style: normal; font-size: .8em; }
.rd-av { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #232B35; border: 1px solid #4A5566; color: #fff; font-weight: 700; }
.rd-nav { display: flex; gap: .15em; margin: .45em -.7em 0 -.25em; white-space: nowrap; overflow: hidden; }
.rd-tab { flex: none; display: flex; align-items: center; gap: .25em; padding: .6em .3em; border-radius: .45em; color: #C9D1DB; font-size: .86em; transition: background-color .3s, color .3s; }
.rd-tab-on { background: #F4DC52; color: #2B3440; font-weight: 600; }
.rd-badge { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: 1em; background: #F4DC52; color: #2B3440; font-size: .85em; font-weight: 700; }
.rd-tab-on .rd-badge { background: #2B3440; color: #F4DC52; }

/* ---- the three screens, stacked, one showing at a time ---- */
.rd-panes { position: relative; flex: 1; overflow: hidden; }
.rd-pane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1em .75em 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.rd-pane > * { flex: none; }
.rd-pane.rd-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.rd-h { position: relative; padding-bottom: .4em; margin-bottom: .6em; font-size: 1.4em; font-weight: 750; letter-spacing: -.02em; }
.rd-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.1em; height: .18em; border-radius: .1em; background: #F4DC52; }
.rd-clip { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rd-list { transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.rd-card { background: #fff; border: 1px solid #D6DCE3; border-radius: .75em; padding: .8em; margin-bottom: .6em; transition: transform .45s cubic-bezier(.3,.7,.3,1), opacity .35s, border-color .3s, background-color .3s; }
.rd-gone { opacity: 0; }
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border-radius: .6em; font-weight: 650; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, transform .15s; }
.rd-press { transform: scale(.94); }
.rd-v { display: inline-block; }
.rd-top { display: flex; justify-content: space-between; gap: .5em; font-size: 1.1em; font-weight: 700; }
.rd-meta { margin: .2em 0 .6em; font-size: .93em; color: #58616B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-chips { display: flex; gap: .4em; margin: 0 -.75em .8em 0; white-space: nowrap; overflow: hidden; }
.rd-chip { flex: none; padding: .5em .85em; border: 1px solid #D6DCE3; border-radius: 2em; background: #fff; font-size: .92em; }
.rd-chip-on { background: #2B3440; border-color: #2B3440; color: #fff; font-weight: 600; }

/* ---- scene 1: Today ---- */
.rd-days { display: flex; gap: .36em; margin: 0 -.75em .75em 0; overflow: hidden; }
.rd-day { flex: none; display: grid; justify-items: center; width: 2.7em; padding: .28em 0 .22em; border: 1px solid #D6DCE3; border-radius: .45em; background: #fff; line-height: 1.15; }
.rd-day small { font-size: .8em; font-weight: 600; color: #58616B; }
.rd-day b { font-size: 1.08em; font-weight: 650; }
.rd-day-on { background: #F4DC52; border-color: #2B3440; box-shadow: inset 0 0 0 1px #2B3440; }
.rd-day-on small { color: #2B3440; }
.rd-day-on b { text-decoration: underline; text-underline-offset: .15em; }
.rd-tally { margin-bottom: .65em; font-size: 1.05em; font-weight: 650; }
.rd-up { color: #188038; }
.rd-job-head { display: flex; align-items: center; gap: .45em; margin-bottom: .2em; }
.rd-time { padding: .08em .38em; border-radius: .35em; background: #2B3440; color: #fff; font-weight: 700; }
.rd-name { font-size: 1.12em; font-weight: 700; letter-spacing: -.01em; }
.rd-tick { display: grid; place-items: center; width: 1.7em; height: 1.7em; margin-left: auto; border-radius: 50%; background: #188038; color: #fff; opacity: 0; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.rd-tick svg { width: 1.05em; height: 1.05em; stroke-width: 3.2; }
.rd-addr { display: flex; align-items: center; gap: .4em; margin: 0 0 .55em; padding: .3em 0 .2em; font-size: 1.05em; font-weight: 600; }
.rd-addr svg { width: 1.1em; height: 1.1em; }
.rd-addr u { text-decoration: underline; text-decoration-color: #F4DC52; text-decoration-thickness: .22em; text-underline-offset: .32em; text-decoration-skip-ink: none; }
.rd-pills { display: flex; gap: .35em; margin-bottom: .7em; }
.rd-pills span { padding: .22em .5em; border-radius: .35em; background: #EEF1F4; font-size: .92em; }
.rd-pills .rd-ok { background: #E6F4EA; color: #137333; }
.rd-acts { display: flex; gap: .5em; }
.rd-start { flex: 1; height: 3em; background: #F4DC52; font-size: 1.05em; }
.rd-play { width: 0; height: 0; border-left: .62em solid #2B3440; border-top: .4em solid transparent; border-bottom: .4em solid transparent; }
.rd-done { width: 5em; height: 3em; background: #fff; border: 1px solid #75808C; font-size: 1.05em; }
.rd-tools { display: flex; gap: .4em; margin-top: .45em; }
.rd-tools span { flex: 1 1 0; display: grid; justify-items: center; gap: .3em; padding: .6em .1em .55em; border: 1px solid #D4D4D4; border-radius: .6em; background: #F1F3F4; font-size: .83em; font-weight: 650; white-space: nowrap; }
.rd-tools svg { width: 1.8em; height: 1.8em; stroke-width: 1.7; }
.rd-job.rd-is-done { border-color: #9FD2AE; background: #F3FAF5; }
.rd-is-done .rd-tick { opacity: 1; transform: none; }
.rd-is-done .rd-done { background: #188038; border-color: #188038; color: #fff; }
.rd-job.rd-gone { transform: scale(.97); }

/* ---- scene 2: Owed, and WhatsApp over it ---- */
.rd-total { margin-bottom: .3em; font-size: 2.05em; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; color: #B06000; }
.rd-chase { height: 2.7em; padding: 0 1.1em; background: #25D366; border: 1px solid #1DA851; border-radius: .45em; color: #fff; font-weight: 700; font-size: .95em; }
.rd-pay { display: flex; gap: .5em; margin-top: .45em; }
.rd-pair { display: flex; height: 2.8em; border: 1px solid #75808C; border-radius: .5em; overflow: hidden; }
.rd-pair span { display: flex; align-items: center; padding: 0 .95em; background: #fff; font-size: .95em; font-weight: 650; transition: background-color .25s, color .25s; }
.rd-pair span + span { border-left: 1px solid #75808C; }
.rd-pair .rd-pl { padding: 0 .75em; background: #F4F6F8; color: #58616B; font-size: .88em; font-weight: 400; }
.rd-more { display: flex; align-items: center; gap: .3em; padding: 0 .8em; border: 1px solid #75808C; border-radius: .5em; background: #fff; font-size: .95em; font-weight: 650; }
.rd-more i { font-style: normal; font-size: .65em; }
.rd-orow.rd-paid .rd-bank { background: #188038; color: #fff; }
.rd-orow.rd-gone { transform: translateX(106%); }

.rd-wa { position: absolute; inset: 0; z-index: 3; visibility: hidden; transition: visibility 0s .45s; }
.rd-wa::before { content: ""; position: absolute; inset: 0; background: rgba(17,22,29,.5); opacity: 0; transition: opacity .35s; }
.rd-wa-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em 1em 0 0; background: #EFEAE2; transform: translateY(102%); transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.rd-wa.rd-wa-on { visibility: visible; transition: none; }
.rd-wa-on::before { opacity: 1; }
.rd-wa-on .rd-wa-sheet { transform: none; }
.rd-wa-top { display: flex; align-items: center; gap: .55em; padding: .7em .8em; background: #008069; color: #fff; font-weight: 650; }
.rd-wa-top i { font-style: normal; font-size: 1.5em; line-height: 1; margin-top: -.1em; }
.rd-wa-av { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #DFE5E7; color: #54656F; font-size: .85em; font-weight: 700; }
.rd-wa-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: .8em .7em .3em; }
.rd-wa-day { align-self: center; margin-bottom: auto; padding: .25em .7em; border-radius: .5em; background: #fff; color: #54656F; font-size: .8em; }
.rd-wa-msg { align-self: flex-end; max-width: 88%; padding: .5em .65em .35em; border-radius: .7em .15em .7em .7em; background: #D9FDD3; line-height: 1.38; box-shadow: 0 1px .5px rgba(11,20,26,.13); opacity: 0; transform: translateY(1.5em); transition: opacity .3s, transform .4s cubic-bezier(.3,.7,.3,1); }
.rd-wa-meta { display: block; margin-top: .15em; text-align: right; font-size: .8em; color: #667781; }
.rd-wa-meta b { color: #53BDEB; font-weight: 700; letter-spacing: -.25em; margin-left: .2em; }
.rd-wa-bar { display: flex; align-items: flex-end; gap: .45em; padding: .45em .55em .8em; }
.rd-wa-in { flex: 1; min-height: 2.6em; padding: .6em .8em; border-radius: 1.3em; background: #fff; line-height: 1.38; }
.rd-wa-ph { display: none; color: #8696A0; }
.rd-wa-send { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #00A884; color: #fff; transition: transform .15s; }
.rd-wa-send svg { width: 1.2em; height: 1.2em; fill: currentColor; stroke: none; margin-left: .15em; }
.rd-wa-sent .rd-wa-msg { opacity: 1; transform: none; }
.rd-wa-sent .rd-wa-draft { display: none; }
.rd-wa-sent .rd-wa-ph { display: inline; }

/* ---- scene 3: who's due ---- */
.rd-due .rd-meta { margin-bottom: .45em; }
.rd-due-line { position: relative; height: 2.7em; }
.rd-due-a, .rd-due-b { position: absolute; inset: 0; display: flex; align-items: center; gap: .4em; transition: opacity .25s, transform .25s; }
.rd-due-a { justify-content: space-between; }
.rd-due-b { opacity: 0; transform: translateY(.5em); }
.rd-due-b small { margin-right: .15em; font-size: .92em; color: #58616B; }
.rd-tag { padding: .32em .7em; border-radius: 2em; font-size: .92em; font-weight: 600; transition: background-color .3s, color .3s; }
.rd-late { background: #FFF0DF; color: #8A4300; }
.rd-now { background: #E8ECF1; color: #2B3440; }
.rd-book { height: 2.55em; padding: 0 1em; background: #F4DC52; border: 1px solid #F4DC52; font-size: .95em; }
.rd-pick { flex: 1; display: grid; place-items: center; height: 2.4em; border: 1px solid #75808C; border-radius: .45em; background: #fff; font-size: .92em; font-weight: 650; transition: background-color .2s, color .2s, transform .15s; }
.rd-pick.rd-sel { background: #2B3440; border-color: #2B3440; color: #fff; }
.rd-alt { display: none; }
.rd-picking .rd-due-a { opacity: 0; transform: translateY(-.5em); }
.rd-picking .rd-due-b { opacity: 1; transform: none; }
.rd-booked .rd-tag { background: #E6F4EA; color: #137333; animation: rd-pop .45s ease-out; }
.rd-booked .rd-book { background: #fff; border-color: #75808C; }
.rd-booked .rd-alt { display: inline; }
.rd-booked .rd-orig { display: none; }

/* ---- the finger tap ---- */
.rd-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; }
.rd-tap::after { content: ""; position: absolute; inset: -.15em; border-radius: 50%; border: .15em solid rgba(255,255,255,.9); opacity: 0; }
.rd-tapping { animation: rd-tap .6s ease-out; }
.rd-tapping::after { animation: rd-ring .6s ease-out; }
.rd-pop { animation: rd-pop .45s ease-out; }
@keyframes rd-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 rd-ring { 0%, 30% { opacity: 0; transform: scale(1); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes rd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- caption, dots and pause under the phone ---- */
.rd-caption { max-width: 300px; min-height: 2.8em; margin: 8px 0 0; color: var(--rd-cap); font-size: 16.5px; text-wrap: balance; font-weight: 600; line-height: 1.4; text-align: center; }
.rd-cap-in { animation: rd-fade .4s ease-out; }
@keyframes rd-fade { from { opacity: 0; transform: translateY(4px); } }
.rd-controls { display: flex; align-items: center; justify-content: center; }
.rd-dot, .rd-pause { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--rd-ctl); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rd-dot::before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--rd-dot); transition: width .3s, background-color .3s; }
.rd-dot[aria-current="true"]::before { width: 26px; background: var(--rd-dot-on); }
.rd-dot:focus-visible, .rd-pause:focus-visible { outline: 2px solid var(--rd-dot-on); outline-offset: -3px; }
.rd-pause { margin-left: 4px; }
.rd-pause svg { width: 15px; height: 15px; fill: currentColor; }
.rd-pause .rd-i-play, .rd-paused .rd-pause .rd-i-pause { display: none; }
.rd-paused .rd-pause .rd-i-play { display: block; }
.rd-still .rd-pause { display: none; }

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