/* ============================================================
           DESIGN TOKENS - identical to main site so the two pages
           feel like one continuous experience. Do not drift these.
           ============================================================ */
        :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;
        }

        /* Atmosphere - same gradient orb logic as main site. */
        .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 - identical structure to main site so the nav feels
           like one bar across the whole product. Nav links go back
           to anchors on the main page since this is a detail sub-page.
           ============================================================ */
        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; }
        .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);
        }

        /* ============================================================
           SECTION RHYTHM - shared system across the whole site.
           ============================================================ */
        section { padding: 110px 0; position: relative; }
        .section-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 3px;
            color: var(--gold);
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .section-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(32px, 4.5vw, 52px);
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin-bottom: 20px;
        }
        .section-sub {
            font-size: 17px;
            color: var(--text-dim);
            max-width: 680px;
        }
        .section-head-center { text-align: center; margin: 0 auto 64px; max-width: 800px; }
        .section-head-center .section-sub { margin: 0 auto; }

        /* ============================================================
           HERO - restrained. The H1 is the visual hero, no fancy
           background animation. Lets the three-clause structure of
           "Global Markets. Elliott Wave, Structure, Scenarios." breathe.
           ============================================================ */
        .hero {
            padding: 140px 0 120px;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -200px; right: -200px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, var(--gold-glow), transparent 70%);
            filter: blur(40px);
            pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 1; max-width: 920px; }
        .hero-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 3px;
            color: var(--gold);
            text-transform: uppercase;
            margin-bottom: 28px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 8px 14px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: rgba(194,163,100,0.05);
        }
        .hero-eyebrow::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 8px var(--gold);
        }
        .hero-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(40px, 6.2vw, 78px);
            font-weight: 600;
            line-height: 1.05;
            letter-spacing: -0.025em;
            margin-bottom: 32px;
        }
        .hero-title .accent {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-sub {
            font-size: 19px;
            color: var(--text-dim);
            max-width: 720px;
            margin-bottom: 40px;
            line-height: 1.55;
        }
        .hero-ctas {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 36px;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f;
            padding: 16px 30px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.8px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.2s, box-shadow 0.25s;
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 30px var(--gold-glow);
        }
        .btn-secondary {
            padding: 16px 26px;
            border-radius: 999px;
            border: 1px solid var(--border-strong);
            color: var(--text);
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 0.6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.25s, background 0.25s;
        }
        .btn-secondary:hover {
            border-color: var(--gold);
            background: rgba(194,163,100,0.05);
        }
        .hero-trust {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            font-size: 13px;
            color: var(--text-faint);
            letter-spacing: 0.5px;
        }
        .hero-trust span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .hero-trust span::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: var(--gold);
            opacity: 0.6;
        }

        /* ============================================================
           PILLARS - "What you get". Six cards in a 3-col grid,
           collapsing to 2 then 1. Subtle hover lift, gold accent border.
           The first pillar (variable-frequency analyses) gets a "core"
           treatment to draw the eye there first.
           ============================================================ */
        .pillars-wrap {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .pillar {
            position: relative;
            padding: 30px 24px;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--bg-card);
            backdrop-filter: blur(8px);
            transition: border-color 0.3s, transform 0.3s;
            overflow: hidden;
        }
        /* Hero pillar - full-width card sitting above the 3 supporting
           pillars. Horizontal layout (icon + tag on the left, content on
           the right) so the extra width feels intentional rather than
           stretched. Communicates the core emphasis visually without
           making the supporting cards look incomplete by comparison. */
        .pillar.pillar-hero {
            display: flex;
            align-items: center;
            gap: 36px;
            padding: 34px 40px;
        }
        .pillar-hero-left {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
            min-width: 120px;
        }
        .pillar-hero-left .pillar-icon {
            margin-bottom: 0;
            width: 52px;
            height: 52px;
        }
        .pillar-hero-left .pillar-icon svg {
            width: 26px;
            height: 26px;
        }
        .pillar-hero-content {
            flex: 1;
            min-width: 0;
        }
        .pillar-hero .pillar-title {
            font-size: 22px;
            margin-bottom: 12px;
        }
        .pillar-hero .pillar-text {
            font-size: 15px;
            max-width: 720px;
        }
        .pillar::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 18px;
            padding: 1px;
            background: linear-gradient(135deg, transparent, var(--gold-glow), transparent);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: xor;
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }
        .pillar:hover::before { opacity: 1; }
        .pillar:hover { transform: translateY(-3px); border-color: var(--border-strong); }
        .pillar.core {
            background: linear-gradient(165deg, rgba(194,163,100,0.06), var(--bg-card) 65%);
            border-color: var(--border-strong);
        }
        .pillar.core .pillar-tag { display: inline-block; }
        .pillar-tag {
            display: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
            color: var(--gold);
            text-transform: uppercase;
            margin-bottom: 14px;
            padding: 4px 10px;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
        }
        .pillar-icon {
            width: 42px; height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(194,163,100,0.08);
            color: var(--gold);
            margin-bottom: 20px;
        }
        .pillar-icon svg { width: 22px; height: 22px; }
        .pillar-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 19px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text);
        }
        .pillar-text {
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.6;
        }
        .pillar-text strong { color: var(--text); font-weight: 600; }
        /* The Bonus row CSS used to live here; it has been moved to
           the Coverage section since that's where Gold/Silver/equities
           are now consolidated as the bonus tier. */

        /* ============================================================
           COVERAGE - three-tier system:
           1) Daily Majors: BTC, ETH, Gold, Silver - prominent cards
              with gold-tinted background, larger logos, daily label.
           2) Coin grid: ~47 altcoins in a dense 8-column grid (collapses
              progressively on smaller viewports). Compact cells, logo
              + ticker only, no full name to keep the visual lean.
           3) Bonus row: "Plus equities as bonus" pill across the bottom.

           Equal sizing for all altcoins (no occasional/regular split)
           because Ben specifically said all altcoins are treated as
           regular coverage with dynamic frequency.
           ============================================================ */
        .coverage-tier-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 2px;
            color: var(--gold);
            /* No text-transform: uppercase here - CSS uppercase converts
               ss conversion would happen in most browsers/fonts, which breaks the correct
               German spelling. Title Case stays elegant with the gold
               colour, letter-spacing and Space Grotesk weight. */
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .coverage-tier-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--border-strong), transparent);
        }
        .daily-majors {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 880px;
            margin: 0 auto 44px;
        }
        .major-card {
            position: relative;
            padding: 36px 24px 28px;
            border: 1px solid var(--border-strong);
            border-radius: 16px;
            background: linear-gradient(165deg, rgba(194,163,100,0.07), var(--bg-card) 70%);
            text-align: center;
            overflow: hidden;
            transition: transform 0.25s;
        }
        .major-card:hover { transform: translateY(-2px); }
        .major-card .daily-tag {
            position: absolute;
            top: 14px; right: 14px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 9px;
            letter-spacing: 1.5px;
            color: var(--gold);
            text-transform: uppercase;
            opacity: 0.7;
        }
        .major-logo {
            width: 64px; height: 64px;
            margin: 0 auto 16px;
            display: block;
            border-radius: 50%;
        }
        .major-ticker {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 22px;
            font-weight: 600;
            color: var(--text);
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .major-name {
            font-size: 13px;
            color: var(--text-faint);
            letter-spacing: 0.4px;
        }

        /* Market structure tier - reference/structural charts (BTC Dominance,
           ETH/BTC ratio, TOTAL/TOTAL2/TOTAL3, Stablecoin Dominance).
           These aren't daily but get regular coverage as macro-context.
           Compact text-pill cards, no logos since they're indicators
           rather than assets. Six per row on desktop, collapses on
           smaller viewports. */
        .structure-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
        }
        .structure-card {
            padding: 16px 10px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg-card);
            text-align: center;
            transition: border-color 0.25s, transform 0.25s, background 0.25s;
        }
        .structure-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
            background: rgba(194,163,100,0.04);
        }
        .structure-card-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--gold-soft);
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            white-space: nowrap;
        }
        .structure-card-desc {
            font-size: 11px;
            color: var(--text-faint);
            letter-spacing: 0.2px;
            line-height: 1.3;
        }

        /* Index glyph for indices without logos (S&P 500, Nasdaq, DAX).
           Replaces the .major-logo image slot with a styled abbreviation
           on a soft gold-tinted disc, keeping the major-card layout intact. */
        .index-glyph {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(194,163,100,0.22), rgba(194,163,100,0.06) 70%);
            border: 1px solid var(--border-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: var(--gold-soft);
            letter-spacing: 0.5px;
        }

        /* Weekly stock rotation grid - 5 columns (Mon-Fri), each column
           is a labeled day card with 4 stock cells inside. Falls back to
           2 columns on tablet and a single column on mobile. The day
           label sits above the four stocks. */
        .stock-week {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
            margin-bottom: 44px;
        }
        .stock-day {
            background: rgba(15,17,23,0.5);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 16px 12px;
            transition: border-color 0.25s, transform 0.25s;
        }
        .stock-day:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .stock-day-label {
            text-align: center;
            font-size: 11px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gold-soft);
            margin-bottom: 12px;
            font-weight: 600;
        }
        .stock-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .stock-cell {
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 8px;
            padding: 8px 10px;
            display: flex;
            align-items: center;
            gap: 9px;
            transition: background 0.2s, border-color 0.2s;
        }
        .stock-cell:hover {
            background: rgba(194,163,100,0.06);
            border-color: rgba(194,163,100,0.18);
        }
        .stock-logo {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #fff;
            padding: 3px;
            object-fit: contain;
            flex-shrink: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        }
        .stock-text {
            display: flex;
            flex-direction: column;
            text-align: left;
            min-width: 0;
            line-height: 1.2;
        }
        .stock-ticker {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 12.5px;
            color: var(--text);
            letter-spacing: 0.3px;
        }
        .stock-name {
            font-size: 10px;
            color: var(--text-faint);
            margin-top: 1px;
            letter-spacing: 0.1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Advanced+ universe-expansion callout. Sits below the 20-stock
           weekly rotation grid. Communicates that the 20 stocks are just
           the BASE rotation, and that Advanced/Pro/Elite members get
           dynamic rotation + all stock requests from Pro/Elite members.
           Big stat number on the left, copy on the right. */
        .universe-expand {
            display: flex;
            align-items: stretch;
            gap: 32px;
            padding: 32px 36px;
            background: linear-gradient(135deg, rgba(194,163,100,0.08), rgba(15,17,23,0.6) 70%);
            border: 1px solid var(--border-strong);
            border-radius: 18px;
            margin: 8px 0 44px;
            position: relative;
            overflow: hidden;
        }
        .universe-expand::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--gold), var(--gold-soft));
        }
        .universe-expand-stat {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 76px;
            font-weight: 700;
            color: var(--gold);
            line-height: 0.95;
            align-self: center;
            flex-shrink: 0;
            letter-spacing: -2px;
        }
        .universe-expand-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .universe-expand-label {
            font-size: 11px;
            color: var(--gold-soft);
            letter-spacing: 1.6px;
            text-transform: uppercase;
            margin-bottom: 6px;
            font-weight: 600;
        }
        .universe-expand-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 10px;
            line-height: 1.2;
        }
        .universe-expand-text {
            color: var(--text-dim);
            font-size: 14px;
            line-height: 1.55;
        }
        .universe-expand-text strong {
            color: var(--gold-soft);
            font-weight: 600;
        }
        @media (max-width: 720px) {
            .universe-expand {
                flex-direction: column;
                gap: 12px;
                padding: 26px 22px;
            }
            .universe-expand-stat {
                font-size: 56px;
                align-self: flex-start;
            }
        }

        /* Compact altcoin grid */
        .coin-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
        }
        .coin-cell {
            padding: 14px 6px 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg-card);
            text-align: center;
            transition: border-color 0.25s, transform 0.25s, background 0.25s;
        }
        .coin-cell:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
            background: rgba(194,163,100,0.04);
        }
        .coin-cell img {
            width: 30px; height: 30px;
            margin: 0 auto 7px;
            display: block;
            border-radius: 50%;
            /* Fallback styling if logo fails to load */
            background: rgba(194,163,100,0.08);
        }
        .coin-cell .ticker {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--gold-soft);
            letter-spacing: 0.6px;
        }

        /* Bonus block - separate visual tier at the bottom of Coverage.
           Holds Gold + Silver + equities as a unified "extras" group.
           Teal accent so it reads as different from the gold Daily/Altcoin
           tiers above. Three mini-cards inside a labeled container. */
        .coverage-bonus-block {
            margin-top: 40px;
            padding: 28px 28px 24px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background:
                linear-gradient(165deg, rgba(0,167,189,0.04), rgba(0,167,189,0) 70%),
                var(--bg-card);
        }
        .coverage-bonus-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 2px;
            color: var(--teal-soft);
            /* No text-transform: uppercase, see .coverage-tier-label note. */
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .coverage-bonus-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(79,195,161,0.25), transparent);
        }
        .bonus-items {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }
        .bonus-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: rgba(8,9,13,0.4);
        }
        .bonus-item-icon {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }
        .bonus-item-icon.gold {
            background: linear-gradient(145deg, #e8c97a, #c2a364 60%, #8a7340);
            color: #2a2010;
            box-shadow: 0 2px 8px rgba(232,201,122,0.2);
        }
        .bonus-item-icon.silver {
            background: linear-gradient(145deg, #e8e8ec, #b8b8c0 60%, #707078);
            color: #2a2a2e;
            box-shadow: 0 2px 8px rgba(232,232,236,0.12);
        }
        .bonus-item-icon.stocks {
            background: rgba(79,195,161,0.15);
            border: 1px solid rgba(79,195,161,0.4);
            color: var(--teal-soft);
        }
        .bonus-item-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .bonus-item-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }
        .bonus-item-note {
            font-size: 12px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }

        /* ============================================================
           HOW IT WORKS - three-step process row between Offer Card
           and Coverage. Each step is a numbered card with title + body.
           Last card carries the community emphasis since that's the
           differentiator vs. one-way newsletter products.
           ============================================================ */
        .howto-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            position: relative;
        }
        /* Connecting line behind the steps on desktop, subtle hint of
           sequence. Hidden on mobile where steps stack vertically. */
        .howto-grid::before {
            content: '';
            position: absolute;
            top: 38px;
            left: 12%; right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
            z-index: 0;
        }
        .howto-step {
            position: relative;
            z-index: 1;
            padding: 30px 26px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--bg-card);
            backdrop-filter: blur(8px);
            transition: border-color 0.3s, transform 0.3s;
        }
        .howto-step:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .howto-step.community {
            background: linear-gradient(165deg, rgba(194,163,100,0.06), var(--bg-card) 65%);
            border-color: var(--border-strong);
        }
        .howto-num {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
        }
        .howto-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text);
        }
        .howto-body {
            font-size: 14.5px;
            color: var(--text-dim);
            line-height: 1.6;
        }
        .howto-body strong { color: var(--text); font-weight: 600; }
        .howto-body .accent {
            color: var(--gold-soft);
            font-weight: 600;
        }

        /* Headline accent - the second sentence in italic gold */
        .coverage-accent {
            font-style: italic;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* ============================================================
           METHODOLOGY - three columns explaining the three layers.
           Editorial column layout for the prose body. Numbered.
           ============================================================ */
        .method {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            margin-bottom: 56px;
        }
        .method-card {
            padding: 36px 30px;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--bg-card);
            position: relative;
        }
        .method-num {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--gold);
            letter-spacing: 2px;
            margin-bottom: 18px;
        }
        .method-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 14px;
        }
        .method-text {
            font-size: 14.5px;
            color: var(--text-dim);
            line-height: 1.65;
        }
        .method-prose {
            max-width: 760px;
            margin: 0 auto;
            font-size: 16px;
            color: var(--text-dim);
            line-height: 1.75;
            text-align: center;
        }
        .method-prose strong { color: var(--text); font-weight: 600; }

        /* ============================================================
           TERMINAL SPOTLIGHT - this is the moat. Hard-coded from the
           NAV dict in app.py (10 categories, ~57 tools). Six category
           cards shown; each one lists representative tools so a visitor
           can scan the breadth in seconds. Stat band above the grid
           anchors the headline number "50+ Tools, 10 Categories".
           ============================================================ */
        .terminal-section {
            background: linear-gradient(180deg, var(--bg) 0%, #070810 60%, var(--bg) 100%);
        }
        .terminal-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 56px;
            padding: 32px;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--bg-card);
        }
        .terminal-stat {
            text-align: center;
        }
        .terminal-stat-num {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 42px;
            font-weight: 600;
            color: var(--gold-soft);
            line-height: 1;
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }
        .terminal-stat-label {
            font-size: 12px;
            color: var(--text-faint);
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }
        .terminal-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .terminal-cat {
            padding: 28px 26px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--bg-card);
            transition: border-color 0.3s, transform 0.3s;
        }
        .terminal-cat:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .terminal-cat-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }
        .terminal-cat-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            letter-spacing: 0.3px;
        }
        .terminal-cat-count {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            color: var(--gold);
            font-weight: 500;
        }
        .terminal-cat-tools {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .terminal-cat-tools li {
            font-size: 13.5px;
            color: var(--text-dim);
            padding-left: 14px;
            position: relative;
            line-height: 1.45;
        }
        .terminal-cat-tools li::before {
            content: '';
            position: absolute;
            left: 0; top: 9px;
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--gold);
            opacity: 0.5;
        }
        .terminal-screenshot {
            margin-top: 56px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 22px;
            background: var(--bg-card);
            position: relative;
        }
        .terminal-screenshot-placeholder {
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            background:
                repeating-linear-gradient(45deg, transparent 0 12px, rgba(194,163,100,0.04) 12px 13px),
                linear-gradient(135deg, rgba(0,167,189,0.05), rgba(194,163,100,0.05));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-faint);
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        /* ============================================================
           ABOUT THE ANALYST - split layout. Photo placeholder left,
           prose right. Keep this short: credibility signal, not bio.
           ============================================================ */
        /* ============================================================
           ABOUT - full-width globe on top, centered prose below.
           The globe IS the brand visual, so it gets horizontal room
           rather than being squashed into a side column. Height tuned
           smaller than MCO News (which uses 650 as a hero) - this is
           a sub-section, not a landing hero.
           ============================================================ */
        .about-globe-container {
            width: 100%;
            height: 480px;
            margin-bottom: 48px;
            position: relative;
        }
        .about-content {
            max-width: 760px;
            margin: 0 auto;
            text-align: center;
        }
        .about-content .about-credits {
            justify-content: center;
        }
        .about-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .about-role {
            font-size: 14px;
            color: var(--gold);
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-bottom: 22px;
        }
        .about-prose {
            font-size: 16px;
            color: var(--text-dim);
            line-height: 1.7;
        }
        .about-prose p + p { margin-top: 14px; }
        .about-credits {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
        }
        .about-credit {
            font-size: 13px;
            color: var(--text-faint);
            letter-spacing: 0.4px;
        }
        .about-credit strong {
            display: block;
            color: var(--gold-soft);
            font-size: 18px;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            margin-bottom: 2px;
        }

        /* ============================================================
           SAMPLE UPDATE - visualize the actual product. Day-of-update
           metadata header, then prose body placeholder, then chart
           placeholder. The point is to show what a member receives so
           visitors can imagine themselves opening this in their inbox.
           ============================================================ */
        .sample-card {
            max-width: 880px;
            margin: 0 auto;
            border: 1px solid var(--border-strong);
            border-radius: 22px;
            background: var(--bg-card);
            overflow: hidden;
            position: relative;
        }
        .sample-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 22px;
            padding: 1px;
            background: linear-gradient(135deg, var(--gold-glow), transparent 30%, transparent 70%, var(--gold-glow));
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            pointer-events: none;
        }
        .sample-head {
            padding: 22px 32px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
            background: rgba(194,163,100,0.03);
        }
        .sample-meta-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .sample-badge {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.8px;
            color: var(--gold);
            text-transform: uppercase;
            padding: 5px 10px;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
        }
        .sample-asset {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 22px;
            font-weight: 600;
            color: var(--text);
        }
        .sample-date {
            font-size: 13px;
            color: var(--text-faint);
            letter-spacing: 0.4px;
        }
        .sample-body { padding: 32px; }
        .sample-chart-placeholder {
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            background:
                repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,0.02) 30px 31px),
                repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px),
                linear-gradient(180deg, rgba(0,167,189,0.04), transparent);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-faint);
            font-size: 12px;
            letter-spacing: 0.5px;
            margin-bottom: 24px;
        }
        .sample-prose {
            font-size: 15px;
            color: var(--text-dim);
            line-height: 1.7;
        }
        .sample-prose p + p { margin-top: 12px; }
        .sample-prose .placeholder-block {
            padding: 32px;
            border: 1px dashed var(--border);
            border-radius: 12px;
            color: var(--text-faint);
            font-style: italic;
            text-align: center;
            font-size: 13px;
        }

        /* ============================================================
           TESTIMONIALS - quote cards with member identity. Three
           placeholder cards. The avatar is a CSS-only gradient disc
           until real Discord avatars are dropped in.
           ============================================================ */
        .quotes-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            align-items: stretch;
        }
        .quote-card {
            padding: 32px 28px;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--bg-card);
            position: relative;
            display: flex;
            flex-direction: column;
            transition: border-color 0.3s, transform 0.3s;
        }
        .quote-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-2px);
        }
        .quote-mark {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 44px;
            line-height: 0.8;
            color: var(--gold);
            opacity: 0.35;
            margin-bottom: 14px;
        }
        .quote-text {
            font-size: 14.5px;
            color: var(--text);
            line-height: 1.65;
            margin-bottom: 24px;
            flex: 1;
        }
        .quote-text strong {
            color: var(--gold-soft);
            font-weight: 600;
        }
        .quote-author {
            display: flex;
            align-items: center;
            gap: 14px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }
        /* Avatar shows the first letter of the Discord username in a
           gold/teal gradient disc. Matches Discord's "letter avatar"
           visual convention while staying on-brand colour-wise. */
        .quote-avatar {
            width: 42px; height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-soft), var(--teal));
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: #0a0a0f;
        }
        .quote-meta {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .quote-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Discord attribution: muted icon + label. Subtle authenticity
           signal without taking on the bright Discord purple. */
        .quote-role {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }
        .quote-role svg {
            width: 11px;
            height: 11px;
            color: var(--gold);
            opacity: 0.7;
            flex-shrink: 0;
        }
        .quote-placeholder {
            font-style: italic;
            color: var(--text-faint);
        }

        /* ============================================================
           MEMBERSHIP OFFER - direct port of the main-page mem-card
           pattern, expanded with more bullets and prominent CTA.
           Single card centered, max-width-constrained.
           ============================================================ */
        .offer-card {
            max-width: 720px;
            margin: 0 auto;
            padding: 48px 44px 40px;
            border: 1px solid var(--border-strong);
            border-radius: 22px;
            background: var(--bg-card);
            position: relative;
            overflow: hidden;
        }
        .offer-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }
        .offer-tag {
            display: inline-block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            color: var(--gold);
            text-transform: uppercase;
            padding: 5px 12px;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
            margin-bottom: 20px;
        }
        .offer-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 30px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .offer-tagline {
            font-size: 15px;
            color: var(--text-dim);
            margin-bottom: 28px;
        }
        .offer-price-row {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        .offer-price-prefix { font-size: 14px; color: var(--text-faint); }
        .offer-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 44px;
            font-weight: 600;
            color: var(--gold-soft);
            letter-spacing: -0.02em;
        }
        .offer-price-eur {
            font-size: 14px;
            color: var(--text-faint);
            margin-left: 4px;
        }
        .offer-period { font-size: 14px; color: var(--text-dim); }
        .offer-price-note {
            font-size: 12px;
            color: var(--text-faint);
            margin-bottom: 28px;
            letter-spacing: 0.3px;
        }
        .offer-bullets {
            list-style: none;
            margin-bottom: 32px;
        }
        .offer-bullet {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }
        .offer-bullet:last-child { border-bottom: 0; }
        .offer-bullet-icon {
            width: 22px; height: 22px;
            color: var(--gold);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .offer-bullet-text { font-size: 14.5px; line-height: 1.5; }
        .offer-bullet-text strong {
            display: block;
            color: var(--text);
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 2px;
        }
        .offer-bullet-text span { color: var(--text-dim); }
        .offer-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f !important;
            padding: 18px 30px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 15px;
            letter-spacing: 0.8px;
            transition: transform 0.2s, box-shadow 0.25s;
        }
        .offer-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 36px var(--gold-glow);
        }
        .offer-fineprint {
            text-align: center;
            margin-top: 18px;
            font-size: 12px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }

        /* ============================================================
           TIERS GRID - 5-column responsive pricing grid for the Markets
           membership. Mirrors the offer-card visual DNA (gold accent,
           dark card surface) but compressed to fit five tiers side by
           side on desktop. Featured tier (Advanced) gets a gold border,
           subtle gradient background, and a "Recommended" pill above.
           Drops to 3-col on tablet (with featured tier ordered first),
           and to 1-col stacked on mobile.
           ============================================================ */
        .tier-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-top: 40px;
        }
        .tier-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 28px 20px 24px;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .tier-card:hover {
            transform: translateY(-4px);
            border-color: var(--border-strong);
            box-shadow: 0 22px 56px rgba(0,0,0,0.4);
        }
        .tier-card.featured {
            border-color: var(--gold);
            background: linear-gradient(180deg, rgba(194,163,100,0.08), var(--bg-card) 70%);
            box-shadow: 0 18px 50px rgba(194,163,100,0.10);
        }
        .tier-card.featured::before {
            content: 'Recommended';
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .tier-tag {
            display: block;
            font-size: 10px;
            color: var(--gold-soft);
            letter-spacing: 1.6px;
            text-transform: uppercase;
            margin-bottom: 6px;
            font-weight: 600;
        }
        .tier-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--text);
            line-height: 1.15;
            margin-bottom: 6px;
        }
        .tier-tagline {
            color: var(--text-dim);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 22px;
            min-height: 56px;
        }
        .tier-price-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 2px;
        }
        .tier-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: -0.5px;
        }
        .tier-price-period {
            color: var(--text-faint);
            font-size: 12px;
        }
        .tier-price-eur {
            font-size: 11px;
            color: var(--text-faint);
            margin-bottom: 22px;
            letter-spacing: 0.2px;
        }
        .tier-price-vat {
            font-size: 10px;
            color: var(--text-faint);
            opacity: 0.72;
            letter-spacing: 0.2px;
            margin-top: -18px;
            /* Increased gap below VAT line gives the price block its own
               visual chamber separate from the benefits bullets, makes
               the card hierarchy (price → benefits → CTA) easier to scan. */
            margin-bottom: 38px;
        }
        /* ===== FOUNDER PRICING =====
           Two connected visual elements communicate the founder deal:
           1. The strikethrough original price next to the new price, sized
              big enough that the comparison reads instantly.
           2. A teal/gold savings highlight box with the concrete monthly
              £-amount and the "lifetime" word, so people grasp the deal's
              real value, not just an abstract percentage.
           The .tier-founder-corner gold pill that previously sat at the
           top-right of every card is currently hidden (display:none in
           the .tier-founder-corner rule below) - it was redundant with
           the big launch banner above the grid. To re-enable, change
           display:none back to display:inline-flex on .tier-founder-corner.
           Tone stays restrained - no neon, no shouty red discount stickers.
           The visual weight sits in colors that already belong to the brand. */
        .tier-price-original {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 21px;
            font-weight: 500;
            color: var(--text-faint);
            text-decoration: line-through;
            text-decoration-color: rgba(194,163,100,0.55);
            text-decoration-thickness: 1.8px;
            opacity: 0.82;
            letter-spacing: -0.3px;
        }
        .tier-founder-corner {
            position: absolute;
            top: 14px;
            right: 14px;
            display: none;
            align-items: center;
            gap: 5px;
            background: linear-gradient(135deg, rgba(194,163,100,0.20), rgba(194,163,100,0.10));
            border: 1px solid rgba(194,163,100,0.50);
            padding: 5px 11px 5px 10px;
            border-radius: 999px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gold-soft);
            z-index: 2;
            pointer-events: none;
            white-space: nowrap;
        }
        .tier-founder-corner::before {
            content: '★';
            color: var(--gold);
            font-size: 11px;
            margin-right: 1px;
        }
        /* On featured card "Recommended" pill sits centered above the card,
           so the corner pill doesn't collide - they coexist fine. */
        .tier-price-savings {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 13px;
            margin-top: 4px;
            margin-bottom: 18px;
            background: linear-gradient(135deg, rgba(79,195,161,0.09), rgba(194,163,100,0.05));
            border: 1px solid rgba(79,195,161,0.26);
            border-radius: 10px;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--text);
            line-height: 1.35;
        }
        .tier-price-savings strong {
            color: var(--teal-soft);
            font-weight: 700;
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: 0.2px;
        }
        .tier-price-savings-icon {
            color: var(--teal-soft);
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }
        .tier-bullets {
            list-style: none;
            margin: 0 0 24px;
            padding: 0;
            flex-grow: 1;
        }
        .tier-bullets li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 12.5px;
            line-height: 1.45;
            padding: 9px 0;
            color: var(--text);
            border-top: 1px solid rgba(255,255,255,0.04);
        }
        .tier-bullets li:first-child { border-top: 0; padding-top: 4px; }
        .tier-bullets li .check {
            color: var(--teal-soft);
            flex-shrink: 0;
            margin-top: 2px;
            width: 14px;
            height: 14px;
        }
        .tier-bullets li.muted {
            color: var(--text-faint);
            text-decoration: line-through;
            text-decoration-color: rgba(255,255,255,0.15);
        }
        .tier-bullets li.muted .check {
            color: var(--text-faint);
            opacity: 0.35;
        }
        .tier-bullets li strong {
            color: var(--gold-soft);
            font-weight: 600;
        }
        .tier-card.featured .tier-bullets li strong {
            color: var(--gold);
        }
        .tier-bullet-note {
            display: block;
            font-style: normal;
            font-size: 10.5px;
            color: var(--text-faint);
            opacity: 0.75;
            margin-top: 3px;
            letter-spacing: 0.1px;
            line-height: 1.35;
        }
        .tier-cta {
            background: rgba(194,163,100,0.10);
            border: 1px solid var(--border-strong);
            color: var(--gold-soft) !important;
            padding: 11px 14px;
            border-radius: 999px;
            text-align: center;
            font-weight: 600;
            font-size: 11.5px;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            transition: all 0.25s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .tier-card.featured .tier-cta {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #0a0a0f !important;
            border-color: var(--gold);
        }
        .tier-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px var(--gold-glow);
        }
        .tier-fineprint {
            text-align: center;
            margin-top: 26px;
            font-size: 12px;
            color: var(--text-faint);
            letter-spacing: 0.3px;
        }

        .tier-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;
        }
        .tier-cta.disabled::before {
            content: 'Coming soon';
            color: rgba(194,163,100,0.75);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            line-height: 1;
        }
        .tier-cta.disabled > * {
            display: none;
        }
        .tier-cta.disabled:hover {
            transform: none;
            box-shadow: none;
        }
        .tier-coming-soon-banner {
            position: relative;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(194,163,100,0.16), transparent 60%),
                linear-gradient(135deg, rgba(194,163,100,0.10), rgba(15,17,23,0.65) 75%);
            border: 1px solid rgba(194,163,100,0.32);
            border-top: 1px solid rgba(194,163,100,0.55);
            border-radius: 14px;
            padding: 26px 28px 24px;
            margin-bottom: 36px;
            text-align: center;
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.55;
            box-shadow: 0 14px 40px rgba(194,163,100,0.08);
            overflow: hidden;
        }
        .tier-coming-soon-banner::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            opacity: 0.6;
        }
        .tier-coming-soon-banner strong {
            color: var(--gold-soft);
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .tier-launch-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(18px, 2.4vw, 24px);
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text);
            line-height: 1.25;
            margin-bottom: 12px;
        }
        .tier-launch-headline strong {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-weight: 700;
        }
        .tier-launch-body {
            font-size: 13.5px;
            color: var(--text-dim);
            line-height: 1.6;
            max-width: 720px;
            margin: 0 auto;
        }
        .tier-launch-body strong {
            color: var(--gold-soft);
            font-weight: 600;
        }
        .tier-launch-badge {
            display: inline-block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            color: var(--gold);
            background: rgba(194,163,100,0.10);
            border: 1px solid rgba(194,163,100,0.32);
            padding: 5px 14px;
            border-radius: 999px;
            margin-bottom: 14px;
        }
        .tier-launch-badge::before {
            content: '★ ';
            color: var(--gold-soft);
        }

        /* Tablet: 3-col grid, featured tier moves to front for prominence */
        @media (max-width: 1180px) {
            .tier-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 18px;
            }
            .tier-card.featured { order: -1; }
        }
        /* Small tablet: 2-col */
        @media (max-width: 880px) {
            .tier-grid { grid-template-columns: repeat(2, 1fr); }
        }
        /* Mobile: stack */
        @media (max-width: 600px) {
            .tier-grid { grid-template-columns: 1fr; }
            .tier-card { padding: 26px 22px 22px; }
            .tier-tagline { min-height: 0; }
        }

        /* ============================================================
           FAQ - CSS-only accordion using <details>. Stays accessible
           and works without JS. Clean borders, gold accent on open.
           ============================================================ */
        .faq-list {
            max-width: 820px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .faq-item {
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--bg-card);
            overflow: hidden;
            transition: border-color 0.3s;
        }
        .faq-item[open] { border-color: var(--border-strong); }
        .faq-item summary {
            padding: 20px 24px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            transition: color 0.25s;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary:hover { color: var(--gold-soft); }
        .faq-toggle {
            width: 20px; height: 20px;
            color: var(--gold);
            flex-shrink: 0;
            transition: transform 0.3s;
        }
        .faq-item[open] .faq-toggle { transform: rotate(45deg); }
        .faq-body {
            padding: 0 24px 22px;
            font-size: 14.5px;
            color: var(--text-dim);
            line-height: 1.7;
        }

        /* ============================================================
           FINAL CTA - quiet but firm. Single sentence + button.
           ============================================================ */
        .final-cta {
            text-align: center;
            padding: 80px 0 110px;
        }
        .final-cta-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: -0.02em;
            margin-bottom: 18px;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
        }
        .final-cta-sub {
            font-size: 16px;
            color: var(--text-dim);
            max-width: 560px;
            margin: 0 auto 32px;
        }

        /* 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 - minimal. Brand line, year, link back to main.
           ============================================================ */
        /* ============================================================
           FOOTER - mirrors main page structure exactly so visitors
           who land directly on /digital-assets see the same brand
           credentials (BaFin notice, trust badges, registered address)
           as on the home page. Plus a small city/identity meta line
           on top before the brand tagline.
           ============================================================ */
        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-meta {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 10.5px;
            letter-spacing: 2.5px;
            color: var(--text-faint);
            text-transform: uppercase;
            margin-bottom: 14px;
        }
        .footer-meta .city {
            color: var(--gold-soft);
            font-weight: 500;
        }
        .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); }
        .footer-terms {
            color: var(--text-faint);
            font-size: 13px;
            margin-bottom: 22px;
        }
        /* Trust badges - Federation of Small Businesses and Good
           Business Charter membership. White-inverted to fit the dark
           theme, slightly desaturated so they read as credentials
           rather than advertising. */
        .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);
        }
        /* BaFin notification - purely factual disclosure (NOT a marketing
           claim). § 86 WpHG is a notification, not an authorisation.
           Small, neutral, 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-copy {
            color: var(--text-faint);
            font-size: 13px;
        }

        /* ============================================================
           COOKIE BANNER - GDPR/PECR-compliant notice. Same component
           as on the main page. Since the site uses only technically
           necessary localStorage and loads no marketing cookies or
           tracking, a single "Got it" button is sufficient. The
           "Cookie settings" footer link reopens the banner.
           ============================================================ */
        .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; }
        }

        /* ============================================================
           HONESTY NOTE - shared callout used to set honest expectations
           about (a) Terminal being in active development under Early
           Access and (b) coverage being orientation, not a fixed plan.
           Gold left border + soft background. Reused so the two notes
           feel like one consistent "here is what to expect" voice.
           ============================================================ */
        .honesty-note {
            margin: 44px auto 0;
            max-width: 760px;
            padding: 24px 28px;
            border-left: 2px solid var(--gold);
            background: rgba(194,163,100,0.04);
            border-radius: 4px 14px 14px 4px;
            font-size: 14.5px;
            color: var(--text-dim);
            line-height: 1.65;
        }
        .honesty-note .honesty-title {
            display: block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            color: var(--text);
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.2px;
        }
        .honesty-note strong { color: var(--gold-soft); }

        /* ============================================================
           SCROLL REVEAL - subtle fade-up on entry. IntersectionObserver
           toggles .visible class. Keep it gentle, no big movements.
           ============================================================ */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================================
           RESPONSIVE - collapse grids progressively. Mobile keeps the
           same hierarchy but stacks into a single column flow.
           ============================================================ */
        @media (max-width: 980px) {
            .pillars { grid-template-columns: 1fr; }
            .pillar.pillar-hero {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
                padding: 28px 26px;
            }
            .pillar-hero-left {
                flex-direction: row;
                align-items: center;
                min-width: 0;
            }
            .howto-grid { grid-template-columns: 1fr; gap: 14px; }
            .howto-grid::before { display: none; }
            .terminal-grid { grid-template-columns: repeat(2, 1fr); }
            .quotes-grid { grid-template-columns: 1fr; }
            .method { grid-template-columns: 1fr; gap: 16px; }
            .coin-grid { grid-template-columns: repeat(6, 1fr); }
            .structure-grid { grid-template-columns: repeat(3, 1fr); }
            .stock-week { grid-template-columns: repeat(3, 1fr); }
            .bonus-items { grid-template-columns: 1fr; }
            .about-split { grid-template-columns: 1fr; gap: 32px; }
            .about-globe-container { height: 420px; }
            .terminal-stats { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
            section { padding: 72px 0; }
            .hero { padding: 80px 0 70px; }
            .container { padding: 0 20px; }
            .wordmark img { height: 56px; }
            .header-inner { padding: 10px 20px; }
            .nav-links a:not(.nav-cta) { display: none; }
            .pillars { grid-template-columns: 1fr; }
            .terminal-grid { grid-template-columns: 1fr; }
            .coin-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
            .structure-grid { grid-template-columns: repeat(2, 1fr); }
            .stock-week { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .daily-majors { grid-template-columns: 1fr; gap: 12px; }
            .major-card { padding: 28px 18px 22px; }
            .major-logo { width: 56px; height: 56px; margin-bottom: 12px; }
            .major-ticker { font-size: 20px; }
            .terminal-stats { padding: 22px 18px; }
            .terminal-stat-num { font-size: 32px; }
            .offer-card { padding: 36px 26px 32px; }
            .offer-price { font-size: 36px; }
            .sample-body { padding: 22px; }
            .sample-head { padding: 18px 22px; }
            .hero-ctas { flex-direction: column; align-items: stretch; }
            .btn-primary, .btn-secondary { justify-content: center; }
            .about-globe-container { height: 360px; margin-bottom: 32px; }
        }