/* Perception self-serve landing — tokens only (tokens.css), no raw values beyond layout.
   © 2026 Axeron AI Inc. All rights reserved. */
html { background: var(--paper); }
body { font-family: var(--font-sans); color: var(--ink-1); background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--hair); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-title); letter-spacing: -0.02em; }
.meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.dot { color: var(--imperial-red); padding: 0 var(--s-2); }
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-7); box-sizing: border-box; }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-4); }
h1 { font-size: var(--t-h1); max-width: 16em; }
h2 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--s-2); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink); }
.lede { font-size: var(--t-title); line-height: 1.6; color: var(--ink-1); max-width: 38em; margin: var(--s-5) 0 0; }
.lede-s { font-size: var(--t-body); color: var(--ink-2); margin: 0 0 var(--s-4); }
.actions { margin: var(--s-6) 0 var(--s-3); }
.btn { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; font-size: var(--t-body); padding: var(--s-3) var(--s-5); border-radius: var(--r-2); transition: transform var(--d-1) var(--ease), background var(--d-1) var(--ease); }
.btn:hover { background: var(--ink-1); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.note { font-size: var(--t-secondary); color: var(--ink-2); max-width: 40em; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.grid article { background: var(--bone); border: 1px solid var(--hair); border-radius: var(--r-3); padding: var(--s-5); }
.grid .k { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-2); }
.grid p { margin: 0; font-size: var(--t-body); line-height: 1.6; }
.status { border: 1px solid var(--hair-strong); background: var(--bone); border-radius: var(--r-3); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-7); }
.status[data-tone="attention"] { border-color: var(--signal); background: var(--signal-wash); }
.status-title { margin: 0; font-weight: 600; color: var(--ink); }
.status-body { margin: var(--s-1) 0 0; font-size: var(--t-body); color: var(--ink-1); }
.downloads { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--hair); }
.downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.downloads li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.downloads a { color: var(--ink); font-weight: 500; }
.downloads .sum { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-3); word-break: break-all; }
footer { border-top: 1px solid var(--hair); padding: var(--s-5) var(--s-6); font-size: var(--t-secondary); color: var(--ink-2); }
footer p { margin: 0 0 var(--s-1); }
@media (max-width: 640px) { h1 { font-size: var(--t-h2); } main { padding-top: var(--s-7); } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }
.legal { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-3); }