forgedock 1.0.16 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (190) hide show
  1. package/README.md +54 -3
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +2205 -541
  4. package/bin/github-app-manifest.json.license +2 -0
  5. package/bin/hooks/session-start.mjs +4 -5
  6. package/bin/registry.mjs +20 -0
  7. package/bin/tui.mjs +172 -96
  8. package/commands/adopt.md +433 -0
  9. package/commands/analytics.md +2 -0
  10. package/commands/audit-agents.md +2 -0
  11. package/commands/audit.md +2 -0
  12. package/commands/autopilot.md +77 -0
  13. package/commands/changelog.md +354 -0
  14. package/commands/cleanup.md +2 -0
  15. package/commands/compat-audit.md +330 -0
  16. package/commands/deploy-info.md +6 -5
  17. package/commands/design-bench.md +176 -0
  18. package/commands/design-render-critique-loop.md +103 -0
  19. package/commands/design.md +259 -0
  20. package/commands/diagnose.md +483 -0
  21. package/commands/explain.md +349 -0
  22. package/commands/forge-stats.md +2 -0
  23. package/commands/forgedock-init.md +2 -0
  24. package/commands/geo-audit.md +2 -0
  25. package/commands/incident-response.md +2 -0
  26. package/commands/issue.md +9 -3
  27. package/commands/milestone.md +2 -0
  28. package/commands/optimize.md +411 -0
  29. package/commands/orchestrate.md +239 -0
  30. package/commands/pipeline-health.md +60 -1
  31. package/commands/qa-sweep.md +39 -2
  32. package/commands/quality-gate.md +67 -0
  33. package/commands/replay.md +263 -0
  34. package/commands/resume.md +264 -0
  35. package/commands/review-pr-agents.md +5 -1
  36. package/commands/review-pr-staging.md +160 -2
  37. package/commands/review-pr.md +85 -3
  38. package/commands/rollback.md +2 -0
  39. package/commands/scope.md +280 -0
  40. package/commands/security-audit.md +2 -0
  41. package/commands/status.md +262 -0
  42. package/commands/sync-ecosystem.md +2 -0
  43. package/commands/test-gate.md +929 -0
  44. package/commands/validate.md +2 -0
  45. package/commands/work-on/build/architect.md +128 -18
  46. package/commands/work-on/build/context.md +130 -17
  47. package/commands/work-on/build/implement.md +7 -3
  48. package/commands/work-on/build/validate.md +2 -0
  49. package/commands/work-on/build.md +32 -7
  50. package/commands/work-on/close.md +85 -0
  51. package/commands/work-on/decompose.md +2 -0
  52. package/commands/work-on/investigate.md +30 -3
  53. package/commands/work-on/review.md +13 -1
  54. package/commands/work-on-monolithic.md +2 -0
  55. package/commands/work-on.md +676 -38
  56. package/docs/BRAND.md +51 -0
  57. package/docs/CI.md +177 -0
  58. package/docs/CONFIG.md +94 -0
  59. package/docs/FORGE-PROTOCOL.md +324 -0
  60. package/docs/articles/b-vs-c-baseline.md +210 -0
  61. package/docs/articles/full-abc-benchmark.md +205 -0
  62. package/docs/articles/per-repo-adaptive-scripts-token-savings.md +174 -0
  63. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  64. package/docs/claude-breakpoints.json +47 -0
  65. package/docs/design/abc-benchmark.md +195 -0
  66. package/docs/design/design-architect-rationale.md +123 -0
  67. package/docs/design/design-memory.md +61 -0
  68. package/docs/design/design-spec-schema.md +248 -0
  69. package/docs/design/design-system-lint.md +150 -0
  70. package/docs/design/divergent-generation.md +106 -0
  71. package/docs/design/effects-appropriateness.md +133 -0
  72. package/docs/design/fixtures/briefs/README.md +47 -0
  73. package/docs/design/fixtures/briefs/cadence.md +39 -0
  74. package/docs/design/fixtures/briefs/plume.md +39 -0
  75. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  76. package/docs/design/fixtures/briefs/tender.md +39 -0
  77. package/docs/design/fixtures/briefs/voltage.md +39 -0
  78. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  79. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  80. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  81. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  82. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  83. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  84. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  85. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  86. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  87. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  88. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  89. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  90. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  91. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  92. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  93. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  94. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  95. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  96. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  97. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  98. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  99. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  100. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  101. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  102. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  103. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  104. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  105. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  106. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  107. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  108. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  109. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  110. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  111. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  112. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  113. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  114. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  115. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  116. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  117. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  118. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  119. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  120. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  121. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  122. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  123. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  124. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  125. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  126. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  127. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  128. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  129. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  130. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  131. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  132. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  133. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  134. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  135. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  136. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  137. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  138. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  139. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  140. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  141. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  142. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  143. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  144. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  145. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  146. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  147. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  148. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  149. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  150. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  151. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  152. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  153. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  154. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  155. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  156. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  157. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  158. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  159. package/docs/design/foundations/brutalist.css +294 -0
  160. package/docs/design/foundations/editorial.css +300 -0
  161. package/docs/design/foundations/minimal-luxury.css +295 -0
  162. package/docs/design/foundations/technical.css +293 -0
  163. package/docs/design/foundations/warm-photo.css +299 -0
  164. package/docs/design/reference-corpus.md +1726 -0
  165. package/docs/design/render-critique-loop.md +57 -0
  166. package/docs/site/getting-started.md +21 -0
  167. package/docs/spec-graph-schema.md +397 -0
  168. package/package.json +3 -3
  169. package/scripts/bench-scorecard.mjs +239 -0
  170. package/scripts/build-spec-graph.mjs +509 -0
  171. package/scripts/classify-lane.sh +138 -0
  172. package/scripts/design-system-lint.mjs +993 -0
  173. package/scripts/graph-query.sh +486 -0
  174. package/scripts/transition-label.sh +169 -0
  175. package/scripts/validate-pr-target.sh +30 -0
  176. package/scripts/validate-spec-graph.sh +423 -0
  177. package/templates/devdocs/README.md +72 -0
  178. package/templates/devdocs/agent/using-forgedock.md +3 -0
  179. package/templates/devdocs/agent/using-github.md +3 -0
  180. package/templates/devdocs/index.yaml +162 -0
  181. package/templates/devdocs/project/architecture.md +3 -0
  182. package/templates/devdocs/project/conventions.md +3 -0
  183. package/templates/devdocs/project/custom-instructions.md +3 -0
  184. package/templates/devdocs/project/glossary.md +3 -0
  185. package/templates/devdocs/project/stack.md +3 -0
  186. package/templates/devdocs/templates/commit-convention.md +3 -0
  187. package/templates/devdocs/templates/issue.md +3 -0
  188. package/templates/devdocs/templates/pull-request.md +3 -0
  189. package/templates/devdocs/templates/review-finding.md +3 -0
  190. package/templates/workflows/forgedock-review.yml +96 -0
