/* "How it works" on Home: car rental and car dealer, one switch. Built from comp-how-both.html (approved 4 Oct 2026). */

/* Comp only: the old pain, then the staff phone, then the office screen. A = key board, B = carbon copies.
   Every class starts with x- so nothing clashes with site.css. */
.x-sec { padding: 64px 0 72px; background: var(--bg-2); border-bottom: 1px solid var(--line); min-height: 1180px; box-sizing: border-box; }
.x-sec h2 { font-size: 42px; line-height: 1.08; margin: 16px 0 0; }
.x-top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.x-top .lead { font-size: 17px; margin: 0; }
.x-hand { font-family: 'Caveat', cursive; font-weight: 500; }
.x-lab { font: 500 12.5px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.x-lab b { color: var(--accent); font-weight: 500; }
.x-lab.bad b { color: #FF9C8A; }
.x-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 2px var(--node-ring); flex: none; display: inline-block; }

/* ---------- Today: the old way ---------- */
.x-old { position: relative; display: grid; grid-template-columns: repeat(4, 1fr) 170px; gap: 26px; align-items: stretch; padding: 22px 24px 20px; border: 1px dashed var(--line-2); border-radius: 14px; margin-bottom: 30px; }
.x-step { position: relative; display: flex; flex-direction: column; gap: 10px; }
.x-step .x-obj { height: 150px; position: relative; display: grid; place-items: center; }
.x-step .x-cap { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.x-step .x-cap small { display: block; font: 400 12px var(--mono); color: var(--muted); margin-top: 3px; }
.x-step + .x-step::before { content: '→'; position: absolute; left: -22px; top: 62px; color: var(--muted); font-size: 18px; }
.x-strike { position: absolute; inset: 18px 14px 62px; pointer-events: none; opacity: 0; }
.x-strike path { vector-effect: non-scaling-stroke; stroke: #E2584A; stroke-width: 3; fill: none; stroke-linecap: round; }
.x-gone { position: absolute; right: 8px; top: 0; font: 700 24px/1 'Caveat', cursive; color: #E2584A; transform: rotate(-6deg); opacity: 0; }
.done .x-strike, .done .x-gone { opacity: 1; transition: opacity .3s ease calc(.9s + var(--k) * .15s); }
.done .x-step .x-obj, .done .x-step .x-cap { opacity: .4; transition: opacity .3s ease calc(.9s + var(--k) * .15s); }
.x-sum { display: flex; flex-direction: column; justify-content: center; gap: 6px; border-left: 1px solid var(--line); padding-left: 22px; }
.x-sum .s1, .x-sum .s2 { font: 700 30px/1.05 'Caveat', cursive; }
.x-sum .s1 { color: #FF9C8A; } .x-sum .s2 { color: var(--brand); display: none; }
.x-sum small { font: 400 12px var(--mono); color: var(--muted); }
.done .x-sum .s1 { display: none; } .done .x-sum .s2 { display: block; animation: x-fade .4s ease 1.6s both; }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
/* the four old objects */
.x-paper { width: 170px; background: #F4F0E6; color: #2A2823; padding: 12px 14px; border-radius: 2px; transform: rotate(-4deg); box-shadow: 0 10px 18px -12px rgba(0,0,0,.7); }
.x-paper b { font: 700 10.5px var(--rf-font); letter-spacing: .06em; display: block; border-bottom: 1px solid #2A2823; padding-bottom: 3px; margin-bottom: 4px; }
.x-paper .x-hand { font-size: 19px; line-height: 1.05; color: #22388A; display: block; }
.x-chat { width: 200px; background: #0F1F1A; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
.x-bub { font-size: 12px; line-height: 1.3; padding: 6px 9px; border-radius: 9px; max-width: 86%; color: #EAF2EE; }
.x-bub small { display: block; text-align: right; font: 400 9.5px var(--mono); color: rgba(234,242,238,.6); margin-top: 2px; }
.x-bub.me { background: #1F5A47; justify-self: end; border-bottom-right-radius: 3px; }
.x-bub.them { background: #26332F; justify-self: start; border-bottom-left-radius: 3px; }
.x-bub.pic { padding: 4px; } .x-bub.pic i { display: block; width: 88px; height: 34px; border-radius: 6px; background: repeating-linear-gradient(-8deg, #E9E3D3 0 6px, #D9D2BF 6px 7px); }
.x-calls { width: 190px; background: #0F1F1A; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.x-calls div { display: flex; justify-content: space-between; font-size: 12.5px; color: #FF9C8A; }
.x-calls div small { font: 400 10.5px var(--mono); color: var(--muted); }
.x-calls div span::before { content: '↙ '; }
.x-sheet { width: 210px; border: 1px solid #B9C3BE; background: #FBFCFB; color: #24302B; font: 400 11px var(--mono); }
.x-sheet div { display: grid; grid-template-columns: 22px 1fr 1fr 1fr; }
.x-sheet span { border-right: 1px solid #D5DDD9; border-bottom: 1px solid #D5DDD9; padding: 5px 4px; white-space: nowrap; overflow: hidden; }
.x-sheet .h span { background: #E6ECE9; color: #6A7772; }
.x-sheet .err span:nth-child(2) { color: #C0392B; text-decoration: underline wavy #C0392B; }

/* ---------- With RestarFleet ---------- */
.x-new { display: grid; grid-template-columns: 290px 1fr 430px; gap: 34px; align-items: start; }
.x-col { position: relative; }
.x-phone { width: 284px; border: 1px solid var(--line-2); border-radius: 38px; padding: 11px; background: var(--bg); }
.x-scr { border-radius: 28px; background: var(--bg-3); border: 1px solid var(--line); padding: 14px 15px 16px; height: 520px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; }
.x-notch { width: 80px; height: 6px; border-radius: 6px; background: var(--line-2); margin: 2px auto 6px; }
.x-ft { display: flex; justify-content: space-between; align-items: baseline; }
.x-ft strong { color: var(--head); font: 600 17px var(--rf-font); } .x-ft span { font: 400 12px var(--mono); color: var(--muted); }
.x-fr { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--soft); border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.x-fr b { color: var(--text); font-weight: 500; }
.x-pills { display: flex; gap: 5px; } .x-pills span { font-size: 12px; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--soft); }
.x-pills span.on { border-color: var(--brand); color: var(--head); background: var(--brand-tint); }
.x-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2px; } .x-tot span { font-size: 13px; color: var(--soft); } .x-tot b { color: var(--head); font: 600 21px var(--rf-font); }
.x-tap { margin-top: auto; position: relative; font: 500 15px/1 var(--rf-font); background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 12px; padding: 15px; cursor: pointer; }
.x-finger { position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 2px solid var(--brand-ink); opacity: .55; }
.x-ok { display: none; margin-top: auto; border: 1px solid var(--brand-edge); border-radius: 12px; padding: 12px 14px; color: var(--head); font-size: 14px; }
.x-ok small { display: block; font: 400 12px var(--mono); color: var(--muted); margin-top: 4px; }
.done .x-tap { display: none; } .done .x-ok { display: block; }
.x-pcap { font: 500 12.5px/1.3 var(--mono); color: var(--muted); text-align: center; margin-top: 12px; } .x-pcap b { color: var(--accent); font-weight: 500; }
.x-arrow { position: absolute; top: 250px; right: -30px; font-size: 22px; color: var(--muted); }
.done .x-arrow { color: var(--node); transition: color .3s; }

/* office screen */
.x-office { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); overflow: hidden; }
.x-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.x-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); } .x-bar em { font: 400 11.5px var(--mono); color: var(--muted); margin-left: 8px; font-style: normal; }
.x-oh { padding: 13px 18px 6px; color: var(--head); font: 600 15px var(--rf-font); display: flex; justify-content: space-between; }
.x-oh span { font: 400 12px var(--mono); color: var(--muted); }
.x-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.x-tbl th { text-align: left; font: 500 11px var(--mono); color: var(--muted); padding: 9px 18px; border-bottom: 1px solid var(--line); }
.x-tbl td { padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.x-tbl td.p { font: 500 12.5px var(--mono); color: var(--text); }
.x-st { font-size: 12px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line-2); white-space: nowrap; }
.x-st.rent { color: #F5C66A; border-color: rgba(245,198,106,.4); } .x-st.free { color: var(--brand); border-color: var(--brand-edge); } .x-st.svc { color: var(--muted); }
.x-chg .x-n { display: none; } .done .x-chg .x-o { display: none; } .done .x-chg .x-n { display: inline-flex; align-items: center; gap: 7px; animation: x-fade .3s ease 1s both; }
.done tr.x-hit td { background: var(--brand-tint); transition: background .3s ease 1s; }
.x-tiles { display: grid; grid-template-columns: 1fr 1fr; }
.x-tiles div { padding: 14px 18px 16px; border-right: 1px solid var(--line); display: grid; gap: 5px; } .x-tiles div:last-child { border-right: 0; }
.x-tiles .k { font: 500 11px var(--mono); color: var(--muted); } .x-tiles .v { color: var(--head); font: 600 19px var(--rf-font); }
.x-ofoot { padding: 10px 18px; border-top: 1px solid var(--line); font: 400 11.5px var(--mono); color: var(--muted); display: flex; justify-content: space-between; }
.x-ofoot .x-n { display: none; } .done .x-ofoot .x-n { display: inline; }

/* A: key board (small) */
.x-kb { width: 100%; max-width: 400px; margin: 0 auto; padding: 16px 18px 22px; border-radius: 8px; box-sizing: border-box; background-color: #CDD3CF;
  background-image: radial-gradient(circle, rgba(38,48,44,.42) 1.5px, transparent 2px); background-size: 20px 20px; background-position: 10px 10px;
  border: 9px solid #8E9894; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 26px 44px -26px rgba(0,0,0,.75); }
.x-kb .x-plate { width: max-content; margin: 0 auto 14px; padding: 5px 13px; background: #3A4642; color: #E8EEEA; font: 600 12px/1 var(--rf-font); letter-spacing: .22em; border-radius: 3px; }
.x-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
.x-slot { position: relative; height: 196px; display: flex; flex-direction: column; align-items: center; }
.x-dymo { background: #1D2A5A; color: #F1F4FA; font: 700 10.5px/1 var(--mono); letter-spacing: .04em; padding: 5px 6px 4px; border-radius: 2px; white-space: nowrap; }
.x-screw { width: 8px; height: 8px; border-radius: 50%; background: #6E7874; margin-top: 9px; }
.x-hl { width: 4px; height: 14px; background: #6E7874; }
.x-he { width: 14px; height: 9px; border: 4px solid #6E7874; border-top: 0; border-radius: 0 0 9px 9px; margin-left: 11px; margin-top: -4px; box-sizing: content-box; }
.x-keys { position: absolute; top: 47px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; transform: rotate(var(--r, 0deg)); }
.x-kr { width: 20px; height: 20px; border: 3px solid #A9B0AD; border-radius: 50%; box-sizing: border-box; }
.x-kh { display: flex; align-items: flex-start; gap: 2px; margin-top: -5px; }
.x-fob { width: 54px; height: 76px; border-radius: 9px 9px 18px 18px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; box-sizing: border-box; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 8px 10px -6px rgba(0,0,0,.45); }
.x-fob::before { content: ''; position: absolute; top: 6px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #CDD3CF; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.x-fob span { font: 700 9.5px/1.15 var(--mono); color: #10181E; text-align: center; }
.x-fob.y { background: #F2C94C; } .x-fob.r { background: #E0645A; } .x-fob.b { background: #3E6FB5; } .x-fob.g { background: #3E9A6B; }
.x-fob.r span, .x-fob.b span, .x-fob.g span { color: #fff; }
.x-key { width: 20px; height: 64px; margin-top: 4px; }
.x-flip { position: absolute; top: 60px; font: 600 10.5px/1 var(--mono); padding: 5px 7px; border-radius: 3px; background: #fff; color: #B23B2E; border: 1px solid rgba(0,0,0,.15); white-space: nowrap; }
.x-flip small { font-weight: 400; color: #55605B; margin-left: 4px; }
.x-flip.in, .x-flip.svc { top: 160px; } .x-flip.in { display: none; color: #22794D; } .x-flip.svc { color: #55605B; }
.done .x-flip.out { display: none; } .done .x-flip.in { display: block; animation: x-fade .3s ease .9s both; }
.x-ret { display: none; }
.done .x-ret { display: flex; animation: x-drop 1.3s cubic-bezier(.3,.6,.3,1) .25s both; }
@keyframes x-drop { 0% { transform: translateY(-70px) rotate(0); opacity: 0; } 30% { transform: translateY(0) rotate(16deg); opacity: 1; }
  50% { transform: rotate(-10deg); } 68% { transform: rotate(6deg); } 84% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.x-mcap { font: 500 12.5px/1.3 var(--mono); color: var(--muted); text-align: center; margin-top: 12px; }

/* B: carbon copies */
.x-slips { position: relative; height: 520px; }
.x-slip { position: absolute; left: 50%; top: 40px; width: 220px; height: 300px; margin-left: -118px; padding: 12px 14px; box-sizing: border-box; border-radius: 3px; color: #2A2823;
  box-shadow: 0 14px 22px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.08); transform-origin: 0 0; z-index: calc(10 - var(--k));
  transform: translate(calc(var(--k) * 6px), calc(var(--k) * 8px)) rotate(calc(var(--k) * .8deg));
  transition: transform .9s cubic-bezier(.3,.7,.2,1) calc(.25s + var(--k) * .12s); }
.x-slip.c0 { background: #FBFAF6; } .x-slip.c1 { background: #F7D6DC; } .x-slip.c2 { background: #F6E9AE; } .x-slip.c3 { background: #D3E4F4; }
.x-slip .sh { display: flex; justify-content: space-between; border-bottom: 1.5px solid #2A2823; padding-bottom: 5px; margin-bottom: 6px; }
.x-slip .sh b { font: 700 11px/1.15 var(--rf-font); letter-spacing: .05em; } .x-slip .sh b small { display: block; font: 400 9px var(--rf-font); color: #6B6455; letter-spacing: 0; }
.x-slip .sh .no { font: 700 13px var(--mono); color: #C0392B; }
.x-slip .ln { display: flex; gap: 6px; align-items: baseline; border-bottom: 1px solid rgba(42,40,35,.35); padding: 4px 0 1px; font-size: 10px; color: #6B6455; }
.x-slip .ln .x-hand { font-size: 18px; line-height: 1; color: #22388A; }
.x-slip.c1 .x-hand, .x-slip.c2 .x-hand, .x-slip.c3 .x-hand { color: #3B4C93; opacity: .82; }
.x-slip .cp { position: absolute; left: 14px; right: 14px; bottom: 9px; font: 600 9px var(--mono); color: #6B6455; border-top: 1px dashed rgba(42,40,35,.4); padding-top: 5px; }
.done .x-slip { transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.3) rotate(calc((var(--k) - 1.5) * 2deg)); }
/* B office: one record per copy colour */
.x-recs { display: grid; }
.x-rec { display: grid; grid-template-columns: 8px 1fr; min-height: 96px; border-bottom: 1px solid var(--line); }
.x-rec:last-child { border-bottom: 0; }
.x-rec i { background: var(--c); }
.x-rec div { padding: 14px 18px; display: grid; gap: 5px; align-content: center; }
.x-rec .k { font: 500 11px var(--mono); color: var(--muted); }
.x-rec .v { color: var(--head); font-size: 15px; font-weight: 500; }
.x-rec .v s { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .x-sec * { animation: none !important; transition: none !important; } }



/* Version A2: the visitor returns any of today's three cars from the staff phone. Each tap sends the orange
   node from the phone to the key hook and on to the office row. Nothing moves until a tap. */
.x-sec { min-height: 0; padding-bottom: 80px; }
.x-sec .wrap { position: relative; }
.x-new { grid-template-columns: 270px 1fr 370px; gap: 30px; }
.x-scr { height: 560px; gap: 10px; }
.y-sub { font: 400 12px var(--mono); color: var(--muted); margin-top: -4px; }
.y-job { border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px 12px; display: grid; gap: 4px; background: var(--bg-2); }
.y-jt { display: flex; justify-content: space-between; align-items: baseline; }
.y-jt b { font: 600 14px var(--mono); color: var(--head); } .y-jt span { font-size: 12px; color: var(--muted); }
.y-jm { font-size: 12.5px; color: var(--soft); }
.y-jc { font-size: 12.5px; color: var(--soft); } .y-jc b { color: var(--head); font-weight: 600; }
.y-jf { white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; min-height: 34px; margin-top: 2px; font-size: 12.5px; color: var(--soft); }
.y-jf b { color: var(--head); font-weight: 600; }
.y-ret { font: 500 13px/1 var(--rf-font); background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.y-done { display: none; font: 500 12px var(--mono); color: var(--brand); }
.y-job.back { border-color: var(--brand-edge); }
.y-job.back .y-ret { display: none; } .y-job.back .y-done { display: inline; }
.y-left { margin-top: auto; font: 400 11.5px var(--mono); color: var(--muted); text-align: center; }

.x-kb { max-width: none; padding: 18px 20px 24px; }
.x-row { grid-template-columns: repeat(5, 1fr); }
.done .x-slot:not(.back) .x-ret { display: none; }
.done .x-slot:not(.back) .x-flip.out { display: block; }
.done .x-slot:not(.back) .x-flip.in { display: none; }
.x-slot.back .x-flip.out { display: none; }
.x-slot.back .x-flip.in { display: block; }
.x-slot.back .x-ret { display: flex; animation: x-drop 1.3s cubic-bezier(.3,.6,.3,1) var(--kd, .5s) both; }
.x-slot.back .x-flip.in { animation: x-fade .3s ease calc(var(--kd, .5s) + .5s) both; }

.y-row .x-n { display: none; }
.y-row.back .x-o { display: none; } .y-row.back .x-n { display: inline-flex; align-items: center; gap: 7px; }
.y-row.back td { background: var(--brand-tint); }
.y-more td { color: var(--muted); font-size: 12.5px; }
.y-tile .v { font-variant-numeric: tabular-nums; }
.y-tile .v.bump { color: var(--brand); transition: color .6s; }

.y-run { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); z-index: 50; pointer-events: none; opacity: 0; }
.x-old { margin-bottom: 26px; }
.x-sum .s1, .x-sum .s2 { font-size: 28px; }
.y-hint { font: 400 12.5px var(--mono); color: var(--muted); }
.y-reset { display: none; background: none; border: 0; color: var(--muted); font: 400 12.5px var(--mono); cursor: pointer; text-decoration: underline; }
.done .y-reset { display: inline; }
.y-hint { position: absolute; left: 0; top: 0; width: 270px; height: 100px; z-index: 40; pointer-events: none; transition: opacity .4s; }
.y-hint.gone { opacity: 0; }
.y-hint svg { position: absolute; left: 10px; top: 26px; overflow: visible; }
.y-hint .y-say { position: absolute; left: 0; top: 0; font: 700 27px/1 'Caveat', cursive; color: var(--brand); white-space: nowrap; }
.y-car { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .y-run { display: none; } }

/* ---- car dealer side ---- */

/* Car dealer twin of A2: the office records a payment, a PAID chop lands on the buyer's card, the late list updates.
   Payments are recorded at the office desk (the staff phone app is for rental). Nothing moves until a tap. */
.x-sec { min-height: 0; padding-bottom: 80px; }
.x-sec .wrap { position: relative; }
.x-new { grid-template-columns: 300px 1fr 360px; gap: 30px; }
.y-sub { font: 400 12px var(--mono); color: var(--muted); margin-top: -4px; }

/* old-way objects for the car dealer */
.i-bank { width: 214px; background: #FBFCFB; color: #24302B; border: 1px solid #B9C3BE; font: 400 10.5px/1.25 var(--mono); position: relative; }
.i-bank .h { background: #E6ECE9; color: #6A7772; padding: 5px 7px; display: flex; justify-content: space-between; }
.i-bank div.r { display: grid; grid-template-columns: 38px 1fr 52px; gap: 4px; padding: 5px 7px; border-top: 1px solid #D5DDD9; }
.i-bank div.r b { font-weight: 500; text-align: right; }
.i-bank .ring { position: absolute; left: 40px; top: 44px; width: 104px; height: 24px; border: 2px solid #C0392B; border-radius: 50%; transform: rotate(-3deg); }
.i-bank .q { position: absolute; right: 4px; top: 94px; font: 700 21px/1 'Caveat', cursive; color: #C0392B; transform: rotate(-6deg); }
.i-book { width: 200px; background: #F4F0E6; color: #2A2823; padding: 10px 12px; border-radius: 2px; transform: rotate(2.5deg); box-shadow: 0 10px 18px -12px rgba(0,0,0,.7);
  background-image: repeating-linear-gradient(transparent 0 21px, rgba(60,90,160,.25) 21px 22px); }
.i-book b { font: 700 10px var(--rf-font); letter-spacing: .06em; display: block; margin-bottom: 2px; }
.i-book .x-hand { display: block; font-size: 18px; line-height: 22px; color: #22388A; white-space: nowrap; }
.i-book s { color: #C0392B; }
.x-bub.angry { background: #4A2622; }

/* left: the office desk list */
.i-desk { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-3); overflow: hidden; }
.i-body { padding: 14px 15px 16px; display: grid; gap: 10px; min-height: 520px; align-content: start; box-sizing: border-box; }
.i-body .x-ft strong { font-size: 16px; }
.y-job { border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px 12px; display: grid; gap: 4px; background: var(--bg-2); }
.y-jt { display: flex; justify-content: space-between; align-items: baseline; }
.y-jt b { font: 600 14px var(--mono); color: var(--head); }
.y-jt span { font-size: 12px; } .late { color: #FF9C8A; } .today { color: #F5C66A; }
.y-jm { font-size: 12.5px; color: var(--soft); }
.y-jc { font-size: 12.5px; color: var(--soft); } .y-jc b { color: var(--head); font-weight: 600; }
.y-jf { white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; min-height: 34px; margin-top: 2px; }
.y-ret { font: 500 13px/1 var(--rf-font); background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.y-done { display: none; font: 500 12px var(--mono); color: var(--brand); }
.y-job.back { border-color: var(--brand-edge); } .y-job.back .y-ret { display: none; } .y-job.back .y-done { display: inline; }
.y-left { margin-top: 8px; font: 400 11.5px var(--mono); color: var(--muted); text-align: center; }

/* middle: the rack of paper payment cards */
.i-rack { padding: 16px 18px 20px; border-radius: 8px; background: #8E9894; border: 1px solid #6E7874; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 26px 44px -26px rgba(0,0,0,.75); }
.i-rack .x-plate { width: max-content; margin: 0 auto 14px; padding: 5px 13px; background: #3A4642; color: #E8EEEA; font: 600 12px/1 var(--rf-font); letter-spacing: .22em; border-radius: 3px; }
.i-slot { position: relative; padding-top: 10px; margin-bottom: 14px; }
.i-slot:last-child { margin-bottom: 0; }
.i-slot::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 26px; background: #6E7874; border-radius: 0 0 5px 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,.18); }
.i-card { position: relative; z-index: 1; display: grid; grid-template-columns: 118px 1fr; gap: 12px; background: #F1E9D6; color: #2A2823; border-radius: 3px; padding: 10px 12px 12px; transform: rotate(var(--r)); box-shadow: 0 6px 10px -6px rgba(0,0,0,.5); }
.i-card .no { font: 600 11.5px var(--mono); color: #B23B2E; }
.i-card .nm { font: 700 22px/1.05 'Caveat', cursive; color: #1F3C8A; margin: 4px 0 2px; }
.i-card .mo { font-size: 11px; color: #6B6455; }
.i-card .of { font: 700 18px/1 'Caveat', cursive; color: #1F3C8A; margin-top: 6px; }
.i-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #8A826F; border-left: 1px solid #8A826F; align-self: start; }
.i-grid > div { position: relative; height: 40px; border-right: 1px solid #8A826F; border-bottom: 1px solid #8A826F; }
.i-grid .m { position: absolute; top: 3px; left: 4px; font: 500 8.5px var(--mono); color: #6B6455; }
.chop { position: absolute; left: 50%; top: 56%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.6px solid #2B4FA8; border-radius: 50%; color: #2B4FA8; display: grid; place-items: center; font: 700 6.5px/1 var(--rf-font); opacity: .78; transform: rotate(var(--r, -8deg)); }
.ring2 { position: absolute; inset: 5px 3px 4px; border: 2px solid #C0392B; border-radius: 50% 46% 52% 44%; transform: rotate(-6deg); }
.ring2.t { border-color: #C98A16; }
.word { position: absolute; right: -8px; bottom: -11px; transform: rotate(-6deg); font: 700 15px/1 'Caveat', cursive; color: #C0392B; white-space: nowrap; z-index: 2; }
.word.t { color: #A8700E; }
.big { display: none; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2.4px solid #C23A2C; border-radius: 50%; color: #C23A2C;
  place-items: center; text-align: center; font: 700 9px/1.05 var(--rf-font); letter-spacing: .04em; opacity: .88; transform: rotate(-11deg); z-index: 3; }
.big small { display: block; font: 600 6px/1.2 var(--mono); letter-spacing: 0; }
.i-slot.back .big { display: grid; animation: i-press .5s cubic-bezier(.2,.9,.3,1.2) var(--kd, .55s) both; }
.i-slot.back .ring2, .i-slot.back .word { opacity: .22; transition: opacity .3s ease var(--kd, .55s); }
@keyframes i-press { 0% { transform: rotate(-11deg) scale(1.6); opacity: 0; } 100% { transform: rotate(-11deg) scale(1); opacity: .88; } }

/* right: office list */
.y-row .x-n { display: none; }
.y-row.back .x-o { display: none; } .y-row.back .x-n { display: inline-flex; align-items: center; gap: 7px; }
.y-row.back td { background: var(--brand-tint); }
.y-row.back td.who { text-decoration: line-through; color: var(--muted); }
.x-st.late { color: #FF9C8A; border-color: rgba(255,156,138,.4); } .x-st.today { color: #F5C66A; border-color: rgba(245,198,106,.4); }
.y-tile .v { font-variant-numeric: tabular-nums; }
.y-run { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); z-index: 50; pointer-events: none; opacity: 0; }
.x-old { margin-bottom: 26px; }
.x-sum .s1, .x-sum .s2 { font-size: 28px; }
.y-reset { display: none; background: none; border: 0; color: var(--muted); font: 400 12.5px var(--mono); cursor: pointer; text-decoration: underline; }
.done .y-reset { display: inline; }
/* road and car hint, as in A2 */
.y-hint { position: absolute; left: 0; top: 0; width: 270px; height: 100px; z-index: 40; pointer-events: none; transition: opacity .4s; }
.y-hint.gone { opacity: 0; }
.y-hint svg { position: absolute; left: 10px; top: 26px; overflow: visible; }
.y-hint .y-say { position: absolute; left: 0; top: 0; font: 700 27px/1 'Caveat', cursive; color: var(--brand); white-space: nowrap; }
.y-car { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .y-run { display: none; } }

/* one section, two sides */
.hw-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; margin-top: 22px; }
.hw-switch button { font: 500 14px/1 var(--rf-font); color: var(--soft); background: none; border: 0; padding: 10px 16px; border-radius: 9px; cursor: pointer; }
.hw-switch button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
#how-i { border-top: 0; }
:lang(ms) .big { font-size: 7.5px; letter-spacing: 0; }
:lang(ms) .y-hint .y-say { font-size: 23px; top: 4px; }
#how-i .y-jt span.late { color: #FF9C8A; } #how-i .y-jt span.today { color: #F5C66A; }

/* On Home the two sides carry their own spacing; the outer section adds none. */
#how.how { padding: 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#how .x-sec { border-bottom: 0; }

/* Day mode: darker warning colours so they read on the light background */
.skin-rf[data-theme="light"] #how .x-lab.bad b, .skin-rf[data-theme="light"] #how .x-sum .s1, .skin-rf[data-theme="light"] #how .x-calls div { color: #B23B2E; }
.skin-rf[data-theme="light"] #how .x-st.late, .skin-rf[data-theme="light"] #how .y-jt span.late { color: #B23B2E; border-color: rgba(178,59,46,.4); }
.skin-rf[data-theme="light"] #how .x-st.rent, .skin-rf[data-theme="light"] #how .x-st.today, .skin-rf[data-theme="light"] #how .y-jt span.today { color: #8A5A00; border-color: rgba(138,90,0,.4); }
@media (prefers-color-scheme: light) {
  .skin-rf:not([data-theme="dark"]) #how .x-lab.bad b, .skin-rf:not([data-theme="dark"]) #how .x-sum .s1, .skin-rf:not([data-theme="dark"]) #how .x-calls div { color: #B23B2E; }
  .skin-rf:not([data-theme="dark"]) #how .x-st.late, .skin-rf:not([data-theme="dark"]) #how .y-jt span.late { color: #B23B2E; border-color: rgba(178,59,46,.4); }
  .skin-rf:not([data-theme="dark"]) #how .x-st.rent, .skin-rf:not([data-theme="dark"]) #how .x-st.today, .skin-rf:not([data-theme="dark"]) #how .y-jt span.today { color: #8A5A00; border-color: rgba(138,90,0,.4); }
}

/* Phone: stack everything, one column (6 Oct 2026 phone check) */
@media (max-width: 760px) {
  #how .x-sec { padding: 52px 0 56px; }
  #how .x-top { grid-template-columns: 1fr; gap: 14px; }
  #how .x-sec h2 { font-size: 32px; }
  #how .x-old { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 16px; }
  #how .x-step + .x-step::before { display: none; }
  #how .x-step .x-obj { height: auto; min-height: 120px; }
  #how .x-paper, #how .x-chat, #how .x-calls, #how .x-sheet, #how .i-bank, #how .i-book { width: 100%; max-width: 100%; box-sizing: border-box; }
  #how .x-sheet { font-size: 9.5px; } #how .i-bank { font-size: 9.5px; }
  #how .x-sum { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
  #how .x-new { grid-template-columns: 1fr !important; gap: 26px; }
  #how .x-arrow, #how .y-hint, #how .y-run { display: none; }
  #how .x-phone { margin: 0 auto; max-width: 300px; width: 100%; box-sizing: border-box; }
  #how .x-scr { height: auto; }
  #how .x-kb { padding: 12px 10px 16px; border-width: 7px; }
  #how .x-dymo { font-size: 8px; padding: 4px 4px 3px; }
  #how .x-fob { width: 46px; height: 66px; } #how .x-key { height: 54px; }
  #how .x-slot { height: 176px; }
  #how .i-desk .i-body { min-height: 0; }
  #how .i-card { grid-template-columns: 96px 1fr; }
  #how .x-tbl th, #how .x-tbl td { padding: 10px 10px; }
  #how .hw-switch { display: flex; } #how .hw-switch button { flex: 1; padding: 10px 8px; }
}

/* Tap hint on the side with room (always right of the button in Arabic): mirrored, the words stay readable */
.y-hint.flip { transform: scaleX(-1); }
.y-hint.flip .y-say { transform: scaleX(-1); }
[dir="rtl"] .x-flip small { margin-left: 0; margin-right: 4px; } /* Arabic: gap between the word and the name */

/* The old way: 3 numbered steps, crossed out and marked "not needed" from the start, green ending (owner's choice A2 + 2, 23 Oct 2026) */
#how .x-old { grid-template-columns: repeat(3, 1fr) 230px; }
#how .x-step + .x-step::before { top: 70px; }
#how .x-n { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #B23B2E; color: #fff; font: 700 13px/26px var(--rf-font); text-align: center; z-index: 2; }
#how .x-old .x-cap { font: 500 16px/1.35 var(--rf-font); color: var(--text); }
#how .x-old .x-strike { inset: auto; top: 22px; left: 14px; width: calc(100% - 28px); height: 118px; opacity: 1; }
#how .x-old .x-gone { opacity: 1; top: -2px; right: 6px; font: 600 17px/1 var(--rf-font) !important; color: #C0392B; background: #FBEDEA; border: 1.5px solid #E2584A; border-radius: 6px; padding: 5px 9px; transform: rotate(-4deg); }
#how .x-old .x-obj { opacity: .75; }
#how .x-sum .s3 { font: 700 22px/1.25 var(--rf-font); color: var(--accent); }
@media (max-width: 760px) {
  #how .x-old { grid-template-columns: 1fr; }
}

/* Chat steps in the look of a phone messaging app, light theme in both day and night (owner, 23 Oct 2026) */
#how .x-chat.wa { width: 220px; padding: 0; gap: 0; border: 0; border-radius: 12px; overflow: hidden; background: #EFEAE2; box-shadow: 0 10px 22px -14px rgba(0,0,0,.55);
  background-image: radial-gradient(rgba(84,101,111,.13) 1px, transparent 1.4px); background-size: 9px 9px; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
#how .wa-top { display: flex; align-items: center; gap: 6px; background: #008069; color: #fff; padding: 6px 9px 6px 6px; }
#how .wa-back { font-size: 18px; line-height: 1; margin-top: -2px; }
#how .wa-av { width: 22px; height: 22px; border-radius: 50%; background: #A7B4BA; display: grid; place-items: end center; overflow: hidden; flex: none; } #how .wa-av svg { width: 20px; height: 20px; }
#how .wa-nm { display: grid; flex: 1; line-height: 1.15; } #how .wa-nm b { font-size: 12px; font-weight: 600; } #how .wa-nm small { font-size: 9px; opacity: .85; }
#how .wa-ic { width: 13px; height: 13px; flex: none; }
#how .wa-body { display: grid; gap: 4px; padding: 7px 8px 9px; }
#how .wa .x-bub { color: #111B21; font: 400 11.5px/1.3 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; padding: 5px 7px 4px; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); max-width: 84%; }
#how .wa .x-bub.me { background: #D9FDD3; border-top-right-radius: 0; border-bottom-right-radius: 7.5px; }
#how .wa .x-bub.them { background: #FFFFFF; border-top-left-radius: 0; border-bottom-left-radius: 7.5px; }
#how .wa .x-bub + .x-bub { border-radius: 7.5px; }
#how .wa .x-bub small { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font: 400 9px -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #667781; margin-top: 1px; }
#how .wa-tk { width: 13px; height: 8px; }
#how .wa .x-bub.pic { padding: 3px; position: relative; }
#how .wa .x-bub.pic i { width: 120px; height: 44px; border-radius: 5px; background: #8C7B63; position: relative; }
#how .wa .x-bub.pic i::before { content: ''; position: absolute; left: 18px; top: 5px; width: 74px; height: 38px; background: repeating-linear-gradient(176deg, #F4F0E6 0 6px, #C9C1AE 6px 7px); transform: rotate(-5deg); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
#how .wa .x-bub.pic i.slip { background: #E9EDEF; }
#how .wa .x-bub.pic i.slip::before { left: 34px; top: 3px; width: 52px; height: 40px; transform: none; background: #fff; box-shadow: 0 0 0 1px #D1D7DB; }
#how .wa .x-bub.pic i.slip::after { content: ''; position: absolute; left: 40px; top: 9px; width: 40px; height: 28px; background: repeating-linear-gradient(180deg, #8696A0 0 2px, transparent 2px 6px); opacity: .55; }
#how .wa .x-bub.pic small { position: absolute; right: 7px; bottom: 5px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); margin: 0; }
@media (max-width: 760px) { #how .x-chat.wa { width: 100%; } #how .wa .x-bub.pic i { width: 170px; height: 60px; } }