@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef2f8;
    --surface-3: #e3e9f3;
    --text: #111827;
    --muted: #5d687a;
    --line: #d8e0eb;
    --line-strong: #bec9d8;
    --accent: #3157d5;
    --accent-hover: #2647b5;
    --accent-soft: #e8edff;
    --success: #16764b;
    --success-soft: #e4f5ed;
    --warning: #8a5a00;
    --warning-soft: #fff3d7;
    --danger: #b42336;
    --danger-soft: #ffeaed;
    --shadow: 0 24px 70px rgba(24, 39, 75, 0.10);
    --shadow-small: 0 8px 28px rgba(24, 39, 75, 0.08);
    --radius: 24px;
    --radius-small: 14px;
    --max: 1180px;
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-font="inter"] { --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1119;
    --surface: #151b26;
    --surface-2: #1c2431;
    --surface-3: #263142;
    --text: #f5f7fb;
    --muted: #a8b2c2;
    --line: #2a3546;
    --line-strong: #3a485d;
    --accent: #829cff;
    --accent-hover: #9db0ff;
    --accent-soft: #202b50;
    --success: #63d49e;
    --success-soft: #15382a;
    --warning: #f0bd5b;
    --warning-soft: #3d3018;
    --danger: #ff8998;
    --danger-soft: #441e25;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    --shadow-small: 0 8px 28px rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg: #0d1119;
        --surface: #151b26;
        --surface-2: #1c2431;
        --surface-3: #263142;
        --text: #f5f7fb;
        --muted: #a8b2c2;
        --line: #2a3546;
        --line-strong: #3a485d;
        --accent: #829cff;
        --accent-hover: #9db0ff;
        --accent-soft: #202b50;
        --success: #63d49e;
        --success-soft: #15382a;
        --warning: #f0bd5b;
        --warning-soft: #3d3018;
        --danger: #ff8998;
        --danger-soft: #441e25;
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
        --shadow-small: 0 8px 28px rgba(0, 0, 0, 0.22);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); background: var(--bg); color: var(--text); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); line-height: 1.55; }
body, button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 1000; left: 16px; top: 12px; transform: translateY(-160%); padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); }
.skip-link:focus { transform: translateY(0); }
.section-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow-page { max-width: 780px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: .76rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }

.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.header-inner { width: min(calc(100% - 40px), var(--max)); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.025em; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #3157d5, #6a86f4); box-shadow: 0 8px 18px rgba(49,87,213,.24); font-size: .78rem; letter-spacing: -.04em; }
.brand-domain { color: var(--accent); }
.primary-nav { display: flex; align-items: center; gap: 6px; }
.primary-nav a, .theme-toggle { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: .92rem; font-weight: 620; }
.primary-nav a:hover, .primary-nav a[aria-current="page"], .theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.language-link { border-left: 1px solid var(--line); margin-left: 8px; padding-left: 20px !important; }
.theme-toggle { width: 40px; height: 40px; border: 0; background: transparent; }
.nav-toggle { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; }

.hero { min-height: 670px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(48px, 7vw, 100px); padding-block: 80px; }
.hero h1 { max-width: 720px; margin: 0; font-size: clamp(3.35rem, 7.5vw, 6.6rem); line-height: .94; letter-spacing: -.075em; }
.hero-intro { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-actions > span { color: var(--muted); font-size: .9rem; }
.trust-line { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; color: var(--muted); font-size: .88rem; }
.trust-line span { color: var(--success); font-weight: 800; }
.hero-visual { position: relative; }
.hero-visual::before { content: ""; position: absolute; inset: -70px -35px; z-index: -1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%); filter: blur(16px); }
.score-preview { min-height: 490px; padding: 28px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 34px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); transform: rotate(1.5deg); }
.preview-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .82rem; }
.preview-main { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.preview-main > span, .preview-main > small { color: var(--muted); }
.preview-main strong { font-size: clamp(5rem, 10vw, 8rem); line-height: .9; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.preview-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.preview-scale span { height: 8px; border-radius: 99px; background: var(--surface-3); }
.preview-scale .active { background: var(--accent); }
.preview-meta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-meta div { display: flex; flex-direction: column; gap: 4px; }
.preview-meta span { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.preview-meta strong { font-variant-numeric: tabular-nums; }

.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 13px; background: var(--accent); color: #fff; font-weight: 720; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.button.large { min-height: 58px; padding-inline: 28px; border-radius: 16px; }
.button.secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.button.secondary:hover { background: var(--surface-2); }
.button.small { min-height: 36px; padding-inline: 13px; font-size: .83rem; }
.button.full { width: 100%; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--accent); font-weight: 700; }
.quiet-link { color: var(--muted); font-size: .88rem; }
.quiet-link:hover { color: var(--text); }

.notice-strip { border-block: 1px solid var(--line); background: var(--surface); }
.notice-inner { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.notice-inner div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 24px; }
.notice-inner p { margin: 0; color: var(--muted); }
.notice-inner a { color: var(--accent); font-weight: 700; white-space: nowrap; }
.content-section { padding-block: 92px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; margin-bottom: 30px; }
.section-heading.wide { align-items: end; }
.section-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.section-heading > p { max-width: 400px; margin: 0; color: var(--muted); text-align: right; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); }
.feature-card > span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 750; }
.feature-card h3 { margin: 70px 0 10px; font-size: 1.18rem; }
.feature-card p { margin: 0; color: var(--muted); }
.split-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; padding-top: 0; }
.ranking-card, .trust-card, .result-card, .admin-card { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); }
.empty-ranking { min-height: 270px; display: grid; place-items: center; align-content: center; text-align: center; }
.browser-stack { display: flex; justify-content: center; margin-bottom: 24px; }
.browser-stack img { width: 48px; height: 48px; padding: 7px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-small); margin-left: -8px; }
.browser-stack img:first-child { margin-left: 0; }
.empty-ranking p { max-width: 540px; color: var(--muted); }
.empty-ranking small { color: var(--muted); }
.trust-card h2 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.trust-card > p:not(.eyebrow) { color: var(--muted); }
.check-list { padding: 0; margin: 28px 0 0; list-style: none; }
.check-list li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 850; }

