/* Pair to Print: the polish layer. Glass, glow, motion. Same tokens and timing as app.css. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

:root { --glass: color-mix(in srgb, var(--panel) 80%, transparent); --glass-line: color-mix(in srgb, var(--ink) 10%, transparent); --glow-g: rgba(31,168,85,.38); --glow-m: rgba(227,21,122,.28); --glow-c: rgba(0,166,214,.28); --glow-y: rgba(255,214,10,.36); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: color-mix(in srgb, #18191B 78%, transparent); --glass-line: rgba(255,255,255,.09); --glow-g: rgba(31,168,85,.30); --glow-m: rgba(227,21,122,.22); --glow-c: rgba(0,166,214,.20); --glow-y: rgba(255,214,10,.14); } }

/* ---- one soft green glow at the top, nothing else ---- */
.mesh { position: fixed; left: 50%; top: -38vmax; width: 110vmax; height: 70vmax; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 13%, transparent), transparent); }
.mesh i, .grain { display: none; }
body { background: var(--paper); }

/* ---- glass surfaces ---- */
.top { background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--glass-line); transition: height var(--mid) var(--ease), box-shadow var(--mid) var(--ease), background var(--mid); }
.top.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); background: color-mix(in srgb, var(--paper) 72%, transparent); }
.top.scrolled .wrap { height: 54px; }
.top .wrap { transition: height var(--mid) var(--ease); }
/* Frosted fills, no backdrop-filter: many blur layers stutter on low-end phones and some in-app browsers. */
.card, .q-row, .step, .example, .trust { background: var(--glass); border-color: var(--glass-line); }
.live { background: var(--glass); position: relative; }
.live::before, .glossy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%); mix-blend-mode: soft-light; }
.nav.open { background: color-mix(in srgb, var(--paper) 94%, transparent); }

/* spotlight that follows the pointer on cards */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--mid); z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--green) 18%, transparent), transparent 60%); }
.spot:hover::after { opacity: 1; }

/* ---- buttons: sheen + magnetic ---- */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left 600ms var(--ease); pointer-events: none; }
.btn:hover::after { left: 130%; }
.btn.primary { background: linear-gradient(180deg, #27C062, var(--green) 55%, #189247); text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); animation: ripple 520ms var(--ease); pointer-events: none; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0 } }

/* ---- hero ---- */
.hero h1 .word { color: var(--ink); }
.hero h1 .dot { color: var(--green); display: inline-block; }
@keyframes blink { 0%, 70% { opacity: 1 } 71%, 100% { opacity: .15 } }
.hero h1 .word { display: inline-block; opacity: 0; transform: translateY(26px) rotate(2deg); animation: rise 700ms var(--spring) forwards; }
.hero h1 .word:nth-child(2) { animation-delay: 70ms } .hero h1 .word:nth-child(3) { animation-delay: 140ms }
@keyframes rise { to { opacity: 1; transform: none } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--body); letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); margin-bottom: 16px; }
.eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--glow-g); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.55) } 70% { box-shadow: 0 0 0 10px rgba(31,168,85,0) } 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0) } }
.stage { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow-g), transparent 65%); z-index: -1; animation: breathe 4s var(--ease) infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .8 } }
.stage .shadow { position: absolute; bottom: 4%; width: 52%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); filter: blur(2px); animation: shadow 3.2s var(--ease) infinite; }
@keyframes shadow { 50% { transform: scaleX(.92); opacity: .75 } }
.stage .hint { position: absolute; bottom: -4px; font: 600 12px var(--body); color: var(--muted); opacity: .8; }
.printer .pupil { transition: transform 140ms var(--ease); }

/* flying bills */
.bill-fly { position: fixed; z-index: 60; pointer-events: none; width: 64px; height: 32px; will-change: transform, opacity; }
.bill-fly svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

/* ---- ticker ---- */
.ticker { overflow: hidden; background: #111214; color: #FAFAF7; margin: 22px 0 4px; border-block: 1px solid var(--glass-line); }
.ticker .track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ticker span { font: 700 13px/1 var(--body); letter-spacing: .1em; padding: 12px 0; white-space: nowrap; }
.ticker span i { font-style: normal; margin: 0 20px; color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%) } }

