/* ============================================================
           DESIGN TOKENS - same DNA as MCO News, but calibrated for a
           conversion-focused product page rather than a content feed.
           ============================================================ */
        :root {
            --bg:           #050508;
            --bg-elev:      #0a0a10;
            --bg-card:      rgba(15,17,23,0.6);
            --gold:         #c2a364;
            --gold-soft:    #e8d5a8;
            --gold-glow:    rgba(194,163,100,0.25);
            --teal:         #00a7bd;
            --teal-soft:    #4fc3a1;
            --text:         rgba(232,232,235,0.92);
            --text-dim:     rgba(220,220,225,0.65);
            --text-faint:   rgba(200,200,210,0.42);
            --border:       rgba(194,163,100,0.15);
            --border-strong:rgba(194,163,100,0.32);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* Background atmospherics - radial gold + teal orbs, same vibe
           as MCO News so the brand reads as one family. */
        .bg-atmosphere {
            position: fixed; inset: 0;
            z-index: -1; pointer-events: none;
            background:
                radial-gradient(ellipse at 15% 15%, rgba(0,158,197,0.10), transparent 40%),
                radial-gradient(ellipse at 85% 8%, rgba(194,163,100,0.12), transparent 38%),
                radial-gradient(ellipse at 50% 100%, rgba(194,163,100,0.06), transparent 55%),
                linear-gradient(180deg, var(--bg) 0%, #070810 100%);
        }

        a { color: inherit; text-decoration: none; }
        button { font: inherit; cursor: pointer; border: 0; background: 0 0; color: inherit; }
        img { display: block; max-width: 100%; }

        .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

        /* ============================================================
           HEADER - minimal nav. Logo left, language toggle + primary
           CTA right. Sticky so the CTA is always available.
           ============================================================ */
        header {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background: rgba(5,5,8,0.7);
            border-bottom: 1px solid var(--border);
        }
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 32px;
            max-width: 1600px;
            margin: 0 auto;
        }
        .wordmark {
            display: flex;
            align-items: center;
            transition: opacity 0.25s;
        }
        .wordmark:hover { opacity: 0.85; }
        .wordmark img {
            height: 72px;
            width: auto;
            display: block;
        }
        @media (max-width: 640px) {
            .wordmark img { height: 56px; }
            .header-inner { padding: 10px 20px; }
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .nav-links a {
            font-size: 13px;
            letter-spacing: 0.8px;
            color: var(--text-dim);
            text-transform: uppercase;
            transition: color 0.25s;
        }
        .nav-links a:hover { color: var(--gold-soft); }
        .nav-cta {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f !important;
            padding: 10px 22px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 1px;
            transition: transform 0.2s, box-shadow 0.25s;
        }
        .nav-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px var(--gold-glow);
            color: #0a0a0f !important;
        }

        /* ============================================================
           HERO - value prop + primary CTA + trust line.
           Includes the V19.3 market-motion animation as background layer,
           tuned MORE faded than on MCO News so it doesn't compete with the
           "Become a member" CTA. On mobile and below 980px viewport the
           layer hides entirely - the candle structure needs horizontal
           room to read, and the CTA stack already fills small screens.
           ============================================================ */

        /* ===== V19.3 Market Motion - hero background ===== */
        .hero-motion {
            position: absolute;
            inset: -10% -8%;
            z-index: 0;
            pointer-events: none;
            /* Considerably more faded than on MCO News (which uses 0.45).
               This is a conversion page; the CTA needs to dominate. */
            opacity: 0.28;
            will-change: transform, filter, opacity;
            transform-origin: center center;
        }
        .hero-motion svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible;
        }
        .hero-motion .grid-line {
            stroke: rgba(255,255,255,0.030);
            stroke-width: 1;
        }
        .hero-motion .path-glow {
            fill: none;
            stroke: rgba(0,167,189,0.18);
            stroke-width: 10;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: blur(8px);
        }
        .hero-motion .path-line {
            fill: none;
            stroke: rgba(0,167,189,0.18);
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .hero-motion .zone-g { will-change: transform, opacity; }
        .hero-motion .zone-glow { filter: blur(14px); }
        .hero-motion .zone-box { vector-effect: non-scaling-stroke; }
        .hero-motion .candle-g { will-change: transform, opacity; }
        .hero-motion .wick { stroke-linecap: round; }
        .hero-motion .label {
            font-family: Inter, ui-sans-serif, system-ui, sans-serif;
            font-size: 12px;
            letter-spacing: 0.12em;
            font-weight: 650;
        }
        @keyframes mmZonePulseGoldHero {
            0%   { opacity: 0.72; filter: drop-shadow(0 0 0 rgba(216,189,122,0)); }
            28%  { opacity: 1;    filter: drop-shadow(0 0 22px rgba(216,189,122,0.42)); }
            100% { opacity: 0.86; filter: drop-shadow(0 0 0 rgba(216,189,122,0)); }
        }
        @keyframes mmZonePulseTealHero {
            0%   { opacity: 0.72; filter: drop-shadow(0 0 0 rgba(0,167,189,0)); }
            28%  { opacity: 1;    filter: drop-shadow(0 0 24px rgba(0,167,189,0.48)); }
            100% { opacity: 0.86; filter: drop-shadow(0 0 0 rgba(0,167,189,0)); }
        }
        .hero-motion .pulse-gold { animation: mmZonePulseGoldHero 900ms ease-out; }
        .hero-motion .pulse-teal { animation: mmZonePulseTealHero 900ms ease-out; }

        /* Hide entirely below 980px and on reduced-motion users. The chart
           needs width to look right, and on tablets it crowds the CTAs. */
        @media (max-width: 980px) {
            .hero-motion { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-motion { display: none !important; }
        }

        .hero {
            position: relative;
            padding: 120px 32px 90px;
            text-align: center;
            overflow: hidden;
        }
        .hero .container { position: relative; z-index: 1; }
        .hero::after {
            /* Faint horizon line under the hero - gives weight without
               adding content. Pure CSS gradient, no images. */
            content: '';
            position: absolute;
            bottom: 0; left: 12%; width: 76%; height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
        }
        .hero-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 28px;
            font-weight: 500;
        }
        .hero-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(40px, 6vw, 76px);
            font-weight: 600;
            line-height: 1.05;
            letter-spacing: -0.025em;
            max-width: 1000px;
            margin: 0 auto 26px;
            color: #fff;
        }
        .hero-title span {
            display: block;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-soft));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-sub {
            max-width: 740px;
            margin: 0 auto 44px;
            font-size: 18px;
            line-height: 1.65;
            color: var(--text-dim);
            font-weight: 400;
        }
        .hero-cta-row {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 56px;
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 36px;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 999px;
            transition: transform 0.2s, box-shadow 0.25s;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 32px var(--gold-glow);
        }
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 36px;
            background: transparent;
            color: var(--gold-soft);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
            transition: border-color 0.25s, color 0.25s, transform 0.2s;
        }
        .btn-secondary:hover {
            border-color: var(--gold-soft);
            color: #fff;
            transform: translateY(-2px);
        }

        /* Trust line - runs under the CTA. Big numbers in gold, labels
           dim and small. Gives social proof without screaming. */
        .trust-row {
            display: flex;
            justify-content: center;
            gap: clamp(28px, 6vw, 80px);
            flex-wrap: wrap;
            padding-top: 14px;
        }
        .trust-stat {
            text-align: center;
        }
        .trust-num {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 600;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1;
            margin-bottom: 6px;
        }
        .trust-label {
            font-size: 11.5px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-faint);
        }

        /* ============================================================
           SECTION SCAFFOLDING - eyebrow + heading + sub-line pattern
           used by every major section to keep rhythm consistent.
           ============================================================ */
        section {
            padding: 110px 0;
            position: relative;
        }
        .section-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 16px;
            font-weight: 500;
        }
        .section-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(30px, 4.2vw, 50px);
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.02em;
            color: #fff;
            margin-bottom: 18px;
            max-width: 720px;
        }
        .section-sub {
            max-width: 640px;
            font-size: 17px;
            color: var(--text-dim);
            line-height: 1.65;
        }
        .section-head-center {
            text-align: center;
            margin: 0 auto 64px;
        }
        .section-head-center .section-title,
        .section-head-center .section-sub {
            margin-left: auto;
            margin-right: auto;
        }

        /* ============================================================
           ABOUT - three-column "what we are" block.
           ============================================================ */
        .about-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 36px;
            margin-top: 48px;
        }
        .about-cell {
            padding: 32px 28px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            transition: border-color 0.3s, transform 0.3s;
        }
        .about-cell:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .about-cell-icon {
            width: 44px; height: 44px;
            margin-bottom: 22px;
            color: var(--gold);
        }
        .about-cell-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 19px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 12px;
            letter-spacing: -0.01em;
        }
        .about-cell-body {
            font-size: 15px;
            line-height: 1.65;
            color: var(--text-dim);
        }

        /* ============================================================
           MEMBERSHIPS - two large cards side by side. THIS is the
           conversion engine. Big, bold, premium. Each card has:
           tag → name → price → 6 bullets → CTA → small fineprint.
           ============================================================ */
        .mem-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            margin-top: 56px;
        }
        .mem-card {
            position: relative;
            padding: 48px 42px 44px;
            background: linear-gradient(180deg, rgba(20,18,15,0.7) 0%, rgba(15,17,23,0.5) 100%);
            border: 1px solid var(--border);
            border-radius: 20px;
            transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
            /* Flex column so the CTA can be pushed to the bottom with
               margin-top:auto, keeping both card buttons aligned even
               when the tagline above wraps to a different line count. */
            display: flex;
            flex-direction: column;
        }
        .mem-card::before {
            /* Top edge accent - gold on crypto, teal on markets. */
            content: '';
            position: absolute;
            top: 0; left: 36px; right: 36px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent, var(--gold)), transparent);
        }
        .mem-card.crypto { --accent: var(--gold); }
        .mem-card.markets { --accent: var(--teal); }
        .mem-card:hover {
            transform: translateY(-4px);
            border-color: var(--border-strong);
            box-shadow: 0 24px 60px rgba(0,0,0,0.35);
        }
        .mem-card.crypto:hover { box-shadow: 0 24px 60px rgba(194,163,100,0.12); }
        .mem-card.markets:hover { box-shadow: 0 24px 60px rgba(0,158,197,0.12); }
        .mem-tag {
            display: inline-block;
            /* The parent .mem-card is a flex column with default
               align-items: stretch, which would override inline-block
               and stretch this pill to the full card width. That made
               it collide with the .mem-founder-corner badge on the
               Markets card and looked unintentional anyway - the pill
               radius and inline-block clearly suggest a content-sized
               badge. align-self: flex-start opts out of the parent's
               stretching so the tag sits as a proper badge. */
            align-self: flex-start;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--accent, var(--gold));
            padding: 6px 14px;
            border: 1px solid var(--accent, var(--gold));
            border-radius: 999px;
            margin-bottom: 20px;
            font-weight: 500;
            opacity: 0.85;
        }
        .mem-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 32px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
        }
        .mem-tagline {
            font-size: 15px;
            color: var(--text-dim);
            margin-bottom: 32px;
            min-height: 24px;
        }
        .mem-price-row {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 8px;
        }
        /* Small "from" prefix sits above-left, indicates price is a starting point. */
        .mem-price-prefix {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: var(--text-dim);
            letter-spacing: 0.5px;
            text-transform: lowercase;
            align-self: flex-start;
            margin-top: 8px;
        }
        .mem-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 44px;
            font-weight: 600;
            color: #fff;
            line-height: 1;
        }
        .mem-period {
            font-size: 15px;
            color: var(--text-dim);
        }
        /* EUR reference shown next to the GBP price for the DE audience.
           Small, dimmed, doesn't compete with the headline GBP figure. */
        .mem-price-eur {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            color: var(--text-faint);
            letter-spacing: 0.2px;
            margin-left: -2px;
        }
        .mem-price-note {
            font-size: 11.5px;
            color: var(--text-faint);
            line-height: 1.5;
            margin-bottom: 36px;
            padding-bottom: 28px;
            border-bottom: 1px solid var(--border);
        }
        /* When a language notice follows the price note (currently only on
           the Markets card), the notice itself takes over the separator
           role before the bullets. Strip the price-note's own divider so
           we don't get two stacked separators. */
        .mem-card.markets .mem-price-note {
            margin-bottom: 14px;
            padding-bottom: 0;
            border-bottom: 0;
        }
        /* Language notice - small teal callout. Used while content is
           still English; remove the whole <p class="mem-lang-notice">
           block once the German Patreon tier is live. */
        .mem-lang-notice {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            margin-bottom: 32px;
            padding-bottom: 12px;
            background: rgba(0,158,197,0.06);
            border: 1px solid rgba(0,158,197,0.22);
            border-radius: 8px;
            font-size: 12.5px;
            line-height: 1.5;
            color: var(--text-dim);
        }
        .mem-lang-badge {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            margin-top: 1px;
            background: rgba(0,158,197,0.18);
            border: 1px solid rgba(0,158,197,0.4);
            border-radius: 4px;
            color: var(--teal-soft);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1.2px;
        }
        .mem-bullets {
            list-style: none;
            margin-bottom: 36px;
        }
        .mem-bullet {
            display: flex;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .mem-bullet:last-child { border-bottom: 0; }
        .mem-bullet-icon {
            flex-shrink: 0;
            width: 22px; height: 22px;
            margin-top: 3px;
            color: var(--accent, var(--gold));
        }
        .mem-bullet-text {
            font-size: 14.5px;
            line-height: 1.55;
            color: var(--text);
        }
        .mem-bullet-text strong {
            display: block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--accent, var(--gold));
            margin-bottom: 4px;
            font-weight: 500;
            opacity: 0.85;
        }
        .mem-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 999px;
            transition: transform 0.2s, box-shadow 0.25s;
            /* Pushes the CTA (and the fineprint that follows it) to the
               bottom of the card. The flex column on .mem-card allows
               margin-top:auto to consume any remaining vertical space,
               keeping both cards' CTAs visually aligned even when the
               tagline above wraps to a different line count. */
            margin-top: auto;
        }
        .mem-card.markets .mem-cta {
            background: linear-gradient(135deg, #4fc3a1, var(--teal));
            color: #fff;
        }
        .mem-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px var(--gold-glow);
        }
        .mem-card.markets .mem-cta:hover {
            box-shadow: 0 8px 24px rgba(0,158,197,0.28);
        }

        .mem-cta.disabled {
            pointer-events: none;
            cursor: not-allowed;
            background: rgba(255,255,255,0.04) !important;
            border-color: rgba(255,255,255,0.06) !important;
            opacity: 1;
            font-size: 0 !important;
            line-height: 0;
        }
        .mem-cta.disabled::before {
            content: 'Coming soon';
            color: rgba(194,163,100,0.75);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            line-height: 1;
        }
        .mem-cta.disabled > * {
            display: none;
        }
        .mem-cta.disabled:hover {
            transform: none;
            box-shadow: none;
        }
        .mem-coming-soon-note {
            position: relative;
            margin: 14px 0 6px;
            padding: 16px 18px 14px;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(194,163,100,0.14), transparent 70%),
                linear-gradient(135deg, rgba(194,163,100,0.08), rgba(15,17,23,0.4));
            border: 1px solid rgba(194,163,100,0.32);
            border-top: 1px solid rgba(194,163,100,0.50);
            border-radius: 10px;
            font-size: 13px;
            color: var(--text-dim);
            line-height: 1.5;
            text-align: center;
        }
        .mem-coming-soon-note::before {
            content: '★ Founder-Launch';
            display: inline-block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--gold);
            background: rgba(194,163,100,0.10);
            border: 1px solid rgba(194,163,100,0.35);
            padding: 4px 11px;
            border-radius: 999px;
            margin-bottom: 10px;
        }
        .mem-coming-soon-note strong {
            color: var(--gold-soft);
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        /* ===== FOUNDER PRICING ON INDEX MARKETS CARD =====
           Corner pill labels the card as a founder-launch deal; the
           strikethrough original price sits inline with the new price
           so the discount is visible without leaving the price block.
           Premium tone - gold accents only, no shouty colors. */
        .mem-founder-corner {
            position: absolute;
            top: 20px;
            right: 20px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: linear-gradient(135deg, rgba(194,163,100,0.22), rgba(194,163,100,0.10));
            border: 1px solid rgba(194,163,100,0.52);
            padding: 6px 13px 6px 12px;
            border-radius: 999px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gold-soft);
            z-index: 2;
            pointer-events: none;
            white-space: nowrap;
        }
        .mem-founder-corner::before {
            content: '★';
            color: var(--gold);
            font-size: 11px;
            margin-right: 1px;
        }
        .mem-price-original {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 26px;
            font-weight: 500;
            color: var(--text-faint);
            text-decoration: line-through;
            text-decoration-color: rgba(194,163,100,0.55);
            text-decoration-thickness: 2px;
            opacity: 0.78;
            letter-spacing: -0.5px;
        }
        .mem-fineprint {
            margin-top: 14px;
            font-size: 11.5px;
            color: var(--text-faint);
            text-align: center;
            letter-spacing: 0.3px;
        }

        /* Detail-page link - small secondary CTA between bullets and the
           primary Patreon CTA. Lets curious visitors dig deeper before
           committing. Subtle styling so it doesn't compete with the
           primary CTA visually. Color adapts to the card accent. */
        .mem-detail-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 20px;
            margin-bottom: 4px;
            color: var(--gold-soft);
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.4px;
            text-decoration: none;
            border-bottom: 1px solid rgba(194,163,100,0.3);
            padding-bottom: 4px;
            align-self: flex-start;
            transition: color 0.25s, border-color 0.25s, transform 0.25s;
        }
        .mem-card.markets .mem-detail-link {
            color: #4fc3a1;
            border-bottom-color: rgba(79,195,161,0.3);
        }
        .mem-detail-link:hover {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }
        .mem-card.markets .mem-detail-link:hover {
            color: var(--teal);
            border-bottom-color: var(--teal);
        }
        .mem-detail-link svg {
            transition: transform 0.25s;
        }
        .mem-detail-link:hover svg {
            transform: translateX(3px);
        }

        /* ============================================================
           MCO NEWS - 3 latest articles pulled live from the same CSV
           the news site uses. If the fetch fails, we hide gracefully.
           ============================================================ */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 12px;
        }
        .news-card {
            display: block;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            transition: border-color 0.3s, transform 0.3s;
        }
        .news-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-3px);
        }
        .news-image {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, rgba(194,163,100,0.06), rgba(0,158,197,0.05));
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--border);
        }
        .news-body { padding: 22px 24px 24px; }
        .news-tag {
            display: inline-block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10.5px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--gold);
            padding: 3px 10px;
            background: rgba(194,163,100,0.08);
            border-radius: 4px;
            margin-bottom: 14px;
        }
        .news-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            line-height: 1.3;
            margin-bottom: 10px;
            letter-spacing: -0.01em;
        }
        .news-dek {
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .news-link-row {
            text-align: center;
            margin-top: 40px;
        }

        /* ============================================================
           GLOBAL CHANNELS - your distribution. 6 YouTube channels
           presented as a grid with subscriber counts in gold.
           ============================================================ */
        .channels-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-top: 12px;
        }
        .channel-card {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 22px 26px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: border-color 0.3s, transform 0.25s;
        }
        .channel-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .channel-icon {
            flex-shrink: 0;
            width: 44px; height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(194,163,100,0.08);
            border-radius: 10px;
            color: var(--gold);
        }
        .channel-icon svg { width: 22px; height: 22px; }
        .channel-info { flex: 1; min-width: 0; }
        .channel-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .channel-meta {
            font-size: 12px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }
        .channel-meta-lang {
            display: inline-block;
            padding: 2px 7px;
            background: rgba(255,255,255,0.05);
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.8px;
            margin-left: 6px;
        }

        /* X / Twitter secondary row - compact, sits under YouTube channels.
           Smaller cards to signal "additional", not "primary". */
        .x-row-label {
            margin-top: 56px;
            margin-bottom: 18px;
            text-align: center;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            color: var(--text-dim);
            font-weight: 500;
        }
        .x-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            max-width: 820px;
            margin: 0 auto;
        }
        .x-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: border-color 0.3s, transform 0.25s;
        }
        .x-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .x-icon {
            flex-shrink: 0;
            width: 34px; height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.04);
            border-radius: 8px;
            color: var(--text);
        }
        .x-icon svg { width: 15px; height: 15px; }
        .x-info { flex: 1; min-width: 0; }
        .x-handle {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 2px;
        }
        .x-meta {
            font-size: 11.5px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }

        /* ============================================================
           NEWSLETTER - identical to MCO News for consistency.
           ============================================================ */
        .newsletter-section {
            margin: 60px auto 0;
            padding: 80px 32px 90px;
            max-width: 1280px;
            background: linear-gradient(135deg, rgba(20,18,15,0.7), rgba(15,17,23,0.85));
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            position: relative;
            overflow: hidden;
        }
        .newsletter-section::before {
            content: '';
            position: absolute;
            top: -50%; left: 50%;
            transform: translateX(-50%);
            width: 800px; height: 800px;
            background: radial-gradient(ellipse at center, rgba(194,163,100,0.10), transparent 60%);
            pointer-events: none;
        }
        .newsletter-inner {
            position: relative;
            z-index: 1;
            max-width: 640px;
            margin: 0 auto;
            text-align: center;
        }
        .newsletter-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
            opacity: 0.9;
        }
        .newsletter-heading {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 42px;
            font-weight: 600;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin-bottom: 16px;
        }
        .newsletter-pitch {
            font-size: 17px;
            line-height: 1.6;
            color: var(--text-dim);
            margin: 0 auto 36px;
            max-width: 520px;
        }
        .newsletter-form {
            display: flex;
            gap: 10px;
            max-width: 480px;
            margin: 0 auto 18px;
        }
        .newsletter-input {
            flex: 1;
            padding: 14px 20px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: #fff;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-strong);
            border-radius: 28px;
            outline: none;
            transition: border-color 0.25s, background 0.25s;
        }
        .newsletter-input::placeholder { color: rgba(220,220,225,0.4); }
        .newsletter-input:focus {
            border-color: var(--gold-soft);
            background: rgba(255,255,255,0.06);
        }
        .newsletter-btn {
            padding: 14px 30px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #0a0a0f;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            border: none;
            border-radius: 28px;
            cursor: pointer;
            white-space: nowrap;
            transition: transform 0.2s, box-shadow 0.25s;
        }
        .newsletter-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--gold-glow); }
        .newsletter-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .newsletter-status {
            min-height: 22px;
            font-size: 13px;
            color: var(--gold);
            margin-bottom: 12px;
            font-weight: 500;
        }
        .newsletter-status.error { color: #ff8b6b; }
        .newsletter-status.success { color: #76d4a8; }
        .newsletter-fineprint {
            font-size: 11.5px;
            color: var(--text-faint);
            line-height: 1.6;
            max-width: 480px;
            margin: 0 auto;
        }
        .newsletter-fineprint a {
            color: rgba(194,163,100,0.7);
            text-decoration: underline;
        }

        /* Stripe coming-soon — secondary payment option, clearly disabled.
           Sits beneath every primary Patreon CTA. Dashed border + muted
           palette signals "real option, not yet available" rather than
           "decorative". Cursor not-allowed reinforces. */
        .cta-stripe-soon {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            padding: 9px 18px;
            background: transparent;
            border: 1px dashed rgba(255,255,255,0.12);
            border-radius: 999px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: 0.2px;
            color: rgba(255,255,255,0.45);
            cursor: not-allowed;
            user-select: none;
            opacity: 1;
        }
        .cta-stripe-soon:hover {
            border-color: rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.55);
        }
        .cta-stripe-soon .stripe-tag {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(194,163,100,0.10);
            color: rgba(194,163,100,0.78);
            border: 1px solid rgba(194,163,100,0.18);
        }
        /* Compact variant for MK tier cards where space is tight. */
        .cta-stripe-soon.compact {
            padding: 7px 14px;
            font-size: 11.5px;
            margin-top: 8px;
            gap: 8px;
        }
        .cta-stripe-soon.compact .stripe-tag {
            font-size: 8.5px;
            padding: 2px 6px;
        }


        /* Member login - placeholder for the upcoming sign-up platform.
           Stripe will route here once live; old WordPress members will
           be detected by sign-up date (pre-/post-June 2026). For now
           styled as disabled with a "Soon" tag — same visual vocabulary
           as the Stripe-coming-soon CTAs below. */
        .nav-login {
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            border: 1px dashed rgba(255,255,255,0.13);
            border-radius: 999px;
            background: transparent;
            color: rgba(255,255,255,0.45) !important;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: 0.2px;
            cursor: not-allowed;
            user-select: none;
            transition: color 0.2s, border-color 0.2s;
        }
        .nav-login:hover {
            color: rgba(255,255,255,0.6) !important;
            border-color: rgba(255,255,255,0.20);
        }
        .nav-login svg {
            width: 13px;
            height: 13px;
            opacity: 0.7;
        }
        .nav-login .nav-login-tag {
            font-size: 8.5px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(194,163,100,0.10);
            color: rgba(194,163,100,0.78);
            border: 1px solid rgba(194,163,100,0.18);
        }
        /* On mobile keep it visible but compact (full word -> just the icon).
           Old WordPress members may be on phones too, they need to find this. */
        @media (max-width: 760px) {
            .nav-login {
                padding: 6px 10px;
                gap: 6px;
                font-size: 0;
            }
            .nav-login .nav-login-tag { font-size: 8px; padding: 2px 6px; }
            .nav-login svg { width: 14px; height: 14px; opacity: 0.85; }
        }

        /* ============================================================
           FOOTER - mirror MCO News structure exactly.
           ============================================================ */
        footer {
            padding: 60px 32px 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background: rgba(0,0,0,0.22);
            /* Local override: bumps the dim text vars just a hair so
               content stays legible against the slightly darker bg and
               the faint London skyline behind it. */
            --text-faint: rgba(200,200,210,0.52);
            --text-dim: rgba(220,220,225,0.74);
        }
        footer::before {
            content: '';
            position: absolute;
            top: 0; left: 15%; width: 70%; height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
            z-index: 1;
        }
        /* Subtle London skyline backdrop. Sits below all footer content,
           heavily desaturated and faded so it reads as atmosphere rather
           than image. Mask gradient dissolves the top and bottom edges
           into the page background for a soft transition. If the image
           file is missing, the rule still renders fine since opacity is
           so low that a broken image is visually identical to no image. */
        footer::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("/images/london-bg.jpg");
            background-size: cover;
            background-position: center 65%;
            background-repeat: no-repeat;
            filter: grayscale(1) brightness(0.5) contrast(1.05);
            opacity: 0.10;
            z-index: -1;
            pointer-events: none;
            mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
        }
        .footer-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 16px;
            color: var(--text-dim);
            margin-bottom: 20px;
        }
        .footer-brand strong { color: var(--gold-soft); font-weight: 600; }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 28px;
            margin-bottom: 26px;
            flex-wrap: wrap;
        }
        .footer-links a {
            color: var(--text-faint);
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: color 0.3s;
        }
        .footer-links a:hover { color: var(--gold); }
        .trust-badges {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            margin: 10px 0 30px;
            padding: 28px 0;
            border-top: 1px solid rgba(194,163,100,0.06);
            border-bottom: 1px solid rgba(194,163,100,0.06);
        }
        .trust-badges-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: rgba(200,200,210,0.62);
            font-weight: 500;
        }
        .trust-badges-logos {
            display: flex;
            align-items: center;
            gap: 56px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .trust-badge {
            opacity: 0.65;
            transition: opacity 0.3s, transform 0.3s;
        }
        .trust-badge:hover { opacity: 1; transform: translateY(-1px); }
        .trust-badge img {
            filter: invert(1) brightness(0.92);
            display: block;
        }
        .trust-badge img[src*="federationofsmall"] { height: 70px; }
        .trust-badge img[src*="goodbusinesscharter"] { height: 108px; }

        /* MCO Foundation - research collaboration credit. Sits inside
           the same .trust-badges container as the membership badges but
           in its own sub-row, separated by a thin gold-tinted divider.
           The foundation logo is already gold-on-transparent, so no
           filter inversion (unlike the FSB/GBC badges which are dark). */
        .trust-badges-foundation {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            margin-top: 28px;
            padding-top: 28px;
            border-top: 1px solid rgba(194,163,100,0.08);
            width: 100%;
        }
        .foundation-logo-link {
            opacity: 0.85;
            transition: opacity 0.3s, transform 0.3s;
            display: block;
        }
        .foundation-logo-link:hover {
            opacity: 1;
            transform: translateY(-1px);
        }
        .foundation-logo-link img {
            height: 58px;
            display: block;
        }
        .foundation-text {
            font-size: 13px;
            color: rgba(200,200,210,0.62);
            text-align: center;
            letter-spacing: 0.3px;
            margin: 0;
            max-width: 480px;
            line-height: 1.5;
        }
        .foundation-text strong {
            color: rgba(194,163,100,0.85);
            font-weight: 600;
        }
        .footer-address {
            color: rgba(200,200,210,0.62);
            font-size: 13px;
            line-height: 1.8;
            margin-bottom: 20px;
            letter-spacing: 0.3px;
        }
        .footer-address a {
            color: rgba(194,163,100,0.75);
        }
        .footer-copy {
            color: var(--text-faint);
            font-size: 13px;
        }
        /* Compliance disclosure - small, factual, neither emphasised
           as a trust mark nor hidden. Sits between address and copy. */
        .footer-compliance {
            color: rgba(200,200,210,0.58);
            font-size: 11.5px;
            line-height: 1.6;
            max-width: 560px;
            margin: 0 auto 16px;
            letter-spacing: 0.15px;
        }
        .footer-terms {
            color: var(--text-faint);
            font-size: 13px;
            margin-bottom: 22px;
        }

        /* ============================================================
           RESPONSIVE - single-column collapse and tighter padding.
           ============================================================ */
        /* Channels grid intermediate breakpoint - 4 cols is great on
           desktop but cramped on smaller laptops, drop to 2 there before
           collapsing to 1 on mobile in the main 980px query below. */
        @media (max-width: 1180px) {
            .channels-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 980px) {
            section { padding: 80px 0; }
            .container { padding: 0 24px; }
            .mem-grid { grid-template-columns: 1fr; }
            .about-grid { grid-template-columns: 1fr; }
            .news-grid { grid-template-columns: 1fr; }
            .channels-grid { grid-template-columns: 1fr; }
            .x-grid { grid-template-columns: 1fr; }
            .nav-links a:not(.nav-cta) { display: none; }
            .nav-links #langToggle { display: inline-flex; }
        }
        @media (max-width: 640px) {
            .hero { padding: 80px 20px 70px; }
            .hero-cta-row { flex-direction: column; align-items: stretch; padding: 0 20px; }
            .btn-primary, .btn-secondary { justify-content: center; }
            .mem-card { padding: 36px 28px 32px; }
            .newsletter-section { margin: 40px 0 0; padding: 56px 20px 64px; }
            .newsletter-heading { font-size: 30px; }
            .newsletter-form { flex-direction: column; }
            .newsletter-input, .newsletter-btn { width: 100%; }
        }

        /* ============================================================
           COOKIE / PRIVACY NOTICE - Informative banner, no
           consent picker. Since the page uses only technically
           necessary localStorage and loads neither marketing cookies
           nor tracking, there is nothing genuinely optional to
           reject. Hence a single "Got it" button instead of
           Accept/Reject UI. If a gating-relevant service
           (Analytics, Pixel etc.) is added later, switch this to real
           consent picker logic.
           ============================================================ */
        .cookie-banner {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 9999;
            background: rgba(10,10,15,0.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(194,163,100,0.25);
            padding: 18px 24px;
            display: none;
            box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
            animation: cookieSlide 0.5s ease-out;
        }
        .cookie-banner.visible { display: block; }
        @keyframes cookieSlide {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }
        .cookie-inner {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }
        .cookie-text {
            color: rgba(220,220,225,0.85);
            font-size: 13px;
            line-height: 1.55;
            max-width: 760px;
            flex: 1 1 320px;
        }
        .cookie-text strong {
            color: #e8d5a8;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: 11px;
            display: block;
            margin-bottom: 4px;
        }
        .cookie-text a {
            color: #c2a364;
            text-decoration: underline;
            text-decoration-color: rgba(194,163,100,0.4);
            text-underline-offset: 2px;
        }
        .cookie-text a:hover { color: #e8d5a8; }
        .cookie-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .cookie-btn {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 22px;
            border-radius: 24px;
            cursor: pointer;
            transition: all 0.25s;
            border: 1px solid;
            background: transparent;
        }
        .cookie-btn-accept {
            background: linear-gradient(135deg, rgba(194,163,100,0.2), rgba(194,163,100,0.08));
            border-color: rgba(194,163,100,0.4);
            color: #e8d5a8;
        }
        .cookie-btn-accept:hover {
            border-color: rgba(194,163,100,0.7);
            box-shadow: 0 0 20px rgba(194,163,100,0.15);
        }
        @media (max-width: 768px) {
            .cookie-banner { padding: 14px 16px; }
            .cookie-inner { gap: 12px; }
            .cookie-text { font-size: 12px; }
            .cookie-btn { padding: 9px 16px; font-size: 11px; flex: 1 1 auto; min-width: 120px; }
        }