.page-intro { padding-block: 100px 50px; }
.page-intro.centered { text-align: center; }
.page-intro h1 { max-width: 850px; margin: 0; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; letter-spacing: -.065em; }
.page-intro.centered h1, .page-intro.centered p { margin-inline: auto; }
.page-intro > p:not(.eyebrow) { max-width: 760px; margin-top: 22px; color: var(--muted); font-size: 1.12rem; }
.prose { color: var(--muted); font-size: 1.05rem; }
.prose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.prose-grid article { padding: 30px; border-top: 1px solid var(--line); }
.prose-grid article > span { color: var(--accent); font-size: .8rem; font-weight: 750; }
.prose-grid h2 { margin: 30px 0 10px; }
.prose-grid p { margin: 0; color: var(--muted); }
.workload-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.workload-row { min-height: 60px; padding: 12px 20px; display: grid; grid-template-columns: 110px 1fr 100px 160px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.workload-row:last-child { border-bottom: 0; }
.workload-row code { color: var(--accent); font-weight: 750; }
.workload-row span:nth-child(n+3) { color: var(--muted); text-align: right; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-grid article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.metric-grid span { display: block; color: var(--muted); font-size: .83rem; }
.metric-grid strong { display: block; margin-top: 8px; font-size: 2.2rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.statistics-placeholder { min-height: 430px; margin-top: 24px; padding: 40px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.statistics-placeholder p { max-width: 650px; color: var(--muted); }
.placeholder-chart { width: min(620px, 100%); height: 170px; display: flex; align-items: end; gap: 5px; }
.placeholder-chart span { flex: 1; min-height: 10px; border-radius: 5px 5px 0 0; background: var(--surface-3); }
.placeholder-chart span:nth-child(3n) { height: 30%; }.placeholder-chart span:nth-child(4n) { height: 55%; }.placeholder-chart span:nth-child(5n) { height: 85%; }.placeholder-chart span:nth-child(7n) { height: 100%; }

.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: .72rem; font-weight: 760; white-space: nowrap; }
.status-pill.ok { background: var(--success-soft); color: var(--success); }
.status-pill.error { background: var(--danger-soft); color: var(--danger); }
.status-pill.warning { background: var(--warning-soft); color: var(--warning); }
.status-pill.neutral { background: var(--surface-2); color: var(--muted); }
.callout { margin-block: 24px; padding: 20px 22px; border-radius: var(--radius-small); border: 1px solid var(--line); }
.callout p { margin: 5px 0 0; color: var(--muted); }
.callout.important { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.alert { margin-bottom: 20px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.alert.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.alert.success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, var(--line)); }
.alert ul { margin-bottom: 0; }

.benchmark-shell { min-height: calc(100vh - 76px); padding-block: 70px 110px; }
.benchmark-card { max-width: 780px; margin: 38px auto 0; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.compatibility-grid { margin: 28px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.compatibility-item { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-radius: 11px; background: var(--surface-2); }
.compatibility-item span { color: var(--muted); }
.compatibility-item strong { font-size: .82rem; }
.benchmark-consent { margin: 26px 0; padding: 20px; border-block: 1px solid var(--line); }
.benchmark-consent p { margin: 12px 0 0 28px; color: var(--muted); font-size: .86rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: 12px; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.benchmark-progress { min-height: 630px; display: grid; place-items: center; align-content: center; text-align: center; }
.progress-visual { margin-bottom: 30px; }
.progress-ring { width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent), var(--surface-3), var(--accent)); animation: none; }
.progress-ring::before { content: ""; grid-area: 1/1; width: 84px; height: 84px; border-radius: 50%; background: var(--bg); }
.progress-ring span { grid-area: 1/1; z-index: 1; font-weight: 800; }
.benchmark-progress h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.05em; }
.benchmark-progress p:not(.eyebrow), .benchmark-progress small { color: var(--muted); }
.progress-track { width: min(520px, 90vw); height: 7px; margin: 26px 0 14px; overflow: hidden; border: 0; border-radius: 99px; background: var(--surface-3); appearance: none; }
.progress-track::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.progress-track::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.progress-track::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.benchmark-stage { position: fixed; left: -10000px; top: 0; width: 960px; min-height: 680px; contain: layout style paint; visibility: hidden; }
.benchmark-stage[data-active="true"] { visibility: visible; }
.benchmark-stage .layout { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.benchmark-stage .layout.alt { grid-template-columns: repeat(5, 1fr); }
.benchmark-stage .layout > div { display: flex; min-height: 8px; padding: 2px; }

.result-page { padding-block: 85px 110px; }
.result-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.result-heading h1 { max-width: 900px; margin: 0; font-size: clamp(3rem, 7vw, 6rem); line-height: .98; letter-spacing: -.07em; }
.result-heading h1 span { display: block; margin-top: 14px; color: var(--muted); font-size: 1rem; letter-spacing: 0; }
.result-heading > p:not(.eyebrow) { max-width: 700px; color: var(--muted); }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.result-metrics article { min-height: 150px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.result-metrics span { color: var(--muted); font-size: .82rem; }
.result-metrics strong { display: block; margin-top: 16px; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.result-metrics small { display: block; margin-top: 7px; color: var(--muted); }
.result-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.histogram { width: 100%; min-height: 270px; color: var(--text); }
.chart-note { color: var(--muted); text-align: center; font-size: .86rem; }
.empty-chart { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-chart p { max-width: 540px; color: var(--muted); }
.placeholder-bars { width: 90%; height: 170px; display: flex; align-items: end; gap: 5px; opacity: .7; }
.placeholder-bars span { flex: 1; height: 20%; border-radius: 5px 5px 0 0; background: var(--surface-3); }
.placeholder-bars span:nth-child(3n) { height: 45%; }.placeholder-bars span:nth-child(4n) { height: 70%; }.placeholder-bars span:nth-child(5n) { height: 100%; }
.category-list { display: grid; gap: 22px; }
.category-item > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.category-item span { color: var(--muted); }
.category-item strong { font-variant-numeric: tabular-nums; }
.category-item progress { width: 100%; height: 9px; border: 0; border-radius: 99px; overflow: hidden; appearance: none; }
.category-item progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.category-item progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.category-item progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.environment-card { margin-top: 20px; }
.environment-summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.browser-identity { display: flex; align-items: center; gap: 16px; }
.browser-identity img { width: 52px; height: 52px; }
.browser-identity div { display: flex; flex-direction: column; }
.browser-identity span { color: var(--muted); }
.generic-browser { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.environment-summary dl { margin: 0; display: flex; gap: 40px; }
.environment-summary dl div { display: flex; flex-direction: column; }
.environment-summary dt { color: var(--muted); font-size: .76rem; }
.environment-summary dd { margin: 4px 0 0; font-weight: 650; }
.result-actions { display: flex; gap: 12px; margin-top: 26px; }

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { width: min(calc(100% - 40px), var(--max)); min-height: 180px; margin-inline: auto; padding-block: 40px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px; }
.footer-inner > div { display: flex; flex-direction: column; gap: 5px; }
.footer-inner nav { display: flex; gap: 18px; color: var(--muted); font-size: .88rem; }
.footer-note { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

.installer-body, .admin-auth-body { min-height: 100vh; background: radial-gradient(circle at top, var(--accent-soft), transparent 45%), var(--bg); }
.installer-shell { width: min(calc(100% - 32px), 980px); margin-inline: auto; padding-block: 46px 80px; }
.installer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; }
.installer-brand > div, .login-card header > div { display: flex; flex-direction: column; }
.installer-brand span:last-child, .login-card header span:last-child { color: var(--muted); font-size: .8rem; }
.installer-panel { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); }
.installer-panel.narrow { max-width: 700px; margin-inline: auto; }
.installer-intro h1, .status-hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.06em; }
.installer-intro > p:last-child, .status-hero p { max-width: 760px; color: var(--muted); }
.installer-section { margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--line); }
.requirement-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.requirement-row { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: var(--surface-2); }
.requirement-row > div { display: flex; flex-direction: column; }
.requirement-row span:last-child { color: var(--muted); font-size: .78rem; }
.requirement-state { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }
.requirement-state.ok { color: var(--success); background: var(--success-soft); }
.requirement-state.error { color: var(--danger); background: var(--danger-soft); }
.requirement-state.warning { color: var(--warning); background: var(--warning-soft); }
.form-grid { display: grid; gap: 18px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid label > span { font-weight: 670; }
.form-grid input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); }
.form-grid input:focus { border-color: var(--accent); }
.form-grid small { color: var(--muted); }
.form-actions, .button-row { display: flex; gap: 12px; margin-top: 10px; }
.status-hero { display: flex; gap: 22px; align-items: flex-start; }
.status-icon { width: 60px; height: 60px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; background: var(--success-soft); color: var(--success); font-size: 1.6rem; font-weight: 850; }
.copy-field { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.copy-field code { min-width: 0; flex: 1; padding: 10px 12px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .78rem; white-space: nowrap; }

.admin-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 460px); padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); }
.login-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 46px; }
.login-card h1 { margin: 0; font-size: 2.7rem; letter-spacing: -.06em; }
.login-card > div > p:not(.eyebrow) { color: var(--muted); }
.login-card .quiet-link { display: inline-block; margin-top: 24px; }
.admin-body { background: var(--bg); }
.admin-header { min-height: 68px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--surface); }
.admin-account, .admin-account form { display: flex; align-items: center; gap: 14px; }
.admin-account > span { color: var(--muted); font-size: .88rem; }
.admin-layout { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 230px 1fr; }
.admin-sidebar { padding: 28px 18px; border-right: 1px solid var(--line); background: var(--surface); }
.admin-sidebar nav { display: grid; gap: 5px; }
.admin-sidebar a { padding: 10px 12px; border-radius: 9px; color: var(--muted); }
.admin-sidebar a:hover, .admin-sidebar a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.admin-sidebar p { margin: 40px 12px 0; color: var(--muted); font-size: .75rem; }
.admin-main { min-width: 0; padding: 42px; }
.admin-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.admin-title-row h1 { margin: 0; font-size: 2.8rem; letter-spacing: -.06em; }
.admin-title-row p:not(.eyebrow) { color: var(--muted); }
.admin-metrics { grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.admin-metrics article { min-height: 145px; }
.admin-metrics small { color: var(--muted); }
.admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.status-list { margin: 0; }
.status-list div { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.status-list div:last-child { border-bottom: 0; }
.status-list dt { color: var(--muted); }
.status-list dd { margin: 0; font-weight: 650; text-align: right; }
.inline-form { margin-top: 16px; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.action-card { min-height: 180px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-align: left; }
.action-card p { flex: 1; color: var(--muted); font-size: .87rem; }
.error-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.error-shell .panel { max-width: 650px; padding: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-block: 70px; }
    .hero-copy { text-align: center; }
    .hero h1, .hero-intro { margin-inline: auto; }
    .hero-actions, .trust-line { justify-content: center; }
    .hero-visual { max-width: 620px; width: 100%; margin-inline: auto; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .split-section, .result-grid { grid-template-columns: 1fr; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { display: none; }
    .admin-metrics { grid-template-columns: repeat(2, 1fr); }
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .section-shell, .header-inner, .footer-inner { width: min(calc(100% - 28px), var(--max)); }
    .nav-toggle { display: inline-flex; }
    .primary-nav { position: absolute; left: 14px; right: 14px; top: 68px; padding: 12px; display: none; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
    .primary-nav[data-open="true"] { display: flex; }
    .primary-nav a, .theme-toggle { width: 100%; text-align: left; }
    .language-link { border-left: 0; border-top: 1px solid var(--line); margin: 6px 0 0; padding: 14px 12px 9px !important; }
    .hero h1 { font-size: clamp(3rem, 16vw, 5rem); }
    .score-preview { min-height: 430px; padding: 22px; }
    .notice-inner, .notice-inner div { display: block; }
    .notice-inner { padding-block: 24px; }
    .notice-inner p { margin-top: 6px; }
    .notice-inner a { display: inline-block; margin-top: 14px; }
    .feature-grid, .prose-grid, .metric-grid, .result-metrics, .admin-columns, .requirement-list { grid-template-columns: 1fr; }
    .feature-card { min-height: 210px; }
    .feature-card h3 { margin-top: 42px; }
    .section-heading.wide { align-items: flex-start; }
    .section-heading > p { display: none; }
    .workload-row { grid-template-columns: 90px 1fr; }
    .workload-row span:nth-child(n+3) { display: none; }
    .compatibility-grid { grid-template-columns: 1fr; }
    .result-hero, .environment-summary { flex-direction: column; }
    .environment-summary { align-items: flex-start; }
    .environment-summary dl { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-inner nav { flex-wrap: wrap; }
    .footer-note { grid-column: auto; }
    .copy-field, .button-row, .form-actions, .result-actions { flex-direction: column; }
    .admin-main { padding: 26px 16px; }
    .admin-metrics, .action-grid { grid-template-columns: 1fr; }
    .admin-header { padding-inline: 14px; }
    .admin-account > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.button.danger {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
    color: var(--danger);
}
.button.danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }

/* Alpha 2: visible isolated measurement surface and diagnostics */
.benchmark-shell.is-running { position: fixed; inset: 0; z-index: 100; min-height: 100vh; padding: 0; background: var(--bg); overflow: hidden; }
.benchmark-shell.is-running .benchmark-progress { position: fixed; z-index: 120; left: 50%; bottom: 18px; width: min(680px, calc(100vw - 28px)); min-height: 0; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 18px; text-align: left; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.benchmark-shell.is-running .progress-visual { display: none; }
.benchmark-shell.is-running .benchmark-progress .eyebrow { grid-column: 1; grid-row: 1; margin: 0; }
.benchmark-shell.is-running .benchmark-progress h1 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(1.1rem, 3vw, 1.55rem); letter-spacing: -.025em; }
.benchmark-shell.is-running .benchmark-progress > p:not(.eyebrow) { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; font-size: .82rem; }
.benchmark-shell.is-running .progress-track { grid-column: 1 / -1; width: 100%; margin: 7px 0 3px; }
.benchmark-shell.is-running .benchmark-progress small { grid-column: 1 / -1; font-size: .72rem; }
.benchmark-stage { position: fixed; z-index: 110; left: 50%; top: calc(50% - 46px); width: 900px; height: 560px; min-height: 560px; overflow: hidden; contain: layout style paint; visibility: hidden; opacity: 0; pointer-events: none; background: #f8fafc; color: #101828; border: 1px solid rgba(15, 23, 42, .16); border-radius: 16px; box-shadow: 0 22px 80px rgba(15, 23, 42, .18); transform: translate(-50%, -50%) scale(var(--benchmark-stage-scale, 1)); transform-origin: center; }
.benchmark-stage[data-active="true"] { visibility: visible; opacity: 1; }
.benchmark-stage > .stage-placeholder { display: grid; height: 100%; place-items: center; color: #64748b; font-weight: 700; letter-spacing: -.02em; }
.benchmark-stage canvas, .benchmark-stage svg { display: block; width: 900px; height: 560px; }
.benchmark-stage .workload-svg circle { fill: #3159db; }
.benchmark-stage .workload-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 12px; font-size: 10px; }
.benchmark-stage .workload-list label { display: flex; gap: 4px; min-width: 0; padding: 2px 4px; border-radius: 3px; background: #eef2ff; white-space: nowrap; overflow: hidden; }
.benchmark-stage .workload-list label.done { opacity: .55; text-decoration: line-through; }
.benchmark-stage .workload-list span { overflow: hidden; text-overflow: ellipsis; }
.benchmark-stage .workload-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.benchmark-stage .workload-table td { padding: 3px 7px; border-bottom: 1px solid #e2e8f0; }
.benchmark-stage bb-node { display: inline-flex; margin: 2px; padding: 3px 5px; border: 1px solid #dbe3f5; border-radius: 4px; background: #fff; font-size: 10px; }
.diagnostic-error { padding-block: 80px; }
.diagnostic-reference { display: inline-block; margin: 12px 0 2px; padding: 8px 12px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.diagnostic-details { margin-top: 28px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.diagnostic-details summary { padding: 16px 18px; cursor: pointer; font-weight: 700; }
.diagnostic-details pre { max-height: 420px; overflow: auto; margin: 0; padding: 18px; border-top: 1px solid var(--line); font-size: .75rem; white-space: pre-wrap; word-break: break-word; }
@media (max-height: 700px) {
  .benchmark-shell.is-running .benchmark-progress { bottom: 8px; padding: 10px 14px; }
  .benchmark-shell.is-running .benchmark-progress small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .benchmark-stage { transition: none; }
}
.update-card { border-color: color-mix(in srgb, var(--warning, #c77b00) 42%, var(--line)); }
.admin-table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.admin-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.admin-table.compact th, .admin-table.compact td { padding-block: 8px; font-size: .78rem; }
.metric-code { font-size: 1.05rem !important; letter-spacing: .02em !important; }
.admin-json { max-height: 520px; overflow: auto; margin: 0; padding: 18px; border-radius: 12px; background: var(--surface-3); font-size: .76rem; white-space: pre-wrap; word-break: break-word; }
.result-test-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-weight: 750; }
.result-test-details > summary small { color: var(--muted); font-weight: 500; }
.result-test-details[open] > summary { margin-bottom: 20px; }
.alert.warning { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.alert.warning p { margin: 6px 0; }
.alert.warning ul { margin: 8px 0 0; }
.flag-list { display: flex; flex-wrap: wrap; gap: 5px; max-width: 460px; white-space: normal; }
.flag-list .status-pill { font-size: .64rem; min-height: 24px; }

/* Temporary Alpha 6 matrix collection helper. */
.matrix-device-selector {
  max-width: 1120px;
  margin: 0 auto 1.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--border, rgba(127,127,127,.25));
  border-radius: var(--radius-lg, 1.25rem);
  background: var(--surface, rgba(127,127,127,.06));
}
.matrix-device-selector > p { margin-top: 0; color: var(--muted, inherit); }
.matrix-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
}
.matrix-device-button {
  min-height: 4.5rem;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border, rgba(127,127,127,.3));
  border-radius: .9rem;
  background: var(--surface-strong, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.matrix-device-button strong { flex: 0 0 auto; }
.matrix-device-button span { line-height: 1.35; }
.matrix-device-button:hover,
.matrix-device-button:focus-visible { border-color: currentColor; }
.matrix-device-button.is-selected {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  background: var(--surface, rgba(127,127,127,.12));
}
.matrix-admin-links { display: grid; gap: 1rem; margin: 1rem 0; }
.matrix-admin-links strong { display: block; margin-bottom: .35rem; }
.matrix-admin-card .copy-field code { word-break: break-all; }
@media (max-width: 620px) {
  .matrix-device-grid { grid-template-columns: 1fr; }
}

/* Public Calibration Beta product UX (product-only; benchmark suite assets stay immutable). */
.status-pill.beta { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }

.hero-beta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: clamp(40px, 7vw, 92px);
    align-items: center;
    min-height: 680px;
    padding-block: 84px 96px;
}
.hero-beta::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 30px 42% 80px -10vw;
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}
.hero-beta-copy h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(3.1rem, 6.6vw, 6rem);
    line-height: .96;
    letter-spacing: -.072em;
}
.hero-lead { max-width: 710px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.04rem, 1.8vw, 1.24rem); }
.hero-trust-list { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .84rem; }
.hero-trust-list li::before { content: "\2713"; margin-right: 7px; color: var(--success); font-weight: 900; }
.beta-score-preview {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 38px);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 34px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 96%, var(--accent-soft)), var(--surface));
    box-shadow: var(--shadow);
}
.beta-score-preview::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.preview-score { min-height: 245px; display: grid; place-items: center; align-content: center; text-align: center; }
.preview-score small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.preview-score strong { margin: 7px 0 3px; font-size: clamp(5.2rem, 10vw, 7.8rem); line-height: .86; letter-spacing: -.09em; }
.preview-score span { color: var(--muted); font-size: .85rem; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.preview-metrics > div { padding: 14px 12px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; }
.preview-metrics span { color: var(--muted); font-size: .72rem; }
.preview-metrics strong { font-size: 1.15rem; }
.beta-score-preview > p { margin: 0; color: var(--muted); font-size: .88rem; }

.calibration-strip { margin-bottom: 92px; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-small); }
.calibration-progress-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.progress-card { padding: 20px; border-radius: 18px; background: var(--surface-2); }
.progress-card > div:first-child { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; }
.progress-card span { color: var(--muted); font-size: .83rem; }
.progress-card strong { grid-row: 1 / span 2; grid-column: 2; font-size: 1.75rem; letter-spacing: -.04em; }
.progress-card small { color: var(--muted); }
.progress-meter { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.progress-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--success))); }
.calibration-note { margin: 18px 0 0; color: var(--muted); font-size: .86rem; }

.feature-section { padding-block: 12px 92px; }
.beta-features { gap: 14px; }
.beta-features article { min-height: 270px; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-small); }
.beta-features h3 { margin: 76px 0 9px; font-size: 1.17rem; }
.beta-features p { margin: 0; color: var(--muted); }
.feature-index { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 800; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 110px; }
.trust-card { min-height: 290px; }
.trust-card h2 { margin: 40px 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.035em; }
.trust-card p:last-child { color: var(--muted); }
.accent-card { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 80%, var(--surface)), var(--surface)); }

.benchmark-intro { max-width: 850px; margin-inline: auto; text-align: center; }
.benchmark-intro .badge-row { justify-content: center; }
.benchmark-intro h1 { margin-top: 0; }
.benchmark-start-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 20px; max-width: 1100px; margin: 34px auto 0; align-items: start; }
.main-start-card { max-width: none; margin: 0; }
.benchmark-info-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); }
.benchmark-benefits { display: grid; gap: 6px; margin: 18px 0 24px; padding: 0; list-style: none; }
.benchmark-benefits li { display: grid; gap: 3px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.benchmark-benefits strong { font-size: .92rem; }
.benchmark-benefits span { color: var(--muted); font-size: .8rem; }
.benchmark-info-card .alert { margin: 0; }
.alert.neutral { background: var(--surface-2); color: var(--text); }
.alert.neutral p { margin: 5px 0 0; color: var(--muted); }
.calibration-consent-card { margin: 26px 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.consent-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.consent-heading h2 { margin: 0; font-size: 1.18rem; }
.calibration-checkbox { margin-top: 16px; align-items: flex-start; }
.calibration-checkbox input { margin-top: 4px; width: 19px; height: 19px; flex: 0 0 auto; }
.consent-detail { margin: 14px 0 0; color: var(--muted); font-size: .84rem; }
.calibration-consent-status { min-height: 22px; margin: 10px 0 0; font-size: .82rem; font-weight: 650; }
.calibration-consent-status.collecting { color: var(--muted); }
.calibration-consent-status.ready { color: var(--success); }
.calibration-consent-status.error { color: var(--danger); }
.small-copy { font-size: .78rem; }
.small-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.benchmark-start-note { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: .78rem; }

.wide-intro { max-width: 900px; padding-block: 74px 40px; }
.wide-intro h1 { margin: 0; font-size: clamp(2.7rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.06em; }
.wide-intro > p:last-child { max-width: 800px; color: var(--muted); font-size: 1.05rem; }
.stats-beta-page { padding-bottom: 110px; }
.calibration-public-metrics { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.gate-card { margin-bottom: 20px; }
.gate-row { padding: 20px 0; border-top: 1px solid var(--line); }
.gate-row-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.gate-row-head span { color: var(--muted); font-size: .8rem; }
.dual-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dual-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.dual-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.dual-progress > div:last-child span { background: var(--success); }
.stats-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.distribution-list { display: grid; gap: 0; margin: 0; }
.distribution-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.distribution-list dt { color: var(--muted); }
.distribution-list dd { margin: 0; font-weight: 760; }
.empty-state { color: var(--muted); }
.calibration-scope-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.calibration-scope-note > div { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.calibration-scope-note strong { display: block; font-size: 1.8rem; letter-spacing: -.04em; }
.calibration-scope-note span { color: var(--muted); font-size: .8rem; }

.beta-result-hero { align-items: stretch; padding-top: 64px; }
.beta-result-hero .result-heading { max-width: 820px; }
.result-score-lockup { display: flex; align-items: baseline; gap: 18px; margin: 12px 0 16px; }
.result-score-lockup > span { color: var(--muted); font-weight: 760; }
.result-score-lockup strong { font-size: clamp(4.5rem, 10vw, 8.2rem); line-height: .8; letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
.quality-badge-large { min-width: 190px; align-self: center; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; box-shadow: var(--shadow-small); }
.quality-badge-large span, .quality-badge-large small { display: block; color: var(--muted); font-size: .76rem; }
.quality-badge-large strong { display: block; margin: 3px 0; font-size: 3rem; line-height: 1; }
.beta-result-metrics { grid-template-columns: repeat(3, 1fr); }
.calibration-result-card { display: grid; grid-template-columns: minmax(190px, .35fr) 1fr; gap: 30px; align-items: center; }
.calibration-result-card h2 { margin: 0; font-size: 1.4rem; }
.calibration-state-line { display: flex; align-items: center; gap: 12px; }
.calibration-state-line p { margin: 0; color: var(--muted); }
.pair-state { grid-column: 2; margin: 0; color: var(--muted); font-size: .85rem; }
.calibration-explainer { min-height: 250px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 30px; border: 1px dashed var(--line-strong); border-radius: 18px; background: var(--surface-2); }
.calibration-explainer p { max-width: 560px; margin: 5px 0 0; color: var(--muted); }
.owner-controls-card { margin-top: 20px; }
.owner-action-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.button.danger-soft { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); color: var(--danger); }
.button.danger-soft:hover { background: var(--danger-soft); }
.pair-output { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--surface-2); }
.pair-output label { display: block; margin-bottom: 8px; font-weight: 700; }
.input-copy-row { display: flex; gap: 8px; }
.input-copy-row input { min-width: 0; flex: 1; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.pair-output small { display: block; margin-top: 7px; color: var(--muted); }
.owner-action-status { min-height: 22px; margin: 14px 0 0; font-size: .84rem; }
.owner-action-status.ok { color: var(--success); }
.owner-action-status.error { color: var(--danger); }

.legal-page { padding-bottom: 110px; }
.legal-content { max-width: 900px; display: grid; gap: 18px; }
.legal-content section { padding: 28px 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.legal-content h2 { margin: 0 0 12px; font-size: 1.25rem; letter-spacing: -.025em; }
.legal-content p { margin: 10px 0 0; color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
.legal-content address { font-style: normal; line-height: 1.7; }
.legal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-content code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }

@media (max-width: 980px) {
    .hero-beta { grid-template-columns: 1fr; min-height: auto; padding-block: 66px 76px; }
    .beta-score-preview { max-width: 680px; }
    .trust-grid { grid-template-columns: 1fr 1fr; }
    .calibration-public-metrics { grid-template-columns: repeat(2, 1fr); }
    .benchmark-start-grid { grid-template-columns: 1fr; }
    .benchmark-info-card { max-width: none; }
}

@media (max-width: 760px) {
    .hero-beta { width: min(calc(100% - 28px), var(--max)); }
    .hero-beta-copy h1 { font-size: clamp(2.75rem, 15vw, 4.6rem); }
    .calibration-progress-grid, .stats-columns, .calibration-scope-note, .trust-grid { grid-template-columns: 1fr; }
    .feature-grid.beta-features { grid-template-columns: 1fr 1fr; }
    .calibration-result-card { grid-template-columns: 1fr; gap: 16px; }
    .pair-state { grid-column: 1; }
    .beta-result-metrics { grid-template-columns: 1fr; }
    .result-score-lockup { display: block; }
    .result-score-lockup > span { display: block; margin-bottom: 8px; }
    .quality-badge-large { width: 100%; }
    .gate-row-head { flex-direction: column; gap: 4px; }
    .input-copy-row { flex-direction: column; }
}

@media (max-width: 520px) {
    .section-shell { width: min(calc(100% - 28px), var(--max)); }
    .hero-actions { align-items: stretch; }
    .hero-actions .button { width: 100%; }
    .preview-metrics, .feature-grid.beta-features, .calibration-public-metrics { grid-template-columns: 1fr; }
    .progress-card > div:first-child { grid-template-columns: 1fr; }
    .progress-card strong { grid-column: 1; grid-row: auto; }
    .calibration-strip { padding: 22px; border-radius: 22px; }
    .benchmark-card, .benchmark-info-card { padding: 22px; }
    .consent-heading, .calibration-state-line { flex-direction: column; }
    .legal-content section { padding: 22px; }
}

/* Public Calibration Beta: admin calibration overview */
.calibration-admin-card { margin-bottom: 20px; }
.calibration-admin-card > p { color: var(--muted); }
.calibration-admin-metrics { grid-template-columns: repeat(4, 1fr); margin: 20px 0; }
.admin-gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 24px; }
.admin-gate-grid > div { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.admin-gate-grid strong { font-size: .9rem; }
.admin-gate-grid span { color: var(--muted); font-size: .78rem; }
.calibration-distributions { margin-top: 10px; }
.calibration-distributions h3 { margin-top: 0; font-size: 1rem; }
@media (max-width: 1100px) {
    .calibration-admin-metrics, .admin-gate-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .calibration-admin-metrics, .admin-gate-grid { grid-template-columns: 1fr; }
}

/* Alpha 8.3 public UX refinement: product-only styles. */
:root {
    --accent-2: #6d45d8;
    --accent-2-soft: #f0eafe;
    --cyan: #087ea4;
    --cyan-soft: #e4f7fb;
    --amber: #a65d00;
    --amber-soft: #fff0d9;
    --rose: #b33a64;
    --rose-soft: #fdeaf1;
}
html[data-theme="dark"] {
    --accent-2: #a88cff;
    --accent-2-soft: #2c2448;
    --cyan: #69d5ef;
    --cyan-soft: #16353d;
    --amber: #ffc56b;
    --amber-soft: #3b2c17;
    --rose: #ff91b5;
    --rose-soft: #422130;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --accent-2: #a88cff;
        --accent-2-soft: #2c2448;
        --cyan: #69d5ef;
        --cyan-soft: #16353d;
        --amber: #ffc56b;
        --amber-soft: #3b2c17;
        --rose: #ff91b5;
        --rose-soft: #422130;
    }
}

body {
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
        radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 34rem),
        var(--bg);
}
.site-header { box-shadow: 0 8px 34px rgba(28, 44, 82, .045); }
.header-inner { min-height: 80px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 26%, transparent); }
.primary-nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); color: var(--accent); }

.hero-beta { grid-template-columns: minmax(0, 1.06fr) minmax(410px, .94fr); min-height: 680px; padding-block: 78px 92px; }
.hero-beta::before { inset: 15px 48% 40px -15vw; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 17%, transparent), transparent 67%); }
.hero-beta::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -170px; bottom: 30px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 68%); pointer-events: none; }
.hero-beta-copy h1 { max-width: 800px; font-size: clamp(3.15rem, 5.7vw, 5.25rem); }
.hero-lead { max-width: 760px; line-height: 1.62; }
.hero-trust-list { margin-top: 28px; }
.hero-trust-list li { padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.hero-trust-list li::before { content: "\2713"; }

.hero-lab-card { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 40px); border: 1px solid color-mix(in srgb, var(--line) 72%, var(--accent)); border-radius: 34px; background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 96%, var(--cyan-soft)), color-mix(in srgb, var(--surface) 96%, var(--accent-2-soft))); box-shadow: 0 30px 80px rgba(30, 50, 95, .13); }
.hero-lab-card::before { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -120px; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent)); }
.hero-lab-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.hero-lab-head h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.045em; }
.lab-chip { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .73rem; font-weight: 760; }
.hero-lab-intro { position: relative; max-width: 620px; margin: 18px 0 24px; color: var(--muted); font-size: .94rem; }
.lab-categories { display: grid; gap: 9px; }
.lab-category { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 72px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 17px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.lab-code { width: 46px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: .72rem; font-weight: 850; letter-spacing: .04em; }
.lab-category.interaction .lab-code { background: var(--accent-soft); color: var(--accent); }
.lab-category.graphics .lab-code { background: var(--accent-2-soft); color: var(--accent-2); }
.lab-category.compute .lab-code { background: var(--cyan-soft); color: var(--cyan); }
.lab-category.platform .lab-code { background: var(--amber-soft); color: var(--amber); }
.lab-category strong, .lab-category small { display: block; }
.lab-category strong { font-size: .9rem; }
.lab-category small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.lab-flow { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; align-items: center; gap: 5px; margin-top: 20px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.lab-flow > div { min-width: 0; }
.lab-flow > div > span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 7px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .68rem; font-weight: 800; }
.lab-flow strong, .lab-flow small { display: block; }.lab-flow strong { font-size: .82rem; }.lab-flow small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.lab-flow > i { height: 1px; background: var(--line-strong); }
.lab-result-note { margin-top: 18px; padding: 15px 17px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-soft); color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-size: .82rem; }

