:root {
    --bg: #f5f5f0;
    --paper: #fbfbf7;
    --fg: #1a1a1a;
    --border: #3a3a3a;
    --muted: #626262;
    --body-copy: #424242;
    --accent: #a855f7;
    --critical: #dc2626;
    --high: #ea580c;
    --medium: #ca8a04;
    --low: #6b7280;
    --pixel: 'Press Start 2P', 'Courier New', monospace;
    --body: 'Press Start 2P', 'Courier New', monospace;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #111112;
    --paper: #1b1b1d;
    --fg: #f5f5f0;
    --border: #8f8f8f;
    --muted: #b6b6b0;
    --body-copy: #d2d2cc;
    --accent: #c084fc;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.hero-copy, .hero-art, .section-intro-grid > *, .problem-grid, .problem-card, .workflow-step, .overview-grid > *, .tested-layout > * { min-width: 0; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    font-size: 1.35rem;
    line-height: 1.25;
    overflow-x: hidden;
    transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; }
.container { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.skip-link {
    position: fixed;
    top: -4rem;
    left: 1rem;
    z-index: 20;
    padding: .75rem 1rem;
    background: var(--fg);
    color: var(--bg);
    font-family: var(--pixel);
    font-size: .62rem;
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--fg);
    background: var(--bg);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--pixel); font-size: .95rem; font-weight: 400; text-decoration: none; letter-spacing: .04em; }
.brand-mark { display: block; width: 32px; height: 32px; padding: 2px; border: 2px solid var(--fg); object-fit: contain; image-rendering: pixelated; mix-blend-mode: multiply; }
.site-nav { display: flex; align-items: center; gap: .25rem; font-family: var(--pixel); font-size: .57rem; }
.site-nav a { padding: .75rem .65rem; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.mobile-menu-toggle { display: none; }
.theme-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .6rem; border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; font: .48rem var(--pixel); white-space: nowrap; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--fg); color: var(--bg); outline: 0; }
.theme-icon { font: 1.1rem var(--body); line-height: 1; }

