/*
 * Paytrack product site (kirbyservice.net): Get paid's component (round 3,
 * plan.md), the scene in obj/part_paid.php, run by js/parts/part.js and
 * js/parts/paid.js. Everything is scoped under .pt-part-paid. Keep this file
 * ASCII.
 *
 * A tax invoice swings open in 3D with its real QR code; a floating phone,
 * turned towards it, scans the code and becomes the pay page; card and PayPal
 * pop in, one-off or recurring, pay later; the phone pays, PAID lands on the
 * invoice, the job pill flips to Paid, Ai hops. The runner sets pt-s0 .. pt-sN
 * (cumulative) and data-step (the current step). Each step's own beats are
 * timed by transition delays and short keyframes, only under :not(.is-jump):
 * paid.js sets .is-jump when a step is shown by a hover, a tap or the test
 * hook, so it lands on its end state at once. Only transform and opacity move.
 *
 * Spacing (Dimitar, 02/10/2026: "spacing on the components in pay not well
 * done, things overlap - pay in 4 does not fit"): the objects never touch, with
 * at least 8 px of air on desktop and 6 px on phones, their bobs included;
 * every text fits its box inside its padding; PAID lands in an empty part of
 * the invoice. Checked with tools/browser/paytrack_overlap_check.js.
 */

/* ---------- sizes: the base is the xl column (534 wide); others below ------- */
.pt-part-paid {
  position: relative;
  --pd-h: 330px;                                    /* the scene's height */
  --pd-if: 12px; --pd-iw: 16.5em; --pd-qr: 92px;    /* invoice: type size, width, code */
  --pd-ix: 0px; --pd-iy: 36px;                      /* invoice: place */
  --pd-jf: 11px; --pd-jx: 2px; --pd-jy: 0px;        /* job pill */
  --pd-pf: 11.5px; --pd-pw: 12.5em; --pd-ph: 22.6em;  /* phone: type size, width, height */
  --pd-px: 216px; --pd-py: 36px;                    /* phone: place */
  --pd-aw: 80px;                                    /* Ai's width (his box is 1.257 times as tall) */
  --pd-bw: 156px;                                   /* his bubble's width */
}

/* The stage has its own perspective: the layer's ancestors flatten 3D. */
.pt-part-paid .pt-part-stage { position: relative; height: var(--pd-h); perspective: 1100px; perspective-origin: 46% 42%; }
.pt-part-paid .pt-part-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }

/* ---------- the tax invoice: swings open on its left hinge ------------------- */
.pt-part-paid .pt-pd-inv { position: absolute; left: var(--pd-ix); top: var(--pd-iy); width: var(--pd-iw); font-size: var(--pd-if);
  transform-origin: 0 50%; transform: rotateY(-72deg); opacity: 0;
  transition: transform 1.3s var(--pt-spring), opacity .45s ease; }
.pt-part-paid.pt-s0 .pt-pd-inv { transform: rotateY(10deg) rotateX(2deg); opacity: 1; }
/* The card itself: raised, a thin clay band along the top (a background, so
   it follows the rounded corners), a soft static shadow. */
.pt-part-paid .pt-pd-paper { position: relative; padding: 1.25em 1.1em 1em; border-radius: .8em; color: var(--pt-bone); line-height: 1.3;
  background:
    linear-gradient(var(--pt-clay), var(--pt-clay)) 0 0 / 100% .36em no-repeat,
    linear-gradient(180deg, rgba(236, 230, 218, .05), rgba(236, 230, 218, 0) 45%),
    var(--pt-raised);
  box-shadow: 0 1.8em 2.6em -1.2em rgba(0, 0, 0, .75), 0 .2em .5em rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(236, 230, 218, .07); }
.pt-part-paid .pt-pd-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.pt-part-paid .pt-pd-kick { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-clay); }
.pt-part-paid .pt-pd-head b { font: 500 1.45em/1 var(--pt-head); letter-spacing: -.02em; color: var(--pt-bone); }
.pt-part-paid .pt-pd-lines { margin-top: .7em; line-height: 1.6; }
.pt-part-paid .pt-pd-row { display: flex; justify-content: space-between; gap: .8em; color: var(--pt-lichen); }
.pt-part-paid .pt-pd-row span:last-child { color: var(--pt-bone); font-variant-numeric: tabular-nums; }
.pt-part-paid .pt-pd-total { margin-top: .25em; padding-top: .3em; border-top: 1px solid rgba(236, 230, 218, .14); color: var(--pt-bone); font-weight: 700; }
.pt-part-paid .pt-pd-total span:last-child { font: 500 1.06em/1.5 var(--pt-head); letter-spacing: -.01em; }
/* The footer: the real code (img/qr/paid.svg, a scannable code; no address in
   this public file) and beside it an empty zone, where PAID lands; the
   caption under both. */
