diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index b864446..4a5d8ff 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -177,6 +177,20 @@ jobs:
           }
           $global:LASTEXITCODE = 0
 
+  landing-pricing:
+    name: Landing pricing contract
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v5
+
+      # Network-free by design: the test stubs fetch, so a red run means the
+      # PAGE changed, never that the pricing API wobbled. Guards against the
+      # 2026-07-26 drift where get.traylinx.com advertised three retired plans
+      # and a money-back guarantee the terms of sale contradict.
+      - name: Landing page must render prices from the live API, not literals
+        run: node tests/landing-pricing.test.mjs
+
   rust:
     name: Rust ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
diff --git a/tests/landing-pricing.test.mjs b/tests/landing-pricing.test.mjs
new file mode 100644
index 0000000..4899361
--- /dev/null
+++ b/tests/landing-pricing.test.mjs
@@ -0,0 +1,245 @@
+// Landing-page pricing contract. Network-free on purpose: it stubs `fetch`, so
+// CI never depends on the pricing API being up, and a red run always means the
+// PAGE changed rather than production wobbling.
+//
+// Why this exists. Until 2026-07-26 this page hardcoded three plans that had
+// been retired (Explorer/Creator/Operator at $39/$79/$149), advertised "Save 2
+// months", and promised a "7-day money-back guarantee" that the terms of sale
+// directly contradict. Nothing caught it because nothing was watching. These
+// checks watch.
+//
+// Run: node tests/landing-pricing.test.mjs
+//
+// NOT in web/. That directory is the published asset root -- Cloudflare Workers
+// serves ./web directly and the Pages job does `cp -rL web/. _site/` -- so a
+// test file living there would be downloadable at get.traylinx.com.
+
+import fs from 'node:fs';
+import vm from 'node:vm';
+import assert from 'node:assert/strict';
+
+const HTML = fs.readFileSync(new URL('../web/index.html', import.meta.url), 'utf8');
+const SCRIPT = HTML.match(/<script>([\s\S]*?)<\/script>/)[1];
+
+let failures = 0;
+const test = (name, fn) => {
+  try {
+    const r = fn();
+    return r instanceof Promise
+      ? r.then(() => console.log(`  ok  ${name}`), e => { failures++; console.error(`  FAIL ${name}\n       ${e.message}`); })
+      : console.log(`  ok  ${name}`);
+  } catch (e) {
+    failures++;
+    console.error(`  FAIL ${name}\n       ${e.message}`);
+  }
+};
+
+// ── sandbox ────────────────────────────────────────────────────────────────
+function boot(fetchImpl) {
+  const mk = () => ({ innerHTML: '', textContent: '', hidden: false, classList: { toggle() {} } });
+  const els = { 'pricing-grid': mk(), 'annual-terms': mk(), 'pricing-footnote': mk() };
+  // Real toggle stubs so setBillingButtons() is exercised: the failed-annual
+  // path MOVES the toggle, and a test that cannot see that proves nothing.
+  const buttons = ['month', 'year'].map(mode => ({
+    mode, active: mode === 'month',
+    getAttribute: () => mode,
+    addEventListener() {},
+    classList: { toggle(_cls, on) { this.owner.active = on; } }
+  }));
+  buttons.forEach(b => { b.classList.owner = b; });
+  const ctx = {
+    document: {
+      getElementById: id => els[id] || null,
+      querySelectorAll: sel => (sel === '[data-billing]' ? buttons : [])
+    },
+    navigator: { language: 'de-DE', languages: ['de-DE'] },
+    Intl: { DateTimeFormat: () => ({ resolvedOptions: () => ({ timeZone: 'Europe/Berlin' }) }) },
+    fetch: fetchImpl, URLSearchParams, console, setTimeout, clearTimeout
+  };
+  vm.createContext(ctx);
+  vm.runInContext(SCRIPT, ctx);
+  const activeToggle = () => (buttons.find(b => b.active) || {}).mode;
+  return { ctx, els, buttons, activeToggle };
+}
+
+async function renderAt(ctx, els, mode) {
+  vm.runInContext(`billingMode = ${JSON.stringify(mode)};`, ctx);
+  await vm.runInContext('loadPricing()', ctx);
+  const html = els['pricing-grid'].innerHTML;
+  return {
+    html,
+    prices: [...html.matchAll(/<strong>([^<]+)<\/strong>/g)].map(m => m[1]),
+    names: [...html.matchAll(/class="plan-name">([^<]+)</g)].map(m => m[1]),
+    terms: els['annual-terms'],
+    footnote: els['pricing-footnote'].textContent
+  };
+}
+
+const jsonOk = payload => async () => ({ ok: true, json: async () => payload });
+const dead = async () => { throw new Error('network down'); };
+
+const livePayload = (interval, label) => ({
+  success: true,
+  data: {
+    interval,
+    region: { currency: 'eur', tax_copy: 'VAT included where applicable' },
+    annual: interval === 'year'
+      ? { enabled: true, refundable: false, consent_text: 'Billed once for 12 months, up front.' }
+      : undefined,
+    cards: [
+      { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server.', price: { label }, highlights: ['EU-hosted'], cta: { label: 'Deploy My Pod' } },
+      { id: 'custom', name: 'Custom', self_serve: false, tagline: 'Talk to us.', price: {}, highlights: [] }
+    ]
+  }
+});
+
+console.log('landing pricing contract');
+
+// ── 1. the page must never carry a price of its own ───────────────────────
+await test('no retired plan names survive in the markup', () => {
+  const body = HTML.split('<script>')[0];
+  for (const dead of ['Explorer', 'Creator', 'Operator']) {
+    assert.ok(!body.includes(`>${dead}<`), `retired plan "${dead}" is still rendered`);
+  }
+});
+
+await test('no refund promise anywhere (the terms say no refunds)', () => {
+  assert.ok(!/money-back|money back/i.test(HTML.replace(/\/\/[^\n]*/g, '')), 'a money-back promise is still on the page');
+});
+
+await test('the annual toggle badge names no number of months', () => {
+  const badge = HTML.match(/class="save"[^>]*>([^<]+)</)[1];
+  assert.ok(!/\d/.test(badge), `toggle badge "${badge}" names a number`);
+  assert.ok(!/month/i.test(badge), `toggle badge "${badge}" promises months`);
+});
+
+// ── 2. live payload wins ──────────────────────────────────────────────────
+await test('renders the amount the API returns, monthly', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.deepEqual(r.prices, ['€24']);
+  assert.deepEqual(r.names, ['Starter']);
+});
+
+await test('renders the amount the API returns, annual', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('year', '€269/yr')));
+  const r = await renderAt(ctx, els, 'year');
+  assert.deepEqual(r.prices, ['€269/yr']);
+});
+
+await test('a changed API amount changes the page with no code edit', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€31')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.deepEqual(r.prices, ['€31'], 'page did not follow the API');
+});
+
+await test('skips cards that are not self-serve', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(!r.names.includes('Custom'), 'a non-self-serve card was rendered as buyable');
+});
+
+// ── 3. annual terms show only where they are true ─────────────────────────
+await test('shows the annual terms on the annual view', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('year', '€269/yr')));
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(r.terms.hidden, false);
+  assert.match(r.terms.textContent, /12 months/);
+});
+
+await test('hides the annual terms on the monthly view', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.equal(r.terms.hidden, true, '"not refundable" must not sit next to a plan you can cancel monthly');
+});
+
+await test('hides the annual terms when the API says annual is dark', async () => {
+  const p = livePayload('year', '€269/yr');
+  p.data.annual = { enabled: false };
+  const { ctx, els } = boot(jsonOk(p));
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(r.terms.hidden, true);
+});
+
+// ── 4. degradation, not blanking ──────────────────────────────────────────
+await test('falls back to the bundled snapshot when the API is down', async () => {
+  const { ctx, els } = boot(dead);
+  for (const mode of ['month', 'year']) {
+    const r = await renderAt(ctx, els, mode);
+    assert.ok(r.prices.length >= 4, `${mode} blanked instead of degrading`);
+    assert.ok(!/\$/.test(r.html), `${mode} fallback shows a USD price`);
+  }
+});
+
+await test('rejects a malformed payload rather than rendering it', async () => {
+  const { ctx, els } = boot(jsonOk({ success: true, data: { cards: [{ id: 'x' }] } }));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(r.prices.length >= 4, 'a malformed payload was rendered instead of the snapshot');
+});
+
+await test('rejects a non-200 rather than rendering it', async () => {
+  const { ctx, els } = boot(async () => ({ ok: false, status: 500, json: async () => ({}) }));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(r.prices.length >= 4);
+});
+
+// ── 5. injection ──────────────────────────────────────────────────────────
+await test('escapes API-supplied text', async () => {
+  const p = livePayload('month', '<img src=x onerror=alert(1)>');
+  const { ctx, els } = boot(jsonOk(p));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(!r.html.includes('<img'), 'API text was injected as raw HTML');
+  assert.ok(r.html.includes('&lt;img'), 'API text was not escaped');
+});
+
+// ── 6. term integrity: never show one term's prices under the other's label ──
+// These three come from the codex review of PR #37. The first is the same bug
+// class that shipped in the pricing proxy the same day: a structurally perfect
+// payload carrying the WRONG TERM, which nothing failed loudly on.
+
+await test('rejects a payload whose interval is not the one requested', async () => {
+  // Asked for a year, proxy answered with month. Structurally valid, wrong term.
+  const wrong = livePayload('month', '€24');
+  const { ctx, els, activeToggle } = boot(jsonOk(wrong));
+  const r = await renderAt(ctx, els, 'year');
+  assert.ok(!r.prices.includes('€24') || r.prices.length >= 4,
+    'monthly amounts were rendered for a yearly request');
+  assert.equal(activeToggle(), 'month', 'toggle must follow the term actually shown');
+});
+
+await test('a late reply from a superseded request cannot repaint the page', async () => {
+  let release;
+  const slowMonth = new Promise(res => { release = res; });
+  const fetchImpl = async url => {
+    if (String(url).includes('interval=month')) {
+      await slowMonth;
+      return { ok: true, json: async () => livePayload('month', '€24') };
+    }
+    return { ok: true, json: async () => livePayload('year', '€269/yr') };
+  };
+  const { ctx, els } = boot(fetchImpl);
+
+  vm.runInContext("billingMode='month';", ctx);
+  const monthCall = vm.runInContext('loadPricing()', ctx);   // in flight
+  vm.runInContext("billingMode='year';", ctx);
+  await vm.runInContext('loadPricing()', ctx);               // supersedes it
+  release();                                                  // month lands late
+  await monthCall;
+
+  const prices = [...els['pricing-grid'].innerHTML.matchAll(/<strong>([^<]+)<\/strong>/g)].map(m => m[1]);
+  assert.deepEqual(prices, ['€269/yr'], 'a stale monthly response repainted the yearly view');
+});
+
+await test('a failed ANNUAL load drops to monthly and moves the toggle with it', async () => {
+  // The bundled snapshot cannot know whether annual is still sellable. Showing
+  // an unconfirmed annual ladder would advertise a term we may have switched
+  // off, so degrade toward the SHORTER commitment, never the longer one.
+  const { ctx, els, activeToggle } = boot(dead);
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(activeToggle(), 'month', 'toggle still said Yearly while showing fallback prices');
+  assert.equal(r.terms.hidden, true, 'annual terms shown for an unconfirmed annual ladder');
+  assert.ok(r.prices.every(p => !/\/yr/.test(p)), 'yearly labels survived a failed annual load');
+});
+
+console.log(failures ? `\n${failures} failing` : '\nall passing');
+process.exit(failures ? 1 : 0);
diff --git a/web/index.html b/web/index.html
index 5de29d8..c1be19c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -252,73 +252,33 @@ <h2 class="section-title">What happens next</h2>
       </section>
 
 
