/* benchmarks.css */
.bmk { padding-top: var(--space-16); }
.bmk__hero { position: relative; overflow: hidden; padding: clamp(var(--space-16), 8vw, var(--space-24)) 0 var(--space-16); border-bottom: 1px solid color-mix(in oklch, var(--color-text) 10%, transparent); }
.bmk__hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 20%, color-mix(in oklch, var(--color-primary) 13%, transparent), transparent 38%); }
.bmk__hero .container { position: relative; }
.bmk__kicker, .bmk__notice-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--color-primary); }
.bmk__kicker { margin-bottom: var(--space-4); }
.bmk__title { max-width: 19ch; margin-bottom: var(--space-6); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 400; line-height: 1.02; color: var(--color-text); }
.bmk__lede { max-width: 64ch; margin-bottom: var(--space-8); font-size: clamp(1.1rem, 1vw + .9rem, 1.4rem); line-height: 1.55; color: var(--color-text-muted); }
.bmk__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bmk__badge { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid color-mix(in oklch, var(--color-primary) 24%, transparent); border-radius: 999px; background: color-mix(in oklch, var(--color-primary) 7%, var(--color-bg)); font-size: var(--text-sm); color: var(--color-text); }
.bmk__badge time { margin-left: .3em; }
.bmk__notice { padding: var(--space-10) 0 0; }
.bmk__notice-card { max-width: 78ch; padding: var(--space-6); border: 1px solid color-mix(in oklch, var(--color-accent) 28%, transparent); border-left: 4px solid var(--color-accent); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--color-accent) 6%, var(--color-surface)); }
.bmk__notice-card h2 { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 400; }
.bmk__notice-card p:last-child { color: var(--color-text-muted); }
.bmk__section { padding: clamp(var(--space-14), 8vw, var(--space-24)) 0; }
.bmk__section--tinted { border-block: 1px solid color-mix(in oklch, var(--color-text) 8%, transparent); background: color-mix(in oklch, var(--color-primary) 4%, var(--color-bg)); }
.bmk__h2 { margin-bottom: var(--space-4); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 400; line-height: 1.1; }
.bmk__section-lede { max-width: 70ch; margin-bottom: var(--space-10); font-size: 1.08rem; line-height: 1.65; color: var(--color-text-muted); }
.bmk__section p { max-width: 72ch; }
.bmk__section a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bmk__section a:hover { text-decoration-thickness: 2px; }
.bmk__section .btn--primary { color: var(--color-text-inverse); text-decoration: none; }
.bmk__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: var(--space-6); }
.bmk__card { display: flex; flex-direction: column; padding: var(--space-7); border: 1px solid color-mix(in oklch, var(--color-text) 10%, transparent); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 16px 48px -42px color-mix(in oklch, var(--color-primary) 45%, transparent); transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive); }
.bmk__card:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--color-primary) 35%, transparent); box-shadow: 0 22px 52px -36px color-mix(in oklch, var(--color-primary) 52%, transparent); }
.bmk__card__eyebrow { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.bmk__card__name { margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; }
.bmk__card__creator { margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.bmk__card__block { margin-bottom: var(--space-4); }
.bmk__card__label { margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.bmk__card__text { font-size: .96rem; line-height: 1.6; color: color-mix(in oklch, var(--color-text) 88%, var(--color-bg)); }
.bmk__card__source { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.bmk__table-wrap { overflow-x: auto; border: 1px solid color-mix(in oklch, var(--color-text) 10%, transparent); border-radius: var(--radius-lg); background: var(--color-surface); }
.bmk__table { min-width: 720px; font-size: .95rem; }
.bmk__table th, .bmk__table td { padding: var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in oklch, var(--color-text) 8%, transparent); }
.bmk__table th { background: color-mix(in oklch, var(--color-primary) 5%, var(--color-bg)); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.bmk__table tbody tr:last-child td { border-bottom: 0; }
.bmk__table tbody tr:hover { background: color-mix(in oklch, var(--color-primary) 3%, var(--color-bg)); }
.bmk__table td:first-child { width: 24%; font-weight: 600; color: var(--color-text); }
.bmk__decision { display: grid; gap: var(--space-7); max-width: 80ch; list-style: none; counter-reset: decision; }
.bmk__decision li { position: relative; padding-left: calc(var(--space-12) + var(--space-2)); counter-increment: decision; }
.bmk__decision li::before { content: counter(decision, decimal-leading-zero); position: absolute; top: .2rem; left: 0; min-width: var(--space-10); padding-top: var(--space-2); border-top: 1px solid var(--color-primary); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary); }
.bmk__decision__q { margin-bottom: var(--space-2); font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; }
.bmk__decision__a { line-height: 1.65; color: var(--color-text-muted); }
.bmk__decision__refs { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.bmk__list { display: grid; gap: var(--space-3); max-width: 75ch; margin-bottom: var(--space-5); list-style: none; }
.bmk__list li { position: relative; padding-left: var(--space-6); line-height: 1.65; }
.bmk__list li::before { content: ''; position: absolute; top: .7em; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--color-primary); }
.bmk__sources { display: grid; gap: var(--space-4); max-width: 86ch; padding-left: var(--space-6); }
.bmk__sources li { padding-left: var(--space-2); line-height: 1.55; }
.bmk__source-meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.bmk__cta-section { padding-top: var(--space-4); padding-bottom: var(--space-20); }
.bmk__cta { max-width: 76ch; margin: 0 auto; padding: clamp(var(--space-8), 6vw, var(--space-14)); text-align: center; border: 1px solid color-mix(in oklch, var(--color-primary) 26%, transparent); border-radius: var(--radius-xl); background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 13%, var(--color-surface)), var(--color-surface)); }
.bmk__cta p { margin-inline: auto; }
.bmk__cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.bmk__error { padding: var(--space-5); border: 1px solid color-mix(in oklch, var(--color-accent) 30%, transparent); border-radius: var(--radius-md); color: var(--color-text-muted); }
@media (max-width: 760px) { .bmk { padding-top: var(--space-12); } .bmk__hero { padding-top: var(--space-14); } .bmk__meta { align-items: flex-start; flex-direction: column; } .bmk__decision li { padding-left: var(--space-10); } }
@media (prefers-reduced-motion: reduce) { .bmk__card:hover { transform: none; } .bmk__hero::before { display: none; } }