.hero { padding: 5rem 0 4.5rem; border-bottom: 2px solid var(--fg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2.25rem; align-items: center; }
.system-tag, .art-kicker, .section-bar { font-family: var(--pixel); font-size: .58rem; letter-spacing: .08em; }
.system-tag { margin: 0 0 1.4rem; color: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .button, .panel-title, .status-grid, .terminal-head, .evidence-head, .evidence-row b, .footer-grid h3 { font-family: var(--pixel); }
h1 { max-width: 680px; margin-bottom: 1.5rem; font-size: clamp(1.8rem, 3.5vw, 3.2rem); line-height: 1.3; letter-spacing: .04em; }
.hero-lede { max-width: 570px; margin-bottom: 2rem; font-size: 1.35rem; color: var(--body-copy); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.2rem; }
.button { display: inline-flex; align-items: center; gap: .7rem; padding: 1rem 1.25rem; border: 2px solid var(--fg); font-size: .62rem; text-decoration: none; transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.button:hover, .button:focus-visible { transform: translate(3px, 3px); outline: none; }
.button-primary { background: var(--fg); color: var(--bg); }
.button-primary:hover, .button-primary:focus-visible { background: var(--accent); border-color: var(--accent); }
.button-secondary { background: var(--bg); }
.button-secondary:hover, .button-secondary:focus-visible { background: var(--paper); }
.status-panel { border: 2px solid var(--fg); background: var(--paper); }
.panel-title, .status-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; font-size: .57rem; }
.panel-title { border-bottom: 2px solid var(--fg); }
.live-state { color: var(--accent); }
.live-state i, .footer-status i { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: var(--accent); }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.status-grid > div { min-height: 82px; padding: .75rem 1rem; border-right: 1px solid var(--border); }
.status-grid > div:last-child { border-right: 0; }
.status-grid span { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .43rem; }
.status-grid strong { font-size: 1rem; }
.status-note { border-top: 1px solid var(--border); color: var(--muted); font-size: .46rem; }
.hero-art { position: relative; min-width: 0; padding: 1.5rem .5rem .5rem; text-align: center; }
.hero-art img { display: block; width: 100%; max-width: 610px; margin: 0 auto; image-rendering: pixelated; }
.art-kicker { position: absolute; top: 0; left: 0; color: var(--accent); }
.art-note { margin: .75rem 0 0; font-size: 1.3rem; color: var(--muted); }
.agent-map { position: relative; width: 100%; max-width: 620px; min-height: 480px; margin: 1rem auto 0; }
.agent-map::before { position: absolute; inset: 14% 22%; z-index: 0; border: 1px dashed var(--accent); border-radius: 50%; content: ''; opacity: .28; pointer-events: none; animation: map-scan 14s linear infinite; }
.octopus-reference { position: absolute; top: 10%; left: 21%; z-index: 1; width: 58% !important; height: auto !important; max-width: none !important; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; animation: octopus-breathe 6s ease-in-out infinite; }
.agent-callouts { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.agent-callout { position: absolute; width: 126px; min-height: 88px; padding: .55rem .65rem; border: 2px solid var(--fg); border-top: 3px solid var(--accent); background: var(--bg); text-align: left; line-height: 1.1; overflow-wrap: anywhere; animation: agent-hover 5s ease-in-out infinite; }
.agent-callout:hover { border-color: var(--accent); transform: translateY(-5px); }
.agent-callout::after { position: absolute; z-index: -1; width: 34px; height: 1px; background: var(--accent); content: ''; animation: connector-pulse 3s ease-in-out infinite; }
.agent-topline { display: flex !important; align-items: center; justify-content: space-between; gap: .35rem; margin-bottom: .35rem; color: var(--accent); font: .48rem var(--pixel); }
.agent-icon { display: inline-block; flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid var(--fg); background: var(--paper) url('assets/favicon.svg') center / 18px 18px no-repeat; }
.agent-topline > span:last-child { margin-left: auto; }
.agent-callout strong { display: block; overflow-wrap: anywhere; font: .49rem/1.3 var(--pixel); }
.agent-callout small { display: block; max-width: 100%; margin-top: .35rem; color: var(--muted); font: .45rem/1.4 var(--pixel); overflow-wrap: anywhere; word-break: break-word; }
.agent-recon-passive { top: 4%; left: 0; }
.agent-recon-passive::after { top: 50%; right: -36px; transform: rotate(22deg); transform-origin: left; }
.agent-recon-active { top: 4%; right: 0; }
.agent-recon-active::after { top: 50%; left: -36px; transform: rotate(-22deg); transform-origin: right; }
.agent-analysis { top: 34%; left: 0; }
.agent-analysis::after { top: 50%; right: -36px; }
.agent-exploit { top: 34%; right: 0; }
.agent-exploit::after { top: 50%; left: -36px; }
.agent-verify { bottom: 24%; left: 0; }
.agent-verify::after { top: 44%; right: -36px; transform: rotate(-18deg); transform-origin: left; }
.agent-post-exploit { bottom: 24%; right: 0; }
.agent-post-exploit::after { top: 44%; left: -36px; transform: rotate(18deg); transform-origin: right; }
.agent-blue-team { bottom: 4%; left: 19%; }
.agent-blue-team::after { top: -20px; left: 50%; transform: rotate(90deg); transform-origin: left; }
.agent-report { right: 19%; bottom: 4%; }
.agent-report::after { top: -20px; right: 50%; transform: rotate(-90deg); transform-origin: right; }
@keyframes octopus-breathe { 0%, 100% { transform: scale(.975); } 50% { transform: scale(1); } }
@keyframes map-scan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes connector-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes agent-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.section { padding: 4.5rem 0; border-bottom: 2px solid var(--fg); }
.section-bar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; padding-bottom: .85rem; border-bottom: 1px dotted var(--border); color: var(--muted); }
.section-bar span:first-child { color: var(--fg); }
.section-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); gap: 3rem; align-items: end; margin-bottom: 2.6rem; }
h2 { margin-bottom: 0; font-size: clamp(1.55rem, 3.4vw, 2.65rem); line-height: 1.5; letter-spacing: .02em; }
h2 em { color: var(--accent); font-style: normal; }
.section-intro-grid p, .tested-copy p { max-width: 530px; margin-bottom: 0; color: var(--body-copy); font-size: 1.4rem; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.problem-card { min-height: 235px; padding: 1.25rem; border: 2px solid var(--fg); background: var(--paper); transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.problem-card:hover { border-color: var(--accent); }
.card-number { display: block; margin-bottom: 2rem; font-family: var(--pixel); font-size: .75rem; color: var(--accent); }
.problem-card h3 { margin-bottom: .85rem; font-size: .8rem; }
.problem-card p { margin-bottom: 2rem; font-size: 1.3rem; }
.card-rule { display: block; margin-top: auto; color: var(--muted); letter-spacing: .1em; overflow-wrap: anywhere; word-break: break-word; }

.workflow { display: flex; align-items: stretch; gap: .45rem; }
.workflow-step { flex: 1; min-width: 0; min-height: 130px; padding: 1rem .85rem; border: 2px solid var(--fg); background: var(--paper); transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.workflow-step > span { display: block; margin-bottom: 1.3rem; font-family: var(--pixel); font-size: .54rem; color: var(--accent); }
.workflow-step b { display: block; margin-bottom: .5rem; font-family: var(--pixel); font-size: .6rem; }
.workflow-step small { display: block; font-size: 1.2rem; color: var(--muted); }
.workflow > i { display: grid; place-items: center; font-style: normal; font-size: 1.5rem; }

.overview-section { background: var(--paper); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 1.5rem; }
.terminal { overflow: hidden; border: 2px solid var(--fg); background: var(--fg); color: #f5f5f0; }
.terminal-head { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #757575; font-size: .54rem; }
.terminal pre { min-height: 305px; margin: 0; padding: 1.25rem; overflow-x: auto; font: 1.12rem/1.38 var(--body); white-space: pre; }
.terminal code { color: #f5f5f0; }
.evidence-card { border: 2px solid var(--fg); background: var(--bg); transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.evidence-head { display: flex; justify-content: space-between; padding: .8rem 1rem; border-bottom: 2px solid var(--fg); font-size: .55rem; }
.accent-text { color: var(--accent); }
.evidence-row { display: flex; gap: .85rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.evidence-row:last-child { border-bottom: 0; }
.severity { display: grid; flex: 0 0 27px; height: 27px; place-items: center; border: 2px solid currentColor; font-family: var(--pixel); font-size: .55rem; }
.critical { color: var(--critical); } .high { color: var(--high); } .medium { color: var(--medium); } .low { color: var(--low); }
.evidence-row b { display: block; margin: .15rem 0 .35rem; font-size: .54rem; }
.evidence-row small { display: block; color: var(--muted); font-size: 1.15rem; }

.tested-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.tested-copy p { margin-bottom: 1.5rem; }
.tested-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.tested-tags span { padding: .75rem .85rem; border: 2px solid var(--fg); font-family: var(--pixel); font-size: .52rem; }
.text-link { font-family: var(--pixel); font-size: .58rem; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link:hover, .text-link:focus-visible { color: var(--accent); }

.mockup-section { background: var(--paper); }
.mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mockup-card { min-width: 0; min-height: 240px; border: 2px solid var(--fg); background: var(--bg); box-shadow: 6px 6px 0 var(--fg); transition: transform .2s ease, box-shadow .2s ease, border-color .25s ease; }
.mockup-card:hover { transform: translate(-2px, -2px); border-color: var(--accent); box-shadow: 8px 8px 0 var(--accent); }
.mockup-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem .85rem; border-bottom: 2px solid var(--fg); font: .5rem var(--pixel); }
.mockup-head .severity { height: auto; padding: .3rem; border-width: 1px; font-size: .42rem; }
.mockup-live { color: var(--accent); }
.mockup-live i { display: inline-block; width: 6px; height: 6px; margin-right: .25rem; border-radius: 50%; background: var(--accent); }
.mockup-body { padding: 1rem; }
.scope-list, .activity-list { display: grid; gap: .8rem; }
.scope-list > div, .activity-list > div { padding: .7rem; border: 1px solid var(--border); background: var(--paper); }
.scope-list b, .activity-list b { display: block; margin-bottom: .25rem; font: .53rem var(--pixel); }
.scope-list small, .activity-list small { display: block; color: var(--muted); font-size: 1.05rem; }
.mockup-state { justify-self: start; padding: .3rem .45rem; border: 1px solid var(--accent); color: var(--accent); font: .42rem var(--pixel); }
.activity-list > div { position: relative; padding-left: 2.1rem; }
.activity-dot { position: absolute; top: 1rem; left: .75rem; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.activity-dot.active { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.finding-body h3 { margin-bottom: .85rem; font-size: .72rem; }
.finding-body p { min-height: 82px; margin-bottom: 1.4rem; color: var(--body-copy); font-size: 1.25rem; }
.finding-footer { display: flex; justify-content: space-between; gap: .5rem; padding-top: .8rem; border-top: 1px dotted var(--border); color: var(--accent); font: .42rem var(--pixel); }


.install-section { border-bottom: 0; }
.install-panel { padding: 2rem; border: 2px solid var(--fg); background: var(--bg); }
.install-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr); gap: 3rem; align-items: center; }
.install-command { margin: 0 0 1.4rem; border: 2px solid var(--fg); background: var(--paper); }
.install-command code { display: block; padding: 1rem; color: var(--fg); font: .78rem/1.6 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.install-copy { max-width: 500px; margin: 0; color: var(--body-copy); font-size: 1.4rem; }
.install-video { min-width: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--fg); background: var(--paper); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.form-note { margin: 1rem 0 0; color: var(--muted); font-size: 1.15rem; }
.form-field { display: grid; gap: .45rem; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { color: var(--fg); font: .52rem var(--pixel); }
.form-field input, .form-field textarea { width: 100%; border: 2px solid var(--border); border-radius: 0; background: var(--bg); color: var(--fg); font: 1.25rem var(--body); padding: .75rem; }
.form-field textarea { min-height: 180px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; grid-column: 1 / -1; }
.form-actions .button { cursor: pointer; }
.form-actions .button:disabled { cursor: not-allowed; opacity: .65; }
.form-static-note { min-height: 1.2em; margin: 0; color: var(--muted); font-size: 1.1rem; }

.page-hero { padding-bottom: 3rem; }
.page-hero h1 { max-width: 760px; margin-bottom: 1rem; }
.page-hero > .container > p:not(.system-tag) { max-width: 650px; margin-bottom: 0; color: var(--body-copy); font-size: .82rem; line-height: 1.65; }
.page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.feedback-form-shell { max-width: 820px; margin: 0 auto; padding: 1.5rem; border: 2px solid var(--fg); background: var(--paper); transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.feedback-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.feedback-form .form-field-full, .feedback-form .form-actions { grid-column: 1 / -1; }
.feedback-form-actions .button { cursor: pointer; }
.roadmap-intro { margin-bottom: 2rem; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.roadmap-card { min-height: 210px; padding: 1.15rem; border: 2px solid var(--fg); background: var(--paper); transition: background-color .25s ease, border-color .25s ease, transform .2s ease; }
.roadmap-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.roadmap-status { display: inline-block; margin-bottom: 1.6rem; padding: .35rem .45rem; border: 1px solid currentColor; color: var(--accent); font: .42rem var(--pixel); }
.roadmap-status.exploring { color: var(--muted); }
.roadmap-card h3 { margin-bottom: .8rem; font-size: .6rem; line-height: 1.4; }
.roadmap-card p { margin-bottom: 0; color: var(--body-copy); font-size: .72rem; line-height: 1.6; }

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .overview-section,
:root[data-theme="dark"] .status-panel { background: var(--paper); }
:root[data-theme="dark"] .octopus-reference { filter: invert(1); mix-blend-mode: screen; }
:root[data-theme="dark"] .brand-mark { filter: invert(1); mix-blend-mode: screen; }
:root[data-theme="dark"] .terminal { background: #050505; }

.site-footer { padding: 3rem 0 1.25rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand p { margin: 1rem 0 0; color: var(--muted); font-size: 1.2rem; }
.footer-grid h3 { margin: 0 0 1rem; font-size: .55rem; }
.footer-grid a, .footer-grid p { display: block; margin-bottom: .55rem; font-size: 1.1rem; text-decoration: none; }
.footer-grid a:hover, .footer-grid a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.footer-status { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 1.05rem; }
.footer-bottom a { color: var(--fg); font-family: var(--pixel); font-size: .5rem; text-decoration: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }
@media (max-width: 768px) {
    .container { width: min(100% - 32px, 620px); }
    .header-inner { position: relative; min-height: 66px; gap: .4rem; }
    .site-nav { display: none; }
    .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: .7rem .6rem; border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; font: .48rem var(--pixel); }
    .mobile-menu-toggle:hover, .mobile-menu-toggle:focus-visible { background: var(--fg); color: var(--bg); outline: 0; }
    .site-nav.is-open { display: grid; position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 12; gap: .35rem; padding: .75rem; border: 2px solid var(--fg); background: var(--bg); }
    .site-nav.is-open a { padding: .75rem; border-bottom: 1px dotted var(--border); }
    .theme-toggle { margin-left: 0; }
    .theme-toggle .theme-label { display: none; }
    .hero { padding: 3.5rem 0; }
    .hero-grid, .section-intro-grid, .overview-grid, .tested-layout, .mockup-grid, .install-grid { grid-template-columns: 1fr; gap: 2rem; }
    .form-field { grid-column: auto; }
    .feedback-form { grid-template-columns: 1fr; }
    .feedback-form .form-field-full, .feedback-form .form-actions { grid-column: auto; }
    .hero-art { order: -1; padding-top: 1.5rem; }
    .agent-map { min-height: 390px; }
    .octopus-reference { top: 10%; left: 20%; width: 60% !important; }
    .agent-callout { width: 96px; padding: .45rem; }
    .agent-callout strong { font-size: .4rem; }
    .agent-callout small { font-size: .36rem; line-height: 1.4; }
    .agent-recon-passive, .agent-recon-active { top: 3%; }
    .agent-analysis, .agent-exploit { top: 34%; }
    .agent-verify, .agent-post-exploit { bottom: 20%; }
    .agent-blue-team { left: 4%; }
    .agent-report { right: 4%; }
    .hero-copy h1 { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.25rem, 7.4vw, 2.3rem); letter-spacing: .02em; }
    .status-grid > div { min-height: 74px; padding: .65rem .5rem; }
    .status-grid span { font-size: .38rem; }
    .status-grid strong { font-size: .75rem; }
    .problem-grid { grid-template-columns: 1fr; }
    .workflow { display: grid; grid-template-columns: 1fr; }
    .workflow-step { min-height: 100px; }
    .workflow > i { transform: rotate(90deg); min-height: 24px; }
    .tested-layout { gap: 1.5rem; }
    .install-panel { padding: 1rem; }
    .install-command code { font-size: .72rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
}

/* Keep the pixel family, but use compact sizes so the full page stays readable. */
.mockup-grid { gap: 1.2rem; }
.mockup-card { position: relative; display: flex; min-height: 262px; flex-direction: column; overflow: hidden; }
.mockup-card::before { position: absolute; top: 0; left: 0; width: 28%; height: 3px; background: var(--accent); content: ''; animation: mockup-scan 4s ease-in-out infinite alternate; }
.mockup-head { min-height: 42px; letter-spacing: .03em; }
.mockup-body { flex: 1; min-width: 0; }
.scope-list > div, .activity-list > div { min-width: 0; }
.finding-body { display: flex; flex-direction: column; }
.finding-body p { flex: 1; min-height: 0; }
@keyframes mockup-scan { from { transform: translateX(0); opacity: .45; } to { transform: translateX(245%); opacity: 1; } }
body { font-size: 1rem; line-height: 1.45; }
h1 { font-size: clamp(1.5rem, 3.1vw, 2.65rem); line-height: 1.35; }
h2 { font-size: clamp(1.1rem, 2.6vw, 2rem); line-height: 1.45; }
.system-tag, .art-kicker, .section-bar { font-size: .46rem; }
.hero-lede, .section-intro-grid p, .install-copy { font-size: .82rem; line-height: 1.65; }
.art-note { font-size: .72rem; line-height: 1.5; }
.button { padding: .85rem 1rem; font-size: .48rem; }
.mockup-head { font-size: .42rem; }
.scope-list b, .activity-list b { font-size: .44rem; }
.scope-list small, .activity-list small { font-size: .65rem; line-height: 1.45; }
.finding-body p { min-height: 70px; font-size: .78rem; line-height: 1.55; }
.form-note, .form-static-note { font-size: .7rem; line-height: 1.5; }
.form-field input, .form-field textarea { font-size: .78rem; line-height: 1.5; }
.footer-brand p, .footer-grid a, .footer-grid p, .footer-bottom { font-size: .68rem; line-height: 1.5; }
body, body *, button, input, textarea, select { font-family: var(--pixel) !important; }
@media (max-width: 768px) {
    .agent-callout small { font-size: .36rem; line-height: 1.4; }
}

/* The admin dashboard (/admin). Classes, not style attributes: the site's CSP
   is style-src 'self', which blocks inline styles outright. */
.admin-table-wrap { overflow-x: auto; margin: 1rem 0 2rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .7rem; }
.admin-table th, .admin-table td { padding: .6rem .7rem; border: 2px solid var(--fg); text-align: left; vertical-align: top; white-space: nowrap; }
.admin-table th { background: var(--fg); color: var(--bg); font-size: .5rem; }
.admin-table tbody tr:nth-child(even) { background: var(--paper); }