.calibration-strip { position: relative; overflow: hidden; margin-bottom: 100px; padding: clamp(30px, 4vw, 48px); border-color: color-mix(in srgb, var(--accent) 14%, var(--line)); background: linear-gradient(125deg, color-mix(in srgb, var(--surface) 98%, var(--accent-soft)), color-mix(in srgb, var(--surface) 97%, var(--cyan-soft))); }
.calibration-strip::after { content: ""; position: absolute; width: 280px; height: 280px; right: -150px; bottom: -170px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; }
.calibration-heading { position: relative; z-index: 1; margin-bottom: 12px; }
.calibration-intro { position: relative; z-index: 1; max-width: 900px; margin: 0 0 26px; color: var(--muted); }
.progress-card { position: relative; z-index: 1; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.progress-card strong { color: var(--accent); }

.feature-section { padding-bottom: 104px; }
.measured-heading { margin-bottom: 14px; }
.section-lead { max-width: 900px; margin: 0 0 32px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.beta-features { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card-v2 { position: relative; min-height: 360px; overflow: visible; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-small); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card-v2.interaction:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }.feature-card-v2.graphics:hover { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }.feature-card-v2.compute:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }.feature-card-v2.platform:hover { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.feature-count { color: var(--muted); font-size: .75rem; font-weight: 700; }
.feature-card-v2.interaction .feature-index { background: var(--accent-soft); color: var(--accent); }.feature-card-v2.graphics .feature-index { background: var(--accent-2-soft); color: var(--accent-2); }.feature-card-v2.compute .feature-index { background: var(--cyan-soft); color: var(--cyan); }.feature-card-v2.platform .feature-index { background: var(--amber-soft); color: var(--amber); }
.feature-title-row { display: flex; align-items: center; gap: 10px; }
.feature-title-row h3 { margin: 0; font-size: 1.45rem; letter-spacing: -.03em; }
.feature-card-v2 > p { margin: 12px 0 0; color: var(--muted); line-height: 1.65; }

.info-popover { position: relative; display: inline-flex; z-index: 8; }
.info-trigger { width: 27px; height: 27px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: .78rem; font-weight: 850; box-shadow: 0 4px 12px rgba(26, 44, 80, .08); }
.info-trigger:hover, .info-trigger:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.info-tooltip { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 12px); width: min(340px, 72vw); padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--text); color: var(--bg); box-shadow: 0 18px 42px rgba(0, 0, 0, .2); font-size: .78rem; font-weight: 500; line-height: 1.55; opacity: 0; visibility: hidden; transform: translate(-50%, 5px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.info-tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: var(--text); transform: translate(-50%, -5px) rotate(45deg); }
.info-popover:hover .info-tooltip, .info-popover:focus-within .info-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.trust-section { padding-bottom: 116px; }
.trust-section .trust-grid { padding-bottom: 0; }
.trust-card { position: relative; min-height: 390px; padding: 30px; overflow: visible; }
.trust-card-head { display: flex; justify-content: space-between; align-items: center; }
.trust-card-head > span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 820; }
.trust-card .eyebrow { margin-top: 42px; }
.trust-card h3 { margin: 0 0 14px; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -.04em; }
.trust-card > p:last-child { line-height: 1.65; }
.accent-card { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 76%, var(--surface)), color-mix(in srgb, var(--surface) 96%, var(--cyan-soft))); }

