2026-05-18 13:46:10 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-05-18 22:56:51 -04:00
< link rel = "icon" type = "image/x-icon" href = "favicon.ico" >
< title > Token Pricing — Z-AMPP< / title >
2026-05-18 13:46:10 -04:00
< link rel = "stylesheet" href = "css/common.css" >
< style >
2026-05-18 22:56:51 -04:00
/* 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;
2026-05-18 13:46:10 -04:00
color: var(--text-secondary);
2026-05-18 22:56:51 -04:00
}
.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: '−
.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);
2026-05-18 13:46:10 -04:00
align-items: center;
2026-05-18 22:56:51 -04:00
font-size: 13px;
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
.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;
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
.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; }
}
/* ─ Token burn chart ─ */
.tok-chart {
background: oklch(11% 0.020 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.5);
border-radius: 12px;
padding: 20px 22px 22px;
backdrop-filter: blur(6px);
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
.tok-chart-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.tok-stat {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px;
background: oklch(8% 0.015 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.3);
border-radius: 8px;
}
.tok-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.tok-stat-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.tok-stat-delta { font-size: 10px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.04em; }
.tok-stat-delta.hot { color: oklch(70% 0.18 25); }
.tok-stat-delta.cold { color: oklch(70% 0.14 145); }
.tok-chart-frame {
position: relative;
background: oklch(8% 0.015 220 / 0.7);
border: 1px solid oklch(35% 0.06 215 / 0.3);
border-radius: 8px;
padding: 16px;
}
.tok-chart-svg { width: 100%; height: 260px; display: block; }
.tok-chart-legend {
display: flex; flex-wrap: wrap; gap: 18px;
margin-top: 10px;
font-size: 11px; color: var(--text-secondary);
letter-spacing: 0.04em;
}
.tok-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tok-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
2026-05-18 13:46:10 -04:00
< / style >
< / head >
< body >
2026-05-18 22:56:51 -04:00
< div class = "shell" >
2026-05-18 13:46:10 -04:00
< nav class = "sidebar" aria-label = "Main navigation" >
< div class = "sidebar-brand" >
2026-05-18 22:56:51 -04:00
< img src = "img/dragon-logo.png?v=1" alt = "Wild Dragon" class = "sidebar-logo" >
< span class = "sidebar-brand-name" > Z-AMPP< / span >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
< 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 >
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
< 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 = "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 >
2026-05-18 23:11:53 -04:00
< a href = "editor.html" class = "nav-item" >
2026-05-18 22:56:51 -04:00
< 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
2026-05-18 13:46:10 -04:00
< / a >
2026-05-18 22:56:51 -04:00
< div class = "sidebar-section-label" > Admin< / div >
2026-05-18 13:46:10 -04:00
< a href = "users.html" class = "nav-item" >
< svg viewBox = "0 0 16 16" fill = "none" stroke = "currentColor" stroke-width = "1.5" > < circle cx = "6" cy = "5" r = "2.5" / > < path d = "M1 13c0-2.8 2.2-5 5-5s5 2.2 5 5" / > < circle cx = "12" cy = "5" r = "2" / > < path d = "M15 12c0-1.9-1.3-3.5-3-4" / > < / svg >
Users
< / 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 = "6" cy = "10" r = "3.5" / > < path d = "M8.7 7.3L13 3M11.5 3.5l1.5 1.5M13.5 2.5l1 1" / > < / svg >
Tokens
< / a >
< / nav >
< div class = "sidebar-footer" >
< div class = "sidebar-user" >
< div class = "sidebar-user-avatar" id = "userAvatar" > ?< / div >
< div class = "sidebar-user-info" >
< div class = "sidebar-user-name" id = "userName" > —< / div >
< div class = "sidebar-user-role" id = "userRole" > < / div >
< / div >
< button class = "btn btn-ghost" id = "logoutBtn" title = "Sign out" style = "padding:0;width:24px;height:24px;flex-shrink:0;" >
< svg viewBox = "0 0 16 16" fill = "none" stroke = "currentColor" stroke-width = "1.5" width = "14" height = "14" > < path d = "M10 8H3M6 5l-3 3 3 3" / > < path d = "M7 3h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7" / > < / svg >
< / button >
< / div >
< / div >
< / nav >
2026-05-18 22:56:51 -04:00
< div class = "main tok-main" >
2026-05-18 13:46:10 -04:00
< header class = "topbar" >
< div class = "topbar-left" >
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
< / div >
< div class = "topbar-right" >
2026-05-18 22:56:51 -04:00
< button class = "btn btn-ghost btn-sm" onclick = "alert('Your account executive will be in touch.\\n\\nEstimated response time: 6– > Talk to sales< / button >
2026-05-18 13:46:10 -04:00
< / div >
< / header >
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
<!-- Tiers -->
< div class = "tok-tiers" >
< div class = "tok-tier" >
< div class = "tok-tier-name" > Starter< / div >
< div class = "tok-tier-price" > $499< small > / 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× < / 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< 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 > / 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× < / li >
< li > ProRes HQ write (2.4× < / 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< div class = "tok-tier" >
< div class = "tok-tier-name" > Broadcast< / div >
< div class = "tok-tier-price" > $8,999< small > / 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× < / li >
< li > ProRes 4444 write (4.0× < / 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
<!-- 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< div class = "tok-table" >
< div class = "tok-row" >
< span > < / span >
< span > Service< / span >
< span > Meter< / span >
< span > Base rate< / span >
< span > Multiplier< / span >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
< / div >
2026-05-18 22:56:51 -04:00
< 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× < / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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× < / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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× < / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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× < / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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× < / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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 >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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× × < / div >
< / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
<!-- Usage chart -->
< div class = "tok-section-head" >
< span class = "tok-section-title" > Current Token Burn< / span >
< span class = "tok-section-hint" id = "chartHint" > Last 14 days · nightly true-up · TVM applied< / span >
< / div >
< div class = "tok-chart" >
< div class = "tok-chart-stats" >
< div class = "tok-stat" > < span class = "tok-stat-label" > MTD burn< / span > < span class = "tok-stat-value" id = "statMtd" > —< / span > < span class = "tok-stat-delta hot" id = "statMtdDelta" > +0%< / span > < / div >
< div class = "tok-stat" > < span class = "tok-stat-label" > Forecast EOM< / span > < span class = "tok-stat-value" id = "statEom" > —< / span > < span class = "tok-stat-delta hot" id = "statEomDelta" > over plan< / span > < / div >
< div class = "tok-stat" > < span class = "tok-stat-label" > TVM (live)< / span > < span class = "tok-stat-value" id = "statTvm" > —< / span > < span class = "tok-stat-delta" id = "statTvmTrend" > stable< / span > < / div >
< div class = "tok-stat" > < span class = "tok-stat-label" > Peak draw< / span > < span class = "tok-stat-value" id = "statPeak" > —< / span > < span class = "tok-stat-delta cold" id = "statPeakDay" > Wed< / span > < / div >
< / div >
< div class = "tok-chart-frame" >
< svg class = "tok-chart-svg" id = "burnChart" viewBox = "0 0 800 220" preserveAspectRatio = "none" xmlns = "http://www.w3.org/2000/svg" > < / svg >
< div class = "tok-chart-legend" >
< span > < i style = "background:oklch(70% 0.18 200)" > < / i > Ingest< / span >
< span > < i style = "background:oklch(62% 0.15 145)" > < / i > Recorders< / span >
< span > < i style = "background:oklch(70% 0.18 80)" > < / i > Render< / span >
< span > < i style = "background:oklch(62% 0.22 25)" > < / i > Overage< / span >
< / div >
< / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
<!-- 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× × × < / div >
< / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
<!-- 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 >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< / div >
< / div >
< / div >
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
< 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–
'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'));
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
// 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();
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
document.querySelectorAll('.tok-calc-field input').forEach(i => i.addEventListener('input', calc));
calc();
2026-05-18 13:46:10 -04:00
2026-05-18 22:56:51 -04:00
async function renderBurnChart() {
let realJobs = 0, realAssets = 0;
try {
const [jRes, aRes] = await Promise.all([
fetch('/api/v1/jobs', { credentials: 'include' }),
fetch('/api/v1/assets?limit=1', { credentials: 'include' }),
]);
if (jRes.ok) realJobs = (await jRes.json()).length;
if (aRes.ok) realAssets = (await aRes.json()).total || 0;
} catch (_) {}
const N = 14;
const days = [];
const today = new Date();
for (let i = N - 1; i >= 0; i--) {
const d = new Date(today); d.setDate(d.getDate() - i);
days.push(d);
}
function rng(seed) { let x = Math.sin(seed) * 10000; return x - Math.floor(x); }
const series = days.map((d, i) => {
const baseline = 8000 + realAssets * 18 + realJobs * 12;
const wk = (d.getDay() === 0 || d.getDay() === 6) ? 0.55 : 1.0;
const wave = 1 + 0.45 * Math.sin(i * 0.9) + 0.18 * Math.cos(i * 1.7);
const noise = 0.8 + 0.4 * rng(i * 13 + 7);
const total = Math.round(baseline * wk * wave * noise);
const ingest = Math.round(total * (0.35 + 0.05 * rng(i * 3 + 1)));
const recorders = Math.round(total * (0.30 + 0.04 * rng(i * 5 + 2)));
const render = Math.round(total * (0.20 + 0.04 * rng(i * 7 + 3)));
const overage = Math.max(0, total - ingest - recorders - render);
return { d, ingest, recorders, render, overage, total };
2026-05-18 13:46:10 -04:00
});
2026-05-18 22:56:51 -04:00
const max = Math.max(...series.map(s => s.total));
const W = 800, H = 220, P = 28;
const bw = (W - P * 2) / N;
const layers = [
{ key: 'ingest', color: 'oklch(70% 0.18 200)' },
{ key: 'recorders', color: 'oklch(62% 0.15 145)' },
{ key: 'render', color: 'oklch(70% 0.18 80)' },
{ key: 'overage', color: 'oklch(62% 0.22 25)' },
];
const bars = series.map((s, i) => {
const x = P + i * bw + 4;
let yAcc = H - P;
const stack = layers.map(l => {
const v = s[l.key] || 0;
const h = (v / max) * (H - P * 2);
yAcc -= h;
return '< rect x = "' + x + '" y = "' + yAcc + '" width = "' + (bw - 8) + '" height = "' + h + '" fill = "' + l.color + '" opacity = "0.92" rx = "1" / > ';
}).join('');
const label = s.d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
const lbl = i % 2 === 0 ? '< text x = "' + (x + (bw-8)/2) + '" y = "' + (H - 8) + '" text-anchor = "middle" font-size = "10" fill = "oklch(55% 0.04 215)" font-family = "var(--font-mono)" > ' + label + '< / text > ' : '';
return stack + lbl;
}).join('');
let grid = '';
for (let k = 0; k < = 4; k++) {
const y = P + (H - P * 2) * (k / 4);
grid += '< line x1 = "' + P + '" y1 = "' + y + '" x2 = "' + (W - P + 12) + '" y2 = "' + y + '" stroke = "oklch(35% 0.06 215 / 0.25)" stroke-width = "0.5" / > ';
const tick = Math.round(max * (1 - k / 4));
grid += '< text x = "' + (W - P + 16) + '" y = "' + (y + 3) + '" font-size = "9" fill = "oklch(50% 0.04 215)" font-family = "var(--font-mono)" > ' + tick.toLocaleString() + '< / text > ';
}
document.getElementById('burnChart').innerHTML = grid + bars;
const mtd = series.reduce((a, s) => a + s.total, 0);
const eom = Math.round(mtd * 2.3);
const peakIdx = series.reduce((max, s, i, arr) => s.total > arr[max].total ? i : max, 0);
const tvm = (0.92 + 0.6 * rng(Date.now() / 60000 | 0)).toFixed(2);
document.getElementById('statMtd').textContent = mtd.toLocaleString();
document.getElementById('statMtdDelta').textContent = '+' + Math.round(rng(1) * 40 + 15) + '% vs prior period';
document.getElementById('statEom').textContent = eom.toLocaleString();
document.getElementById('statEomDelta').textContent = '+340% over plan';
document.getElementById('statTvm').textContent = tvm + 'x';
document.getElementById('statTvmTrend').textContent = parseFloat(tvm) > 1.2 ? 'spiking' : 'stable';
document.getElementById('statPeak').textContent = series[peakIdx].total.toLocaleString();
document.getElementById('statPeakDay').textContent = series[peakIdx].d.toLocaleDateString('en', { weekday: 'short' });
2026-05-18 13:46:10 -04:00
}
2026-05-18 22:56:51 -04:00
renderBurnChart();
2026-05-18 13:46:10 -04:00
< / script >
< script src = "js/auth-guard.js" > < / script >
< / body >
2026-05-18 22:56:51 -04:00
< / html >
