/* Emerald Orbit Utilities & Single Page Overrides */
    /* Design system tokens � keep in sync with other GD pages */
    :root {
        --fc-primary: #10B981;
    }

    .bg-mesh {
        background-color: #ffffff; 
        background-image: 
            radial-gradient(at 90% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 40%),
            radial-gradient(at 10% 30%, rgba(16, 185, 129, 0.04) 0px, transparent 40%),
            radial-gradient(at 50% 100%, rgba(111, 251, 190, 0.08) 0px, transparent 50%);
        background-attachment: fixed;
    }
    .api-glass-panel { 
        background-color: rgba(255, 255, 255, 0.6); 
        backdrop-filter: blur(16px); 
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.8); 
    }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .faq-entry > summary::-webkit-details-marker { display: none; }

 /* Webhook Select Color Fixes */
    select[data-webhook-status="active"] { border-left: 4px solid #10b981 !important; }
    select[data-webhook-status="inactive"] { border-left: 4px solid #ef4444 !important; }
    select[data-webhook-status="pending"] { border-left: 4px solid #f59e0b !important; }
    
    /* Draw Border Card Animation */
    .draw-border-card { position: relative; }
    .draw-border-card .border-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
    .draw-border-card .border-rect { fill: none; stroke: #10b981; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s ease; }
    .draw-border-card:hover .border-rect, .draw-border-card:focus-visible .border-rect { stroke-dashoffset: 0; }
    .draw-border-card .draw-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s; }
    .draw-border-card:hover .draw-arrow, .draw-border-card:focus-visible .draw-arrow { opacity: 1; transform: translateX(0); }

    /* Sticky Example Request � refined "docked" state once it sticks */
    .gd-sticky-panel {
        transition: box-shadow 0.25s ease, transform 0.25s ease, border-radius 0.25s ease;
    }
    .gd-sticky-panel[data-stuck="true"] {
        box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.3), 0 4px 16px -4px rgba(0, 0, 0, 0.2);
    }
    .gd-sticky-panel[data-stuck="true"] .gd-sticky-handlebar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* Sentinel sits above the panel; when it leaves the viewport, the panel is stuck */
    .gd-sticky-sentinel { position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; }

    /* Section anchor links � always visible but muted, intensifies on hover/focus.
        Mobile-friendly (touch can't trigger :hover, so they need to be discoverable). */
    .gd-section-head { display: flex; align-items: center; gap: 0.5rem; }
    .gd-section-head .gd-anchor-link {
        opacity: 0.35;
        transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
        color: #94a3b8;
        font-size: 18px;
        line-height: 1;
        text-decoration: none;
        padding: 4px;
        border-radius: 6px;
    }
    .gd-section-head:hover .gd-anchor-link {
        opacity: 0.7;
    }
    .gd-anchor-link:hover,
    .gd-anchor-link:focus-visible {
        opacity: 1 !important;
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        transform: scale(1.05);
        outline: none;
    }
    /* On touch devices where :hover is unreliable, lift the resting opacity slightly */
    @media (hover: none) {
        .gd-section-head .gd-anchor-link { opacity: 0.55; }
    }

    /* Stats row � pulse on volume dots, stagger fade-in for the whole grid */
    @keyframes gd-stat-dot-pulse {
        0%, 100% { transform: scale(1);   opacity: 1;   }
        50%      { transform: scale(1.6); opacity: 0.5; }
    }
    .gd-stat-dot--pulse {
        animation: gd-stat-dot-pulse 2.4s ease-in-out infinite;
        transform-origin: center;
    }
    .gd-stat-item {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.55s ease-out var(--gd-stat-delay, 0ms),
                    transform 0.55s ease-out var(--gd-stat-delay, 0ms);
    }
    .gd-stats-grid.is-visible .gd-stat-item {
        opacity: 1;
        transform: translateY(0);
    }
    /* Respect reduced-motion: skip pulse and stagger, render statically */
    @media (prefers-reduced-motion: reduce) {
        .gd-stat-dot--pulse { animation: none; }
        .gd-stat-item { opacity: 1; transform: none; transition: none; }
    }
    /* Anchor-link toast confirmation */
    .gd-anchor-toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: #0F172A;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 9999;
        box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
    }
    .gd-anchor-toast[data-visible="true"] {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ---- shared GD button/badge system (ported from solutions.css so the
       hero + CTAs match the solutions/use-case pages; unscoped because this
       file only loads on single-gd_api_endpoint) ---- */
    .pt-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
        text-transform: uppercase; color: #065f46; background: #ecfdf5; padding: 7px 14px; border-radius: 100px; border: 1px solid #a7f3d0; }
    .pt-badge .material-symbols-outlined { font-size: 15px; }
    .pt-dot { width: 7px; height: 7px; border-radius: 50%; background: #13ec80; box-shadow: 0 0 0 0 rgba(19,236,128,.55); animation: pt-pulse 1.8s infinite; }
    @keyframes pt-pulse { 0% { box-shadow: 0 0 0 0 rgba(19,236,128,.55) } 70% { box-shadow: 0 0 0 7px rgba(19,236,128,0) } 100% { box-shadow: 0 0 0 0 rgba(19,236,128,0) } }

    .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
        font-family: inherit; font-weight: 700; font-size: 14.5px; line-height: 1; border: 1px solid transparent; border-radius: 12px;
        padding: 14px 22px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .2s; white-space: nowrap; text-decoration: none; }
    .pt-btn .material-symbols-outlined { font-size: 18px; }
    .pt-btn-primary { background: #13ec80; color: #06281a; box-shadow: 0 8px 22px -8px rgba(19,236,128,.6); }
    .pt-btn-primary:hover { background: #0eb561; color: #06281a; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(19,236,128,.7); }
    .pt-btn-ghost { background: rgba(255,255,255,.85); border-color: #e2e8f0; color: #065f46; }
    .pt-btn-ghost:hover { background: #fff; color: #065f46; transform: translateY(-2px); box-shadow: 0 4px 20px -2px rgba(15,23,42,.06); }
    .pt-btn-on-dark { background: #fff; color: #06281a; }
    .pt-btn-on-dark:hover { background: #13ec80; color: #06281a; transform: translateY(-2px); }
    .pt-btn-ghost-on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
    .pt-btn-ghost-on-dark:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px); }