+      <!-- PRICING. Rendered from the LIVE pricing API, never hardcoded.
+           https://tytus.traylinx.com/public/pricing is the single source of
+           truth (payments -> Provider proxy); a price change is Stripe +
+           catalog only, with zero edits here. This section used to hardcode
+           Explorer/Creator/Operator at $39/$79/$149 -- plans that no longer
+           exist -- which is exactly the drift this removes. -->
       <section id="pricing">
         <div class="pricing-intro">
           <h2>Private pod pricing.</h2>
-          <p id="pricing-subtitle">Start free, then reserve a dedicated Tytus pod when you need private infrastructure, stable keys, and bundled model credits.</p>
+          <p id="pricing-subtitle">A dedicated EU-hosted server, optionally with a managed AI plan. Checkout confirms the exact recurring total from your billing address.</p>
           <div class="billing-toggle" aria-label="Billing cadence">
-            <button type="button" class="active" data-billing="monthly">Monthly</button>
-            <button type="button" data-billing="yearly">Yearly</button>
-            <span class="save">Save 2 months</span>
+            <button type="button" class="active" data-billing="month">Monthly</button>
+            <button type="button" data-billing="year">Yearly</button>
+            <!-- No number here. The saving is not uniform across plans (it runs
+                 from 0.79 to 1.91 months), so a badge above ALL cards may only
+                 claim what the WEAKEST card actually delivers. -->
+            <span class="save">Save with annual</span>
           </div>
         </div>
