WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

feat(meme): Token Pricing page — gentle ribbing of metered-compute broadcast platforms

Browse source
This commit is contained in:
Zac Gaetano 2026-05-18 10:56:55 -04:00
parent c781a469f3
commit 1f4750a1b4
1 changed files with 562 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

562
services/web-ui/public/tokens.html Normal file
View file

@ -0,0 +1,562 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Token Pricing — Z-AMPP</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/common.css">
<style>
/* GV-flavored teal-on-dark just to lean into the parody */
.tok-main {
flex: 1; overflow: auto;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(38% 0.10 200 / 0.45), transparent 60%),
radial-gradient(ellipse 80% 60% at 20% 100%, oklch(35% 0.14 195 / 0.35), transparent 65%),
linear-gradient(135deg, oklch(20% 0.06 220), oklch(12% 0.025 230) 100%);
}
.tok-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 32px 80px; }
.tok-banner {
text-align: center;
margin-bottom: 40px;
}
.tok-banner-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 14px;
background: oklch(15% 0.04 200);
border: 1px solid oklch(50% 0.12 200 / 0.5);
border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: oklch(75% 0.12 200);
margin-bottom: 16px;
}
.tok-banner-eyebrow::before {
content: ''; width: 6px; height: 6px;
background: oklch(70% 0.18 200); border-radius: 50%;
box-shadow: 0 0 10px oklch(70% 0.18 200);
}
.tok-title {
font-size: 42px; font-weight: 700; letter-spacing: -0.02em;
line-height: 1.05; color: var(--text-primary);
margin-bottom: 10px;
}
.tok-title .strike { text-decoration: line-through; opacity: 0.4; }
.tok-title .pop { color: oklch(75% 0.14 200); }
.tok-sub {
max-width: 56ch; margin: 0 auto;
font-size: 14px; color: oklch(70% 0.05 215); line-height: 1.55;
}
.tok-sub b { color: oklch(80% 0.10 200); }
/* ─ Tier cards ─ */
.tok-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 32px 0 40px;
}
.tok-tier {
position: relative;
background: oklch(13% 0.025 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.5);
border-radius: 12px;
padding: 22px 22px 18px;
backdrop-filter: blur(6px);
}
.tok-tier.featured {
border-color: oklch(60% 0.15 200 / 0.7);
box-shadow: 0 16px 50px -16px oklch(50% 0.18 200 / 0.5);
}
.tok-tier-flag {
position: absolute; top: -10px; right: 18px;
background: oklch(58% 0.16 200);
color: oklch(10% 0.02 220);
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
}
.tok-tier-name {
font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: oklch(70% 0.10 200);
margin-bottom: 8px;
}
.tok-tier-price {
font-size: 28px; font-weight: 700;
color: var(--text-primary); letter-spacing: -0.01em;
display: flex; align-items: baseline; gap: 4px;
}
.tok-tier-price small {
font-size: 13px; font-weight: 500;
color: var(--text-tertiary);
}
.tok-tier-tokens {
margin-top: 4px;
font-size: 12px; color: var(--text-secondary);
font-family: var(--font-mono); letter-spacing: 0.04em;
}
.tok-tier-list {
margin: 14px 0 16px; padding: 0; list-style: none;
font-size: 12px; line-height: 1.7;
color: var(--text-secondary);
}
.tok-tier-list li { padding-left: 16px; position: relative; }
.tok-tier-list li::before {
content: '+'; position: absolute; left: 0; top: 0;
color: oklch(70% 0.14 200); font-weight: 700;
}
.tok-tier-list li.minus::before { content: '−'; color: oklch(62% 0.22 25 / 0.7); }
.tok-tier-cta {
display: block; text-align: center;
width: 100%; padding: 9px 12px;
background: transparent;
border: 1px solid oklch(50% 0.12 200 / 0.55);
border-radius: 8px;
color: oklch(75% 0.12 200);
font: inherit; font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.tok-tier-cta:hover { background: oklch(20% 0.08 200 / 0.4); }
.tok-tier.featured .tok-tier-cta {
background: oklch(55% 0.16 200);
border-color: oklch(55% 0.16 200);
color: oklch(10% 0.02 220);
}
.tok-tier.featured .tok-tier-cta:hover {
background: oklch(62% 0.18 200);
}
/* ─ Per-service table ─ */
.tok-section-head {
display: flex; align-items: baseline; justify-content: space-between;
margin: 40px 0 14px;
}
.tok-section-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.20em;
text-transform: uppercase; color: oklch(70% 0.10 200);
}
.tok-section-hint {
font-size: 11px; color: var(--text-tertiary);
font-family: var(--font-mono);
}
.tok-table {
width: 100%;
background: oklch(11% 0.020 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.4);
border-radius: 12px;
overflow: hidden;
backdrop-filter: blur(6px);
}
.tok-row {
display: grid;
grid-template-columns: 48px 1.4fr 1fr 0.9fr 0.9fr;
gap: 14px;
padding: 12px 18px;
border-top: 1px solid oklch(35% 0.06 215 / 0.25);
align-items: center;
font-size: 13px;
}
.tok-row:first-child {
border-top: 0;
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: oklch(65% 0.08 200);
padding: 14px 18px;
}
.tok-row-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: oklch(15% 0.05 215);
border: 1px solid oklch(45% 0.12 200 / 0.4);
border-radius: 8px;
color: oklch(72% 0.12 200);
}
.tok-row-icon svg { width: 16px; height: 16px; }
.tok-row-name { font-weight: 500; color: var(--text-primary); }
.tok-row-name small {
display: block;
font-size: 11px; font-weight: 400;
color: var(--text-tertiary); margin-top: 2px;
}
.tok-row-meter, .tok-row-rate, .tok-row-mult {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-secondary); letter-spacing: 0.04em;
}
.tok-row-rate b { color: oklch(78% 0.14 200); font-weight: 600; }
.tok-row-mult.hot { color: oklch(70% 0.18 25); }
.tok-row-mult.cold { color: oklch(70% 0.14 145); }
/* ─ Calculator ─ */
.tok-calc {
margin-top: 36px;
background: oklch(13% 0.025 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.5);
border-radius: 12px;
padding: 22px 24px;
}
.tok-calc-head { margin-bottom: 14px; }
.tok-calc-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.tok-calc-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.tok-calc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 16px 0 18px;
}
.tok-calc-field {
display: flex; flex-direction: column; gap: 4px;
}
.tok-calc-label {
font-size: 10px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-tertiary);
}
.tok-calc-field input {
padding: 8px 12px;
background: oklch(8% 0.015 220);
border: 1px solid oklch(35% 0.06 215 / 0.5);
border-radius: 6px;
color: var(--text-primary); font: inherit;
font-family: var(--font-mono); font-size: 14px;
}
.tok-calc-out {
padding: 16px 18px;
background: oklch(8% 0.015 220);
border: 1px solid oklch(50% 0.12 200 / 0.4);
border-radius: 8px;
display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline;
}
.tok-calc-out-total {
display: flex; flex-direction: column;
}
.tok-calc-out-label {
font-size: 10px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-tertiary);
}
.tok-calc-out-value {
font-size: 28px; font-weight: 700;
color: oklch(82% 0.12 200);
font-family: var(--font-mono); letter-spacing: -0.02em;
}
.tok-calc-out-aside {
font-size: 11px; color: var(--text-tertiary);
max-width: 36ch; line-height: 1.5;
}
/* ─ Footnote micro-print ─ */
.tok-footer {
margin-top: 36px;
padding: 18px 22px;
background: oklch(8% 0.015 220 / 0.6);
border: 1px solid oklch(30% 0.04 215 / 0.4);
border-radius: 10px;
font-size: 10px; line-height: 1.6;
color: oklch(55% 0.04 215);
letter-spacing: 0.01em;
}
.tok-footer b { color: oklch(70% 0.06 215); font-weight: 600; }
.tok-footer p { margin: 0 0 8px; }
.tok-footer p:last-child { margin: 0; }
@media (max-width: 700px) {
.tok-row { grid-template-columns: 36px 1fr 1fr; gap: 10px; padding: 10px 12px; font-size: 12px; }
.tok-row > :nth-child(4), .tok-row > :nth-child(5) { display: none; }
.tok-title { font-size: 30px; }
}
</style>
</head>
<body>
<div class="shell">
<nav class="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
<span class="sidebar-brand-name">Z-AMPP</span>
</div>
<nav class="sidebar-nav">
<a href="home.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7l6-5 6 5v7a1 1 0 0 1-1 1h-3v-5H6v5H3a1 1 0 0 1-1-1z"/></svg>Home</a>
<a href="index.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>Library</a>
<a href="projects.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 4a1 1 0 0 1 1-1h4l2 2h5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/></svg>Projects</a>
<a href="upload.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg>Ingest</a>
<a href="recorders.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>Recorders</a>
<a href="capture.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>Capture</a>
<a href="edit.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg>Editor</a>
<a href="jobs.html" class="nav-item"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>Jobs</a>
<a href="tokens.html" class="nav-item active"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M5.5 9.5h3a1.5 1.5 0 0 0 0-3h-1a1.5 1.5 0 0 1 0-3h3M8 3v1m0 8v1"/></svg>Tokens</a>
</nav>
</nav>
<div class="main tok-main">
<header class="topbar">
<div class="topbar-left">
<span class="page-title">Token Pricing</span>
<span class="topbar-sep">/</span>
<span class="text-sm" style="color:var(--text-tertiary)">Enterprise Compute Compliance Engine v4.7</span>
</div>
<div class="topbar-right">
<button class="btn btn-ghost btn-sm" onclick="alert('Your account executive will be in touch.\\n\\nEstimated response time: 6–12 business days.')">Talk to sales</button>
</div>
</header>
<div class="tok-wrap">
<!-- Banner -->
<div class="tok-banner">
<span class="tok-banner-eyebrow">Z-AMPP Pricing</span>
<h1 class="tok-title"><span class="strike">Per-seat</span> · <span class="strike">Per-stream</span> · <span class="strike">Per-month</span><br><span class="pop">Per token.</span></h1>
<p class="tok-sub">Welcome to the future of broadcast media operations. Tokens are <b>fungible compute credits</b> that flexibly meter every action across the Platform™. Move faster. Pay precisely. Forecast nothing.</p>
</div>
<!-- Tiers -->
<div class="tok-tiers">
<div class="tok-tier">
<div class="tok-tier-name">Starter</div>
<div class="tok-tier-price">$499<small>&nbsp;/&nbsp;mo</small></div>
<div class="tok-tier-tokens">100,000 tokens · $4.99 / 1k</div>
<ul class="tok-tier-list">
<li>1 concurrent recorder</li>
<li>SD ingest (480p · 1.2× multiplier)</li>
<li>Standard support · email · 96h SLA</li>
<li class="minus">No HD codec access</li>
<li class="minus">No ProRes write</li>
</ul>
<button class="tok-tier-cta" onclick="addToCart('Starter')">Get started</button>
</div>
<div class="tok-tier featured">
<span class="tok-tier-flag">Most flexible</span>
<div class="tok-tier-name">Professional</div>
<div class="tok-tier-price">$2,499<small>&nbsp;/&nbsp;mo</small></div>
<div class="tok-tier-tokens">600,000 tokens · $4.17 / 1k</div>
<ul class="tok-tier-list">
<li>4 concurrent recorders</li>
<li>HD ingest (1080p · 3.2× multiplier)</li>
<li>ProRes HQ write (2.4× multiplier)</li>
<li>Priority queue · 24h SLA</li>
<li class="minus">4K surcharge applies</li>
</ul>
<button class="tok-tier-cta" onclick="addToCart('Professional')">Provision tier</button>
</div>
<div class="tok-tier">
<div class="tok-tier-name">Broadcast</div>
<div class="tok-tier-price">$8,999<small>&nbsp;/&nbsp;mo</small></div>
<div class="tok-tier-tokens">2,400,000 tokens · $3.75 / 1k</div>
<ul class="tok-tier-list">
<li>12 concurrent recorders</li>
<li>4K ingest (5.8× multiplier)</li>
<li>ProRes 4444 write (4.0× multiplier)</li>
<li>Named CSM · phone · 4h SLA</li>
<li>Token rollover (90 days, fees apply)</li>
</ul>
<button class="tok-tier-cta" onclick="addToCart('Broadcast')">Engage account team</button>
</div>
<div class="tok-tier">
<div class="tok-tier-name">Enterprise</div>
<div class="tok-tier-price">Contact us</div>
<div class="tok-tier-tokens">Custom token allocation</div>
<ul class="tok-tier-list">
<li>Unlimited* concurrent recorders</li>
<li>8K / IMF / DCP write tiers</li>
<li>Dedicated solutions architect</li>
<li>Quarterly token true-up audits</li>
<li class="minus">Implementation fee not included</li>
</ul>
<button class="tok-tier-cta" onclick="addToCart('Enterprise')">Request quotation</button>
</div>
</div>
<!-- Per-service table -->
<div class="tok-section-head">
<span class="tok-section-title">Per-Service Metering</span>
<span class="tok-section-hint">All rates exclusive of TVM · effective Q3 FY26</span>
</div>
<div class="tok-table">
<div class="tok-row">
<span></span>
<span>Service</span>
<span>Meter</span>
<span>Base rate</span>
<span>Multiplier</span>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg></div>
<div class="tok-row-name">Library<small>Asset browse, search, thumbnail render</small></div>
<div class="tok-row-meter">Per asset · per hour</div>
<div class="tok-row-rate"><b>0.012</b> tokens</div>
<div class="tok-row-mult">1.00×</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg></div>
<div class="tok-row-name">Ingest<small>Upload + transcode to managed proxy</small></div>
<div class="tok-row-meter">Per GB · per pass</div>
<div class="tok-row-rate"><b>14.4</b> tokens / GB</div>
<div class="tok-row-mult hot">2.4× during business hours</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg></div>
<div class="tok-row-name">Recorder · SRT<small>Caller-mode network ingest, includes HLS preview*</small></div>
<div class="tok-row-meter">Per minute · per recorder</div>
<div class="tok-row-rate"><b>4.8</b> tokens / min</div>
<div class="tok-row-mult hot">+22% Reliability Adjustment</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg></div>
<div class="tok-row-name">Recorder · RTMP<small>Generic ingest tier · legacy codec compatibility</small></div>
<div class="tok-row-meter">Per minute · per recorder</div>
<div class="tok-row-rate"><b>3.6</b> tokens / min</div>
<div class="tok-row-mult">1.00×</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg></div>
<div class="tok-row-name">Capture · SDI<small>DeckLink baseband ingest · 12G-SDI add-on available</small></div>
<div class="tok-row-meter">Per minute · per SDI channel</div>
<div class="tok-row-rate"><b>9.2</b> tokens / min</div>
<div class="tok-row-mult hot">1.8× premium baseband multiplier</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="13" cy="3" r="1"/></svg></div>
<div class="tok-row-name">Live HLS Preview<small>Real-time delivery acceleration (RTDA™)</small></div>
<div class="tok-row-meter">Per active viewer · per second</div>
<div class="tok-row-rate"><b>0.0008</b> tokens</div>
<div class="tok-row-mult hot">3.2× CDN egress premium</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M5 8h6M8 5v6"/></svg></div>
<div class="tok-row-name">ProRes HQ Write<small>Mastering-grade codec licensing</small></div>
<div class="tok-row-meter">Per minute of media</div>
<div class="tok-row-rate"><b>6.4</b> tokens / min</div>
<div class="tok-row-mult hot">2.4× codec entitlement fee</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg></div>
<div class="tok-row-name">Editor render<small>Server-side concat / trim · brand-aligned codec ladder</small></div>
<div class="tok-row-meter">Per minute of output</div>
<div class="tok-row-rate"><b>11.8</b> tokens / min</div>
<div class="tok-row-mult hot">+18% Real-Time Render Surcharge</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg></div>
<div class="tok-row-name">Background Jobs<small>Proxy gen, thumbnails, AMPP folder sync</small></div>
<div class="tok-row-meter">Per job · per CPU-second</div>
<div class="tok-row-rate"><b>0.45</b> tokens</div>
<div class="tok-row-mult cold">0.85× off-peak discount</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h12v10H2z"/><path d="M5 6h6M5 9h4"/></svg></div>
<div class="tok-row-name">Premiere Pro Connector<small>CEP bridge · per-NLE seat compatibility license</small></div>
<div class="tok-row-meter">Per workstation · per month</div>
<div class="tok-row-rate"><b>22,000</b> tokens</div>
<div class="tok-row-mult hot">+ $99 NLE Compatibility Levy</div>
</div>
<div class="tok-row">
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 2"/></svg></div>
<div class="tok-row-name">API call<small>GET /api/v1/* · includes 200-byte response budget</small></div>
<div class="tok-row-meter">Per request</div>
<div class="tok-row-rate"><b>0.0011</b> tokens</div>
<div class="tok-row-mult">1.00× (overage 3.4×)</div>
</div>
</div>
<!-- Calculator -->
<div class="tok-calc">
<div class="tok-calc-head">
<div class="tok-calc-title">Monthly token estimator</div>
<div class="tok-calc-sub">Honest forecasts since 2019. Actual usage may vary by up to 340%.</div>
</div>
<div class="tok-calc-grid">
<div class="tok-calc-field"><label class="tok-calc-label">Ingest GB/mo</label><input id="iIngest" type="number" value="800" min="0"></div>
<div class="tok-calc-field"><label class="tok-calc-label">SRT recorder hours</label><input id="iSrt" type="number" value="120" min="0"></div>
<div class="tok-calc-field"><label class="tok-calc-label">SDI capture hours</label><input id="iSdi" type="number" value="40" min="0"></div>
<div class="tok-calc-field"><label class="tok-calc-label">Premiere seats</label><input id="iSeats" type="number" value="3" min="0"></div>
<div class="tok-calc-field"><label class="tok-calc-label">Editor render min/mo</label><input id="iRender" type="number" value="240" min="0"></div>
</div>
<div class="tok-calc-out">
<div class="tok-calc-out-total">
<span class="tok-calc-out-label">Estimated monthly tokens</span>
<span class="tok-calc-out-value" id="calcTokens">—</span>
</div>
<div class="tok-calc-out-total">
<span class="tok-calc-out-label">At Professional tier</span>
<span class="tok-calc-out-value" id="calcDollars" style="color:oklch(82% 0.10 25)">—</span>
</div>
<div class="tok-calc-out-aside" id="calcNote">Includes 2.4× business-hours Ingest multiplier. Excludes overage, peak-hour surcharge, codec entitlement, and the Token Velocity Modifier (TVM™), which fluctuates between 0.8× and 4.2× without notice.</div>
</div>
</div>
<!-- Footnote micro-print -->
<div class="tok-footer">
<p><b>Disclosures.</b> All rates quoted in Z-Tokens®, a non-transferable digital unit of account valid only within the Platform™. One (1) token is equivalent to 1.0 token at time of redemption, subject to the Token Velocity Modifier (TVM™), which is recalculated nightly and applied retroactively where contractually permitted. Tokens expire after 30 days unless rolled over with the Token Continuity Add-On (TCA, sold separately).</p>
<p><b>Multipliers.</b> "Reliability Adjustment", "Real-Time Render Surcharge", and "Premium Baseband Multiplier" are not surcharges; they are <i>positive entitlements</i> that grant continued access to services for which you have already paid. Refusal to pay constitutes voluntary entitlement waiver.</p>
<p><b>Token Compatibility Levy.</b> A 14% sustainability levy is automatically applied to all token consumption in support of the Platform's commitment to operational excellence. The levy is non-refundable, non-itemized, and not represented above.</p>
<p><b>Forward-looking statements.</b> Anything resembling a price on this page is illustrative and is not, has not been, and will never be, a price. Pricing is determined exclusively by your assigned Customer Success Outcome Architect during quarterly value-realization workshops.</p>
<p style="margin-top:14px;font-style:italic;opacity:0.7"><b>Z-AMPP</b> is the broadcast asset management platform you actually own. No token has ever been minted, charged, or considered. This page exists for purely educational purposes. Any resemblance to a real metered-compute pricing model is entirely intentional and deeply affectionate.</p>
</div>
</div>
</div>
</div>
<script src="js/api.js"></script>
<script src="js/topbar-strip.js"></script>
<script>
function addToCart(tier) {
const lines = [
'You have selected the ' + tier + ' tier.',
'',
'A Customer Success Outcome Architect will reach out',
'within 6–12 business days to schedule your initial',
'discovery + value-alignment workshop.',
'',
'Until then, please continue using Z-AMPP for free.',
'Because it is free. Because we built it ourselves.',
];
alert(lines.join('\n'));
}
// Calculator
const tvm = 1.42; // current "Token Velocity Modifier"
function calc() {
const g = parseFloat(document.getElementById('iIngest').value || '0');
const srt = parseFloat(document.getElementById('iSrt').value || '0');
const sdi = parseFloat(document.getElementById('iSdi').value || '0');
const seats = parseFloat(document.getElementById('iSeats').value || '0');
const ren = parseFloat(document.getElementById('iRender').value || '0');
// Made-up math
const tokens = Math.round(
g * 14.4 * 2.4 +
srt * 60 * 4.8 * 1.22 +
sdi * 60 * 9.2 * 1.8 +
seats * 22000 +
ren * 11.8 * 1.18
);
const withLevy = Math.round(tokens * 1.14 * tvm);
document.getElementById('calcTokens').textContent = withLevy.toLocaleString();
const dollars = withLevy / 1000 * 4.17;
document.getElementById('calcDollars').textContent = '$' + Math.round(dollars).toLocaleString();
}
document.querySelectorAll('.tok-calc-field input').forEach(i => i.addEventListener('input', calc));
calc();
</script>
</body>
</html>