@@ -0,0 +1,813 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tender — Payments Infrastructure for the Internet</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
11
+
12
+ :root {
13
+ --bg: #0a0a0c;
14
+ --surface: #111114;
15
+ --surface-2: #18181c;
16
+ --border: #222228;
17
+ --border-light: #2a2a32;
18
+ --text: #e8e8ec;
19
+ --text-muted: #8888a0;
20
+ --text-dim: #555568;
21
+ --accent: #00e5a0;
22
+ --accent-dim: #00e5a020;
23
+ --mono: 'Space Mono', monospace;
24
+ --sans: 'Space Grotesk', sans-serif;
25
+ }
26
+
27
+ html { font-size: 16px; background: var(--bg); color: var(--text); }
28
+ body { font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
29
+
30
+ /* Layout */
31
+ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
32
+ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; }
33
+
34
+ /* Nav */
35
+ nav {
36
+ position: sticky; top: 0; z-index: 100;
37
+ background: var(--bg); border-bottom: 1px solid var(--border);
38
+ padding: 0 24px; height: 52px;
39
+ display: flex; align-items: center; justify-content: space-between;
40
+ }
41
+ nav .logo { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: -0.5px; }
42
+ nav .logo span { color: var(--accent); }
43
+ nav ul { list-style: none; display: flex; gap: 28px; }
44
+ nav ul li a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.15s; }
45
+ nav ul li a:hover { color: var(--text); }
46
+ nav .nav-cta {
47
+ font-family: var(--mono); font-size: 12px; font-weight: 700;
48
+ color: var(--bg); background: var(--accent); border: none;
49
+ padding: 6px 16px; cursor: pointer; letter-spacing: 0.5px;
50
+ }
51
+
52
+ /* Hero — asymmetric two-column */
53
+ .hero {
54
+ display: grid; grid-template-columns: 5fr 7fr;
55
+ min-height: 85vh; border-bottom: 1px solid var(--border);
56
+ }
57
+ .hero-left {
58
+ padding: 80px 48px 80px 24px;
59
+ display: flex; flex-direction: column; justify-content: center;
60
+ border-right: 1px solid var(--border);
61
+ }
62
+ .hero-left .tag {
63
+ font-family: var(--mono); font-size: 11px; color: var(--accent);
64
+ letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px;
65
+ }
66
+ .hero-left h1 {
67
+ font-size: clamp(36px, 4vw, 56px); font-weight: 700;
68
+ line-height: 1.05; letter-spacing: -2px; margin-bottom: 20px;
69
+ }
70
+ .hero-left p {
71
+ font-size: 15px; color: var(--text-muted); max-width: 400px;
72
+ line-height: 1.7; margin-bottom: 32px;
73
+ }
74
+ .hero-actions { display: flex; gap: 12px; align-items: center; }
75
+ .btn-primary {
76
+ font-family: var(--mono); font-size: 13px; font-weight: 700;
77
+ background: var(--accent); color: var(--bg); border: none;
78
+ padding: 12px 24px; cursor: pointer; letter-spacing: 0.3px;
79
+ text-decoration: none; display: inline-block;
80
+ }
81
+ .btn-secondary {
82
+ font-family: var(--mono); font-size: 13px; font-weight: 400;
83
+ color: var(--text-muted); background: none; border: 1px solid var(--border);
84
+ padding: 11px 24px; cursor: pointer; text-decoration: none;
85
+ }
86
+ .btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }
87
+
88
+ /* Hero right — Transaction Flow Visualization (Signature Move) */
89
+ .hero-right {
90
+ padding: 40px 24px;
91
+ display: flex; flex-direction: column; justify-content: center;
92
+ position: relative; overflow: hidden;
93
+ background: var(--surface);
94
+ }
95
+ .tx-flow {
96
+ display: flex; flex-direction: column; gap: 0;
97
+ font-family: var(--mono); font-size: 12px;
98
+ }
99
+ .tx-row {
100
+ display: grid; grid-template-columns: 90px 1fr 100px 80px 100px;
101
+ gap: 0; padding: 10px 16px;
102
+ border-bottom: 1px solid var(--border);
103
+ align-items: center;
104
+ animation: fadeSlideIn 0.6s ease-out both;
105
+ }
106
+ .tx-row:nth-child(1) { animation-delay: 0.1s; }
107
+ .tx-row:nth-child(2) { animation-delay: 0.3s; }
108
+ .tx-row:nth-child(3) { animation-delay: 0.5s; }
109
+ .tx-row:nth-child(4) { animation-delay: 0.7s; }
110
+ .tx-row:nth-child(5) { animation-delay: 0.9s; }
111
+ .tx-row:nth-child(6) { animation-delay: 1.1s; }
112
+ .tx-row:nth-child(7) { animation-delay: 1.3s; }
113
+ .tx-row:nth-child(8) { animation-delay: 1.5s; }
114
+
115
+ @keyframes fadeSlideIn {
116
+ from { opacity: 0; transform: translateY(8px); }
117
+ to { opacity: 1; transform: translateY(0); }
118
+ }
119
+
120
+ .tx-header {
121
+ color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px;
122
+ font-size: 10px; border-bottom: 1px solid var(--border-light);
123
+ padding-bottom: 12px; margin-bottom: 4px;
124
+ }
125
+ .tx-id { color: var(--text-dim); }
126
+ .tx-desc { color: var(--text); font-family: var(--sans); font-size: 13px; }
127
+ .tx-amount { color: var(--text); text-align: right; font-weight: 700; }
128
+ .tx-currency { color: var(--text-dim); text-align: center; }
129
+ .tx-status { text-align: right; }
130
+ .tx-status .succeeded { color: var(--accent); }
131
+ .tx-status .processing { color: #f5a623; }
132
+ .tx-status .pending { color: var(--text-dim); }
133
+
134
+ .tx-flow-meta {
135
+ margin-top: 16px; padding: 12px 16px;
136
+ border: 1px solid var(--border); background: var(--bg);
137
+ display: flex; justify-content: space-between;
138
+ font-family: var(--mono); font-size: 11px; color: var(--text-dim);
139
+ }
140
+ .tx-flow-meta .live-dot {
141
+ display: inline-block; width: 6px; height: 6px;
142
+ background: var(--accent); border-radius: 50%; margin-right: 6px;
143
+ animation: pulse 2s infinite;
144
+ }
145
+ @keyframes pulse {
146
+ 0%, 100% { opacity: 1; }
147
+ 50% { opacity: 0.3; }
148
+ }
149
+
150
+ /* Stats bar */
151
+ .stats-bar {
152
+ display: grid; grid-template-columns: repeat(4, 1fr);
153
+ border-bottom: 1px solid var(--border);
154
+ }
155
+ .stat-cell {
156
+ padding: 32px 24px; border-right: 1px solid var(--border);
157
+ text-align: left;
158
+ }
159
+ .stat-cell:last-child { border-right: none; }
160
+ .stat-cell .number {
161
+ font-size: 32px; font-weight: 700; letter-spacing: -1.5px;
162
+ margin-bottom: 4px;
163
+ }
164
+ .stat-cell .number span { color: var(--accent); }
165
+ .stat-cell .label {
166
+ font-family: var(--mono); font-size: 11px; color: var(--text-dim);
167
+ text-transform: uppercase; letter-spacing: 1px;
168
+ }
169
+
170
+ /* Code section */
171
+ .code-section {
172
+ display: grid; grid-template-columns: 1fr 1fr;
173
+ border-bottom: 1px solid var(--border);
174
+ }
175
+ .code-panel {
176
+ padding: 48px 32px; border-right: 1px solid var(--border);
177
+ }
178
+ .code-panel:last-child { border-right: none; }
179
+ .code-panel h3 {
180
+ font-family: var(--mono); font-size: 11px; color: var(--accent);
181
+ text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px;
182
+ }
183
+ pre {
184
+ background: var(--bg); border: 1px solid var(--border);
185
+ padding: 20px; overflow-x: auto; font-family: var(--mono);
186
+ font-size: 12.5px; line-height: 1.8; color: var(--text-muted);
187
+ }
188
+ pre .kw { color: var(--accent); }
189
+ pre .str { color: #f5a623; }
190
+ pre .num { color: #e06060; }
191
+ pre .comment { color: var(--text-dim); }
192
+
193
+ .response-panel {
194
+ padding: 48px 32px;
195
+ display: flex; flex-direction: column;
196
+ }
197
+ .response-panel h3 {
198
+ font-family: var(--mono); font-size: 11px; color: var(--text-dim);
199
+ text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px;
200
+ }
201
+
202
+ /* Features dense grid */
203
+ .features-dense {
204
+ padding: 80px 24px; border-bottom: 1px solid var(--border);
205
+ }
206
+ .features-dense .section-head {
207
+ display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
208
+ margin-bottom: 64px;
209
+ }
210
+ .features-dense h2 {
211
+ font-size: 40px; font-weight: 700; letter-spacing: -2px; line-height: 1.1;
212
+ }
213
+ .features-dense .section-head p {
214
+ color: var(--text-muted); font-size: 15px; line-height: 1.7;
215
+ padding-top: 8px;
216
+ }
217
+ .feature-grid {
218
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
219
+ background: var(--border);
220
+ }
221
+ .feature-cell {
222
+ background: var(--surface); padding: 32px;
223
+ }
224
+ .feature-cell .feat-tag {
225
+ font-family: var(--mono); font-size: 10px; color: var(--accent);
226
+ text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
227
+ }
228
+ .feature-cell h4 {
229
+ font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.3px;
230
+ }
231
+ .feature-cell p {
232
+ font-size: 13px; color: var(--text-muted); line-height: 1.6;
233
+ }
234
+
235
+ /* Dashboard mockup section */
236
+ .dashboard-section {
237
+ padding: 80px 24px; border-bottom: 1px solid var(--border);
238
+ }
239
+ .dashboard-section h2 {
240
+ font-size: 36px; font-weight: 700; letter-spacing: -1.5px;
241
+ margin-bottom: 12px;
242
+ }
243
+ .dashboard-section > p {
244
+ color: var(--text-muted); font-size: 15px; margin-bottom: 48px; max-width: 500px;
245
+ }
246
+ .dashboard-mock {
247
+ background: var(--surface); border: 1px solid var(--border);
248
+ padding: 0; overflow: hidden;
249
+ }
250
+ .dash-toolbar {
251
+ display: flex; align-items: center; justify-content: space-between;
252
+ padding: 12px 20px; border-bottom: 1px solid var(--border);
253
+ background: var(--surface-2);
254
+ }
255
+ .dash-toolbar .tabs { display: flex; gap: 0; }
256
+ .dash-toolbar .tab {
257
+ font-family: var(--mono); font-size: 11px; padding: 6px 16px;
258
+ color: var(--text-dim); border: 1px solid var(--border);
259
+ border-right: none; cursor: pointer; background: none;
260
+ }
261
+ .dash-toolbar .tab:last-child { border-right: 1px solid var(--border); }
262
+ .dash-toolbar .tab.active { color: var(--accent); background: var(--bg); }
263
+ .dash-toolbar .period {
264
+ font-family: var(--mono); font-size: 11px; color: var(--text-dim);
265
+ }
266
+ .dash-body { padding: 24px 20px; }
267
+ .dash-metrics {
268
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
269
+ margin-bottom: 24px;
270
+ }
271
+ .dash-metric {
272
+ border: 1px solid var(--border); padding: 16px;
273
+ }
274
+ .dash-metric .val { font-size: 24px; font-weight: 700; letter-spacing: -1px; }
275
+ .dash-metric .lbl { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
276
+ .dash-metric .delta { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 4px; }
277
+ .dash-chart {
278
+ border: 1px solid var(--border); padding: 20px; height: 200px;
279
+ display: flex; align-items: flex-end; gap: 4px;
280
+ position: relative;
281
+ }
282
+ .chart-bar {
283
+ flex: 1; background: var(--accent-dim); border-top: 2px solid var(--accent);
284
+ min-height: 8px; transition: height 0.3s;
285
+ }
286
+ .dash-chart .chart-label {
287
+ position: absolute; top: 12px; left: 20px;
288
+ font-family: var(--mono); font-size: 10px; color: var(--text-dim);
289
+ text-transform: uppercase; letter-spacing: 1px;
290
+ }
291
+
292
+ /* Billing section */
293
+ .billing-section {
294
+ display: grid; grid-template-columns: 7fr 5fr;
295
+ border-bottom: 1px solid var(--border);
296
+ }
297
+ .billing-left {
298
+ padding: 80px 48px 80px 24px; border-right: 1px solid var(--border);
299
+ }
300
+ .billing-left .tag {
301
+ font-family: var(--mono); font-size: 11px; color: var(--accent);
302
+ text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px;
303
+ }
304
+ .billing-left h2 {
305
+ font-size: 36px; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 16px;
306
+ line-height: 1.1;
307
+ }
308
+ .billing-left p {
309
+ color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 24px;
310
+ max-width: 480px;
311
+ }
312
+ .billing-features {
313
+ display: flex; flex-direction: column; gap: 12px;
314
+ }
315
+ .billing-feat {
316
+ display: flex; align-items: baseline; gap: 10px;
317
+ font-size: 13px;
318
+ }
319
+ .billing-feat .check { color: var(--accent); font-family: var(--mono); font-size: 12px; }
320
+ .billing-feat span { color: var(--text-muted); }
321
+
322
+ .billing-right { padding: 40px 24px; display: flex; align-items: center; }
323
+ .invoice-mock {
324
+ width: 100%; background: var(--bg); border: 1px solid var(--border);
325
+ font-family: var(--mono); font-size: 12px;
326
+ }
327
+ .invoice-header {
328
+ padding: 16px; border-bottom: 1px solid var(--border);
329
+ display: flex; justify-content: space-between;
330
+ color: var(--text-dim);
331
+ }
332
+ .invoice-line {
333
+ padding: 10px 16px; display: flex; justify-content: space-between;
334
+ border-bottom: 1px solid var(--border);
335
+ }
336
+ .invoice-line .desc { color: var(--text-muted); }
337
+ .invoice-line .amt { color: var(--text); font-weight: 700; }
338
+ .invoice-total {
339
+ padding: 12px 16px; display: flex; justify-content: space-between;
340
+ background: var(--surface-2);
341
+ }
342
+ .invoice-total .desc { color: var(--text); font-weight: 700; }
343
+ .invoice-total .amt { color: var(--accent); font-weight: 700; font-size: 14px; }
344
+
345
+ /* Global coverage */
346
+ .coverage-section {
347
+ padding: 80px 24px; border-bottom: 1px solid var(--border);
348
+ }
349
+ .coverage-section h2 {
350
+ font-size: 36px; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 48px;
351
+ }
352
+ .coverage-grid {
353
+ display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
354
+ background: var(--border);
355
+ }
356
+ .coverage-cell {
357
+ background: var(--surface); padding: 20px;
358
+ text-align: left;
359
+ }
360
+ .coverage-cell .region {
361
+ font-family: var(--mono); font-size: 10px; color: var(--accent);
362
+ text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
363
+ }
364
+ .coverage-cell .methods {
365
+ font-size: 12px; color: var(--text-muted); line-height: 1.8;
366
+ }
367
+
368
+ /* Footer */
369
+ footer {
370
+ padding: 48px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
371
+ gap: 48px; border-top: 1px solid var(--border);
372
+ }
373
+ footer .brand { font-family: var(--mono); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
374
+ footer .brand span { color: var(--accent); }
375
+ footer .tagline { font-size: 13px; color: var(--text-dim); }
376
+ footer h5 {
377
+ font-family: var(--mono); font-size: 10px; color: var(--text-dim);
378
+ text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px;
379
+ }
380
+ footer ul { list-style: none; }
381
+ footer ul li { margin-bottom: 8px; }
382
+ footer ul li a { color: var(--text-muted); text-decoration: none; font-size: 13px; }
383
+ footer ul li a:hover { color: var(--text); }
384
+
385
+ /* Mobile */
386
+ @media (max-width: 900px) {
387
+ .hero { grid-template-columns: 1fr; }
388
+ .hero-left { padding: 48px 24px; border-right: none; border-bottom: 1px solid var(--border); }
389
+ .hero-right { min-height: 400px; }
390
+ .stats-bar { grid-template-columns: repeat(2, 1fr); }
391
+ .code-section { grid-template-columns: 1fr; }
392
+ .code-panel { border-right: none; border-bottom: 1px solid var(--border); }
393
+ .feature-grid { grid-template-columns: 1fr; }
394
+ .billing-section { grid-template-columns: 1fr; }
395
+ .billing-left { border-right: none; }
396
+ .coverage-grid { grid-template-columns: repeat(2, 1fr); }
397
+ .dash-metrics { grid-template-columns: repeat(2, 1fr); }
398
+ footer { grid-template-columns: 1fr 1fr; }
399
+ nav ul { display: none; }
400
+ .tx-row { grid-template-columns: 60px 1fr 80px 60px; }
401
+ .tx-currency { display: none; }
402
+ }
403
+ @media (max-width: 560px) {
404
+ .stats-bar { grid-template-columns: 1fr; }
405
+ .coverage-grid { grid-template-columns: 1fr; }
406
+ .dash-metrics { grid-template-columns: 1fr; }
407
+ footer { grid-template-columns: 1fr; }
408
+ }
409
+ </style>
410
+ </head>
411
+ <body>
412
+
413
+ <nav>
414
+ <div class="logo"><span>&gt;</span> tender</div>
415
+ <ul>
416
+ <li><a href="#">Products</a></li>
417
+ <li><a href="#">Documentation</a></li>
418
+ <li><a href="#">Pricing</a></li>
419
+ <li><a href="#">Changelog</a></li>
420
+ </ul>
421
+ <button class="nav-cta">Start integrating</button>
422
+ </nav>
423
+
424
+ <!-- HERO -->
425
+ <section class="hero">
426
+ <div class="hero-left">
427
+ <div class="tag">Payments Infrastructure</div>
428
+ <h1>Move money at internet scale</h1>
429
+ <p>One API for payments, payouts, billing, and fraud. Tender handles the financial plumbing so your team ships product, not compliance paperwork.</p>
430
+ <div class="hero-actions">
431
+ <a href="#" class="btn-primary">Start integrating</a>
432
+ <a href="#" class="btn-secondary">View docs</a>
433
+ </div>
434
+ </div>
435
+ <div class="hero-right">
436
+ <div class="tx-flow">
437
+ <div class="tx-row tx-header">
438
+ <span>ID</span><span>Description</span><span style="text-align:right">Amount</span><span style="text-align:center">Ccy</span><span style="text-align:right">Status</span>
439
+ </div>
440
+ <div class="tx-row">
441
+ <span class="tx-id">tx_9f3a</span>
442
+ <span class="tx-desc">Acme Corp &mdash; Annual Plan</span>
443
+ <span class="tx-amount">12,000.00</span>
444
+ <span class="tx-currency">USD</span>
445
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
446
+ </div>
447
+ <div class="tx-row">
448
+ <span class="tx-id">tx_8e2b</span>
449
+ <span class="tx-desc">Shibuya Ramen &mdash; POS Terminal</span>
450
+ <span class="tx-amount">4,280.00</span>
451
+ <span class="tx-currency">JPY</span>
452
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
453
+ </div>
454
+ <div class="tx-row">
455
+ <span class="tx-id">tx_7d1c</span>
456
+ <span class="tx-desc">CloudSaaS &mdash; Usage Billing</span>
457
+ <span class="tx-amount">847.63</span>
458
+ <span class="tx-currency">EUR</span>
459
+ <span class="tx-status"><span class="processing">processing</span></span>
460
+ </div>
461
+ <div class="tx-row">
462
+ <span class="tx-id">tx_6c0d</span>
463
+ <span class="tx-desc">Marketplace Payout &mdash; Seller #4412</span>
464
+ <span class="tx-amount">2,190.00</span>
465
+ <span class="tx-currency">GBP</span>
466
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
467
+ </div>
468
+ <div class="tx-row">
469
+ <span class="tx-id">tx_5b9e</span>
470
+ <span class="tx-desc">FinanceApp &mdash; Subscription Renewal</span>
471
+ <span class="tx-amount">99.00</span>
472
+ <span class="tx-currency">USD</span>
473
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
474
+ </div>
475
+ <div class="tx-row">
476
+ <span class="tx-id">tx_4a8f</span>
477
+ <span class="tx-desc">Berlin Mobility &mdash; Ride Credits</span>
478
+ <span class="tx-amount">1,540.00</span>
479
+ <span class="tx-currency">EUR</span>
480
+ <span class="tx-status"><span class="pending">pending</span></span>
481
+ </div>
482
+ <div class="tx-row">
483
+ <span class="tx-id">tx_3z7g</span>
484
+ <span class="tx-desc">EdTech Pro &mdash; Team License</span>
485
+ <span class="tx-amount">6,400.00</span>
486
+ <span class="tx-currency">USD</span>
487
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
488
+ </div>
489
+ <div class="tx-row">
490
+ <span class="tx-id">tx_2y6h</span>
491
+ <span class="tx-desc">Lagos Fresh &mdash; Delivery Fee</span>
492
+ <span class="tx-amount">15,000.00</span>
493
+ <span class="tx-currency">NGN</span>
494
+ <span class="tx-status"><span class="succeeded">succeeded</span></span>
495
+ </div>
496
+ </div>
497
+ <div class="tx-flow-meta">
498
+ <span><span class="live-dot"></span> Live transaction feed</span>
499
+ <span>8 of 14,291 today</span>
500
+ </div>
501
+ </div>
502
+ </section>
503
+
504
+ <!-- STATS -->
505
+ <section class="stats-bar">
506
+ <div class="stat-cell">
507
+ <div class="number">99<span>.</span>997<span>%</span></div>
508
+ <div class="label">API uptime (trailing 90d)</div>
509
+ </div>
510
+ <div class="stat-cell">
511
+ <div class="number">135<span>+</span></div>
512
+ <div class="label">Currencies supported</div>
513
+ </div>
514
+ <div class="stat-cell">
515
+ <div class="number">47<span>ms</span></div>
516
+ <div class="label">Median API latency</div>
517
+ </div>
518
+ <div class="stat-cell">
519
+ <div class="number"><span>$</span>410<span>B</span></div>
520
+ <div class="label">Processed annually</div>
521
+ </div>
522
+ </section>
523
+
524
+ <!-- CODE -->
525
+ <section class="code-section">
526
+ <div class="code-panel">
527
+ <h3>Request</h3>
528
+ <pre><span class="comment">// Create a payment intent</span>
529
+ <span class="kw">const</span> payment = <span class="kw">await</span> tender.payments.create({
530
+ amount: <span class="num">4999</span>,
531
+ currency: <span class="str">'usd'</span>,
532
+ payment_method: <span class="str">'pm_card_visa'</span>,
533
+ customer: <span class="str">'cus_R4nd0mId'</span>,
534
+ metadata: {
535
+ order_id: <span class="str">'ord_2847'</span>,
536
+ sku: <span class="str">'pro_annual'</span>
537
+ },
538
+ fraud_check: <span class="kw">true</span>,
539
+ idempotency_key: <span class="str">'ik_8f3a9b2c'</span>
540
+ });
541
+
542
+ <span class="comment">// Returns immediately with status</span>
543
+ console.log(payment.id);
544
+ <span class="comment">// =&gt; "pay_1N4x..."</span></pre>
545
+ </div>
546
+ <div class="response-panel">
547
+ <h3>Response &middot; 200 OK &middot; 43ms</h3>
548
+ <pre>{
549
+ <span class="str">"id"</span>: <span class="str">"pay_1N4xQvK9e2"</span>,
550
+ <span class="str">"object"</span>: <span class="str">"payment"</span>,
551
+ <span class="str">"amount"</span>: <span class="num">4999</span>,
552
+ <span class="str">"currency"</span>: <span class="str">"usd"</span>,
553
+ <span class="str">"status"</span>: <span class="str">"succeeded"</span>,
554
+ <span class="str">"fraud_score"</span>: <span class="num">0.02</span>,
555
+ <span class="str">"fraud_decision"</span>: <span class="str">"allow"</span>,
556
+ <span class="str">"customer"</span>: <span class="str">"cus_R4nd0mId"</span>,
557
+ <span class="str">"payment_method"</span>: {
558
+ <span class="str">"type"</span>: <span class="str">"card"</span>,
559
+ <span class="str">"brand"</span>: <span class="str">"visa"</span>,
560
+ <span class="str">"last4"</span>: <span class="str">"4242"</span>
561
+ },
562
+ <span class="str">"created"</span>: <span class="num">1719052800</span>
563
+ }</pre>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- FEATURES -->
568
+ <section class="features-dense">
569
+ <div class="container">
570
+ <div class="section-head">
571
+ <h2>Everything the money path needs</h2>
572
+ <p>From checkout to reconciliation, Tender covers the full lifecycle. No stitching together point solutions. No compliance surprises.</p>
573
+ </div>
574
+ </div>
575
+ <div class="feature-grid">
576
+ <div class="feature-cell">
577
+ <div class="feat-tag">Payments</div>
578
+ <h4>Accept any payment method</h4>
579
+ <p>Cards, bank debits, wallets, BNPL, and 50+ local methods. One integration, global reach. Automatic routing picks the cheapest rail.</p>
580
+ </div>
581
+ <div class="feature-cell">
582
+ <div class="feat-tag">Billing</div>
583
+ <h4>Subscriptions and usage metering</h4>
584
+ <p>Flat, tiered, per-seat, or metered. Proration calculated automatically. Invoices generated and delivered. Dunning retries on your schedule.</p>
585
+ </div>
586
+ <div class="feature-cell">
587
+ <div class="feat-tag">Payouts</div>
588
+ <h4>Move money to anyone, anywhere</h4>
589
+ <p>Send funds to bank accounts in 45+ countries. Split payments for marketplaces. Real-time payout tracking with webhook notifications.</p>
590
+ </div>
591
+ <div class="feature-cell">
592
+ <div class="feat-tag">Fraud</div>
593
+ <h4>Machine-learned risk scoring</h4>
594
+ <p>Every transaction scored in real-time using network-wide signals. Custom rules engine for your business logic. 3D Secure triggered adaptively.</p>
595
+ </div>
596
+ <div class="feature-cell">
597
+ <div class="feat-tag">Compliance</div>
598
+ <h4>Regulation handled for you</h4>
599
+ <p>PCI DSS Level 1, SOC 2 Type II, PSD2 SCA, local licensing. We hold the certifications so you don't manage auditors.</p>
600
+ </div>
601
+ <div class="feature-cell">
602
+ <div class="feat-tag">Platform</div>
603
+ <h4>Multi-party money flows</h4>
604
+ <p>Connected accounts, delayed settlements, platform fees, 1099-K reporting. Build a marketplace without becoming a money transmitter.</p>
605
+ </div>
606
+ <div class="feature-cell">
607
+ <div class="feat-tag">Dashboard</div>
608
+ <h4>Finance team command center</h4>
609
+ <p>Real-time revenue, disputes, refunds. Export to your ERP. Role-based access. Search any transaction in milliseconds.</p>
610
+ </div>
611
+ <div class="feature-cell">
612
+ <div class="feat-tag">Webhooks</div>
613
+ <h4>Event-driven architecture</h4>
614
+ <p>200+ event types with at-least-once delivery. Automatic retries with exponential backoff. Event replay for recovery.</p>
615
+ </div>
616
+ <div class="feature-cell">
617
+ <div class="feat-tag">SDKs</div>
618
+ <h4>Libraries for every stack</h4>
619
+ <p>Official SDKs for Node, Python, Go, Ruby, PHP, Java, .NET. Typed. Tested. Versioned. Generated from our OpenAPI spec.</p>
620
+ </div>
621
+ </div>
622
+ </section>
623
+
624
+ <!-- DASHBOARD -->
625
+ <section class="dashboard-section">
626
+ <div class="container">
627
+ <h2>Your finance team will thank you</h2>
628
+ <p>Real-time visibility into every transaction, payout, and dispute. No more spreadsheet reconciliation.</p>
629
+ <div class="dashboard-mock">
630
+ <div class="dash-toolbar">
631
+ <div class="tabs">
632
+ <button class="tab active">Overview</button>
633
+ <button class="tab">Payments</button>
634
+ <button class="tab">Payouts</button>
635
+ <button class="tab">Disputes</button>
636
+ </div>
637
+ <span class="period">Jun 1 &ndash; Jun 22, 2026</span>
638
+ </div>
639
+ <div class="dash-body">
640
+ <div class="dash-metrics">
641
+ <div class="dash-metric">
642
+ <div class="val">$2.41M</div>
643
+ <div class="lbl">Gross volume</div>
644
+ <div class="delta">+12.3% vs prev</div>
645
+ </div>
646
+ <div class="dash-metric">
647
+ <div class="val">18,429</div>
648
+ <div class="lbl">Successful payments</div>
649
+ <div class="delta">+8.7% vs prev</div>
650
+ </div>
651
+ <div class="dash-metric">
652
+ <div class="val">0.04%</div>
653
+ <div class="lbl">Dispute rate</div>
654
+ <div class="delta">-0.01pp vs prev</div>
655
+ </div>
656
+ <div class="dash-metric">
657
+ <div class="val">$184K</div>
658
+ <div class="lbl">Net payouts</div>
659
+ <div class="delta">+6.1% vs prev</div>
660
+ </div>
661
+ </div>
662
+ <div class="dash-chart">
663
+ <span class="chart-label">Daily volume (USD)</span>
664
+ <div class="chart-bar" style="height:45%"></div>
665
+ <div class="chart-bar" style="height:52%"></div>
666
+ <div class="chart-bar" style="height:48%"></div>
667
+ <div class="chart-bar" style="height:61%"></div>
668
+ <div class="chart-bar" style="height:55%"></div>
669
+ <div class="chart-bar" style="height:70%"></div>
670
+ <div class="chart-bar" style="height:68%"></div>
671
+ <div class="chart-bar" style="height:58%"></div>
672
+ <div class="chart-bar" style="height:75%"></div>
673
+ <div class="chart-bar" style="height:82%"></div>
674
+ <div class="chart-bar" style="height:78%"></div>
675
+ <div class="chart-bar" style="height:90%"></div>
676
+ <div class="chart-bar" style="height:85%"></div>
677
+ <div class="chart-bar" style="height:72%"></div>
678
+ <div class="chart-bar" style="height:88%"></div>
679
+ <div class="chart-bar" style="height:95%"></div>
680
+ <div class="chart-bar" style="height:91%"></div>
681
+ <div class="chart-bar" style="height:80%"></div>
682
+ <div class="chart-bar" style="height:87%"></div>
683
+ <div class="chart-bar" style="height:92%"></div>
684
+ <div class="chart-bar" style="height:85%"></div>
685
+ <div class="chart-bar" style="height:70%"></div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </section>
691
+
692
+ <!-- BILLING -->
693
+ <section class="billing-section">
694
+ <div class="billing-left">
695
+ <div class="tag">Billing Engine</div>
696
+ <h2>Subscriptions that handle the edge cases</h2>
697
+ <p>Upgrades, downgrades, trials, add-ons, metered overages, annual contracts with monthly invoicing. Tender's billing engine handles the permutations you'd rather not code yourself.</p>
698
+ <div class="billing-features">
699
+ <div class="billing-feat"><span class="check">[+]</span> <span>Proration calculated to the second</span></div>
700
+ <div class="billing-feat"><span class="check">[+]</span> <span>Smart dunning with configurable retry schedules</span></div>
701
+ <div class="billing-feat"><span class="check">[+]</span> <span>Revenue recognition-ready invoices</span></div>
702
+ <div class="billing-feat"><span class="check">[+]</span> <span>Usage metering with real-time aggregation</span></div>
703
+ <div class="billing-feat"><span class="check">[+]</span> <span>Multi-currency with automatic FX at settlement</span></div>
704
+ <div class="billing-feat"><span class="check">[+]</span> <span>Tax calculation via Tender Tax or third-party</span></div>
705
+ </div>
706
+ </div>
707
+ <div class="billing-right">
708
+ <div class="invoice-mock">
709
+ <div class="invoice-header">
710
+ <span>INV-2026-04418</span>
711
+ <span>Jun 22, 2026</span>
712
+ </div>
713
+ <div class="invoice-line">
714
+ <span class="desc">Pro Plan (annual)</span>
715
+ <span class="amt">$4,800.00</span>
716
+ </div>
717
+ <div class="invoice-line">
718
+ <span class="desc">Additional seats x 3</span>
719
+ <span class="amt">$1,440.00</span>
720
+ </div>
721
+ <div class="invoice-line">
722
+ <span class="desc">API calls overage (12,400 units)</span>
723
+ <span class="amt">$248.00</span>
724
+ </div>
725
+ <div class="invoice-line">
726
+ <span class="desc">Credit: unused days on Basic</span>
727
+ <span class="amt" style="color: var(--accent);">-$142.47</span>
728
+ </div>
729
+ <div class="invoice-line">
730
+ <span class="desc">Tax (8.875%)</span>
731
+ <span class="amt">$563.14</span>
732
+ </div>
733
+ <div class="invoice-total">
734
+ <span class="desc">Total due</span>
735
+ <span class="amt">$6,908.67</span>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </section>
740
+
741
+ <!-- COVERAGE -->
742
+ <section class="coverage-section">
743
+ <div class="container">
744
+ <h2>Global coverage, local methods</h2>
745
+ <div class="coverage-grid">
746
+ <div class="coverage-cell">
747
+ <div class="region">North America</div>
748
+ <div class="methods">Visa / MC / Amex<br>ACH Direct Debit<br>Apple Pay<br>Google Pay</div>
749
+ </div>
750
+ <div class="coverage-cell">
751
+ <div class="region">Europe</div>
752
+ <div class="methods">SEPA Direct Debit<br>iDEAL<br>Bancontact<br>Klarna / Sofort</div>
753
+ </div>
754
+ <div class="coverage-cell">
755
+ <div class="region">UK</div>
756
+ <div class="methods">Visa / MC Debit<br>Open Banking<br>Bacs Direct Debit<br>PayPal</div>
757
+ </div>
758
+ <div class="coverage-cell">
759
+ <div class="region">Asia Pacific</div>
760
+ <div class="methods">Alipay / WeChat<br>Konbini<br>UPI<br>GrabPay / GCash</div>
761
+ </div>
762
+ <div class="coverage-cell">
763
+ <div class="region">Latin America</div>
764
+ <div class="methods">PIX<br>Boleto<br>OXXO<br>Mercado Pago</div>
765
+ </div>
766
+ <div class="coverage-cell">
767
+ <div class="region">Africa / MENA</div>
768
+ <div class="methods">M-Pesa<br>Flutterwave<br>KNET<br>Mada</div>
769
+ </div>
770
+ </div>
771
+ </div>
772
+ </section>
773
+
774
+ <!-- FOOTER -->
775
+ <footer>
776
+ <div>
777
+ <div class="brand"><span>&gt;</span> tender</div>
778
+ <div class="tagline">Payments infrastructure for the internet economy.</div>
779
+ </div>
780
+ <div>
781
+ <h5>Product</h5>
782
+ <ul>
783
+ <li><a href="#">Payments</a></li>
784
+ <li><a href="#">Billing</a></li>
785
+ <li><a href="#">Payouts</a></li>
786
+ <li><a href="#">Fraud</a></li>
787
+ <li><a href="#">Dashboard</a></li>
788
+ </ul>
789
+ </div>
790
+ <div>
791
+ <h5>Developers</h5>
792
+ <ul>
793
+ <li><a href="#">Documentation</a></li>
794
+ <li><a href="#">API Reference</a></li>
795
+ <li><a href="#">SDKs</a></li>
796
+ <li><a href="#">Changelog</a></li>
797
+ <li><a href="#">Status</a></li>
798
+ </ul>
799
+ </div>
800
+ <div>
801
+ <h5>Company</h5>
802
+ <ul>
803
+ <li><a href="#">About</a></li>
804
+ <li><a href="#">Careers</a></li>
805
+ <li><a href="#">Security</a></li>
806
+ <li><a href="#">Legal</a></li>
807
+ <li><a href="#">Contact</a></li>
808
+ </ul>
809
+ </div>
810
+ </footer>
811
+
812
+ </body>
813
+ </html>