.pt-part-paid .pt-pd-code { display: flex; gap: .8em; margin-top: .8em; }
.pt-part-paid .pt-pd-qr { position: relative; flex: 0 0 auto; width: var(--pd-qr); height: var(--pd-qr); border-radius: 5px; overflow: hidden; }
.pt-part-paid .pt-pd-qr svg { display: block; width: 100%; height: 100%; }
.pt-part-paid .pt-pd-zone { position: relative; flex: 1 1 auto; }
.pt-part-paid .pt-pd-cap { margin-top: .45em; line-height: 1.3; color: var(--pt-lichen); }
/* A band of light that sweeps over the code while the phone reads it (an
   overlay that moves; the modules never change), and a ring when it is read.
   The ring sits in the quiet zone (3 of 35 modules), clear of the modules. */
.pt-part-paid .pt-pd-sweep { position: absolute; left: 0; right: 0; top: -40%; height: 180%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(157, 184, 159, 0) 30%, rgba(157, 184, 159, .5) 48%, rgba(236, 230, 218, .55) 50%, rgba(157, 184, 159, 0) 58%); }
.pt-part-paid .pt-pd-qr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--pt-sage); opacity: 0; }
/* PAID, stamped in the empty zone beside the code (never on a line or the code). */
.pt-part-paid .pt-pd-stamp { position: absolute; inset: 0; width: max-content; height: max-content; margin: auto;
  padding: .22em .4em .16em .52em; border: .12em solid currentColor; border-radius: .3em;
  font: 600 1.15em/1 var(--pt-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pt-sage);
  background: rgba(157, 184, 159, .1); box-shadow: inset 0 0 0 .1em var(--pt-raised), inset 0 0 0 .15em rgba(157, 184, 159, .45);
  opacity: 0; transform: rotate(-16deg) scale(2.1); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pt-part-paid.pt-s4 .pt-pd-stamp { opacity: 1; transform: rotate(-9deg); }

/* ---------- the job pill: Job 1043, Ready flips to Paid by itself ----------- */
.pt-part-paid .pt-pd-job { position: absolute; left: var(--pd-jx); top: var(--pd-jy); display: flex; align-items: center; gap: .6em;
  padding: .32em .34em .32em .85em; border-radius: 999px; font-size: var(--pd-jf); line-height: 1.25; white-space: nowrap;
  background: linear-gradient(rgba(236, 230, 218, .07), rgba(236, 230, 218, .07)), var(--pt-raised);
  box-shadow: 0 1em 1.6em -.7em rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(236, 230, 218, .09);
  --pd-jz: 24px; opacity: 0; transform: translateZ(var(--pd-jz)) translateY(.5em) scale(.88); transition: opacity .35s ease, transform .6s var(--pt-spring); }
.pt-part-paid.pt-s0 .pt-pd-job { opacity: 1; transform: translateZ(var(--pd-jz)); }
.pt-part-paid .pt-pd-job-n { font-weight: 600; color: var(--pt-bone); }
.pt-part-paid .pt-pd-st { display: grid; perspective: 9em; }
.pt-part-paid .pt-pd-st i { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .42em; padding: .2em .62em .2em .5em;
  border-radius: 999px; font-style: normal; font-weight: 700; transition: transform .5s var(--pt-spring), opacity .25s ease; }
.pt-part-paid .pt-pd-st i::before { content: ""; width: .48em; height: .48em; border-radius: 50%; background: currentColor; }
.pt-part-paid .pt-pd-st-ready { color: var(--pt-sand); background: rgba(217, 197, 154, .15); }
.pt-part-paid .pt-pd-st-paid { color: var(--pt-sage); background: rgba(157, 184, 159, .17); opacity: 0; transform: rotateX(-90deg); }
.pt-part-paid.pt-s4 .pt-pd-st-ready { opacity: 0; transform: rotateX(90deg); }
.pt-part-paid.pt-s4 .pt-pd-st-paid { opacity: 1; transform: none; }

/* ---------- the phone: floats, turned towards the invoice ------------------- */
.pt-part-paid .pt-pd-float { position: absolute; left: var(--pd-px); top: var(--pd-py); font-size: var(--pd-pf);
  transform-style: preserve-3d; transform: translateZ(28px); animation: pt-pd-bob 5.4s ease-in-out infinite; }
/* Its shadow on the floor shrinks and fades as it rises (same clock as the bob). */
.pt-part-paid .pt-pd-shadow { position: absolute; left: var(--pd-px); top: var(--pd-py); width: var(--pd-pw); height: 2.2em; font-size: var(--pd-pf);
  margin-top: calc(var(--pd-ph) - .6em); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); animation: pt-pd-shadow 5.4s ease-in-out infinite; }