/* Benchmark start screen */
.benchmark-shell { padding-top: 58px; }
.benchmark-intro { max-width: 900px; padding-block: 58px 34px; }
.benchmark-intro > p:not(.eyebrow) { max-width: 780px; }
.benchmark-start-grid { grid-template-columns: minmax(0, 1.42fr) minmax(315px, .58fr); gap: 24px; max-width: 1160px; margin-top: 38px; }
.main-start-card { padding: clamp(24px, 4vw, 38px); border-color: color-mix(in srgb, var(--accent) 10%, var(--line)); box-shadow: 0 24px 64px rgba(28, 46, 88, .11); }
.system-check-panel { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--cyan-soft)), var(--surface)); }
.system-check-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.system-check-title-block { min-width: 0; flex: 1; }
.system-check-title-block .eyebrow { margin-bottom: 6px; }
.system-check-title-block h2 { margin: 0; font-size: 1.38rem; letter-spacing: -.03em; line-height: 1.18; }
.system-check-title-block > p:last-child { max-width: 610px; margin: 7px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.48; }
.system-check-state { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-height: 30px; }
.runner-preflight-target { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none !important; }
.system-check-intro { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.58; }
.compatibility-grid { margin: 20px 0 14px; gap: 10px; }
.compatibility-item { min-height: 54px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.compatibility-item span { font-size: .9rem; }
.compatibility-item strong { min-width: 38px; padding: 4px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); text-align: center; font-size: .72rem; }
.system-check-note { margin: 0; padding-top: 13px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .78rem; }
.calibration-consent-card { margin: 22px 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2-soft) 58%, var(--surface)), color-mix(in srgb, var(--surface) 97%, var(--accent-soft))); }
.benchmark-consent.calibration-consent-card p { margin-left: 0; }
.consent-heading h2 { max-width: 620px; font-size: 1.28rem; }
.consent-intro { margin: 14px 0 0 !important; color: var(--muted); font-size: .88rem !important; line-height: 1.55; }
.calibration-checkbox { margin-top: 18px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.calibration-checkbox input { margin-top: 3px; width: 20px; height: 20px; }
.calibration-checkbox span { font-size: .9rem; line-height: 1.5; }
.consent-explainer { margin-top: 14px; padding: 16px 17px; border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.consent-explainer strong { font-size: .84rem; }
.consent-explainer p { margin: 6px 0 0 !important; color: var(--muted); font-size: .8rem !important; line-height: 1.58; }
.benchmark-start-note { font-size: .8rem; }

.benchmark-side-card { position: sticky; top: 104px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent)); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-small); }
.side-card-section { padding: 28px; }
.side-card-section h2 { margin: 0; font-size: 1.42rem; line-height: 1.18; letter-spacing: -.035em; }
.run-rules { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.run-rules li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.run-rules li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 850; }
.run-rules strong { display: block; font-size: .9rem; }.run-rules p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.side-result-preview { padding: 26px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)), color-mix(in srgb, var(--cyan-soft) 48%, var(--surface))); }
.side-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.side-result-grid > div { min-width: 0; padding: 12px 9px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 83%, transparent); text-align: center; }
.side-result-grid strong, .side-result-grid span { display: block; }.side-result-grid strong { font-size: .84rem; }.side-result-grid span { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.side-result-preview > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.mobile-beta-note { padding: 22px 28px; }.mobile-beta-note strong { font-size: .84rem; }.mobile-beta-note p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.48; }

