/* /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; }
/* the app names, and at their right the switch between one app's page and every plan */
.buy-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; }
.buy-top .buy-words { min-width: 0; }
.buy-switch { display: flex; flex: none; align-items: center; gap: 10px; color: var(--sy-dim); font-size: 13px; letter-spacing: .02em; transition: color .25s; }
.buy-switch:hover { color: var(--b-hi); }
.buy-switch-ico { position: relative; display: grid; width: 22px; height: 22px; }
.buy-switch-ico i { display: block; border: 1.4px solid currentColor; border-radius: 2px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.buy-switch-ico.grid { grid-template-columns: 1fr 1fr; gap: 3px; }
.buy-switch-ico.grid i { animation: buy-tile 4.8s ease-in-out infinite; }
.buy-switch-ico.grid i:nth-child(2) { animation-delay: .6s; }
.buy-switch-ico.grid i:nth-child(3) { animation-delay: 1.8s; }
.buy-switch-ico.grid i:nth-child(4) { animation-delay: 1.2s; }
@keyframes buy-tile { 0%, 30%, 100% { opacity: .55; } 12% { opacity: 1; border-color: var(--b-hi); box-shadow: 0 0 8px var(--b-glow); } }
.buy-switch:hover .buy-switch-ico.grid i:nth-child(1) { transform: translate(-2px, -2px); }
.buy-switch:hover .buy-switch-ico.grid i:nth-child(2) { transform: translate(2px, -2px); }
.buy-switch:hover .buy-switch-ico.grid i:nth-child(3) { transform: translate(-2px, 2px); }
.buy-switch:hover .buy-switch-ico.grid i:nth-child(4) { transform: translate(2px, 2px); }
/* three frames, the front one sliding through like the slideshow it opens */
.buy-switch-ico.shots { width: 26px; }
.buy-switch-ico.shots i { position: absolute; inset: 3px 6px 3px 0; background: var(--sy-bg); }
.buy-switch-ico.shots i:nth-child(2) { inset: 5px 3px 5px 3px; opacity: .6; z-index: 1; }
.buy-switch-ico.shots i:nth-child(3) { inset: 7px 0 7px 6px; opacity: .35; }
.buy-switch-ico.shots i:nth-child(1) { z-index: 2; animation: buy-frame 4.2s ease-in-out infinite; }
@keyframes buy-frame { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(-4px); opacity: .2; } 90% { transform: translateX(3px); opacity: 1; border-color: var(--b-hi); } }
.buy-switch:hover .buy-switch-ico.shots i:nth-child(1) { transform: translateX(-3px); }
.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-radius: 14px; background: linear-gradient(180deg, rgba(28, 20, 40, .28), rgba(20, 15, 29, .12)); backdrop-filter: blur(10px); 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; }
/* bundles in the passes: a name, its parts' marks, its lengths side by side, each price a pass to pick */
.buy-pay .bundles-head { margin-top: 18px; }
.buy-pay .bundles { display: grid; gap: 10px; }
.buy-pay .bundle p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 3px; }
.buy-pay .bundle p b { color: var(--sy-bright); font-weight: 400; }
.buy-pay .bundle em { color: var(--b-hi); font-size: 11px; font-style: normal; }
.buy-pay .parts { display: inline-flex; gap: 3px; }
.buy-pay .parts img { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; opacity: .85; }
.buy-pay .prices { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.buy-pay .price { display: grid; text-align: left; color: var(--sy-text); font-variant-numeric: tabular-nums; opacity: .7; transition: opacity .25s, color .25s; }
.buy-pay .price small { color: var(--b-faint); font-size: 10.5px; }
.buy-pay .price s { margin-right: 3px; color: var(--sy-dim); }
.buy-pay .price:hover { opacity: 1; }
.buy-pay .price.on { color: var(--b-hi); opacity: 1; text-shadow: 0 0 12px var(--b-glow); }
.buy-pay .price.held { color: var(--sy-dim); font-size: 12px; }
.buy-pay .bundle.fits b { color: var(--b-hi); }

/* 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); }
}

/* the plans: /plans and /plans/<app>, and the same detail under /buy's features. nothing here wears an edge: a card is
   its mark, its words and a breath of its app's color behind it */
.buy[data-app="catalina"] { --b-hi: #e6dcf4; --b-mark: #b26be8; --b-glow: rgba(178, 107, 232, .4); }
.plan-compare .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.plan-mark { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; filter: drop-shadow(0 4px 14px var(--b-glow)); }
.plan-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.plan-app { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 16px 14px; border-radius: 16px; background: radial-gradient(120% 70% at 0 0, color-mix(in srgb, var(--b-mark) 9%, transparent), transparent 70%); color: var(--sy-text); transition: background .4s; }
.plan-app:hover { background: radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--b-mark) 16%, transparent), transparent 75%); }
.plan-app-head { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; color: inherit; }
.plan-app-head .plan-mark { grid-row: span 2; }
.plan-app-head b { color: var(--sy-bright); font-size: 22px; font-weight: 300; line-height: 1.1; transition: color .25s; }
.plan-app-head:hover b { color: var(--b-hi); }
.plan-app > small { color: var(--sy-dim); font-size: 13px; overflow-wrap: anywhere; }
.plan-from { color: var(--b-hi); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.plan-more { margin-top: auto; padding-top: 6px; color: var(--b-faint); font-size: 12px; }
.plan-more:hover { color: var(--b-hi); }
.plan-app[data-app="veromos"], .plan-bundle { --b-hi: #c79bff; --b-mark: #a35cf0; --b-glow: rgba(163, 92, 240, .45); }
.plan-app[data-app="ballerina"] { --b-hi: #f2f2f6; --b-mark: #e9e9ee; --b-glow: rgba(242, 242, 246, .3); }
.plan-app[data-app="lydia"] { --b-hi: #efe6d8; --b-mark: #e0544a; --b-glow: rgba(224, 84, 74, .4); }
.plan-app[data-app="moxie"] { --b-hi: #ffa6dc; --b-mark: #e04fb0; --b-glow: rgba(224, 79, 176, .4); }
.plan-app[data-app="catalina"] { --b-hi: #e6dcf4; --b-mark: #b26be8; --b-glow: rgba(178, 107, 232, .4); }
/* a time to press: its length, its price, and "see it" coming in under the pointer */
.plan-times { display: grid; margin-top: 4px; }
.plan-time { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: baseline; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--sy-text); font-size: 14px; transition: background .25s, color .25s; }
.plan-time span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-time b { color: var(--sy-bright); font-weight: 400; font-variant-numeric: tabular-nums; }
.plan-time i { color: var(--b-hi); font-size: 11px; font-style: normal; text-align: right; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.plan-time.lit b { color: var(--b-hi); }
.plan-time:hover { background: color-mix(in srgb, var(--b-mark) 9%, transparent); }
.plan-time:hover b { color: var(--b-hi); }
.plan-time:hover i { opacity: 1; transform: none; }
.plan-one { display: grid; grid-template-columns: auto minmax(0, 420px); gap: 22px; align-items: start; }
.plan-one .plan-mark { width: 52px; height: 52px; border-radius: 12px; }
.plan-act { display: flex; gap: 22px; margin: 18px 0 0; font-size: 14px; }
.plan-act a { color: var(--sy-dim); }
.plan-act a:hover { color: var(--sy-bright); }
.plan-act a.lit { color: var(--b-hi); text-shadow: 0 0 14px var(--b-glow); }
/* bundles: a name, its parts' marks, why they go together, and its lengths to press */
.plan-bundles h2 small, .vip-try h2 small { margin-left: 8px; color: var(--b-faint); font-weight: 400; letter-spacing: 0; }
.plan-bundle-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px 28px; }
.plan-bundle { display: grid; gap: 2px; min-width: 0; padding: 12px 0; }
.plan-bundle p { display: flex; align-items: center; gap: 10px; margin: 0; }
.plan-bundle p b { color: var(--sy-bright); font-size: 17px; font-weight: 300; }
.plan-parts { display: inline-flex; gap: 4px; }
.plan-parts .plan-mark { width: 18px; height: 18px; border-radius: 5px; filter: none; }
/* an app mark that names its app: hover on a mouse, a tap on a phone */
.part-tip { position: relative; display: inline-flex; cursor: help; outline: none; }
.part-tip .tip { position: absolute; left: -4px; bottom: calc(100% + 8px); z-index: 5; display: grid; gap: 1px; width: max-content; max-width: 170px; padding: 6px 9px; border-radius: 8px; background: rgba(16, 12, 24, .92); backdrop-filter: blur(10px); color: var(--sy-dim); font-size: 11.5px; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .2s, transform .2s; }
.part-tip .tip b { color: var(--sy-bright); font-size: 12.5px; font-weight: 400; }
/* moxie's mark is a small figure in a wide frame: drawn closer so it reads at a mark's size */
.part-tip img[src*="moxie_site"] { transform: scale(1.7) translateY(4%); }
.part-tip:hover .tip, .part-tip:focus-visible .tip, .part-tip.open .tip { opacity: 1; transform: none; }
/* vip on your own name: the name tried on at the left, every knob at the right, all of it borderless */
.vip-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; margin: 8px 0 6px; }
.vip-stage { position: sticky; top: 20px; display: grid; align-content: center; min-height: 220px; padding: 26px 24px; border-radius: 18px; background: radial-gradient(90% 80% at 20% 30%, rgba(224, 76, 216, .1), transparent 70%), rgba(16, 12, 24, .35); overflow: hidden; }
.vip-profile { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vip-profile > div { min-width: 0; }
.vip-big { margin: 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 300; overflow-wrap: anywhere; }
.vip-uid { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 0; padding-top: 18px; color: var(--sy-dim); font-size: 13px; }
.vip-uid .sy-uid[data-tag]::after { opacity: 1; translate: -50% 0; }
.vip-chat, .vip-list { display: grid; gap: 12px; }
.vip-line { display: flex; gap: 10px; align-items: flex-start; }
.vip-line p { margin: 0; color: var(--sy-text); font-size: 14px; }
.vip-line p small, .vip-row small { margin-left: 6px; color: var(--b-faint); font-size: 11px; }
.vip-line b { color: var(--sy-dim); font-weight: 400; }
.vip-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 0; font-size: 15px; }
.vip-row .sy-uid { margin-left: 4px; color: var(--sy-dim); font-size: 12px; }
.vip-row.on { padding-top: 24px; }
.vip-row.on .sy-uid[data-tag]::after { opacity: 1; translate: -50% 0; }
.vip-stage .dim { opacity: .55; }
.vip-knobs { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
.vip-knobs button { padding: 0; border: 0; background: none; color: var(--sy-dim); font: inherit; cursor: pointer; transition: color .2s, opacity .2s; }
.vip-knobs button:hover { color: var(--sy-bright); }
.vip-knobs button.on { color: var(--b-hi); }
.vip-modes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px; }
.vip-modes span, .vip-label, .vip-field > span { color: var(--b-faint); font-size: 12px; }
.vip-label { display: flex; justify-content: space-between; margin: 8px 0 0; }
.vip-blend { display: inline-flex; align-items: center; gap: 6px; }
.vip-field { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.vip-field input:not([type=color]) { flex: 1; min-width: 0; padding: 5px 0; border: 0; border-bottom: 1px solid rgba(236, 230, 247, .06); background: none; color: var(--sy-bright); font: inherit; font-size: 14px; outline: none; }
.vip-field input:not([type=color]):focus { border-bottom-color: var(--b-mark); }
.vip-knobs input[type=color] { flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.vip-flairs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vip-flairs button { font-size: 15px; opacity: .55; }
.vip-flairs button:hover { opacity: .9; }
.vip-flairs button.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(224, 76, 216, .45)); }
.vip-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vip-colours button { width: 16px; height: 16px; border-radius: 4px; opacity: .65; }
.vip-colours button.on { opacity: 1; box-shadow: 0 0 0 2px var(--sy-bg), 0 0 0 3px var(--sy-bright); }
.vip-picks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.vip-picks.vip-icons { gap: 4px 10px; margin-top: 8px; }
.vip-icons .sy-icon { width: 16px; height: 16px; }
.vip-gives { margin-top: 18px !important; }
@media (prefers-reduced-motion: reduce) { .buy-switch-ico i { animation: none !important; } }
.plan-scroll { overflow-x: auto; scrollbar-width: thin; }
.plan-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.plan-compare th, .plan-compare td { padding: 9px 12px 9px 0; font-size: 14px; border-bottom: 1px solid var(--b-edge); text-align: left; vertical-align: baseline; }
.plan-compare thead th { color: var(--b-hi); font-weight: 400; font-size: 13px; }
.plan-compare tbody th { width: 34%; }
.plan-compare tbody th { color: var(--sy-bright); font-weight: 400; white-space: nowrap; }
.plan-compare td { color: var(--sy-dim); }
.plan-yes { color: var(--b-good); }
.plan-no { color: var(--b-faint); }
.plan-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.plan-sample { min-width: 0; margin: 0; }
.plan-sample figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 13px; }
.plan-sample figcaption b { color: var(--sy-text); font-weight: 400; }
.plan-sample figcaption small { color: var(--b-faint); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; }
/* a block of code as the app paints it: line numbers in a gutter, every kind of value in its own color */
.plan-code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--b-edge); border-radius: 10px; background: rgba(10, 8, 15, .75); color: var(--sy-text); font: 12.5px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; tab-size: 2; scrollbar-width: thin; }
.plan-code .gutter { color: #45404f; text-align: right; user-select: none; white-space: pre; }
.plan-code code { font: inherit; color: inherit; white-space: pre; }
.plan-code .k { color: var(--sy-bright); }
.plan-code .p, .plan-code .n { color: var(--sy-dim); }
.plan-code .c { color: #6c6478; font-style: italic; }
.plan-code .s, .plan-code .col { color: #e8c48b; }
.plan-code .ch, .plan-code .link { color: #8fb8f0; }
.plan-code .link { text-decoration: underline; text-decoration-color: rgba(143, 184, 240, .4); }
.plan-code .r { color: #c79bf2; }
.plan-code .on { color: #7ad69a; }
.plan-code .off { color: #e0566c; }
.plan-code .num, .plan-code .var { color: #f0a67a; }
.plan-code .var { font-style: italic; }
.plan-code .kw { color: #f08bb8; }
.plan-code .fill { color: #9ce0c4; }
@media (max-width: 760px) {
  .buy-top { gap: 12px; }
  .buy-switch > span:last-child { display: none; }
  .plan-apps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plan-app { padding: 14px 4px; background: none; }
  .plan-app-head b { font-size: 20px; }
  /* a phone reads the times sideways, a short row each app, swiped for more */
  .plan-times { display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; margin: 6px -4px 0; padding: 0 4px; }
  .plan-times::-webkit-scrollbar { display: none; }
  .plan-time { display: grid; flex: none; grid-template-columns: auto; gap: 0; padding: 4px 0; margin: 0; }
  .plan-time:hover { background: none; }
  .plan-time span { color: var(--sy-dim); font-size: 12px; }
  .plan-time b { font-size: 15px; }
  .plan-time i { display: none; }
  .plan-app > small { font-size: 12.5px; }
  .plan-bundle { padding: 6px 0; }
  .plan-bundle .plan-times { margin-top: 0; }
  .plan-bundle-list { grid-template-columns: minmax(0, 1fr); }
  .vip-body { grid-template-columns: minmax(0, 1fr); }
  .vip-stage { position: static; min-height: 150px; padding: 18px 14px; }
  .plan-one { grid-template-columns: minmax(0, 1fr); }
  .plan-one .plan-mark { display: none; }
  .plan-act { flex-wrap: wrap; }
  .plan-code { font-size: 12px; padding: 12px; gap: 0 12px; }
  .plan-compare { font-size: 13px; }
}