/* /buy: the shots wide on the left, the passes in a narrow glass column beside them, tips under the passes; each app
   lends its colour. pay.js draws the passes; their looks are here, under .buy-pay */
.buy { --b-hi: #c79bff; --b-mark: #a35cf0; --b-glow: rgba(163, 92, 240, .45); --b-edge: rgba(236, 230, 247, .07); --b-faint: #4d4361; --b-good: #8fdcab; }
.buy[data-app="lydia"] { --b-hi: #efe6d8; --b-mark: #e0544a; --b-glow: rgba(224, 84, 74, .4); }
.buy[data-app="ballerina"] { --b-hi: #f2f2f6; --b-mark: #e9e9ee; --b-glow: rgba(242, 242, 246, .3); }
.buy[data-app="moxie"] { --b-hi: #ffa6dc; --b-mark: #e04fb0; --b-glow: rgba(224, 79, 176, .4); }
main:has(> .buy) { max-width: 1240px; }
body:has(.buy) .top { max-width: 1240px; }
.buy button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

.buy-head { margin: 10px 0 26px; }
.buy-words { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 34px); }
.buy-words a { color: var(--b-faint); font-size: clamp(26px, 3.4vw, 38px); font-weight: 300; transition: color .3s, text-shadow .3s; }
.buy-words a:hover { color: var(--sy-dim); }
.buy-words a.on { color: var(--b-hi); text-shadow: 0 0 22px var(--b-glow); }
.buy-line { max-width: 640px; margin: 6px 0 0; color: var(--sy-dim); }
.buy-ver { margin-left: 4px; color: var(--b-hi); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }

.buy-deck { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }

/* the stage: frames cross-fade, the caption sits on the shot like a watermark */
.buy-stage { position: relative; margin: 0; aspect-ratio: var(--shape, 16 / 10); overflow: hidden; border: 1px solid var(--b-edge); border-radius: 12px; background: #08060d; box-shadow: 0 30px 80px -40px var(--b-glow); outline: none; }
.buy-stage:focus-visible { border-color: var(--b-mark); }
.buy-stage:has(img.buy-frame, video.buy-frame) { cursor: zoom-in; }
.buy-frames { position: absolute; inset: 0; }
.buy-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity .9s ease, transform 6.5s ease-out; }
.buy-frame.on { opacity: 1; transform: none; }
.buy-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(8, 6, 13, .86)); pointer-events: none; }
.buy-mark { position: absolute; left: clamp(16px, 3vw, 30px); bottom: clamp(14px, 2.6vw, 26px); z-index: 1; max-width: 70%; pointer-events: none; }
.buy-mark b { display: block; color: var(--sy-bright); font-size: clamp(22px, 3.2vw, 40px); font-weight: 300; line-height: 1.1; opacity: .88; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.buy-mark span { display: block; margin-top: 4px; color: var(--sy-text); font-size: 13px; opacity: .75; }
.buy-mark.in b, .buy-mark.in span { animation: buy-rise .7s ease both; }
.buy-mark.in span { animation-delay: .08s; }
@keyframes buy-rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.buy-count { position: absolute; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 2.6vw, 28px); z-index: 1; color: var(--sy-dim); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.buy-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 64px; margin-top: -32px; opacity: 0; transition: opacity .25s; }
.buy-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--sy-bright); stroke-width: 1.4; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
.buy-arrow:hover svg { stroke: var(--b-hi); }
.buy-arrow.prev { left: 6px; }
.buy-arrow.next { right: 6px; }
.buy-stage:hover .buy-arrow, .buy-stage:focus-within .buy-arrow { opacity: 1; }

