/* app.css: the working pages (estimator, schedule, dashboard, rewards, cash out). */
body.app { background: var(--sc-canvas); min-height: 100svh; overflow-x: clip; }
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg i { position: absolute; border-radius: 50%; }
.bg i:nth-child(1) { left: -14vw; top: -26vh; width: 62vh; aspect-ratio: 1; background: #DDEFD2; }
.bg i:nth-child(2) { right: -12vw; bottom: -34vh; width: 74vh; aspect-ratio: 1; background: #F2E9C4; }
.floaties span { position: absolute; width: 4.6rem; opacity: .9; translate: calc((var(--mx, .5) - .5) * var(--k) * 1px) calc((var(--my, .5) - .5) * var(--k) * 1px); transition: translate .6s var(--sc-ease-out); }
.floaties svg { animation: float 7s ease-in-out infinite alternate; animation-delay: var(--d); rotate: var(--r); }
@keyframes float { to { transform: translateY(-16px) rotate(6deg); } }
@media (max-width: 1499px) { .floaties { display: none; } }
.page { position: relative; z-index: 1; width: min(82rem, 100%); margin-inline: auto; padding: 7.2rem var(--sc-gutter) 3rem; }

.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2rem; }
.phead h1 { font-size: clamp(2.6rem, 1rem + 4.7vw, 5.4rem); max-width: 14ch; }
.phead p { margin: 1rem 0 0; max-width: 36rem; font-size: 1.14rem; line-height: 1.5; color: var(--sc-ink-soft); }
.phead__b { flex: none; width: clamp(5rem, 9vw, 8rem); cursor: pointer; padding: 0; border: 0; background: none; }
.phead__b .baggu { transition: transform .3s var(--pop); } .phead__b:hover .baggu { transform: rotate(-6deg) scale(1.05); }
@media (max-width: 720px) { .phead { align-items: center; } .phead__b { width: 4.6rem; } }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sticky { position: sticky; top: 6rem; }
@media (max-width: 920px) { .grid2 { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }
.panel { background: var(--sc-surface); border-radius: 28px; padding: 1.5rem; box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(var(--sc-shadow-color) / .08), 0 22px 40px -24px hsl(var(--sc-shadow-color) / .4); }
.panel + .panel { margin-top: 1.4rem; }
.panel--ink { background: var(--ink); color: var(--sc-canvas); --focus: #FFB81C; }
.panel--sun { background: var(--sun); } .panel--mint { background: var(--mint); } .panel--sky { background: var(--sky); }
.lbl { margin: 0 0 .8rem; font: 800 .76rem/1 var(--sc-font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-ink-soft); }
.panel--ink .lbl { color: color-mix(in oklab, var(--sc-canvas) 70%, transparent); }
.panel--sun .lbl, .panel--mint .lbl, .panel--sky .lbl { color: color-mix(in oklab, var(--ink) 78%, transparent); }
.fine { margin: .8rem 0 0; font-size: .84rem; color: var(--sc-ink-soft); line-height: 1.45; }
.h2 { font: 800 1.7rem/1 var(--sc-font-display); font-stretch: 88%; letter-spacing: -.025em; margin: 0 0 1rem; }

/* tiles + lines (bag builder) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: .7rem; }
.tile { position: relative; display: grid; justify-items: center; gap: .15rem; padding: .85rem .4rem .7rem; border: 0; border-radius: 22px; background: var(--tint); cursor: pointer; text-align: center; color: var(--ink); transition: transform .26s var(--pop); }
.tile:hover { transform: translateY(-4px) rotate(-1.6deg); } .tile:active { transform: scale(.93); transition-duration: 80ms; }
.tile .item { width: 3.7rem; height: 3.7rem; }
.tile b { font: 800 .98rem/1.1 var(--sc-font-display); font-stretch: 88%; letter-spacing: -.01em; margin-top: .3rem; }
.tile small { font-weight: 700; font-size: .8rem; color: color-mix(in oklab, var(--ink) 72%, transparent); }
.tile--0 { --tint: var(--mint); } .tile--1 { --tint: var(--sky); } .tile--2 { --tint: #F7CFC0; } .tile--3 { --tint: #F2E6B6; }
.badge { position: absolute; top: .4rem; right: .5rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; display: grid; place-items: center; border-radius: 99px; background: var(--ink); color: #fff; font: 800 .8rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; animation: pop .35s var(--pop); }
@keyframes pop { from { transform: scale(.3); } }
.lines { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.line { display: grid; grid-template-columns: 2.7rem 1fr auto auto auto; gap: .7rem; align-items: center; padding: .45rem .6rem .45rem .5rem; border-radius: 20px; background: var(--paper2); }
.line.is-new { animation: lin .4s var(--pop); }
@keyframes lin { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.line .item { width: 2.7rem; height: 2.7rem; }
.line b { display: block; font-weight: 800; line-height: 1.15; } .line small { color: var(--sc-ink-soft); font-weight: 600; }
.line__amt { min-width: 5.4rem; text-align: right; font: 800 1.1rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; background: var(--sc-surface); border-radius: 99px; padding: .15rem; }
.stepper button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .14s, transform .2s var(--pop); }
.stepper button:hover { background: var(--mint); } .stepper button:active { transform: scale(.85); }
.stepper input { width: 3.3rem; padding: 0; border: 0; background: transparent; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.line__x { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--sc-ink-soft); display: grid; place-items: center; } .line__x:hover { background: #F7CFC0; color: var(--ink); }
.empty { margin: 1rem 0 0; padding: 1rem 1.2rem; border-radius: 18px; border: 2px dashed color-mix(in oklab, var(--ink) 25%, transparent); color: var(--sc-ink-soft); font-weight: 600; }
@media (max-width: 600px) { .line { grid-template-columns: 2.4rem 1fr auto auto; } .line__amt { grid-column: 2 / 4; text-align: left; } .line .item { width: 2.4rem; height: 2.4rem; } }
.fx-item { position: fixed; z-index: 150; width: 3.6rem; height: 3.6rem; pointer-events: none; will-change: transform; }

/* bag panel: baggu + coin jar + totals */
.bagpanel__top { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: end; margin-bottom: 1.2rem; }
.bagpanel__baggu { display: block; } .bagpanel__baggu.is-gulp .baggu { animation: gulp .4s var(--pop); transform-origin: 50% 100%; }
@keyframes gulp { 40% { transform: scale(1.1, .9); } 70% { transform: scale(.96, 1.05); } }
.jar { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 1px; height: 8.6rem; padding: .5rem; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px 14px 32px 32px; background: #E7F1F0; }
.jar .coin { width: 1.55rem; height: 1.55rem; animation: drop .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes drop { from { transform: translateY(-5rem) rotate(-90deg); opacity: 0; } }
.total { margin: 0; font: 800 clamp(3rem, 1rem + 3.6vw, 4.8rem)/1 var(--sc-font-display); font-stretch: 84%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.or { margin: .4rem 0 0; font-weight: 600; color: var(--sc-ink-soft); } .or b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.bars li { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .7rem; align-items: center; font-weight: 700; font-size: .9rem; }
.bars .bar { display: block; height: .7rem; border-radius: 99px; background: var(--paper2); overflow: hidden; } .bars .bar i { display: block; height: 100%; border-radius: inherit; background: var(--leaf); transform-origin: 0 50%; transform: scaleX(var(--w, 0)); transition: transform .6s var(--pop); }
.bars li:nth-child(4n+2) .bar i { background: #3AA0C8; } .bars li:nth-child(4n+3) .bar i { background: var(--tomato); } .bars li:nth-child(4n+4) .bar i { background: var(--kraft); }
.bars em { font-style: normal; font-variant-numeric: tabular-nums; }
.bagpanel .btn { width: 100%; }

/* forms */
.field { display: grid; gap: .45rem; } .field + .field { margin-top: 1.1rem; }
.field label, .field .lbl { font: 800 .76rem/1 var(--sc-font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.field input, .field textarea { width: 100%; padding: .9rem 1.05rem; border: 2px solid transparent; border-radius: 16px; background: var(--paper2); font-weight: 600; transition: border-color .15s, background .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--leaf); background: var(--sc-surface); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--tomato); animation: shake .4s; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; } @media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.dates { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .7rem; scroll-snap-type: x proximity; }
.date, .slot { flex: none; border: 0; border-radius: 18px; background: var(--paper2); cursor: pointer; text-align: center; color: var(--ink); font-weight: 700; transition: transform .24s var(--pop), background .14s, color .14s; }
.date { width: 4.3rem; padding: .65rem 0; scroll-snap-align: start; } .date small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; } .date b { font: 800 1.5rem/1.1 var(--sc-font-display); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .5rem; } .slot { padding: .8rem .4rem; font-variant-numeric: tabular-nums; }
.date:hover, .slot:hover { transform: translateY(-3px); } .date:active, .slot:active { transform: scale(.94); }
.date[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--ink); color: var(--sc-canvas); transform: translateY(-2px) rotate(-1.2deg); }
.sec { margin-top: 1.8rem; } .sec:first-child { margin-top: 0; }

/* receipt / ticket */
.receipt { filter: drop-shadow(0 14px 20px hsl(var(--sc-shadow-color) / .22)); rotate: 1.2deg; }
.receipt__in { padding: 1.3rem 1.3rem 2rem; background: conic-gradient(from -45deg at bottom, transparent, #FBFCF6 1deg 89deg, transparent 90deg) bottom / 14px 8px repeat-x, linear-gradient(#FBFCF6, #FBFCF6) top / 100% calc(100% - 7px) no-repeat; }
.receipt ul { list-style: none; margin: .8rem 0 0; padding: 0; } .receipt li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent); font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; }
.receipt .none { color: var(--sc-ink-soft); }
.receipt__tot { display: flex; align-items: baseline; justify-content: space-between; margin: 1rem 0 1.1rem; }
.receipt__tot b { padding: .05em .4em; border-radius: 10px; background: var(--sun); font: 800 2.2rem/1.15 var(--sc-font-display); font-stretch: 85%; font-variant-numeric: tabular-nums; }

/* dialog */
dialog { border: 0; border-radius: 30px; padding: 1.8rem; width: min(30rem, calc(100% - 2rem)); background: var(--sc-surface); color: var(--ink); box-shadow: 0 40px 80px -20px hsl(var(--sc-shadow-color) / .6); animation: dlg .4s var(--pop); }
dialog::backdrop { background: rgb(15 42 32 / .55); }
@keyframes dlg { from { opacity: 0; transform: translateY(30px) scale(.94); } }
dialog h2 { margin: 0 0 .6rem; font-size: 2.2rem; } dialog p { margin: 0 0 1.2rem; line-height: 1.5; color: var(--sc-ink-soft); }
.dlg__btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.ticket { display: grid; justify-items: center; text-align: center; gap: .5rem; }
.ticket .baggu { width: 8rem; height: 9rem; } .ticket__code { padding: .4rem 1rem; border-radius: 99px; background: var(--sun); font: 800 1.2rem/1 var(--sc-font-display); letter-spacing: .04em; }
.ticket .baggu__scan { opacity: 1; animation: tscan 1.6s ease-in-out infinite alternate; } @keyframes tscan { to { transform: translateY(66px); } }

/* dashboard */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.3rem; }
.dash > * { margin: 0 !important; }
.d-points { grid-column: span 8; } .d-wallet { grid-column: span 4; } .d-pick { grid-column: span 7; } .d-ledger { grid-column: span 5; }
@media (max-width: 980px) { .d-points, .d-wallet, .d-pick, .d-ledger { grid-column: 1 / -1; } }
.big { margin: 0; font: 800 clamp(4rem, 1rem + 9vw, 8.4rem)/.9 var(--sc-font-display); font-stretch: 78%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big small { font: 700 1.2rem var(--sc-font-text); letter-spacing: 0; margin-left: .5rem; color: color-mix(in oklab, var(--sc-canvas) 72%, transparent); }
.eq { margin: .6rem 0 0; font-weight: 700; color: var(--sun); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.6rem; }
.stat { padding: .9rem 1rem; border-radius: 20px; background: color-mix(in oklab, var(--sc-canvas) 10%, transparent); }
.stat b { display: block; font: 800 1.9rem/1 var(--sc-font-display); font-stretch: 84%; font-variant-numeric: tabular-nums; } .stat span { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--sc-canvas) 72%, transparent); }
.level { display: flex; align-items: center; gap: .9rem; margin-top: 1.3rem; font-weight: 700; font-size: .92rem; }
.level .meter { flex: 1; height: .8rem; border-radius: 99px; background: color-mix(in oklab, var(--sc-canvas) 14%, transparent); overflow: hidden; } .level .meter i { display: block; height: 100%; border-radius: inherit; background: var(--sun); transform-origin: 0 50%; transform: scaleX(var(--w, 0)); transition: transform .9s var(--sc-ease-out); }
.d-wallet .total { margin: .2rem 0 1rem; }
.links { display: grid; gap: .5rem; } .links a { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-radius: 18px; background: rgb(255 255 255 / .55); text-decoration: none; font-weight: 700; transition: transform .25s var(--pop), background .14s; } .links a:hover { transform: translateX(5px); background: #fff; }
.tl, .lg { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pk { display: grid; grid-template-columns: 2.8rem 1fr auto; gap: .9rem; align-items: center; padding: .7rem .8rem; border-radius: 20px; background: var(--paper2); animation: lin .4s var(--pop) both; }
.pk__ico { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--sky); } .pk.is-paid .pk__ico { background: var(--mint); }
.pk b { display: block; font-variant-numeric: tabular-nums; } .pk small { color: var(--sc-ink-soft); font-weight: 600; }
.pk__r { text-align: right; } .pk__r strong { display: block; font: 800 1.15rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: .15rem .6rem; border-radius: 99px; background: var(--sky); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .chip--paid { background: var(--mint); }
.pk .btn { margin-top: .5rem; }
.lg li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .2rem; border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); } .lg li b { display: block; } .lg small { color: var(--sc-ink-soft); font-weight: 600; }
.lg .pl { font: 800 1.05rem var(--sc-font-display); color: var(--leaf); font-variant-numeric: tabular-nums; white-space: nowrap; } .lg .mi { color: #B23A1E; }
.hello { display: flex; align-items: center; gap: .8rem; margin-bottom: .3rem; }
.tip { margin: 0 0 1.3rem; padding: .8rem 1.1rem; border-radius: 18px; background: #F2E6B6; font-weight: 600; }

/* rewards */
.bal { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem .5rem .6rem; border-radius: 99px; background: var(--sc-surface); font-weight: 700; box-shadow: 0 8px 20px -10px hsl(var(--sc-shadow-color) / .4); }
.bal b { font: 800 1.5rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; } .bal .coin { width: 2rem; height: 2rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0; }
.filters button { padding: .6rem 1.1rem; border: 0; border-radius: 99px; background: var(--sc-surface); font-weight: 700; cursor: pointer; transition: transform .24s var(--pop), background .14s; } .filters button:hover { transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--sc-canvas); }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.2rem; }
.rw { position: relative; display: grid; gap: .5rem; padding: 1rem 1rem 1.2rem; border-radius: 28px; background: var(--sc-surface); box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(var(--sc-shadow-color) / .08), 0 22px 36px -22px hsl(var(--sc-shadow-color) / .45); transition: transform .3s var(--pop); animation: lin .5s var(--pop) both; }
.rw:hover { transform: translateY(-6px) rotate(-.8deg); }
.rw__art { position: relative; aspect-ratio: 1.5; border-radius: 20px; background: var(--tint); } .rw__art svg { position: absolute; inset: 12%; width: 76%; height: 76%; transition: transform .4s var(--pop); } .rw:hover .rw__art svg { transform: rotate(-8deg) scale(1.1); }
.rw:nth-child(4n+1) { --tint: var(--mint); } .rw:nth-child(4n+2) { --tint: var(--sky); } .rw:nth-child(4n+3) { --tint: #F7CFC0; } .rw:nth-child(4n+4) { --tint: #F2E6B6; }
.rw .cat { font: 800 .72rem/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: .4rem; }
.rw h3 { font-size: 1.4rem; } .rw p { margin: 0; color: var(--sc-ink-soft); line-height: 1.4; font-size: .94rem; }
.rw__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; } .rw__pts { font: 800 1.3rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.rw.is-shake { animation: shake .45s; } .rw__stamp { position: absolute; right: .8rem; top: 1.2rem; padding: .4rem .9rem; border: 3px solid var(--tomato); border-radius: 12px; color: var(--tomato); font: 800 1rem/1 var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase; background: rgb(255 255 255 / .85); rotate: -10deg; animation: thunk .6s var(--pop) both; --r: -10deg; }
.code { font: 700 1.5rem/1 ui-monospace, monospace; letter-spacing: .12em; padding: .8rem 1rem; border-radius: 14px; background: var(--paper2); text-align: center; margin: 0 0 1.2rem; }

/* cash out */
.co { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; } @media (max-width: 920px) { .co { grid-template-columns: 1fr; } }
.avail { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .avail > div { flex: 1; min-width: 10rem; padding: 1rem 1.2rem; border-radius: 22px; background: var(--paper2); } .avail b { display: block; font: 800 2.2rem/1 var(--sc-font-display); font-stretch: 84%; font-variant-numeric: tabular-nums; } .avail span { font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
input[type="range"] { width: 100%; height: 2.2rem; accent-color: var(--ink); cursor: pointer; }
.pchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; } .pchips button { padding: .55rem 1rem; border: 0; border-radius: 99px; background: var(--paper2); font-weight: 700; cursor: pointer; transition: transform .24s var(--pop), background .14s; font-variant-numeric: tabular-nums; } .pchips button:hover { transform: translateY(-2px); background: var(--mint); }
.recv { margin: 1.4rem 0; padding: 1.2rem 1.4rem; border-radius: 24px; background: var(--sun); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .recv span { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; } .recv b { font: 800 clamp(2.4rem, 1rem + 2.6vw, 3.6rem)/1 var(--sc-font-display); font-stretch: 84%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.co .btn { width: 100%; }
.upi { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 2.2rem 1.6rem 1.8rem; border-radius: 40px; background: var(--ink); color: var(--sc-canvas); overflow: hidden; }
.upi__bag { width: 6.5rem; } .upi__from { font-weight: 600; opacity: .8; margin: 0; } .upi__amt { margin: 0; font: 800 3.6rem/1 var(--sc-font-display); font-stretch: 82%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .upi__to { margin: 0; padding: .4rem 1rem; border-radius: 99px; background: rgb(255 255 255 / .12); font-weight: 700; word-break: break-all; }
.upi__ok { display: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; place-items: center; background: var(--mint); color: var(--ink); } .upi__ok svg { width: 52%; }
.upi.is-done .upi__ok { display: grid; animation: pop .5s var(--pop); } .upi.is-done .upi__bag { display: none; }
.upi__utr { margin: 0; font: 600 .9rem/1.4 ui-monospace, monospace; opacity: .85; }
.demo { text-align: center; margin: 1rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: reduce) { .floaties svg, .rw, .pk, .line, .badge, .jar .coin { animation: none; } }

.hl { background: linear-gradient(transparent 58%, var(--sun) 58% 90%, transparent 90%); padding: 0 .08em; }
.tl .none { padding: 1rem 0; color: var(--sc-ink-soft); font-weight: 600; }
.receipt__tot b.is-gulp { animation: bump .4s var(--pop); } @keyframes bump { 40% { transform: scale(1.12); } }
.phead p svg { margin-right: .15rem; }

.preview-note { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1.5rem; padding: .8rem 1.1rem; border-radius: 18px; background: #F2E6B6; font-weight: 600; }
.preview-note b { padding: .15rem .65rem; border-radius: 99px; background: var(--ink); color: var(--sc-canvas); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.preview-note span { flex: 1 1 18rem; } .preview-note a { font-weight: 800; white-space: nowrap; }
.sticker { position: fixed; z-index: 70; left: 14px; bottom: 14px; padding: .55rem .9rem .6rem; border-radius: 16px; background: var(--sun); color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 700; line-height: 1.25; rotate: -3deg;
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 12px 22px -10px hsl(var(--sc-shadow-color) / .55); transition: transform .26s var(--pop); }
.sticker:hover { transform: rotate(2deg) scale(1.06); } .sticker span { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .sticker u { font-weight: 800; }
@media (max-width: 720px) { .sticker { display: none; } }

/* ranges: real rate cards quote low-high, so amounts are wider than a single number */
.tgroup { grid-column: 1 / -1; margin: .9rem 0 -.1rem; font: 800 .74rem/1 var(--sc-font-text); letter-spacing: .13em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tgroup:first-child { margin-top: 0; }
.tile .only { display: block; margin-top: .05rem; font-size: .66rem; font-weight: 800; letter-spacing: .03em; opacity: .85; }
.line__amt { min-width: 7.4rem; font-size: 1rem; }
.bagpanel .total { font-size: clamp(2rem, 1rem + 2.2vw, 3.1rem); letter-spacing: -.03em; }
.receipt__tot { flex-wrap: wrap; gap: .4rem; } .receipt__tot b { font-size: 1.55rem; }
.rules { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 16px; background: var(--paper2); font-size: .88rem; line-height: 1.5; color: var(--sc-ink-soft); }

/* the fixed decorative circles are positioned, so anything in normal flow paints beneath them unless it is layered too */
#foot { position: relative; z-index: 1; }