@keyframes pt-pd-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes pt-pd-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .65; } }
.pt-part-paid .pt-pd-phone { position: relative; width: var(--pd-pw); height: var(--pd-ph); padding: .38em; border-radius: 1.75em;
  background: linear-gradient(160deg, rgba(236, 230, 218, .09), rgba(236, 230, 218, 0) 40%), var(--pt-raised);
  box-shadow: inset 0 0 0 1px rgba(236, 230, 218, .12), 0 1.6em 2.4em -1em rgba(0, 0, 0, .6);
  transform-style: preserve-3d; transform: rotateY(-17deg) rotateX(5deg) rotateZ(1.5deg); }
/* Its thickness: two plates behind it, seen at the edge it turns away. */
.pt-part-paid .pt-pd-phone::before,
.pt-part-paid .pt-pd-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pt-night); box-shadow: inset 0 0 0 1px rgba(236, 230, 218, .07); }
.pt-part-paid .pt-pd-phone::before { transform: translateZ(-.3em); }
.pt-part-paid .pt-pd-phone::after { transform: translateZ(-.6em); }
.pt-part-paid .pt-pd-screen { position: relative; height: 100%; border-radius: 1.42em; overflow: hidden;
  background: radial-gradient(120% 70% at 25% 0%, rgba(147, 183, 198, .12), rgba(147, 183, 198, 0) 60%), var(--pt-night); }
.pt-part-paid .pt-pd-notch { position: absolute; z-index: 4; left: 50%; top: .5em; width: 3.4em; height: .95em; margin-left: -1.7em; border-radius: 999px; background: rgba(0, 0, 0, .7); }
.pt-part-paid .pt-pd-ui { position: absolute; inset: 0; transition: opacity .3s ease; }

/* The camera view (step 0): the invoice's code in the viewfinder, a scan line, then "Open invoice". */
.pt-part-paid .pt-pd-cam { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(90% 55% at 50% 40%, rgba(236, 230, 218, .1), rgba(236, 230, 218, 0) 70%), #121A16; }
.pt-part-paid .pt-pd-feed { position: absolute; left: 50%; top: 40%; width: 50%; transform: translate(-50%, -50%) rotate(-4deg); }
.pt-part-paid .pt-pd-feed::before { content: ""; position: absolute; left: -26%; right: -40%; top: -24%; bottom: -46%; border-radius: .7em;
  background: linear-gradient(var(--pt-clay), var(--pt-clay)) 0 0 / 100% .3em no-repeat, var(--pt-raised); opacity: .9; }
.pt-part-paid .pt-pd-feed svg { position: relative; display: block; width: 100%; height: auto; }
.pt-part-paid .pt-pd-vf,
.pt-part-paid .pt-pd-beam { position: absolute; left: 50%; top: 40%; width: 68%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.pt-part-paid .pt-pd-vf { --c: var(--pt-bone);
  background:
    linear-gradient(var(--c), var(--c)) left top / 24% .17em, linear-gradient(var(--c), var(--c)) left top / .17em 24%,
    linear-gradient(var(--c), var(--c)) right top / 24% .17em, linear-gradient(var(--c), var(--c)) right top / .17em 24%,
    linear-gradient(var(--c), var(--c)) left bottom / 24% .17em, linear-gradient(var(--c), var(--c)) left bottom / .17em 24%,
    linear-gradient(var(--c), var(--c)) right bottom / 24% .17em, linear-gradient(var(--c), var(--c)) right bottom / .17em 24%;
  background-repeat: no-repeat; }
.pt-part-paid .pt-pd-vf-ok { --c: var(--pt-sage); opacity: 0; }
.pt-part-paid .pt-pd-beam { overflow: hidden; }
.pt-part-paid .pt-pd-beam i { position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(157, 184, 159, 0) 22%, rgba(157, 184, 159, .32) 48%, rgba(236, 230, 218, .95) 50%, rgba(157, 184, 159, 0) 51%); }
.pt-part-paid .pt-pd-open { position: absolute; left: 50%; bottom: 1.5em; padding: .4em .85em; border-radius: 999px; white-space: nowrap;
  background: var(--pt-bone); color: var(--pt-night); font-weight: 700; line-height: 1.2; opacity: 0; transform: translate(-50%, .6em) scale(.9); }

/* The pay page. Gone again once the Paid screen is up (step 4). */
.pt-part-paid .pt-pd-pay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5em;
  padding: 2.05em .6em .7em; line-height: 1.25; opacity: 0; transform: translateY(1.6em);
  transition: opacity .35s ease, transform .6s var(--pt-spring); }
