/* Hero CTA — pill button per Claude-Design handoff (cta-handoff/cta-button.css).
       Glassmorphic over dark hero, large 40×40 messenger tiles on the right. */
    .cta-btn {
        display: inline-flex; align-items: center; gap: 16px;
        padding: 14px 18px 14px 28px;
        background: rgba(245, 237, 226, 0.06);
        border: 1px solid rgba(245, 237, 226, 0.10);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 999px;
        color: #F5EDE2;
        font-family: 'Manrope', 'Involve', system-ui, sans-serif;
        font-size: 16px; font-weight: 500; line-height: 1;
        text-decoration: none; cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }
    .cta-btn:hover {
        background: rgba(245, 237, 226, 0.10);
        transform: translateY(-1px);
    }
    .cta-btn:focus-visible {
        outline: 2px solid #FFC716;
        outline-offset: 3px;
    }
    .cta-btn__sparkle { color: #FFC716; font-size: 14px; margin-right: -4px; }
    .cta-btn__label { white-space: nowrap; }
    .cta-btn__icons { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
    .cta-icon {
        width: 40px; height: 40px;
        border-radius: 11px;
        display: inline-grid; place-items: center;
        overflow: hidden; flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .cta-icon:hover { transform: scale(1.08); }
    .cta-icon svg { display: block; }
    .cta-icon--tg { background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%); }
    .cta-icon--tg svg { width: 22px; height: 22px; color: #ffffff; }
    .cta-icon--max svg { width: 40px; height: 40px; }
    @media (max-width: 600px) {
        .cta-btn { gap: 10px; padding: 12px 14px 12px 22px; font-size: 15px; }
        .cta-icon { width: 36px; height: 36px; border-radius: 10px; }
        .cta-icon--max svg { width: 36px; height: 36px; }
    }

    /* Modal */
    .chat-picker {
        position: fixed; inset: 0; z-index: 10000;
        display: none;
        align-items: center; justify-content: center;
        padding: 20px;
    }
    .chat-picker.is-open { display: flex; }
    .chat-picker__overlay {
        position: absolute; inset: 0;
        background: rgba(15,12,10,0.78);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .chat-picker__sheet {
        position: relative;
        background: #2A241F;
        color: #FAF5EC;
        border-radius: 22px;
        padding: 40px 36px 32px;
        max-width: 720px; width: 100%;
        max-height: 92vh; overflow-y: auto;
        box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    }
    .chat-picker__close {
        position: absolute; top: 12px; right: 14px;
        width: 36px; height: 36px;
        border: none; border-radius: 10px;
        background: rgba(245,237,226,0.08);
        color: #FAF5EC; font-size: 24px; line-height: 1;
        cursor: pointer; transition: background 0.15s ease;
    }
    .chat-picker__close:hover { background: rgba(245,237,226,0.18); }
    .chat-picker__head { text-align: center; margin-bottom: 28px; }
    .chat-picker__title { font-size: 26px; font-weight: 700; color: #FAF5EC; margin: 0 0 8px; letter-spacing: -0.02em; }
    .chat-picker__sub { font-size: 15px; color: rgba(245,237,226,0.65); margin: 0; }

    .chat-picker__grid {
        display: grid; gap: 16px;
        grid-template-columns: 1fr;
    }
    @media (min-width: 600px) { .chat-picker__grid { grid-template-columns: 1fr 1fr; } }

    .chat-picker__opt {
        display: flex; flex-direction: column; align-items: center;
        background: #1E1915; border: 1px solid rgba(245,237,226,0.08);
        border-radius: 18px; padding: 28px 24px;
        text-decoration: none !important; color: #FAF5EC;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        text-align: center;
    }
    .chat-picker__opt:hover {
        transform: translateY(-2px);
        border-color: rgba(251,200,30,0.45);
        box-shadow: 0 12px 30px rgba(251,200,30,0.12);
    }
    .chat-picker__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 64px; height: 64px;
        background: rgba(245,237,226,0.08);
        border-radius: 14px; margin-bottom: 14px;
    }
    .chat-picker__name { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 4px; }
    .chat-picker__handle {
        font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
        font-size: 12px; color: rgba(245,237,226,0.55);
        margin-bottom: 18px; word-break: break-all;
    }
    .chat-picker__qr {
        width: 168px; height: 168px;
        border-radius: 12px;
        background: #FAF5EC;
        padding: 6px;
        margin-bottom: 14px;
    }
    .chat-picker__hint {
        font-size: 13px; line-height: 1.4;
        color: rgba(245,237,226,0.55);
    }
    .chat-picker__hint--mobile { display: none; }

    /* On touch / coarse-pointer devices: hide QR, show "tap to open" hint. */
    @media (hover: none) and (pointer: coarse) {
        .chat-picker__qr,
        .chat-picker__hint--desktop { display: none; }
        .chat-picker__hint--mobile { display: block; color: #FBC81E; font-weight: 600; }
    }

    /* Mobile sheet — bottom-sheet feel */
    @media (max-width: 600px) {
        .chat-picker { padding: 0; align-items: flex-end; }
        .chat-picker__sheet {
            border-radius: 22px 22px 0 0;
            padding: 32px 24px 24px;
            max-height: 80vh;
        }
    }