.buy-ticks { display: flex; gap: 6px; margin-top: 12px; }
.buy-tick { display: flex; flex: 1; align-items: center; height: 14px; }
.buy-tick i { position: relative; display: block; width: 100%; height: 1px; overflow: hidden; background: var(--sy-line); }
.buy-tick i::after { content: ""; position: absolute; inset: 0; background: var(--b-hi); transform: scaleX(0); transform-origin: left; }
.buy-tick.done i::after { opacity: .35; transform: none; }
.buy-tick.on i::after, .buy.held .buy-tick.on i::after { transform: none; }
.buy-tick.on i.fill::after { animation: buy-fill var(--stand, 6s) linear both; }
.buy-tick:hover i { background: var(--b-faint); }
@keyframes buy-fill { from { transform: scaleX(0); } }

/* the passes: a narrow glass column, one row lit at a time, the ways to pay fading in once one is picked */
.buy-side { position: sticky; top: 20px; }
.buy-pay { padding: 18px 18px 14px; border: 1px solid var(--b-edge); border-radius: 12px; background: rgba(20, 15, 29, .55); backdrop-filter: blur(14px); font-size: 14px; }
.buy-wait { margin: 0; color: var(--sy-dim); }
.buy-pay .head { margin: 0 0 10px; color: var(--sy-dim); font-size: 12px; font-weight: 400; letter-spacing: .04em; }
.buy-pay .head small { display: block; color: var(--b-faint); font-size: 11px; letter-spacing: 0; }
.buy-pay .vipnow { margin: 0 0 12px; color: var(--sy-dim); font-size: 12px; }
.buy-pay .good { color: var(--b-good); }
.buy-pay .bad { color: #f07a9a; }
.buy-pay .dim { color: var(--sy-dim); }
.buy-pay .small { font-size: 12px; }
.buy-pay .passes { display: grid; margin: 0 0 4px; }
.buy-pay .pass { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 8px 0 8px 12px; text-align: left; opacity: .38; transition: opacity .9s ease, color .4s; }
.buy-pay .pass b { color: var(--sy-bright); font-weight: 400; }
.buy-pay .pass span { color: var(--sy-text); font-variant-numeric: tabular-nums; }
.buy-pay .pass s { margin-right: 4px; color: var(--sy-dim); }
.buy-pay .pass.held span { color: var(--sy-dim); }
.buy-pay .pass b i { display: block; color: var(--sy-dim); font-size: .85em; font-style: normal; }
.buy-pay .off { margin: 8px 0 0; color: var(--b-hi); }
.buy-pay .pass::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; border-radius: 2px; background: var(--b-hi); box-shadow: 0 0 8px var(--b-glow); transform: translateY(-50%); transition: height .5s ease; }
.buy-pay .pass.lit { opacity: 1; }
.buy-pay .pass.lit::before { height: 56%; }
.buy-pay .pass.lit span, .buy-pay .pass.on b { color: var(--b-hi); }
.buy-side:hover .pass { opacity: .7; }
.buy-side:hover .pass:hover, .buy-side:hover .pass.lit { opacity: 1; }
.buy-pay .pick { margin-top: 12px; }
.buy-pay .pick.arrive { animation: buy-arrive .6s ease both; }
@keyframes buy-arrive { from { opacity: 0; transform: translateY(-4px); } }
.buy-pay .ways { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.buy-pay .way { color: var(--sy-dim); transition: color .2s; }
.buy-pay .way:hover { color: var(--sy-bright); }
.buy-pay .way.on { color: var(--b-hi); }
.buy-pay .way small { display: none; }
.buy-pay .act { display: block; margin: 14px 0 6px; }
.buy-pay .act .lit { color: var(--b-hi); text-shadow: 0 0 14px var(--b-glow); }
.buy-pay .act .lit:hover { color: var(--sy-bright); }
.buy-pay .act span { display: block; color: var(--sy-dim); font-size: 11px; }
.buy-pay .gate p { margin: 8px 0 0; color: var(--sy-dim); }
.buy-pay .order { margin: 14px 0; padding: 14px 0 0; border-top: 1px solid var(--b-edge); }
.buy-pay .order h2 { margin: 0 0 6px; color: var(--sy-bright); font-size: 15px; font-weight: 400; }
.buy-pay .order h2 small { display: block; color: var(--sy-dim); font-size: 11px; }
.buy-pay .order p { margin: 4px 0; overflow-wrap: anywhere; }
.buy-pay .order code { color: var(--sy-bright); word-break: break-all; }
.buy-pay .order .code { color: var(--b-hi); letter-spacing: .06em; white-space: nowrap; }
.buy-pay .order .act a { margin-right: 14px; }
.buy-pay .order canvas.qr { display: block; width: 150px; height: 150px; margin: 10px auto 0; border-radius: 4px; image-rendering: pixelated; }
.buy-pay .order .paid { display: grid; gap: 6px; margin: 10px 0 0; }
.buy-pay .order input { box-sizing: border-box; width: 100%; padding: 7px 9px; border: 1px solid var(--sy-line); border-radius: 5px; background: var(--sy-bg); color: var(--sy-bright); font: inherit; font-size: 13px; }
.buy-pay .order input:focus { border-color: var(--b-mark); outline: none; }
.buy-pay .row { display: grid; margin: 6px 0; font-size: 12px; }
.buy-pay .row b { color: var(--sy-text); font-weight: 400; }
.buy-pay .row b small { margin-left: 6px; color: var(--sy-dim); }
.buy-pay .row span { color: var(--sy-dim); }
.buy-pay .state { font-style: normal; }
.buy-pay .state[data-state="paid"] { color: var(--b-good); }
.buy-pay .state[data-state="waiting"] { color: var(--b-hi); }
.buy-pay .terms { margin-top: 12px; color: var(--sy-dim); font-size: 12px; }
.buy-pay .terms summary { color: var(--b-faint); list-style: none; cursor: pointer; }
.buy-pay .terms summary:hover { color: var(--sy-dim); }
.buy-pay .terms p { margin: 6px 0 0; }

/* tips: a short log that decodes in, the oldest drifting off */
.buy-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 132px; overflow: hidden; margin-top: 16px; padding: 0 4px; color: var(--sy-dim); font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.buy-tip { flex-shrink: 0; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 1.2s ease, transform 1.4s ease, filter 1.4s ease; }
.buy-tip.in { opacity: .7; transform: none; }
.buy-tip.out { opacity: 0; filter: blur(4px); transform: translateY(-10px); }
.buy-tip i { color: var(--b-hi); font-style: normal; opacity: .7; }
.buy-tip span.off { opacity: 0; }
.buy-tip span.noise { opacity: .5; }

/* features */
.buy-what { margin-top: 36px; }
.buy-what h2 { margin: 0 0 6px; color: var(--sy-dim); font-size: 12px; letter-spacing: .04em; }
.buy-features { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 40px; margin: 0; padding: 0; list-style: none; }
.buy-features li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--b-edge); }
.buy-features li b { flex: none; width: 150px; color: var(--sy-bright); font-weight: 400; transition: color .2s; }
.buy-features li span { color: var(--sy-dim); font-size: 14px; }
.buy-features li[data-shot]:hover b, .buy-features li.on b { color: var(--b-hi); }
.buy-more { display: inline-block; margin-top: 14px; color: var(--sy-dim); font-size: 14px; }
.buy-more:hover { color: var(--b-hi); }
.buy-free { margin-top: 56px; color: var(--b-faint); font-size: 13px; }
.buy-free a { margin-left: 8px; color: var(--sy-dim); }
.buy-free a:hover { color: var(--sy-bright); }
.buy-bar { display: none; }

