diff --git a/get-pricing.js b/get-pricing.js
new file mode 100644
index 00000000..ed077959
--- /dev/null
+++ b/get-pricing.js
@@ -0,0 +1,41 @@
+// Global variable to store pricing data
+window.pricingData = {
+ "eventTypePricing": {
+ "Post": 0.005,
+ "User": 0.01
+ },
+ "requestTypePricing": {
+ "Write": 0.01
+ },
+ "defaultCost": 0.0
+};
+
+// // Fetch pricing data from X console API
+// async function fetchPricingData() {
+// try {
+// const response = await fetch('https://console.x.com/api/credits/pricing', {
+// method: 'GET',
+// headers: {
+// 'dtab-local': '/s/datadelivery-foundation/dev-portal-api:https=>/srv#/staging1/pdxa/datadelivery-foundation/dev-portal-api:https'
+// }
+// });
+
+// if (!response.ok) {
+// throw new Error(`HTTP error! status: ${response.status}`);
+// }
+
+// const data = await response.json();
+// console.log('Pricing data:', data);
+
+// // Set the global variable
+// window.pricingData = data;
+
+// return data;
+// } catch (error) {
+// console.error('Error fetching pricing data:', error);
+// window.pricingData = null;
+// }
+// }
+
+// Execute the function when the script loads
+fetchPricingData();
diff --git a/pilot.mdx b/pilot.mdx
new file mode 100644
index 00000000..b321fc5d
--- /dev/null
+++ b/pilot.mdx
@@ -0,0 +1,590 @@
+---
+title: X API Pay-Per-Use Pricing Pilot
+sidebarTitle: "Overview"
+mode: 'custom'
+---
+
+import { Button } from '/snippets/button.mdx';
+
+
+ {/* Pattern overlay */}
+
+ {/* Gradient overlay */}
+
+ {/* Content */}
+
+
+ X API Pay-Per-Use Pricing Pilot
+
+
+ Pay only for the API requests you make with our new credit-based system. No upfront fees, no monthly caps.
+
+
+ This pilot is currently available to a select group of developers.
+
+
+
+
+
+
+
+ Key Benefits
+
+
+ Discover why our pay-per-use model is better for developers of all sizes
+
+
+ }>
+ No fixed monthly costs—pay only for what you use.
+
+ }>
+ Lower barriers for small developers; costs scale with usage, avoiding expensive tier jumps.
+
+ }>
+ Fewer tier restrictions, with less restrictive rate limits.
+
+ }>
+ Detailed tracking of consumption in the Developer Console.
+
+
+
+
+
+ {/* Pattern overlay */}
+
+ {/* Gradient overlay */}
+
+ {/* Content */}
+
+
+ How the Pay-Per-Use Model Works
+
+
+ This model uses a credits system where you buy credits upfront and deduct them based on usage.
+
+
+
+
+
+
+
Purchase Credits
+
+ Buy from the Developer Console Billing tab.
+
+
+
+
+
+
+
+
+
+
Track Usage
+
+ Monitor in real-time via the Dashboard.
+
+
+
+
+
+
+
+
+
+
Rate Limits
+
+ Applied per endpoint but more generous than before.
+
+
+
+
+
+
+ Credits can be purchased in the Developer Console. Free credits may also be awarded through promotions or vouchers.
+
+
+
+
+
+
+
+ Credit Consumption Details
+
+
+
+
+
+ | Resource |
+ Description |
+ Cost per Unit |
+ Example |
+
+
+
+
+ |
+ Post Reads
+ |
+
+ Each Post object returned in responses
+ |
+ $0.005 |
+
+ Fetching a timeline with 10 posts: $0.05
+ |
+
+
+ |
+ User Reads
+ |
+
+ Each User object returned in responses
+ |
+ $0.01 |
+
+ Fetching a List with 10 members: $0.10
+ |
+
+
+ |
+ Post Writes
+ |
+
+ Requests to POST /2/tweets
+ |
+ $0.01 |
+
+ Creating a new post: $0.01
+ |
+
+
+ |
+ Like Writes
+ |
+
+ Requests to POST /2/users/{id}/likes
+ |
+ $0.01 |
+
+ Liking a post: $0.01
+ |
+
+
+ |
+ Follow Writes
+ |
+
+ Requests to POST /2/users/{id}/following
+ |
+ $0.01 |
+
+ Following a user: $0.01
+ |
+
+
+
+
+
+
+
+ Future updates may add credit costs for more objects (e.g. DMs, Likes) or operations (e.g. DELETE/PUT) based on feedback.
+
+
+
+
+ {/* Pattern overlay */}
+
+ {/* Gradient overlay */}
+
+ {/* Content */}
+
+
+ Comparison to the Old Subscription Model
+
+
+
+
+
+
+ | Feature |
+ Subscription Model (Old) |
+ Pay-Per-Use Model (New) |
+
+
+
+
+ |
+ Pricing Structure
+ |
+
+ Fixed monthly fees: Free ($0), Basic ($200), Pro ($5,000)
+ |
+
+ Usage-based: Purchase credits as needed; no subscriptions
+ |
+
+
+ |
+ Rate Limits
+ |
+
+ Tier-dependent (higher = better)
+ |
+
+ Less restrictive overall; per endpoint
+ |
+
+
+ |
+ Resource Caps
+ |
+
+ Monthly cap on objects
+ |
+
+ No cap; $0.005 per Post, $0.01 per User
+ |
+
+
+ |
+ Write Costs
+ |
+
+ Included in subscription
+ |
+
+ $0.01 for Posts, Likes, Follows
+ |
+
+
+
+
+
+
+
+
+ Getting Started with Pay-Per-Use
+
+
+
+
+
+
+
+
Purchase Credits
+
Go to the Billing > Credits tab to buy credits using a saved payment method.
+
+
+
+
+
+
Create an App
+
In the Apps tab, create a new app to get API keys and credentials.
+
+
+
+
+
+
Make Requests
+
Use the API as usual—credits will be deducted automatically.
+
+
+
+
+
+
Monitor Usage
+
Check the Dashboard or Usage tab for real-time analytics.
+
+
+
+
+
+
+
+ {/* Pattern overlay */}
+
+ {/* Gradient overlay */}
+
+ {/* Content */}
+
+
Ready to join the pilot?
+
Start using the pay-per-use model today.
+
+
+
diff --git a/style.css b/style.css
index ccb111cf..bf840d02 100644
--- a/style.css
+++ b/style.css
@@ -47,7 +47,7 @@ td[data-label="Free Limit"] strong {
}
#assistant-entry span::before {
content: "Ask Grok";
- font-size: 0.875rem;
+ font-size: 0.6rem;
line-height: 1.5rem;
}
#assistant-entry svg {
@@ -71,7 +71,7 @@ td[data-label="Free Limit"] strong {
}
.chat-assistant-sheet-header span.font-semibold::before {
content: "Grok";
- font-size: 0.875rem;
+ font-size: 0.6rem;
font-weight: 600;
}
.chat-assistant-sheet-header svg.size-5.text-primary.dark\:text-primary-light {
@@ -107,5 +107,728 @@ td[data-label="Free Limit"] strong {
}
#sidebar-content {
- padding-left: 2rem;
-}
\ No newline at end of file
+ padding-left: 1rem;
+}
+
+@media (max-width: 640px) {
+ .steps {
+ flex-direction: column !important;
+ gap: 2rem !important;
+ }
+
+ .step {
+ padding-right: 0 !important;
+ }
+}
+
+@media (max-width: 768px) {
+ .footer-section {
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ height: auto;
+ gap: 2rem;
+ }
+
+ .footer-text {
+ text-align: center;
+ font-size: 1.25rem;
+ }
+
+ .footer-buttons {
+ justify-content: center;
+ gap: 1rem;
+ flex-wrap: wrap;
+ }
+
+ .footer-buttons .not-prose.group button {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ font-size: 0.9rem;
+ }
+}
+/* Pilot page responsive styles */
+.pilot-hero {
+ min-height: 24rem;
+}
+
+.pilot-section {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+
+.pilot-section-title {
+ font-size: 20px;
+}
+
+.pilot-table-container {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.pilot-table {
+ min-width: 600px;
+}
+
+@media (max-width: 640px) {
+ .pilot-hero {
+ min-height: 16rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section-title {
+ font-size: 14px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.3rem;
+ font-size: 0.6rem;
+ }
+
+ .text-hero {
+ font-size: 1.25rem !important;
+ line-height: 1.2;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-hero {
+ min-height: 16rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section-title {
+ font-size: 14px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.3rem;
+ font-size: 0.6rem;
+ }
+
+ .text-hero {
+ font-size: 1.25rem !important;
+ line-height: 1.1;
+ }
+}
+
+/* Enhanced mobile styles for very small screens */
+@media (max-width: 375px) {
+ .pilot-hero {
+ min-height: 16rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .pilot-section {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .pilot-section-title {
+ font-size: 14px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.375rem;
+ font-size: 0.75rem;
+ }
+
+ .text-hero {
+ font-size: 1.25rem !important;
+ line-height: 1.1;
+ }
+
+ /* Mobile button scaling */
+ .pilot-hero button,
+ .footer-buttons button {
+ padding: 0.75rem 1rem !important;
+ font-size: 0.875rem !important;
+ }
+
+ /* Mobile footer improvements */
+ .footer-section {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ height: auto !important;
+ min-height: 12rem;
+ }
+
+ .footer-text {
+ font-size: 1.25rem !important;
+ margin-bottom: 1rem;
+ }
+
+ .footer-buttons {
+ flex-direction: column !important;
+ gap: 0.75rem !important;
+ width: 100%;
+ }
+
+ .footer-buttons .not-prose.group {
+ width: 100%;
+ }
+
+ .footer-buttons .not-prose.group button {
+ width: 100% !important;
+ padding: 0.75rem 1rem !important;
+ font-size: 0.875rem !important;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-hero {
+ min-height: 14rem;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ }
+
+ .pilot-section {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ }
+
+ .pilot-section-title {
+ font-size: 12px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.2rem;
+ font-size: 0.6rem;
+ }
+
+ .text-hero {
+ font-size: 1.125rem !important;
+ line-height: 1.1;
+ }
+
+ /* Extra small mobile button scaling */
+ .pilot-hero button,
+ .footer-buttons button {
+ padding: 0.5rem 0.75rem !important;
+ font-size: 0.8rem !important;
+ }
+
+ /* Extra small mobile footer */
+ .footer-section {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+ min-height: 10rem;
+ }
+
+ .footer-text {
+ font-size: 1rem !important;
+ margin-bottom: 0.75rem;
+ }
+
+ .footer-buttons .not-prose.group button {
+ padding: 0.5rem 0.75rem !important;
+ font-size: 0.8rem !important;
+ }
+}
+
+/* Mobile table improvements */
+@media (max-width: 640px) {
+ .pilot-table-container {
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+ border-radius: 0;
+ }
+
+ .pilot-table {
+ min-width: 380px;
+ }
+
+ .pilot-table th:first-child,
+ .pilot-table td:first-child {
+ position: sticky;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.9);
+ z-index: 1;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-table-container {
+ margin-left: -0.75rem;
+ margin-right: -0.75rem;
+ }
+
+ .pilot-table {
+ min-width: 380px;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-table-container {
+ margin-left: -0.5rem;
+ margin-right: -0.5rem;
+ }
+
+ .pilot-table {
+ min-width: 320px;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-table-container {
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+ }
+
+ .pilot-table {
+ min-width: 320px;
+ }
+}
+
+/* Mobile card improvements */
+@media (max-width: 640px) {
+ .pilot-section .card {
+ margin-bottom: 1rem;
+ }
+}
+
+/* Mobile info boxes */
+@media (max-width: 640px) {
+ .pilot-section .info {
+ font-size: 0.6rem;
+ padding: 0.3rem;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-section .info {
+ font-size: 0.6rem;
+ padding: 0.3rem;
+ }
+}
+
+/* Mobile button styles */
+@media (max-width: 640px) {
+ .pilot-hero-button,
+ .pilot-footer-button {
+ padding: 0.75rem 1.5rem !important;
+ font-size: 1rem !important;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-hero-button,
+ .pilot-footer-button {
+ padding: 0.625rem 1.25rem !important;
+ font-size: 0.9rem !important;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-hero-button,
+ .pilot-footer-button {
+ padding: 0.5rem 1rem !important;
+ font-size: 0.85rem !important;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-hero-button,
+ .pilot-footer-button {
+ padding: 0.4rem 0.8rem !important;
+ font-size: 0.8rem !important;
+ }
+}
+
+/* Mobile paragraph text scaling */
+@media (max-width: 640px) {
+ .pilot-hero p {
+ font-size: 14px !important;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-hero p {
+ font-size: 13px !important;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-hero p {
+ font-size: 12px !important;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-hero p {
+ font-size: 11px !important;
+ }
+}
+
+/* Mobile footer bottom padding to prevent buttons touching screen edge */
+@media (max-width: 768px) {
+ .footer-section {
+ padding-bottom: 2rem !important;
+ }
+}
+
+@media (max-width: 640px) {
+ .footer-section {
+ padding-bottom: 2.5rem !important;
+ }
+}
+
+@media (max-width: 480px) {
+ .footer-section {
+ padding-bottom: 3rem !important;
+ }
+}
+
+@media (max-width: 375px) {
+ .footer-section {
+ padding-bottom: 3.5rem !important;
+ }
+}
+
+@media (max-width: 320px) {
+ .footer-section {
+ padding-bottom: 4rem !important;
+ }
+}
+
+/* Additional mobile body padding for very small screens */
+@media (max-width: 480px) {
+ body {
+ padding-bottom: 1rem !important;
+ }
+}
+
+@media (max-width: 375px) {
+ body {
+ padding-bottom: 1.5rem !important;
+ }
+}
+
+@media (max-width: 320px) {
+ body {
+ padding-bottom: 2rem !important;
+ }
+}
+
+/* Pilot page specific bottom spacing */
+@media (max-width: 768px) {
+ .pilot-section:last-of-type {
+ margin-bottom: 2rem;
+ }
+}
+
+@media (max-width: 640px) {
+ .pilot-section:last-of-type {
+ margin-bottom: 2.5rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-section:last-of-type {
+ margin-bottom: 3rem;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-section:last-of-type {
+ margin-bottom: 3.5rem;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-section:last-of-type {
+ margin-bottom: 4rem;
+ }
+}
+
+/* Ensure footer has proper spacing from content */
+@media (max-width: 768px) {
+ .footer-section {
+ margin-top: 2rem !important;
+ }
+}
+
+@media (max-width: 480px) {
+ .footer-section {
+ margin-top: 2.5rem !important;
+ }
+}
+
+@media (max-width: 375px) {
+ .footer-section {
+ margin-top: 3rem !important;
+ }
+}
+
+@media (max-width: 320px) {
+ .footer-section {
+ margin-top: 3.5rem !important;
+ }
+}
+
+/* iPhone 16 Pro and Pro Max specific styles */
+@media (max-width: 430px) and (min-width: 376px) {
+ .pilot-hero {
+ min-height: 18rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ }
+
+ .pilot-section-title {
+ font-size: 15px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.4rem;
+ font-size: 0.75rem;
+ }
+
+ .text-hero {
+ font-size: 1.4rem !important;
+ line-height: 1.2;
+ }
+
+ .pilot-hero-button,
+ .pilot-footer-button {
+ padding: 0.6rem 1.2rem !important;
+ font-size: 0.9rem !important;
+ }
+
+ .pilot-hero p {
+ font-size: 13px !important;
+ }
+
+ .footer-section {
+ padding-bottom: 3rem !important;
+ margin-top: 2.5rem !important;
+ }
+
+ .footer-text {
+ font-size: 1.2rem !important;
+ }
+
+ .footer-buttons .not-prose.group button {
+ padding: 0.6rem 1.2rem !important;
+ font-size: 0.9rem !important;
+ }
+}
+
+/* Enhanced table scaling for all mobile sizes */
+@media (max-width: 640px) {
+ .pilot-table {
+ min-width: 380px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.4rem;
+ font-size: 0.75rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-table {
+ min-width: 380px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.3rem;
+ font-size: 0.6rem;
+ }
+}
+
+@media (max-width: 430px) {
+ .pilot-table {
+ min-width: 320px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.2rem;
+ font-size: 0.65rem;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-table {
+ min-width: 320px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.2rem;
+ font-size: 0.6rem;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-table {
+ min-width: 280px;
+ }
+
+ .pilot-table th,
+ .pilot-table td {
+ padding: 0.15rem;
+ font-size: 0.55rem;
+ }
+}
+
+/* More aggressive table container margins for better scrolling */
+@media (max-width: 640px) {
+ .pilot-table-container {
+ margin-left: -1rem;
+ margin-right: -1rem;
+ border-radius: 0;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-table-container {
+ margin-left: -1.25rem;
+ margin-right: -1.25rem;
+ }
+}
+
+@media (max-width: 430px) {
+ .pilot-table-container {
+ margin-left: -1.5rem;
+ margin-right: -1.5rem;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-table-container {
+ margin-left: -1.75rem;
+ margin-right: -1.75rem;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-table-container {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ }
+}
+
+/* iPhone 16 Pro Max specific (430px width) */
+@media (max-width: 430px) {
+ .pilot-hero {
+ min-height: 17rem;
+ }
+
+ .pilot-section {
+ padding-top: 1.75rem;
+ padding-bottom: 1.75rem;
+ }
+
+ .pilot-section-title {
+ font-size: 14px;
+ }
+
+ .text-hero {
+ font-size: 1.3rem !important;
+ }
+
+ .pilot-hero p {
+ font-size: 12px !important;
+ }
+
+ .footer-section {
+ padding-bottom: 3.5rem !important;
+ margin-top: 3rem !important;
+ }
+
+ .footer-text {
+ font-size: 1.1rem !important;
+ }
+}
+
+/* Table content optimization for mobile */
+@media (max-width: 640px) {
+ .pilot-table th:not(:first-child),
+ .pilot-table td:not(:first-child) {
+ max-width: 120px;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
+}
+
+@media (max-width: 480px) {
+ .pilot-table th:not(:first-child),
+ .pilot-table td:not(:first-child) {
+ max-width: 100px;
+ }
+}
+
+@media (max-width: 430px) {
+ .pilot-table th:not(:first-child),
+ .pilot-table td:not(:first-child) {
+ max-width: 80px;
+ }
+}
+
+@media (max-width: 375px) {
+ .pilot-table th:not(:first-child),
+ .pilot-table td:not(:first-child) {
+ max-width: 70px;
+ }
+}
+
+@media (max-width: 320px) {
+ .pilot-table th:not(:first-child),
+ .pilot-table td:not(:first-child) {
+ max-width: 60px;
+ }
+}
+
+/* Better table header styling for mobile */
+@media (max-width: 640px) {
+ .pilot-table th {
+ font-weight: 600;
+ background-color: rgba(0, 0, 0, 0.8);
+ }
+}
+
+/* Improved table row spacing */
+@media (max-width: 640px) {
+ .pilot-table tr {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+}
diff --git a/tally.js b/tally.js
new file mode 100644
index 00000000..d1603f90
--- /dev/null
+++ b/tally.js
@@ -0,0 +1 @@
+var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}
\ No newline at end of file