.pt-part-paid.pt-s0 .pt-pd-pay { opacity: 1; transform: none; }
.pt-part-paid.pt-s4 .pt-pd-pay { opacity: 0; }
.pt-part-paid .pt-pd-pay-t { color: var(--pt-lichen); }
.pt-part-paid .pt-pd-pay-a { margin-top: -.3em; font: 500 1.5em/1.15 var(--pt-head); letter-spacing: -.02em; color: var(--pt-bone); }
.pt-part-paid .pt-pd-chips { display: flex; gap: .45em; }
/* The payment chips pop with a ring and a shine (the llm.php chip, in 3D
   terms: a scale pop, a ring that spreads and fades, a shine clipped to it).
   The effects sit in their own layer (.pt-pd-fx), the words in their own span. */
.pt-part-paid .pt-pd-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; padding: .42em .8em; border-radius: 999px;
  background: rgba(236, 230, 218, .09); color: var(--pt-bone); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: scale(.55) translateY(.3em); transition: opacity .25s ease, transform .6s var(--pt-spring); }
.pt-part-paid .pt-pd-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.pt-part-paid .pt-pd-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.pt-part-paid .pt-pd-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; opacity: 0;
  background: linear-gradient(100deg, rgba(236, 230, 218, 0), rgba(236, 230, 218, .6), rgba(236, 230, 218, 0)); }
.pt-part-paid .pt-pd-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .13em var(--pt-clay); opacity: 0; }
.pt-part-paid.pt-s1 .pt-pd-card,
.pt-part-paid.pt-s1 .pt-pd-pp { opacity: 1; transform: none; }
/* Card, picked to pay (step 4): a clay outline that stays. */
.pt-part-paid .pt-pd-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .13em var(--pt-clay); opacity: 0; transition: opacity .25s ease; }
.pt-part-paid.pt-s4 .pt-pd-card::after { opacity: 1; }
/* One-off or recurring: a two-way switch across the page's width, two equal
   halves so one thumb slides between them; Monthly shows while it is on
   Recurring, below it, in the room the pay later chip takes in the next step. */
.pt-part-paid .pt-pd-plan { position: relative; align-self: stretch;
  opacity: 0; transform: translateY(.4em) scale(.92); transform-origin: 0 50%; transition: opacity .3s ease, transform .55s var(--pt-spring); }
.pt-part-paid.pt-s2 .pt-pd-plan { opacity: 1; transform: none; }
.pt-part-paid .pt-pd-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: .4em; padding: .18em; border-radius: 999px; font-size: max(10px, .9em);
  background: rgba(236, 230, 218, .07); box-shadow: inset 0 0 0 1px rgba(236, 230, 218, .08); white-space: nowrap; }
.pt-part-paid .pt-pd-switch span { position: relative; padding: .34em .2em; text-align: center; font-weight: 600; color: var(--pt-bone); }
.pt-part-paid .pt-pd-thumb { position: absolute; left: .18em; top: .18em; bottom: .18em; width: calc((100% - .76em) / 2); border-radius: 999px;
  background: rgba(208, 154, 124, .4); box-shadow: inset 0 0 0 1px rgba(208, 154, 124, .55); transition: transform .5s var(--pt-spring); }
