/* ============================================================
           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
           "Digital Assets. Elliott Wave, Macro, Onchain." 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(2, 1fr);
            gap: 18px;
            max-width: 680px;
            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;
        }

        /* 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-vat-inline {
            font-size: 11px;
            color: var(--text-faint);
            opacity: 0.72;
            letter-spacing: 0.2px;
            margin-top: -22px;
            margin-bottom: 18px;
        }
        .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;
        }

        /* ============================================================
           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); }
            .daily-majors { grid-template-columns: repeat(2, 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); }
            .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; }
        }