/* ================================================================ paywall.jsx — Capital Economics publication paywall block. Replaces the body of a gated research article for a signed-out reader. Sits inside the existing article-page shell, so it owns only the content column: teaser → gate card → subordinate sign-in line. Header, breadcrumb, title, byline, sidebar and footer are NOT designed here (a muted stub stands in as context). States: default · invalid email · submitting · already registered. The validation message occupies a reserved row, so no state changes the block's height (no layout shift). Palette: CE navy (#24213a) rule + eyebrow, CE blue primary button and body type from the Sprint 1 system. No teal, no green. ================================================================ */ const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2; const { NS, SERIF } = window; const { DesignCanvas, DCSection, DCArtboard } = window; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; /* ---- Icons (Lucide subset, 24×24, 2px stroke) ---- */ const PW_ICONS = { lock: <>, "arrow-right": <>, "alert-circle": <>, info: <>, loader: , }; function PwIcon({ name, size = 20, stroke = 2, style, className }) { return ( ); } /* One-time CSS for the pieces the DS components don't cover. */ let pwCSSInjected = false; function injectPwCSS() { if (pwCSSInjected || typeof document === "undefined") return; pwCSSInjected = true; const css = ` .pw-block { font-family: ${NS}; color: var(--text-primary); container-type: inline-size; } /* --- Teaser (article body continuing behind the gate) --- */ .pw-teaser { position: relative; } .pw-standfirst { font-family: ${SERIF}; font-weight: 500; font-size: 22px; line-height: 1.45; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 22px; } .pw-body { font-family: ${SERIF}; font-size: 18.5px; line-height: 1.72; color: var(--grey-700); margin: 0; } .pw-fade { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 96%); } /* --- Gate card --- */ .pw-gate { position: relative; background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-top: 3px solid var(--ce-navy); border-radius: var(--radius-md, 6px); padding: 32px 34px 26px; } .pw-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-navy); margin: 0 0 16px; } .pw-eyebrow svg { color: var(--ce-navy); } .pw-heading { font-family: ${SERIF}; font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px; } .pw-support { font-size: 16.5px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 24px; max-width: 46ch; } /* --- Form row: field 2/3 + button, aligned at the base --- */ .pw-form { display: flex; align-items: flex-end; gap: 12px; } .pw-fieldcol { flex: 2 1 0; min-width: 0; } .pw-btncol { flex: 1 1 0; } .pw-label { display: block; font-weight: 600; font-size: 13px; color: var(--text-secondary); margin: 0 0 7px; } .pw-input { width: 100%; height: 50px; box-sizing: border-box; padding: 0 14px; font-family: ${NS}; font-size: 16px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md, 6px); outline: 0; transition: border-color 140ms cubic-bezier(0.2,0,0,1), box-shadow 140ms cubic-bezier(0.2,0,0,1); } .pw-input::placeholder { color: var(--text-muted); } .pw-input:focus { border-color: var(--brand); box-shadow: var(--ring-focus, 0 0 0 3px rgba(74,102,179,0.28)); } .pw-input.pw-invalid { border-color: var(--negative-600); } .pw-input.pw-invalid:focus { box-shadow: 0 0 0 3px rgba(231,79,78,0.22); } .pw-btncol .ce-btn { width: 100%; height: 50px; } /* --- Reserved message row: fixed height => no layout shift --- */ .pw-msg { min-height: 24px; margin: 9px 0 0; display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; line-height: 1.4; } .pw-msg-err { color: var(--negative-600); } .pw-msg-info { color: var(--text-secondary); } .pw-msg svg { flex: 0 0 auto; margin-top: 1px; } .pw-msg a { color: var(--text-link); font-weight: 700; text-decoration: none; } .pw-msg a:hover { text-decoration: underline; } /* --- Fine print --- */ .pw-fine1 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 12px 0 0; } .pw-fine2 { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 0; } .pw-fine2 a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .pw-fine2 a:hover { color: var(--text-secondary); } /* --- Proof row --- */ .pw-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border-subtle); } .pw-proof-item { font-size: 13.5px; color: var(--text-secondary); } .pw-proof-item strong { color: var(--text-primary); font-weight: 700; } .pw-proof-div { width: 1px; height: 13px; background: var(--border-default); } /* --- Subordinate sign-in line --- */ .pw-signin { text-align: center; font-size: 13.5px; color: var(--text-muted); margin: 20px 0 0; } .pw-signin a { color: var(--text-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pw-signin a:hover { color: var(--text-link); } /* --- Full trial form (Business email + name + country + company + phone) --- */ .pw-field { margin: 0 0 15px; } .pw-field:last-of-type { margin-bottom: 0; } .pw-req { color: var(--negative-600); margin-left: 3px; font-weight: 700; } .pw-optional { color: var(--text-muted); font-weight: 500; margin-left: 5px; } .pw-selectwrap { position: relative; } .pw-selectwrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .pw-select { width: 100%; height: 50px; box-sizing: border-box; padding: 0 40px 0 14px; font-family: ${NS}; font-size: 16px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md, 6px); outline: 0; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 140ms cubic-bezier(0.2,0,0,1), box-shadow 140ms cubic-bezier(0.2,0,0,1); } .pw-select:focus { border-color: var(--brand); box-shadow: var(--ring-focus, 0 0 0 3px rgba(74,102,179,0.28)); } .pw-select[data-placeholder="true"] { color: var(--text-muted); } .pw-select.pw-invalid, .pw-input.pw-invalid { border-color: var(--negative-600); } .pw-fielderr { min-height: 17px; font-size: 12.5px; line-height: 1.35; color: var(--negative-600); margin-top: 5px; display: flex; align-items: flex-start; gap: 5px; } .pw-fielderr svg { flex: 0 0 auto; margin-top: 1px; } .pw-namegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pw-fullbtn { margin-top: 20px; } .pw-fullbtn .ce-btn { width: 100%; height: 52px; } .pw-formmsg { min-height: 24px; margin: 10px 0 0; display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; line-height: 1.4; } .pw-formmsg svg { flex: 0 0 auto; margin-top: 1px; } .pw-formmsg-ok { color: var(--text-secondary); } .pw-formmsg-ok strong { color: var(--text-primary); } .pw-formmsg a { color: var(--text-link); font-weight: 700; text-decoration: none; } .pw-formmsg a:hover { text-decoration: underline; } .pw-spin { animation: pwspin 0.7s linear infinite; } @keyframes pwspin { to { transform: rotate(360deg); } } /* --- Mobile: field + button stack, proof row wraps to two lines. Container query (not viewport) so it fires inside the 375px artboard. --- */ @container (max-width: 540px) { .pw-gate { padding: 26px 22px 22px; } .pw-heading { font-size: 25px; } .pw-standfirst { font-size: 19px; } .pw-body { font-size: 17px; } .pw-form { flex-direction: column; align-items: stretch; gap: 14px; } .pw-btncol { flex: none; } .pw-namegrid { grid-template-columns: 1fr; gap: 0; } } `; const el = document.createElement("style"); el.setAttribute("data-ce", "paywall"); el.textContent = css; document.head.appendChild(el); } /* ---- Muted article context (NOT part of this block's design) ---- A greyed title/byline stub so the teaser + gate read in situ. */ function ArticleContext() { return (

Global Economics · Monetary Policy

The hiking cycle is over, but cuts will come slowly

Neil Shearing ·Group Chief Economist ·12 August 2026 ·6 min read

); } const PROOF = [ 1,500+ institutional clients, 70+ economists, Independent since 1999, ]; const COUNTRIES = [ "United Kingdom", "United States", "Canada", "Ireland", "France", "Germany", "Netherlands", "Switzerland", "Spain", "Italy", "Sweden", "Norway", "Denmark", "Luxembourg", "United Arab Emirates", "Saudi Arabia", "Qatar", "Singapore", "Hong Kong SAR", "Japan", "Australia", "New Zealand", "South Africa", "Other", ]; /* ---- One field: label (+ required/optional marker), control, and a reserved error line so validation never shifts the form. ---- */ function PwField({ id, label, required, optional, error, children }) { return (

{label} {required && } {optional && (optional)} {children}

{error && <>{error}}

); } /* ================================================================ FullTrialForm — the complete trial-request form used on the live article page: Business email, First/Last name, Country, Company (all required) and Telephone (optional). Validates required fields + email format on submit and on blur once touched; each field carries a reserved error line (no layout shift). On a valid submit it enters the loading state, then confirms. ================================================================ */ const REQUIRED_MSG = { email: "Enter your business email address.", first: "Enter your first name.", last: "Enter your last name.", country: "Select your country.", company: "Enter your company name.", }; function FullTrialForm({ live = false }) { const [v, setV] = React.useState({ email: "", first: "", last: "", country: "", company: "", phone: "" }); const [errs, setErrs] = React.useState({}); const [loading, setLoading] = React.useState(false); const [done, setDone] = React.useState(false); const [submitted, setSubmitted] = React.useState(false); const fieldError = (k, val) => { const t = (val || "").trim(); if (k === "phone") return ""; if (!t) return REQUIRED_MSG[k]; if (k === "email" && !EMAIL_RE.test(t)) return "Enter a valid business email address."; return ""; }; const set = (k) => (e) => { const val = e.target.value; setV((s) => ({ ...s, [k]: val })); if (submitted) setErrs((s) => ({ ...s, [k]: fieldError(k, val) })); }; const validateAll = () => { const next = {}; ["email", "first", "last", "country", "company"].forEach((k) => { const e = fieldError(k, v[k]); if (e) next[k] = e; }); setErrs(next); return Object.keys(next).length === 0; }; const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); setDone(false); if (!validateAll()) return; setLoading(true); setTimeout(() => { setLoading(false); setDone(true); }, 1600); }; const onBlur = (k) => () => { if (submitted) setErrs((s) => ({ ...s, [k]: fieldError(k, v[k]) })); }; return ( ); } /* ================================================================ PaywallBlock — `state` drives the four designed states. The `default` artboard runs live (real blur validation + submit). `fullForm` swaps the single-field CTA for the complete trial request (Business email + name + country + company + phone). ================================================================ */ function PaywallBlock({ state = "default", live = false, showContext = true, fullForm = false }) { const [email, setEmail] = React.useState(state === "invalid" ? "trader@" : state === "registered" ? "j.okafor@meridiancap.com" : ""); const [err, setErr] = React.useState(state === "invalid" ? "Enter a valid business email address." : ""); const [registered, setRegistered] = React.useState(state === "registered"); const [loading, setLoading] = React.useState(state === "submitting"); const [touched, setTouched] = React.useState(false); const validate = () => { const v = email.trim(); if (!v) { setErr("Enter your business email address."); return false; } if (!EMAIL_RE.test(v)) { setErr("Enter a valid business email address."); return false; } setErr(""); return true; }; const onSubmit = (e) => { e.preventDefault(); setTouched(true); setRegistered(false); if (!validate()) return; setLoading(true); // Demo: an "existing" address routes to sign-in; otherwise it "starts". setTimeout(() => { setLoading(false); if (/@meridiancap\.com$/i.test(email.trim())) setRegistered(true); }, 1600); }; const invalid = !!err; return (

{showContext && } {/* 1 — Teaser: standfirst + opening sentences, fading out */}

Markets have moved on from the question of whether central banks are done tightening. The debate now is about the pace of the descent — and here the consensus is too aggressive.

The hiking cycle that defined 2022 and 2023 is firmly behind us. Every major central bank we cover has either paused or begun to ease, and the incoming data support that shift: core inflation is drifting back towards target across the advanced economies, and labour markets, while still tight, are loosening at the margin. But the market has run ahead of itself. Pricing implies four cuts from the Fed over the next twelve months; we expect one further cut this year and a slower path thereafter, because the last leg of disinflation is proving stickier than the headline numbers suggest.

{/* 2 — Gate card */}

Subscriber content

Read this in full, free

Start a free trial and use one of 10 starter credits to unlock this piece.

{fullForm ? : ( )}

Free. 10 articles. No card required.

By continuing you agree to our Terms and Privacy Policy.

{/* Proof row */}

{PROOF.map((item, i) => ( {i > 0 && ))}

{/* 3 — Subordinate sign-in line */}

Already a client or trialist? Sign in to read this

); } /* ---- Article-column frame: paywall on the page surface at the width of the article content column. ---- */ function ArtColumn({ state, live = false, width = 720 }) { return (

); } function MobileColumn({ state, width = 375 }) { return (

); } Object.assign(window, { PaywallBlock, injectPwCSS }); function App() { injectPwCSS(); return ( ); } if (!window.__PW_LIB_ONLY) { ReactDOM.createRoot(document.getElementById("root")).render(); }