-        <div class="pricing-grid">
-          <article class="pricing-card primary-plan">
-            <span class="pricing-badge">Most popular</span>
-            <div class="plan-name">Explorer</div>
-            <div class="price-line"><strong data-price-monthly="39" data-price-yearly="390">$39</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">Your own private Tytus pod. Run OpenClaw inside an isolated WireGuard tunnel.</p>
-            <ul class="feature-list">
-              <li>1 Dedicated Tytus AI Pod</li>
-              <li>Runs OpenClaw (1 pod unit)</li>
-              <li>WireGuard-encrypted tunnel</li>
-              <li>Dedicated OpenAI-compatible gateway per pod</li>
-              <li>Stable URL + stable per-user API key</li>
-              <li>Bundled token plan: text, vision, audio, image, embeddings</li>
-              <li>Sentinel Pass credentials</li>
-              <li>BYOK on top of bundled tokens</li>
-              <li>7-day money-back guarantee</li>
-            </ul>
-            <a class="small-btn primaryish" href="https://traylinx.com/admin/tytus">Deploy my pod</a>
-          </article>
-          <article class="pricing-card">
-            <div class="plan-name">Creator</div>
-            <div class="price-line"><strong data-price-monthly="79" data-price-yearly="790">$79</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">Run OpenClaw and Hermes side by side. The most popular plan for builders.</p>
-            <ul class="feature-list">
-              <li>Up to 2 Dedicated Tytus AI Pods</li>
-              <li>Run OpenClaw and/or Hermes Agent (Hermes = 2 units)</li>
-              <li>Everything in Explorer</li>
-              <li>Team access for Sentinel Passes</li>
-              <li>Custom model preferences in your gateway</li>
-              <li>Advanced routing across providers</li>
-              <li>Bundled token plan, doubled</li>
-            </ul>
-            <a class="small-btn" href="https://traylinx.com/admin/tytus">Get started</a>
-          </article>
-          <article class="pricing-card">
-            <div class="plan-name">Operator</div>
-            <div class="price-line"><strong data-price-monthly="149" data-price-yearly="1490">$149</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">For teams and agencies. Up to 4 pods running OpenClaw and Hermes in parallel.</p>
-            <ul class="feature-list">
-              <li>Up to 4 Dedicated Tytus AI Pods</li>
-              <li>Run OpenClaw and Hermes in parallel</li>
-              <li>Everything in Creator</li>
-              <li>Dev / Staging / Prod pod split</li>
-              <li>Hierarchical Sentinel policies</li>
-              <li>Central organization management</li>
-              <li>Bundled token plan, quadrupled</li>
-            </ul>
-            <a class="small-btn" href="https://traylinx.com/admin/tytus">Get started</a>
-          </article>
-        </div>
+        <div class="pricing-grid" id="pricing-grid" aria-live="polite"></div>
+        <!-- The free tier is not a priced card and is not sold through the
+             pricing API, so it stays static. EUR-only products mean €0 is
+             correct in every region. -->
         <div class="free-plan">
           <div>
             <div class="plan-name">Free</div>