.pt-part-paid[data-step="2"] .pt-pd-thumb { transform: translateX(calc(100% + .4em)); }
.pt-part-paid .pt-pd-monthly { position: absolute; right: 1em; top: 100%; margin-top: .35em; font-weight: 600; color: var(--pt-sand);
  opacity: 0; transform: translateY(-.3em); transition: opacity .3s ease, transform .4s var(--pt-spring); }
.pt-part-paid[data-step="2"] .pt-pd-monthly { opacity: 1; transform: none; }
/* Pay later: the instalments on one line, never under 10px. */
.pt-part-paid .pt-pd-later { flex-direction: column; align-items: flex-start; align-self: stretch; gap: .15em; padding: .45em .65em; border-radius: .8em; transform-origin: 0 50%; }
.pt-part-paid .pt-pd-later b { font-weight: 600; }
.pt-part-paid .pt-pd-later small { display: block; font-size: max(10px, .9em); font-weight: 500; color: var(--pt-lichen); white-space: nowrap; }
.pt-part-paid.pt-s3 .pt-pd-later { opacity: 1; transform: none; }
.pt-part-paid .pt-pd-btn { position: relative; align-self: stretch; margin-top: auto; padding: .58em .5em; border-radius: .8em; text-align: center;
  background: var(--pt-clay); color: var(--pt-night); font-weight: 700; }
/* A finger's tap: a ring that spreads from the middle and fades. */
.pt-part-paid .pt-pd-tap { position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%;
  border: .14em solid var(--pt-bone); background: rgba(236, 230, 218, .18); opacity: 0; }
/* Paid: a sage tick over the pay page. */
.pt-part-paid .pt-pd-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  padding-bottom: 1em; line-height: 1.25;
  background: radial-gradient(85% 45% at 50% 42%, rgba(157, 184, 159, .17), rgba(157, 184, 159, 0) 70%), var(--pt-night);
  opacity: 0; transform: translateY(.8em) scale(.97); transition: opacity .35s ease, transform .6s var(--pt-spring); }
.pt-part-paid.pt-s4 .pt-pd-done { opacity: 1; transform: none; }
.pt-part-paid .pt-pd-tick { width: 3.7em; height: 3.7em; margin-bottom: .35em; overflow: visible; transform: scale(.4); transition: transform .7s var(--pt-spring); }
.pt-part-paid.pt-s4 .pt-pd-tick { transform: none; }
.pt-part-paid .pt-pd-tick circle { fill: rgba(157, 184, 159, .16); stroke: var(--pt-sage); stroke-width: 2.4; }
.pt-part-paid .pt-pd-tick path { fill: none; stroke: var(--pt-sage); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pt-part-paid .pt-pd-done b { font: 500 1.55em/1.1 var(--pt-head); letter-spacing: -.01em; color: var(--pt-sage); }
.pt-part-paid .pt-pd-done span { color: var(--pt-lichen); }

/* ---------- Ai and his line --------------------------------------------------- */
/* xl and up: Ai stands at the bottom right, his bubble above him. His bob here
   only rises 6 px, and the bubble keeps clear of it. */
.pt-part-paid .pt-pd-ai { position: absolute; right: 6px; bottom: 0; width: var(--pd-aw); transform: translateZ(34px); pointer-events: none; }
.pt-part-paid .pt-pd-ai .pt-char { width: 100%; }
.pt-part-paid .pt-pd-ai .pt-char-ai { animation-name: pt-pd-hover; }
@keyframes pt-pd-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pt-part-paid .pt-pd-say { position: absolute; right: 0; bottom: calc(var(--pd-aw) * 1.257 + 18px); width: var(--pd-bw); display: flex; justify-content: flex-end; transform: translateZ(40px); }
/* His bubble pops in as each run starts (site.css draws it), its tail down to him. */
.pt-part-paid .pt-bubble { margin: 0; max-width: 100%; font-size: 14px; border-radius: 18px 18px 6px 18px; transform-origin: 80% 100%; }
.pt-part-paid .pt-bubble::before { left: auto; right: 24px; bottom: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pt-layer.is-current .pt-part-paid .pt-bubble { opacity: 0; transform: translateY(8px) scale(.94); }
.pt-layer.is-current .pt-part-paid.pt-s0 .pt-bubble { opacity: 1; transform: none; }
html:not(.js) .pt-part-paid .pt-bubble { opacity: 1; transform: none; }

/* ---------- the steps, under the scene: small floating pills ------------------ */
.pt-part-paid .pt-part-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pt-part-paid .pt-part-steps li { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px;
  border-radius: 999px; background: rgba(236, 230, 218, .06); color: var(--pt-bone); font-size: 13px; font-weight: 500; line-height: 1.3; cursor: default;
  transition: transform .35s var(--pt-spring); animation: pt-pd-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.2s); }
.pt-part-paid .pt-part-steps li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--pt-clay);
  box-shadow: 0 0 0 3px rgba(208, 154, 124, .14), 0 0 9px 1px rgba(208, 154, 124, .75); opacity: .5; transition: opacity .3s ease, transform .4s var(--pt-spring); }