/* Methodology */
.methodology-intro { max-width: 980px; padding-bottom: 34px; }
.methodology-intro > p:last-child { max-width: 900px; line-height: 1.7; }
.method-flow { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; align-items: center; gap: 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 96%, var(--accent-soft)), color-mix(in srgb, var(--surface) 96%, var(--cyan-soft))); box-shadow: var(--shadow-small); }
.method-flow > div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; }
.method-flow > div > span { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--bg); font-size: .72rem; font-weight: 850; }
.method-flow strong { font-size: .82rem; }.method-flow small { color: var(--muted); font-size: .68rem; }
.method-flow > i { height: 1px; background: var(--line-strong); }
.methodology-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 50px; }
.method-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; min-height: 300px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-small); }
.method-card-wide { grid-column: 1 / -1; min-height: 250px; }
.method-number { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 850; }
.method-card h2 { margin: 0 0 14px; font-size: 1.45rem; letter-spacing: -.035em; }.method-card p:last-child { margin: 0; color: var(--muted); line-height: 1.72; }
.method-calibration-note { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 34px; align-items: center; margin-bottom: 20px; padding: 34px; border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--line)); border-radius: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2-soft) 62%, var(--surface)), color-mix(in srgb, var(--surface) 95%, var(--accent-soft))); }
.method-calibration-note h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.045em; }.method-calibration-note p:last-child { margin: 0; color: var(--muted); line-height: 1.7; }
.workload-section { padding-top: 74px; }.workload-lead { margin-bottom: 28px; }
.workload-row { grid-template-columns: 105px minmax(150px, .8fr) 80px minmax(270px, 1.3fr); }