/* ---- countdown: split-flap digits + ring ---- */
.flap { display: inline-flex; gap: 3px; font: 700 34px/1 var(--mono); color: var(--ink); }
.flap .d { position: relative; display: inline-block; width: .66em; height: 1.18em; overflow: hidden; border-radius: 7px; background: var(--soft); box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }
.flap .d b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; }
.flap .d b.out { animation: flapOut 280ms var(--ease) forwards; } .flap .d b.in { animation: flapIn 280ms var(--ease) forwards; }
.flap .d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.08); }
.flap .sep { align-self: center; animation: blink 1s steps(1) infinite; }
@keyframes flapOut { to { transform: translateY(-100%); opacity: 0 } } @keyframes flapIn { from { transform: translateY(100%); opacity: 0 } to { transform: none; opacity: 1 } }
.tile.count { position: relative; }
.ring { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; } .ring .bg { stroke: var(--line); } .ring .fg { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.tile .v.bump { animation: bump 420ms var(--spring); }
@keyframes bump { 30% { transform: scale(1.08); color: var(--green) } }
@media (max-width: 560px) { .flap { font-size: 27px } .ring { width: 26px; height: 26px; top: 10px; right: 10px } }

/* ---- queue polish ---- */
.q-row { position: relative; overflow: hidden; }
a.q-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); }
.q-row.lead { background: linear-gradient(110deg, color-mix(in srgb, var(--green) 8%, var(--glass)), var(--glass) 50%); }
.q-row.lead::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 3.6s var(--ease) infinite; pointer-events: none; }
@keyframes sheen { 60%, 100% { transform: translateX(100%) } }
.q-row .meter { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--green); border-radius: 0 3px 3px 0; transition: width var(--slow) var(--ease); opacity: .85; }
.q-row .delta { font: 700 11px var(--mono); margin-left: 6px; } .q-row .delta.up { color: var(--green) } .q-row .delta.down { color: var(--muted) }
.q-row.flash { animation: rowflash 900ms var(--ease); }
@keyframes rowflash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 45%, transparent) } 100% { box-shadow: 0 0 0 0 transparent } }
.q-row img { transition: transform var(--mid) var(--spring); } a.q-row:hover img { transform: rotate(-6deg) scale(1.08); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filters button { border: 1.5px solid var(--glass-line); background: var(--glass); color: var(--ink); border-radius: 999px; padding: 7px 13px; font: 700 13px var(--body); cursor: pointer; transition: all var(--fast) var(--ease); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qsearch { flex: 1 1 180px; min-width: 0; border: 1.5px solid var(--glass-line); background: var(--glass); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 500 14px var(--body); }
.qsearch:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-t); }

/* ---- receipts: tilt + gloss ---- */
.receipt { transform-style: preserve-3d; transition: transform var(--mid) var(--ease); will-change: transform; }
.receipt .gloss { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.7), transparent 45%); mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--mid); }
.receipt:hover .gloss { opacity: 1; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- steps: connector ---- */
.steps { position: relative; }
.step { transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(0,0,0,.4); }

/* ---- toast: glass ---- */
.toast { background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; padding: 11px 18px; }

@media (prefers-reduced-motion: reduce) {
  .mesh i, .ticker .track, .q-row.lead::before, .stage::before, .hero h1 .dot { animation: none !important; }
  .hero h1 .word { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- restraint: one accent ---- */
.tile.count .v { color: var(--ink); }
.badge.next { background: var(--green); color: #fff; border-color: transparent; }
.badge.bad { background: var(--soft); color: var(--ink); }
.badge.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D94A4A; }
.badge.warn { background: var(--soft); color: var(--ink); }
.step::before { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.live { box-shadow: 0 1px 0 var(--glass-line), 0 20px 40px -28px rgba(0,0,0,.35); border: 1px solid var(--glass-line); }
.q-row.lead { box-shadow: 0 0 0 1.5px var(--green), 0 14px 30px -20px rgba(31,168,85,.5); border-color: transparent; }
.btn { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px -10px rgba(0,0,0,.35); border-width: 1.5px; }
.btn:hover { box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.btn:active { box-shadow: 0 2px 6px -4px rgba(0,0,0,.4); }
.btn.small { box-shadow: none; }
.ca-chip:hover { box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); }
.stage .burst { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
@media (max-width: 560px) { .tile .s { white-space: normal; line-height: 1.3; } }
.xlink { padding: 8px 10px; } @media (max-width: 400px) { .xlink { display: none; } }

/* the CA, front and center */
.ca-big { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin-top: 18px; padding: 10px 10px 10px 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.ca-big:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
.ca-big:active { transform: translateY(1px); }
.ca-big .lbl { font: 800 12px var(--body); letter-spacing: .08em; color: var(--green-d); flex: none; }
.ca-big code { flex: 1; min-width: 0; font: 600 14px var(--mono); overflow-wrap: anywhere; }
.ca-big .cp { flex: none; background: var(--green); color: #fff; font: 700 13px var(--body); padding: 8px 12px; border-radius: 9px; }
@media (max-width: 560px) { .ca-big code { font-size: 12.5px; } }


.fees-live { display: flex; align-items: center; gap: 6px; color: var(--ink) !important; }
.fees-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.8s infinite; flex: none; }