.pt-part-paid .pt-part-steps li::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgba(236, 230, 218, .08); opacity: 0; transition: opacity .3s ease; }
.pt-part-paid .pt-part-steps li span { opacity: .74; transition: opacity .3s ease; }
.pt-part-paid .pt-part-steps li.is-on { transform: translateY(-2px); }
.pt-part-paid .pt-part-steps li.is-on::before { opacity: 1; transform: scale(1.2); }
.pt-part-paid .pt-part-steps li.is-on::after,
.pt-part-paid .pt-part-steps li.is-on span { opacity: 1; }
.pt-part-paid .pt-part-steps li:focus-visible { outline: 2px solid var(--pt-sand); outline-offset: 2px; }
@keyframes pt-pd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* ---------- the beats of each step (the runner; never on a jump) ------------- */
/* 0, scan: the invoice swings open, the phone aims at it, its camera reads the
   code while a band of light sweeps the real one, "Open invoice", the pay page. */
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-job { transition-delay: .55s; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-phone { animation: pt-pd-aim 3.1s ease-in-out .3s both; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-cam { animation: pt-pd-cam 2.7s ease .55s both; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-beam i { animation: pt-pd-beam .62s ease-in-out 1.05s 2; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-sweep { animation: pt-pd-sweep .62s ease-in-out 1.05s 2; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-vf-ok { animation: pt-pd-ok .5s ease-out 2.28s both; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-qr::after { animation: pt-pd-flash 1s ease-out 2.28s; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-open { animation: pt-pd-open .5s var(--pt-spring) 2.36s both; }
.pt-part-paid:not(.is-jump)[data-step="0"] .pt-pd-pay { transition-delay: 2.95s; }
@keyframes pt-pd-aim {
  0%, 100% { transform: rotateY(-17deg) rotateX(5deg) rotateZ(1.5deg); }
  20%, 80% { transform: translateX(-.9em) translateZ(.6em) rotateY(-29deg) rotateX(8deg) rotateZ(-2deg); }
}
@keyframes pt-pd-cam { 0% { opacity: 0; } 11%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pt-pd-beam { 0% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 1; transform: translateY(50%); } }
@keyframes pt-pd-sweep { 0% { opacity: 1; transform: translateY(-36%); } 100% { opacity: 1; transform: translateY(36%); } }
@keyframes pt-pd-ok { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pt-pd-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pt-pd-open { 0% { opacity: 0; transform: translate(-50%, .6em) scale(.9); } 100% { opacity: 1; transform: translate(-50%, 0); } }

/* 1, card and PayPal: one, then the other, each with its ring and shine. */
.pt-part-paid:not(.is-jump)[data-step="1"] .pt-pd-pp { transition-delay: .38s; }
.pt-part-paid[data-step="1"] .pt-pd-card .pt-pd-ring { animation: pt-pd-ring .75s ease-out .1s; }
.pt-part-paid[data-step="1"] .pt-pd-card .pt-pd-shine::after { animation: pt-pd-shine .8s ease-out .18s; }
.pt-part-paid[data-step="1"] .pt-pd-pp .pt-pd-ring { animation: pt-pd-ring .75s ease-out .48s; }
.pt-part-paid[data-step="1"] .pt-pd-pp .pt-pd-shine::after { animation: pt-pd-shine .8s ease-out .56s; }
.pt-part-paid.is-jump[data-step="1"] .pt-pd-pp .pt-pd-ring { animation-delay: .2s; }
.pt-part-paid.is-jump[data-step="1"] .pt-pd-pp .pt-pd-shine::after { animation-delay: .28s; }
@keyframes pt-pd-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22, 1.7); } }
@keyframes pt-pd-shine { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(340%); } }

/* 2, one-off or recurring: the switch shows, then slides to Recurring, Monthly shows. */
.pt-part-paid:not(.is-jump)[data-step="2"] .pt-pd-thumb { transition-delay: .75s; }
.pt-part-paid:not(.is-jump)[data-step="2"] .pt-pd-monthly { transition-delay: 1.05s; }

/* 3, pay later: back to one-off, and the pay later chip pops. */
.pt-part-paid:not(.is-jump)[data-step="3"] .pt-pd-later { transition-delay: .3s; }
.pt-part-paid[data-step="3"] .pt-pd-later .pt-pd-ring { animation: pt-pd-ring-wide .8s ease-out .4s; }
.pt-part-paid[data-step="3"] .pt-pd-later .pt-pd-shine::after { animation: pt-pd-shine 1s ease-out .48s; }
@keyframes pt-pd-ring-wide { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1, 1.35); } }

/* 4, paid: a tap on Card, a press on Pay, the tick (the pay page goes under
   it), PAID lands with a thump, the job flips to Paid by itself (and Ai hops,
   paid.js). */
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-card::after { transition-delay: .3s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-card .pt-pd-tap { animation: pt-pd-tap .6s ease-out .22s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-btn .pt-pd-tap { animation: pt-pd-tap .6s ease-out .95s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-btn { animation: pt-pd-press .34s ease-out .97s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-done { transition-delay: 1.35s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-pay { transition-delay: 1.75s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-tick { transition-delay: 1.45s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-stamp { transition: none; animation: pt-pd-stamp .55s cubic-bezier(.45, 0, .7, 1) 1.85s both; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-paper { animation: pt-pd-thump .4s ease-out 2.12s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-st-ready { transition-delay: 2.4s; }
.pt-part-paid:not(.is-jump)[data-step="4"] .pt-pd-st-paid { transition-delay: 2.55s; }
@keyframes pt-pd-tap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pt-pd-press { 0%, 100% { transform: none; } 40% { transform: scale(.93); } }
@keyframes pt-pd-stamp {
  0% { opacity: 0; transform: rotate(-20deg) scale(2.3); }
  50% { opacity: 1; transform: rotate(-8deg) scale(.92); }
  75% { opacity: 1; transform: rotate(-9.5deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@keyframes pt-pd-thump { 0%, 100% { transform: none; } 35% { transform: translateY(.2em) scale(.985); } }

/* ---------- the rewind: the moving parts fade, the invoice swings shut -------- */
.pt-part-paid.is-rewind .pt-pd-inv { transform: rotateY(-72deg); opacity: 0; transition: transform .45s cubic-bezier(.5, 0, .9, .4), opacity .35s ease .05s; }
.pt-part-paid.is-rewind .pt-pd-job { opacity: 0; transform: translateZ(var(--pd-jz)) scale(.88); transition: opacity .3s ease, transform .4s ease; }
.pt-part-paid.is-rewind .pt-pd-ui { opacity: 0; }
.pt-layer.is-current .pt-part-paid.is-rewind .pt-bubble { opacity: 0; transition: opacity .3s ease, transform .3s ease; }

/* Nothing loops in a layer that is not the one in front. */
.pt-layer:not(.is-current) .pt-part-paid .pt-pd-float,
.pt-layer:not(.is-current) .pt-part-paid .pt-pd-shadow,
.pt-layer:not(.is-current) .pt-part-paid .pt-part-steps li { animation-play-state: paused; }

/* ---------- other sizes --------------------------------------------------------- */
/* xxl column (624 wide, 1440 and up), and the tablet (696 wide, below the copy). */
@media (min-width: 1400px), (min-width: 768px) and (max-width: 991.98px) {
  .pt-part-paid {
    --pd-h: 398px;
    --pd-if: 14px; --pd-qr: 108px; --pd-iy: 40px;
    --pd-jf: 12.5px;
    --pd-pf: 13.5px; --pd-px: 250px; --pd-py: 40px;
    --pd-aw: 96px; --pd-bw: 184px;
  }
  .pt-part-paid .pt-part-steps { margin-top: 16px; }
  .pt-part-paid .pt-part-steps li { font-size: 14px; padding: 7px 14px 7px 11px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pt-part-paid .pt-part-stage { max-width: 640px; }
}
/* lg column (444 wide) and small tablets: no room beside the phone for the
   bubble, so it spans the top, Ai stands under its right end, the phone under
   its left part. */
@media (min-width: 992px) and (max-width: 1199.98px), (min-width: 576px) and (max-width: 767.98px) {
  .pt-part-paid {
    --pd-h: 312px;
    --pd-if: 11px; --pd-iw: 17em; --pd-qr: 88px; --pd-iy: 34px;
    --pd-jf: 10.5px;
    --pd-pf: 11px; --pd-ph: 20.6em; --pd-px: 205px; --pd-py: 74px;
    --pd-aw: 58px;
  }
  .pt-part-paid .pt-pd-say { left: var(--pd-px); right: 0; top: 0; bottom: auto; width: auto; }
  .pt-part-paid .pt-pd-ai { top: 74px; bottom: auto; }
  .pt-part-paid .pt-bubble { font-size: 13px; padding: 9px 13px; }
  .pt-part-paid .pt-part-steps { margin-top: 12px; gap: 7px; }
  .pt-part-paid .pt-part-steps li { font-size: 12.5px; padding: 5px 12px 5px 9px; }
}

/* Phones (320 to 350 wide, about 285 px of room on a short one): no room for
   the bubble, so Ai stands alone above the phone and the job pill above the
   invoice; the steps become one caption line. */
@media (max-width: 575.98px) {
  .pt-part-paid {
    --pd-h: 250px;
    --pd-if: 10px; --pd-iw: 15em; --pd-qr: 64px; --pd-iy: 28px;
    --pd-jf: 10px; --pd-jx: 0px;
    --pd-pf: 10px; --pd-pw: 13.4em; --pd-ph: 17.2em; --pd-py: 76px;
    --pd-aw: 50px;
  }
  .pt-part-paid .pt-part-stage { perspective: 900px; }
  .pt-part-paid .pt-pd-paper { padding: 1.1em .95em .8em; }
  .pt-part-paid .pt-pd-kick { letter-spacing: .08em; }
  .pt-part-paid .pt-pd-lines { margin-top: .5em; line-height: 1.45; }
  .pt-part-paid .pt-pd-code { margin-top: .6em; gap: .8em; }
  .pt-part-paid .pt-pd-cap { margin-top: .4em; }
  .pt-part-paid .pt-pd-job { --pd-jz: 14px; }
  .pt-part-paid .pt-pd-float,
  .pt-part-paid .pt-pd-shadow { left: auto; right: 4px; }
  .pt-part-paid .pt-pd-float { transform: translateZ(18px); animation-name: pt-pd-bob-sm; }
  .pt-part-paid .pt-pd-pay { gap: .45em; padding: 2em .6em .6em; }
  .pt-part-paid .pt-pd-pay-a { display: none; }               /* no room: the button says the amount */
  .pt-part-paid .pt-pd-ai { right: 46px; bottom: auto; top: 0; transform: translateZ(8px); }   /* centred over the phone: 4 + (134 - 50) / 2 */
  .pt-part-paid .pt-pd-say { display: none; }
}
@keyframes pt-pd-bob-sm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* The phone caption: five dots and the lit step's line (with JS; without it the
   pills above stay, all five). */
@media (max-width: 575.98px) {
  html.js .pt-part-paid .pt-part-steps { flex-wrap: nowrap; gap: 0; height: 26px; margin-top: 6px; }
  html.js .pt-part-paid .pt-part-steps li { flex: 0 0 20px; height: 26px; padding: 0; justify-content: center; background: none; animation: none; transform: none; }
  html.js .pt-part-paid .pt-part-steps li::after { display: none; }
  html.js .pt-part-paid .pt-part-steps li span { position: absolute; left: calc((5 - var(--i, 0)) * 20px + 4px); top: 0; line-height: 26px; font-size: 13px; white-space: nowrap;
    opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .3s ease, transform .45s var(--pt-spring); }
  html.js .pt-part-paid .pt-part-steps li.is-on span,
  html.js .pt-part-paid[data-step="-1"] .pt-part-steps li[data-step-for="0"] span { opacity: 1; transform: none; pointer-events: auto; }
}