@media (max-width: 1080px) {
    .hero-beta { grid-template-columns: 1fr; min-height: auto; padding-block: 76px 90px; }
    .hero-lab-card { max-width: 760px; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-card { min-height: auto; }
    .benchmark-start-grid { grid-template-columns: 1fr; }
    .benchmark-side-card { position: static; display: grid; grid-template-columns: 1.15fr .85fr; }
    .mobile-beta-note { grid-column: 1 / -1; border-top: 1px solid var(--line); }
    .side-result-preview { border-top: 0; border-right: 0; border-bottom: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 820px) {
    .beta-features, .methodology-grid { grid-template-columns: 1fr; }
    .method-card-wide { grid-column: auto; }
    .method-flow { grid-template-columns: 1fr; gap: 8px; }
    .method-flow > i { width: 1px; height: 14px; margin-left: 16px; }
    .method-calibration-note { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .hero-beta { width: min(calc(100% - 28px), var(--max)); padding-top: 58px; }
    .hero-beta-copy h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
    .hero-lab-head, .calibration-heading, .consent-heading { flex-direction: column; align-items: flex-start; }
    .system-check-heading-row { gap: 14px; }
    .lab-category { grid-template-columns: 26px 1fr; }
    .lab-flow { grid-template-columns: 1fr; }.lab-flow > i { width: 1px; height: 12px; margin-left: 12px; }
    .feature-card-v2 { min-height: 0; padding: 23px; }
    .benchmark-side-card { display: block; }
    .side-result-preview { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .system-check-panel, .calibration-consent-card { padding: 20px; }
    .system-check-heading-row { flex-direction: column; align-items: stretch; }
    .system-check-state { justify-content: flex-start; }
    .compatibility-grid { grid-template-columns: 1fr; }
    .method-card { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
    .method-calibration-note { padding: 26px; }
}
@media (max-width: 430px) {
    .hero-lab-card { padding: 22px; border-radius: 26px; }
    .side-result-grid { grid-template-columns: 1fr; }
    .info-tooltip { left: auto; right: -8px; width: min(300px, 82vw); transform: translate(0, 5px); }
    .info-tooltip::after { left: auto; right: 15px; transform: translate(0, -5px) rotate(45deg); }
    .info-popover:hover .info-tooltip, .info-popover:focus-within .info-tooltip { transform: translate(0, 0); }
}

/* Keep decorative hero geometry and long German headings inside narrow viewports. */
.hero-beta { overflow: clip; }
@media (max-width: 430px) {
    .benchmark-intro h1 { font-size: 2.5rem; overflow-wrap: anywhere; }
}

/* ==========================================================================
   Alpha 8.6 – Redesign des oeffentlichen Frontends.

   Zielbild: ruhige, technische Oberflaeche statt Marketingoptik. Konkret
   bedeutet das weniger Farbflaeche, keine dekorativen Verlaeufe, engere
   Radien, flachere Schatten, kleinere Schriftgrade und eine monospaced
   Auszeichnung fuer alles Messbare. Die Aussage der Seite kommt aus Zahlen
   und Linienzeichnungen, nicht aus Farbverlaeufen.

   Diese Schicht ueberschreibt bewusst nur Darstellungseigenschaften. Sie
   veraendert keine Layoutvertraege, auf die Runner oder Regressionstests
   zugreifen (insbesondere nicht .runner-preflight-target).
   ========================================================================== */

/* --- Gestaltungsvariablen -------------------------------------------------- */

:root {
    --radius: 14px;
    --radius-small: 10px;
    --shadow: 0 14px 34px rgba(19, 32, 60, .06);
    --shadow-small: 0 1px 2px rgba(19, 32, 60, .05);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-theme="dark"] {
    --shadow: 0 14px 34px rgba(0, 0, 0, .34);
    --shadow-small: 0 1px 2px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --shadow: 0 14px 34px rgba(0, 0, 0, .34);
        --shadow-small: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

/* --- Grundflaechen --------------------------------------------------------- */

/* Die dekorativen Farbwolken im Seitenhintergrund entfallen ersatzlos. */
body {
    background: var(--bg);
}

.hero-beta::before,
.hero-beta::after,
.hero-lab-card::before,
.calibration-strip::after {
    content: none;
}

/* Verlaufsflaechen werden durch ruhige Einfarbflaechen ersetzt. */
.hero-lab-card,
.calibration-strip,
.system-check-panel,
.side-result-preview,
.method-flow,
.method-calibration-note,
.calibration-consent-card,
.benchmark-consent.calibration-consent-card,
.accent-card {
    background: var(--surface);
}

.hero-lab-card,
.benchmark-side-card,
.main-start-card {
    border-color: var(--line);
    box-shadow: var(--shadow-small);
}

.hero-lab-card,
.calibration-strip,
.benchmark-side-card,
.method-flow,
.method-calibration-note {
    border-radius: var(--radius);
}

/* --- Typografie ------------------------------------------------------------ */

/* Monospaced, gedaempft und klein: die Kennzeile ordnet ein, sie schreit nicht. */
.eyebrow {
    margin-bottom: 10px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.hero-beta-copy h1 {
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.page-intro h1,
.wide-intro h1 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: -.022em;
}

.section-heading h2 {
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    letter-spacing: -.02em;
}

.hero-lab-head h2 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    letter-spacing: -.02em;
}

.hero-lead,
.section-lead,
.calibration-intro,
.page-intro > p:not(.eyebrow),
.wide-intro > p:last-child {
    font-size: 1rem;
    line-height: 1.68;
}

.feature-title-row h3 {
    font-size: 1.18rem;
    letter-spacing: -.015em;
}

.trust-card h3 {
    font-size: clamp(1.12rem, 1.6vw, 1.34rem);
    line-height: 1.32;
    letter-spacing: -.018em;
}

.method-card h2 {
    font-size: 1.24rem;
    letter-spacing: -.018em;
}

.method-calibration-note h2 {
    font-size: clamp(1.32rem, 2.2vw, 1.8rem);
    letter-spacing: -.022em;
}

.consent-heading h2,
.side-card-section h2,
.system-check-title-block h2 {
    font-size: 1.18rem;
    letter-spacing: -.015em;
}

/* Alles Messbare wird monospaced und tabellarisch gesetzt. Das macht
   Ziffernbreiten stabil und trennt Messwerte optisch vom Fliesstext. */
.result-metrics strong,
.metric-grid strong,
.progress-card strong,
.calibration-scope-note strong,
.result-score-lockup strong,
.quality-badge-large strong,
.side-result-grid strong,
.distribution-list dd,
.gate-row-head span,
.workload-row code,
.workload-row span:nth-child(n+3),
.footer-inner > div .muted {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* --- Bedienelemente -------------------------------------------------------- */

.button {
    border-radius: 10px;
    box-shadow: none;
    font-weight: 640;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.button:hover {
    transform: none;
}

.button.large {
    min-height: 52px;
    border-radius: 11px;
}

.status-pill {
    min-height: 26px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--mono);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.status-pill.neutral {
    border-color: var(--line);
    background: transparent;
}

.info-trigger {
    /* 24 px ist die WCAG-2.2-Mindestzielgroesse (SC 2.5.8) und darf nicht
       zugunsten einer ruhigeren Optik unterschritten werden. */
    width: 24px;
    height: 24px;
    border-color: var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    box-shadow: none;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
}

.info-trigger:hover,
.info-trigger:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.info-tooltip {
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: .79rem;
}

/* --- Kopf- und Fussbereich ------------------------------------------------- */

.site-header {
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    box-shadow: none;
}

.brand-mark {
    border-radius: 8px;
    background: var(--accent);
    box-shadow: none;
    font-family: var(--mono);
    font-weight: 700;
}

.brand-domain {
    color: var(--muted);
}

.primary-nav a,
.theme-toggle {
    border-radius: 8px;
    font-weight: 560;
}

.site-footer {
    background: transparent;
}

.footer-inner > div .muted {
    font-size: .78rem;
}

/* --- Linienzeichnungen ----------------------------------------------------- */

/* Die Zeichnungen sind rein dekorativ und erben ihre Farbe vom Container.
   Dadurch funktionieren helles und dunkles Design ohne zweiten Satz Grafiken. */
.bb-figure {
    display: block;
    width: 100%;
    height: 100%;
}

.bb-glyph {
    display: block;
    width: 20px;
    height: 20px;
}

.feature-figure,
.method-figure,
.explainer-figure,
.preview-figure {
    /* Flaechige Bildsprache (Alpha 8.7): weiche Tonflaeche im Bereichsfarbton
       statt Rasterkarte. currentColor stammt vom Container, dadurch stimmt die
       Toenung in hellem, dunklem und systemgefuehrtem Design automatisch. */
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.feature-card-v2 .feature-figure {
    height: 128px;
    margin: 20px 0 18px;
    padding: 14px 16px;
}

.method-figure {
    height: 128px;
    padding: 14px 16px;
    color: var(--accent);
}

.explainer-figure {
    flex: 0 0 auto;
    width: 132px;
    height: 88px;
    padding: 10px 12px;
    color: var(--accent);
}

.preview-figure {
    height: 92px;
    margin-bottom: 16px;
    padding: 10px 14px;
    color: var(--accent);
}

/* --- Startseite: Bereichskarten -------------------------------------------- */

.feature-card-v2 {
    min-height: 0;
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color .18s ease;
}

.feature-card-v2:hover {
    transform: none;
    box-shadow: none;
}

.feature-card-v2.interaction:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.feature-card-v2.graphics:hover { border-color: color-mix(in srgb, var(--accent-2) 30%, var(--line)); }
.feature-card-v2.compute:hover { border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.feature-card-v2.platform:hover { border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }

.feature-card-v2.interaction .feature-figure { color: var(--accent); }
.feature-card-v2.graphics .feature-figure { color: var(--accent-2); }
.feature-card-v2.compute .feature-figure { color: var(--cyan); }
.feature-card-v2.platform .feature-figure { color: var(--amber); }

/* Die Ordnungsziffer wird zum Registerkuerzel statt zur Farbkachel. */
.feature-index {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
}

.feature-card-v2.interaction .feature-index { background: transparent; color: var(--accent); }
.feature-card-v2.graphics .feature-index { background: transparent; color: var(--accent-2); }
.feature-card-v2.compute .feature-index { background: transparent; color: var(--cyan); }
.feature-card-v2.platform .feature-index { background: transparent; color: var(--amber); }

.feature-count {
    font-family: var(--mono);
    font-size: .71rem;
    font-weight: 600;
    color: var(--muted);
}

.feature-card-v2 > p {
    font-size: .93rem;
    line-height: 1.62;
}

/* --- Startseite: Uebersichtskarte im Kopfbereich --------------------------- */

.lab-category {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 60px;
    padding: 11px 14px;
    border-color: var(--line);
    border-radius: 10px;
    background: transparent;
}

/* Symbol statt Farbkachel: die Zeichnung traegt die Bedeutung. */
.lab-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
}

.lab-category.interaction .lab-icon { color: var(--accent); }
.lab-category.graphics .lab-icon { color: var(--accent-2); }
.lab-category.compute .lab-icon { color: var(--cyan); }
.lab-category.platform .lab-icon { color: var(--amber); }

.lab-code {
    width: auto;
    height: auto;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.lab-category.interaction .lab-code,
.lab-category.graphics .lab-code,
.lab-category.compute .lab-code,
.lab-category.platform .lab-code {
    background: transparent;
    color: var(--muted);
}

.lab-flow {
    border-radius: 12px;
    background: var(--surface-2);
}

.lab-flow > div > span {
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-family: var(--mono);
}

.lab-result-note {
    border-radius: 0;
    background: var(--surface-2);
    border-left-color: var(--line-strong);
}

.hero-trust-list li {
    border-radius: 8px;
    background: transparent;
}

/* --- Startseite: Kalibrierungsfortschritt ---------------------------------- */

.calibration-strip {
    border-color: var(--line);
}

.progress-card {
    border-radius: 12px;
    background: var(--surface-2);
}

.progress-card strong {
    color: var(--text);
}

.progress-meter {
    height: 6px;
    border-radius: 3px;
}

.progress-meter > span {
    background: var(--accent);
}

/* --- Startseite: Vertrauenskarten ------------------------------------------ */

.trust-card {
    min-height: 0;
    padding: 26px;
    border-radius: var(--radius);
    box-shadow: none;
}

.trust-card-head > span:first-child {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
}

.trust-card .eyebrow {
    margin-top: 30px;
}

.trust-card > p:last-child {
    font-size: .93rem;
}

/* --- Methodik -------------------------------------------------------------- */

.method-flow {
    border-radius: 12px;
    box-shadow: none;
}

.method-flow > div > span {
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-family: var(--mono);
}

.method-card {
    min-height: 0;
    padding: 26px;
    border-radius: var(--radius);
    box-shadow: none;
}

.method-number {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
}

.method-card {
    grid-template-columns: 44px minmax(0, 1fr);
}

.method-card p:last-child {
    font-size: .93rem;
    line-height: 1.68;
}

.method-calibration-note {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 30px;
    border-color: var(--line);
}

.method-calibration-note p:last-child {
    font-size: .95rem;
}

.workload-table {
    border-radius: 12px;
}

.workload-row code {
    font-size: .82rem;
}

.workload-row span:nth-child(n+3) {
    font-size: .78rem;
}

/* --- Testseite ------------------------------------------------------------- */

.system-check-panel {
    border-radius: 12px;
}

.compatibility-item {
    border-radius: 10px;
    background: var(--surface-2);
}

.compatibility-item strong {
    border-radius: 6px;
    font-family: var(--mono);
    font-weight: 600;
}

.calibration-consent-card {
    border-radius: 12px;
    border-color: var(--line);
}

.calibration-checkbox {
    border-radius: 10px;
    border-color: var(--line);
    background: var(--surface-2);
}

.consent-explainer {
    border-radius: 10px;
    background: var(--surface-2);
}

.run-rules li > span {
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-family: var(--mono);
}

.side-result-grid > div {
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
}

.matrix-device-button {
    border-radius: 10px;
}

/* --- Ergebnisseite --------------------------------------------------------- */

.result-heading h1 {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -.028em;
}

.result-score-lockup strong {
    font-size: clamp(3rem, 6.5vw, 5rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.result-score-lockup > span {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
}

.quality-badge-large {
    min-width: 168px;
    border-radius: 12px;
    box-shadow: none;
}

.quality-badge-large strong {
    font-size: 2.4rem;
}

.result-metrics article {
    min-height: 0;
    padding: 20px;
    border-radius: 12px;
}

.result-metrics strong {
    margin-top: 12px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.metric-grid article {
    border-radius: 12px;
}

.metric-grid strong {
    font-size: 1.9rem;
}

/* Die gesperrte Verteilung bekommt eine erklaerende Zeichnung statt eines
   Platzhaltersymbols: sichtbar wird, dass Messpunkte da sind, die Referenz
   aber noch aussteht. */
.calibration-explainer {
    min-height: 0;
    gap: 22px;
    padding: 24px;
    border-style: solid;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.calibration-explainer p {
    font-size: .9rem;
}

.category-item progress {
    height: 7px;
}

.result-card,
.ranking-card,
.admin-card {
    box-shadow: none;
}

.result-test-details summary {
    font-family: var(--mono);
    font-size: .86rem;
}

/* --- Kalibrierungsseite ---------------------------------------------------- */

.gate-row-head span {
    font-size: .76rem;
}

.dual-progress > div {
    height: 6px;
    border-radius: 3px;
}

.calibration-scope-note > div {
    border-radius: 12px;
}

/* --- Rechtsseiten ---------------------------------------------------------- */

.legal-content section {
    border-radius: 12px;
}

.legal-content h2 {
    font-size: 1.12rem;
    letter-spacing: -.015em;
}

/* --- Responsive Ergaenzungen ----------------------------------------------- */

@media (max-width: 820px) {
    .method-calibration-note {
        grid-template-columns: 1fr;
    }
    .method-figure {
        max-width: 260px;
    }
}

@media (max-width: 680px) {
    .calibration-explainer {
        flex-direction: column;
        align-items: flex-start;
    }
    .explainer-figure {
        width: 100%;
        max-width: 220px;
    }
    .feature-card-v2 .feature-figure {
        height: 104px;
    }
}

/* ==========================================================================
   Alpha 8.7 – Flaechige Bildsprache und dunkle Instrumententafel.

   Teil 1 dieser Revision liegt in den ueberarbeiteten Grafiken selbst
   (private/views/partials/figures.php) und in der weichen Tonflaeche der
   Figurencontainer weiter oben in der 8.6-Schicht.

   Teil 2 stellt den Startseiten-Hero und den Ergebniskopf als dunkle
   Instrumententafel dar: feines Koordinatenraster, helle Mono-Werte,
   leuchtende Bereichsfarben. Die Tafel ist absichtlich in allen drei Themes
   identisch dunkel – sie ist Teil der Markenzeichnung und folgt nicht dem
   Farbschema der uebrigen Seite. Auf der Startseite traegt sie die ehrliche
   Testuebersicht (keine erfundenen Scores, Projektregel 17); auf der
   Ergebnisseite traegt sie den echten Messwert. Alle uebrigen Bereiche
   bleiben hell bzw. themegefuehrt. Die Laufansicht des Benchmarks wird
   bewusst nicht angefasst.
   ========================================================================== */

.hero-beta,
.beta-result-hero {
    --hx-bg: #0e1420;
    --hx-panel: rgba(255, 255, 255, .05);
    --hx-line: rgba(255, 255, 255, .12);
    --hx-line-strong: rgba(255, 255, 255, .22);
    --hx-text: #f2f5fa;
    --hx-muted: #93a0b6;
    --hx-accent: #7f9dff;
    --hx-good: #6fd3a7;
    --hx-warn: #f0bd5b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background-color: var(--hx-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--hx-text);
}

.hero-beta {
    margin-top: 28px;
    min-height: 0;
    padding: clamp(28px, 4.5vw, 56px);
}

.beta-result-hero { padding: clamp(26px, 4vw, 48px); }

.hero-beta .eyebrow,
.beta-result-hero .eyebrow { color: var(--hx-muted); }
.hero-beta h1 { color: var(--hx-text); }
.hero-beta .hero-lead { color: var(--hx-muted); }

/* Statuszeichen auf der dunklen Tafel */
.hero-beta .status-pill,
.beta-result-hero .status-pill { border-color: var(--hx-line); background: transparent; color: var(--hx-muted); }
.hero-beta .status-pill.beta,
.beta-result-hero .status-pill.beta { border-color: color-mix(in srgb, var(--hx-accent) 45%, transparent); background: transparent; color: var(--hx-accent); }
.beta-result-hero .status-pill.warning { border-color: color-mix(in srgb, var(--hx-warn) 40%, transparent); background: transparent; color: var(--hx-warn); }

/* Aktionen */
.hero-beta .button { border-color: var(--hx-accent); background: var(--hx-accent); color: #0e1420; }
.hero-beta .button:hover { border-color: #98b0ff; background: #98b0ff; }
.hero-beta .button.secondary { border-color: var(--hx-line-strong); background: transparent; color: var(--hx-text); }
.hero-beta .button.secondary:hover { background: rgba(255, 255, 255, .07); }
.hero-beta .hero-trust-list { color: var(--hx-muted); }
.hero-beta .hero-trust-list li { border-color: var(--hx-line); background: transparent; }
.hero-beta .hero-trust-list li::before { color: var(--hx-good); }

/* Uebersichtskarte als Instrumententafel */
.hero-beta .hero-lab-card { border: 1px solid var(--hx-line); border-radius: 18px; background: var(--hx-panel); box-shadow: none; }
.hero-beta .hero-lab-head h2 { color: var(--hx-text); }
.hero-beta .lab-chip { background: color-mix(in srgb, var(--hx-good) 14%, transparent); color: var(--hx-good); }
.hero-beta .hero-lab-intro { color: var(--hx-muted); }
.hero-beta .lab-category { border-color: var(--hx-line); background: transparent; }
.hero-beta .lab-category strong { color: var(--hx-text); }
.hero-beta .lab-category small { color: var(--hx-muted); }
.hero-beta .lab-code { border-color: var(--hx-line); background: transparent; color: var(--hx-muted); }
.hero-beta .lab-category.interaction .lab-icon { color: #829cff; }
.hero-beta .lab-category.graphics .lab-icon { color: #a88cff; }
.hero-beta .lab-category.compute .lab-icon { color: #69d5ef; }
.hero-beta .lab-category.platform .lab-icon { color: #ffc56b; }
.hero-beta .lab-flow { background: rgba(255, 255, 255, .05); }
.hero-beta .lab-flow > div > span { border-color: var(--hx-line-strong); background: transparent; color: var(--hx-muted); }
.hero-beta .lab-flow strong { color: var(--hx-text); }
.hero-beta .lab-flow small { color: var(--hx-muted); }
.hero-beta .lab-flow > i { background: var(--hx-line-strong); }
.hero-beta .lab-result-note { border-left-color: var(--hx-accent); background: rgba(255, 255, 255, .05); color: var(--hx-muted); }
.hero-beta .lab-result-note strong { color: var(--hx-text); }

/* Ergebniskopf: echte Messwerte auf der Instrumententafel */
.beta-result-hero .result-heading h1 { color: var(--hx-text); }
.beta-result-hero .result-heading h1 span { color: var(--hx-muted); }
.beta-result-hero .result-heading p:not(.eyebrow) { color: var(--hx-muted); }
.beta-result-hero .result-score-lockup > span { color: var(--hx-muted); }
.beta-result-hero .result-score-lockup strong { color: var(--hx-text); }
.beta-result-hero .quality-badge-large { border-color: var(--hx-line); background: var(--hx-panel); }
.beta-result-hero .quality-badge-large span,
.beta-result-hero .quality-badge-large small { color: var(--hx-muted); }
.beta-result-hero .quality-badge-large strong { color: var(--hx-text); }

@media (max-width: 680px) {
    .hero-beta { margin-top: 16px; border-radius: 18px; }
    .beta-result-hero { border-radius: 18px; }
}


/* Alpha 8.8 – supplied BrowserBenchmark.org brand assets. */
.brand {
    flex: 0 1 auto;
    min-width: 0;
}
.brand-logo {
    display: block;
    width: 238px;
    max-width: min(238px, 54vw);
    aspect-ratio: 1704 / 320;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}
.brand-logo-de { background-image: url("/assets/images/brand/logo-de-light.png"); }
.brand-logo-en { background-image: url("/assets/images/brand/logo-en-light.png"); }
html[data-theme="dark"] .brand-logo-de { background-image: url("/assets/images/brand/logo-de-dark.png"); }
html[data-theme="dark"] .brand-logo-en { background-image: url("/assets/images/brand/logo-en-dark.png"); }
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .brand-logo-de { background-image: url("/assets/images/brand/logo-de-dark.png"); }
    html[data-theme="system"] .brand-logo-en { background-image: url("/assets/images/brand/logo-en-dark.png"); }
}
@media (max-width: 430px) {
    .brand-logo { width: 190px; max-width: 56vw; }
}
@media (max-width: 350px) {
    .brand-logo { width: 166px; max-width: 54vw; }
}