/* a card: an app with no shots of its own shows its command over its colour, its picture beside it */
.buy-card { display: flex; align-items: center; justify-content: space-between; padding: 0 7% 12%; background: radial-gradient(120% 90% at 85% 40%, var(--b-glow), transparent 60%), #0d0912; }
.buy-card code { color: var(--b-hi); font: 300 clamp(28px, 5vw, 64px) ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: -.02em; text-shadow: 0 0 40px var(--b-glow); }
.buy-card img { height: 72%; max-width: 46%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }

/* with the others */
.buy-with b a { color: var(--sy-bright); }
.buy-with b a:hover { color: var(--b-hi); }

/* the viewer: a shot whole over a dimmed page, nothing round, bare icons */
html.buy-viewing { overflow: hidden; }
.buy-view { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 4, 10, .94); color: var(--sy-text); backdrop-filter: blur(18px); }
.buy-view::backdrop { background: transparent; }
.buy-view[open] { animation: buy-view-in .25s ease both; }
@keyframes buy-view-in { from { opacity: 0; } }
.buy-view-pane { position: absolute; inset: 0 0 76px; display: grid; place-items: center; padding: 56px clamp(12px, 6vw, 72px) 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.buy-view-pane img, .buy-view-pane video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.buy-view-pane.zoom { display: block; padding: 0; }
.buy-view-pane.zoom img { max-width: none; max-height: none; cursor: zoom-out; }
.buy-view-mark { position: absolute; left: clamp(16px, 4vw, 40px); right: 110px; bottom: calc(18px + env(safe-area-inset-bottom)); margin: 0; }
.buy-view-mark b { display: block; color: var(--sy-bright); font-size: 18px; font-weight: 300; }
.buy-view-mark span { color: var(--sy-dim); font-size: 13px; }
.buy-view-mark em { position: fixed; right: clamp(16px, 4vw, 40px); bottom: calc(22px + env(safe-area-inset-bottom)); color: var(--sy-dim); font: normal 12px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.buy-view button { position: absolute; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.buy-view button svg { width: 24px; height: 24px; fill: none; stroke: var(--sy-dim); stroke-width: 1.4; transition: stroke .2s; }
.buy-view button:hover svg, .buy-view button:focus-visible svg { stroke: var(--b-hi); }
.buy-view-shut { top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 48px; height: 48px; }
.buy-view-step { top: 50%; width: 52px; height: 80px; margin-top: -40px; }
.buy-view-step.prev { left: 4px; }
.buy-view-step.next { right: 4px; }
.buy-view:has(.zoom) .buy-view-step { display: none; }

@media (prefers-reduced-motion: reduce) {
  .buy-view[open] { animation: none; }
  .buy-frame { transform: none; transition: opacity .5s; }
  .buy-pay .pass, .buy-tip { transition-duration: .3s; }
  .buy-mark.in b, .buy-mark.in span, .buy-pay .pick.arrive { animation: none; }
}

/* a phone: the stage full width, the passes a bar at the foot that opens as a sheet */
@media (max-width: 760px) {
  .buy-words { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .buy-words { gap: 0 16px; }
  .buy-words a { font-size: 22px; }
  .buy-deck { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .buy-stage { border-radius: 10px; }
  .buy-card code { font-size: 26px; }
  .buy-arrow, .buy-view .buy-view-step { display: none; }
  .buy-count { top: 12px; right: 14px; bottom: auto; }
  .buy-mark { max-width: 92%; }
  .buy-mark span { font-size: 12px; }
  .buy-side { position: static; }
  .buy-pay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 80vh; overflow-y: auto; scrollbar-width: thin; border-radius: 16px 16px 0 0; background: rgba(16, 12, 24, .97); padding: 20px 16px calc(64px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .buy.sheet .buy-pay { transform: none; }
  .buy-log { height: 112px; margin-top: 18px; }
  .buy-features { grid-template-columns: minmax(0, 1fr); }
  .buy-features li b { width: 120px; }
  .buy-free { margin-bottom: 72px; }
  .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--b-edge); background: rgba(12, 9, 19, .92); backdrop-filter: blur(14px); }
  .buy-bar span b { margin-right: 6px; color: var(--sy-bright); font-weight: 400; }
  .buy-bar span span { color: var(--sy-text); }
  .buy-bar a { color: var(--b-hi); text-shadow: 0 0 14px var(--b-glow); }
}