/*
 * GFL — Benefits section
 * Vanilla CSS · paired with benefits.js
 * Namespace: .ben
 *
 *   default        → light  (#ffffff)
 *
 * Drop-in tokens fall back to literals so the standalone demo works
 * without the host page's custom properties.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --ben-bg: #ffffff;
    --ben-fg: #111111;
    --ben-fg-muted: #6b6b6b;
    --ben-fg-subtle: #9a9a9a;
    --ben-line: #e8e8e8;
    --ben-surface: #f6f6f6;
    --ben-accent: #0046ff;
    --ben-accent-fg: #ffffff;
    --ben-font-sans: "Geist", system-ui, -apple-system, sans-serif;
    --ben-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
    --ben-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ben-radius: 14px;
}

/* ── Graphic container ──────────────────────────────────────────────────── */
.ben-graphic {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--ben-surface);
    border: 1px solid var(--ben-line);
    border-radius: var(--ben-radius);
    overflow: hidden;
    position: relative;
    transition:
        background 0.4s var(--ben-ease),
        border-color 0.4s var(--ben-ease);
}

.ben-graphic svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ben-graphic {
        aspect-ratio: 16 / 9;
    }
}