-            <div class="price-line"><strong data-price-free>$0</strong><span data-period>/mo</span></div>
+            <div class="price-line"><strong>€0</strong><span>/mo</span></div>
             <p class="caption">Forever. No card. Try Tytus on shared infrastructure.</p>
           </div>
           <div class="free-features">
@@ -331,7 +291,8 @@ <h2>Private pod pricing.</h2>
           </div>
           <a class="small-btn" href="https://traylinx.com/admin/tytus">Start free</a>
         </div>
-        <p id="pricing-footnote" class="pricing-footnote">All prices in USD. Taxes calculated at checkout from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.</p>
+        <p id="annual-terms" class="pricing-footnote" hidden></p>
+        <p id="pricing-footnote" class="pricing-footnote"></p>
       </section>
 
       <section>
@@ -381,15 +342,48 @@ <h2 class="section-title">Built for your agents</h2>
   </div>
   <script>
 
-    const EU_VAT_COUNTRIES = new Set(['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','DE','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE']);
+    // ── LIVE PRICING ────────────────────────────────────────────────────
+    // Single source of truth: payments -> Provider proxy. Nothing about the
+    // price ladder is hardcoded here, so changing a price is Stripe + catalog
+    // only. Before 2026-07-26 this page hardcoded Explorer/Creator/Operator at
+    // $39/$79/$149 with a "7-day money-back guarantee" -- three retired plans,
+    // prices we do not charge, and a refund promise the terms contradict.
+    const PRICING_ENDPOINT = 'https://tytus.traylinx.com/public/pricing';
+
+    // Bundled snapshot of the live values (2026-07-26). Used ONLY when the API
+    // is unreachable, so the page degrades to a stale-but-real ladder instead
+    // of blanking. It must never be the thing that decides a price.
+    const FALLBACK = {
+      month: {
+        region: { tax_copy: 'VAT included where applicable' },
+        cards: [
+          { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server, your own AI keys.', price: { label: '€24' }, highlights: ['1× Server L (6 vCPU · 8 GB · 240 GB), EU-hosted', 'BYOK or SwitchAI Cloud — no managed AI bill', 'Pay-on-delivery: €0 today'] },
+          { id: 'starter_managed', name: 'Starter · Managed', self_serve: true, popular: false, tagline: 'A private server with managed AI included.', price: { label: '€49' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Lite) — no key to manage', 'One AI plan feeds your server'] },
+          { id: 'builder', name: 'Builder', self_serve: true, popular: true, tagline: 'The everyday build box: private server + more AI.', price: { label: '€89' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Pro) — more headroom', 'The most popular way to run Tytus'] },
+          { id: 'power', name: 'Power', self_serve: true, popular: false, tagline: 'One private box with the most managed AI.', price: { label: '€179' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Max) — top quota', 'Most AI throughput on a single private server'] }
+        ]
+      },
+      year: {
+        region: { tax_copy: 'VAT included where applicable' },
+        annual: { enabled: true, refundable: false, consent_text: '' },
+        cards: [
+          { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server, your own AI keys.', price: { label: '€269/yr' }, highlights: ['1× Server L (6 vCPU · 8 GB · 240 GB), EU-hosted', 'BYOK or SwitchAI Cloud — no managed AI bill', 'Pay-on-delivery: €0 today'] },
+          { id: 'starter_managed', name: 'Starter · Managed', self_serve: true, popular: false, tagline: 'A private server with managed AI included.', price: { label: '€538/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Lite) — no key to manage', 'One AI plan feeds your server'] },
+          { id: 'builder', name: 'Builder', self_serve: true, popular: true, tagline: 'The everyday build box: private server + more AI.', price: { label: '€968/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Pro) — more headroom', 'The most popular way to run Tytus'] },
+          { id: 'power', name: 'Power', self_serve: true, popular: false, tagline: 'One private box with the most managed AI.', price: { label: '€1968/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Max) — top quota', 'Most AI throughput on a single private server'] }
+        ]
+      }
+    };
+
     const GEO_ENDPOINTS = [
       { url: 'https://api.country.is/', pick: d => d.country },
       { url: 'https://get.geojs.io/v1/ip/country.json', pick: d => d.country },
       { url: 'https://ipwho.is/', pick: d => d.country_code },
       { url: 'https://ipapi.co/json/', pick: d => d.country_code },
     ];
-    let billingMode = 'monthly';
-    let pricingCurrency = 'usd';
+
+    let billingMode = 'month';
+    let billingCountry = null;
 
     function countryFromLocale() {
       const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
@@ -399,51 +393,118 @@ <h2 class="section-title">Built for your agents</h2>
       return m ? m[1].toUpperCase() : null;
     }
 
-    function pricingRegion(countryCode) {
-      const code = (countryCode || '').toUpperCase();
-      if (EU_VAT_COUNTRIES.has(code)) {
-        return {
-          currency: 'eur',
-          symbol: '€',
-          taxLine: 'VAT included where applicable',
-          subtitle: 'EU consumer prices are shown in EUR with VAT included where applicable. Checkout confirms the exact recurring total from your billing address.',
-          footnote: 'EU consumer prices shown in EUR include VAT where applicable. Stripe Checkout confirms the exact recurring total from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.'
-        };
-      }
-      return {
-        currency: 'usd',
-        symbol: '$',
-        taxLine: '+ applicable taxes; checkout confirms final billing address tax.',
-        subtitle: 'Global prices are shown in USD. Checkout confirms taxes from your billing address before payment.',
-        footnote: 'All prices in USD. Taxes calculated at checkout from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.'
-      };
+    function esc(s) {
+      return String(s == null ? '' : s).replace(/[&<>"']/g, ch => (
+        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]
+      ));
     }
 
-    function applyPricing(countryCode) {
-      const region = pricingRegion(countryCode);
-      pricingCurrency = region.currency;
-      document.querySelectorAll('[data-price-monthly]').forEach(el => {
-        const amount = el.getAttribute(billingMode === 'yearly' ? 'data-price-yearly' : 'data-price-monthly');
-        el.textContent = region.symbol + amount;
-      });
-      document.querySelectorAll('[data-price-free]').forEach(el => { el.textContent = region.symbol + '0'; });
-      document.querySelectorAll('[data-period]').forEach(el => { el.textContent = billingMode === 'yearly' ? '/year' : '/mo'; });
-      document.querySelectorAll('[data-tax-line]').forEach(el => { el.textContent = region.taxLine; });
-      const subtitle = document.getElementById('pricing-subtitle');
+    // Structural only. A card may legitimately carry a null amount, so we check
+    // the SHAPE and let render skip anything unpriceable -- rejecting the whole
+    // live payload over one odd card would pin the page to the snapshot forever.
+    //
+    // The interval check is NOT cosmetic. A proxy that drops `interval` returns a
+    // structurally perfect MONTHLY payload for a YEARLY request, and the page
+    // would print monthly amounts under the Yearly toggle. That exact bug shipped
+    // in the pricing proxy on 2026-07-26 and nothing failed loudly, because the
+    // payload was valid -- it was just the wrong term. Demand the term back.
+    function isValidPricing(body, wantInterval) {
+      return !!(body && body.success === true && body.data &&
+        body.data.interval === wantInterval &&
+        Array.isArray(body.data.cards) && body.data.cards.length &&
+        body.data.cards.every(c => c && typeof c.id === 'string' && c.price && Array.isArray(c.highlights)));
+    }
+
+    function render(data, mode) {
+      const grid = document.getElementById('pricing-grid');
+      if (!grid) return;
+
+      const cards = (data.cards || []).filter(c => c.self_serve && c.price && c.price.label);
+      grid.innerHTML = cards.map(c => `
+          <article class="pricing-card${c.popular ? ' primary-plan' : ''}">
+            ${c.popular ? '<span class="pricing-badge">Most popular</span>' : ''}
+            <div class="plan-name">${esc(c.name)}</div>
+            <div class="price-line"><strong>${esc(c.price.label)}</strong></div>
+            <div class="tax-line">${esc((data.region && data.region.tax_copy) || '')}</div>
+            <p class="plan-copy">${esc(c.tagline)}</p>
+            <ul class="feature-list">${(c.highlights || []).map(h => `<li>${esc(h)}</li>`).join('')}</ul>
+            <a class="small-btn${c.popular ? ' primaryish' : ''}" href="https://traylinx.com/admin/tytus">${esc((c.cta && c.cta.label) || 'Deploy my pod')}</a>
+          </article>`).join('');
+
+      // Annual terms are shown ONLY on the annual view and ONLY when the API
+      // says annual is sellable -- the same words Stripe Checkout puts above
+      // the pay button, so the promise cannot drift between the two.
+      const terms = document.getElementById('annual-terms');
+      const annual = data.annual;
+      const showTerms = mode === 'year' && annual && annual.enabled && annual.consent_text;
+      if (terms) {
+        terms.textContent = showTerms ? annual.consent_text : '';
+        terms.hidden = !showTerms;
+      }
+
       const footnote = document.getElementById('pricing-footnote');
-      if (subtitle) subtitle.textContent = region.subtitle;
-      if (footnote) footnote.textContent = region.footnote;
+      if (footnote) {
+        const tax = (data.region && data.region.tax_copy) || '';
+        footnote.textContent = tax
+          ? `${tax}. Checkout confirms the exact recurring total from your billing address.`
+          : 'Checkout confirms the exact recurring total from your billing address.';
+      }
+    }
+
+    function setBillingButtons(mode) {
+      document.querySelectorAll('[data-billing]').forEach(b =>
+        b.classList.toggle('active', b.getAttribute('data-billing') === mode));
+    }
+
+    // An UNCONFIRMED annual ladder is the dangerous one. If annual has been
+    // switched off server-side we would be advertising a term we will not sell,
+    // and the bundled snapshot cannot know that. So a failed annual load drops
+    // to the SHORTER commitment and moves the toggle with it: the label then
+    // still matches the amounts, and monthly is always honourable. This mirrors
+    // the same asymmetry the pricing services use -- leniency falls toward the
+    // shorter term, never toward the longer one.
+    function degrade(mode) {
+      if (mode === 'year') {
+        billingMode = 'month';
+        setBillingButtons('month');
+      }
+      render(FALLBACK.month, 'month');
+    }
+
+    // Monotonic request id. Toggling month -> year while the month request is
+    // still in flight used to let the late MONTHLY response paint itself under
+    // an active Yearly toggle. Only the newest request may render.
+    let requestSeq = 0;
+
+    async function loadPricing() {
+      const seq = ++requestSeq;
+      const mode = billingMode;
+      const params = new URLSearchParams({ interval: mode });
+      if (billingCountry) params.set('country', billingCountry);
+      try {
+        const res = await fetch(`${PRICING_ENDPOINT}?${params}`, { headers: { Accept: 'application/json' } });
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        const body = await res.json();
+        if (seq !== requestSeq) return;
+        if (!isValidPricing(body, mode)) throw new Error('unusable payload');
+        render(body.data, mode);
+      } catch (_) {
+        if (seq !== requestSeq) return;
+        degrade(mode);
+      }
     }
 
     async function detectPricingCountry() {
-      applyPricing(countryFromLocale());
+      billingCountry = countryFromLocale();
+      await loadPricing();
       for (const endpoint of GEO_ENDPOINTS) {
         try {
           const res = await fetch(endpoint.url, { cache: 'no-store' });
           if (!res.ok) continue;
           const data = await res.json();
           const country = endpoint.pick(data);
-          if (country) { applyPricing(country); return; }
+          if (country && country !== billingCountry) { billingCountry = country; await loadPricing(); }
+          if (country) return;
         } catch (_) {}
       }
     }
@@ -451,8 +512,8 @@ <h2 class="section-title">Built for your agents</h2>
     document.querySelectorAll('[data-billing]').forEach(btn => {
       btn.addEventListener('click', () => {
         billingMode = btn.getAttribute('data-billing');
-        document.querySelectorAll('[data-billing]').forEach(b => b.classList.toggle('active', b === btn));
-        applyPricing(pricingCurrency === 'eur' ? 'DE' : 'US');
+        setBillingButtons(billingMode);
+        loadPricing();
       });
     });