/* Chargezoom case study, part 2: the live printer (when case-chargezoom.js runs),
   the product shots with ledger captions, the results as gold coins, and small screens. */

/* ---------- live printer: the stage pins and the paper feeds up out of the slot ---------- */
.cz-print.is-live .cz-print__track { padding-bottom: 0; }
.cz-print.is-live .cz-print__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cz-print.is-live .cz-print__window { position: absolute; top: 0; left: 0; right: 0; bottom: var(--cz-slot, 30%); display: block; overflow: hidden; mask: linear-gradient(180deg, transparent, #000 14%); }
.cz-print.is-live .cz-paper { position: absolute; left: 50%; bottom: 0; margin-left: calc(min(460px, 100%) / -2); transform: translate3d(0, var(--cz-feed, 100%), 0); will-change: transform; }
.cz-print.is-live .cz-stamp { opacity: 0; transform: rotate(-11deg) scale(2.4); transition: opacity .25s ease, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.cz-print.is-stamped .cz-stamp { opacity: 1; transform: rotate(-11deg) scale(1); }
.cz-print.is-live .cz-printer { position: absolute; left: 50%; top: calc(100% - var(--cz-slot, 30%) - 10px); display: block; width: min(540px, calc(100% + 0px)); height: 104px; margin-left: calc(min(540px, 100%) / -2); border-radius: 24px 24px 30px 30px; background: linear-gradient(180deg, #ffffff, #d9e2f2); box-shadow: 0 30px 60px -30px rgb(19 35 60 / 45%), inset 0 2px 0 rgb(255 255 255 / 80%); }
.cz-printer__slot { position: absolute; top: 4px; left: 32px; right: 32px; height: 8px; border-radius: 6px; background: var(--cz-navy); box-shadow: inset 0 2px 3px rgb(0 0 0 / 60%); }
.cz-printer__led { position: absolute; left: 34px; bottom: 30px; width: 10px; height: 10px; border-radius: 50%; background: #b4bfd1; }
.cz-print.is-printing .cz-printer__led { background: var(--cz-blue); box-shadow: 0 0 10px var(--cz-blue); animation: cz-blink .8s steps(2) infinite; }
.cz-print.is-stamped .cz-printer__led { background: #7fb0ff; box-shadow: 0 0 12px #7fb0ff; animation: none; }
.cz-printer__label { position: absolute; right: 34px; bottom: 26px; font-family: var(--cz-mono); font-size: 12px; letter-spacing: .1em; color: #7a879c; }
.cz-readout { display: none; }
.cz-print.is-live .cz-readout { position: absolute; top: calc(100% - var(--cz-slot, 30%) - 10px); right: calc(50% + 300px); display: grid; justify-items: end; gap: 2px; margin: 0; font-family: var(--cz-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); }
.cz-readout b { font-family: var(--font); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--cz-blue); font-variant-numeric: tabular-nums; }
.cz-readout i { font-style: normal; }
/* The line just printed, repeated on the right so the stage is balanced. */
.cz-now { display: none; }
.cz-print.is-live .cz-now { position: absolute; bottom: calc(var(--cz-slot, 30%) + 10px); left: calc(50% + 300px); display: grid; gap: 8px; max-width: 260px; margin: 0; padding-left: 18px; border-left: 2px solid var(--cz-blue); }
.cz-now__k { font-family: var(--cz-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cz-blue); }
.cz-now b { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--cs-ink); }
.cz-now__note { font-size: 15px; line-height: 1.55; color: var(--cs-muted); }
.cz-print.is-stamped .cz-now { opacity: .55; transition: opacity .4s; }
@media (max-width: 1000px) { .cz-print.is-live .cz-now { display: none; } }
@keyframes cz-blink { 50% { opacity: .35; } }

/* ---------- product screens: see case-chargezoom-bill.css ---------- */
.cz-shots { background: linear-gradient(180deg, var(--cz-ice), var(--cz-sky)); }

/* ---------- results: gold coins on Chargezoom navy ---------- */
.cz-out { background: radial-gradient(80% 90% at 15% 0%, #1f4f9e, var(--cz-navy) 62%); color: var(--white); }
.cz-out .cs-lead { color: rgb(255 255 255 / 72%); }
.cz-out .cz-serif { color: #e3c17c; }
.cz-coins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 72px 0 0; padding: 0; list-style: none; }
.cz-coins li { display: grid; justify-items: center; gap: 18px; text-align: center; }
.cz-coin { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6e2a8, #d4a94a 45%, #a27a2c 100%); box-shadow: inset 0 0 0 6px rgb(255 255 255 / 18%), inset 0 0 0 9px rgb(120 86 26 / 35%), 0 18px 40px -16px rgb(0 0 0 / 60%); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 24px; color: #4a3510; }
.cz-coins p { max-width: 220px; margin: 0; font-size: 14.5px; line-height: 1.6; color: rgb(255 255 255 / 74%); }

@media (max-width: 1100px) {
  .cz-coins { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .cz-suite__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cz-print.is-live .cz-readout { display: none; }
  .cz-hero__grid, .cz-suite__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cz-word { font-size: 21px; }
  .cz-suite__list li { min-height: 0; gap: 18px; padding: 18px; font-size: 15px; }
  .cz-paper { padding: 32px 20px 36px; }
  .cz-items li { grid-template-columns: 22px minmax(0, 1fr); }
  .cz-items__tag { display: none; }
  .cz-stamp { font-size: 42px; }
  .cz-print.is-live .cz-stamp { transform: rotate(-11deg) scale(1.4); }
  .cz-print.is-stamped .cz-stamp { transform: rotate(-11deg) scale(1); }
  .cz-print.is-live .cz-printer { height: 88px; border-radius: 20px 20px 24px 24px; }
  .cz-printer__slot { left: 20px; right: 20px; }
  .cz-coins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; margin-top: 52px; }
  .cz-coins li:last-child { grid-column: 1 / -1; }
  .cz-coin { width: 104px; height: 104px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-print.is-printing .cz-printer__led { animation: none; }
}