/* BigBrain LLC site — dark, violet accent, zero JavaScript. One sheet for every page.
   System font stack only; no external resources of any kind. */
:root {
    --bg: #12101a;
    --panel: #1a1726;
    --ink: #e8e4f2;
    --muted: #9a92b4;
    --accent: #7c4ce8;      /* 5.18:1 under white button text (WCAG AA); #8b5cf6 was 4.23 */
    --accent-hot: #a78bfa;
    --line: #2c2740;

    /* The sticky topbar's height. Two rules must agree on it — the bar itself and the
       scroll-margin that keeps a focused element out from under it — so it is a token rather
       than a literal repeated twice. */
    --topbar-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Keyboard access: a skip link that appears on focus, and a visible focus ring on every
   interactive element (WCAG 2.4.1 / 2.4.7). */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--panel);
    color: var(--ink);
    padding: 0.6rem 1rem;
    border-radius: 0 0 8px 0;
    z-index: 10;
}
.skip:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-hot);
    outline-offset: 2px;
}

/* The topbar is sticky and opaque, so anything scrolled to the very top of the viewport lands
   underneath it — including #main when the skip link is used. scroll-margin keeps a focused or
   :target element clear of the bar: WCAG 2.2 SC 2.4.11 Focus Not Obscured, new at AA. Applied to
   every id rather than just #main, so a future in-page link inherits the fix instead of
   rediscovering the bug. */
[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }
body {
    background: var(--bg);
    color: var(--ink);
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
img { max-width: 100%; height: auto; }

/* ---- header + nav (shared chrome on every page) ---- */
/* THE TOPBAR is sticky, so the nav stays reachable however far a page scrolls — pricing and the
   product pages are long, and a customer part-way down should not have to scroll back to leave.
   min-height, NOT height: under the SC 1.4.12 text-spacing overrides we have to survive
   (line-height 1.5, letter-spacing .12em, word-spacing .16em) a fixed height clips the brand
   instead of growing. If the bar does grow, [id]'s scroll-margin goes slightly stale and a
   fragment target sits a little high — graceful degradation, versus losing content. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--topbar-h);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    min-height: var(--topbar-h);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Scoped to .topbar, NOT header.site: the sticky-header work renamed the element and left
   these six rules pointing at a class no page carries any more. Every one of them was dead,
   so the brand lost its weight and its accent "LLC", the nav lost `display: flex` and its
   gap, and the links fell through to the global `a { color: var(--accent-hot) }` — orange
   and underlined instead of muted and bold. a11y_gate.sh now fails on a rule that targets a
   class no page uses, which is what would have caught this the moment it broke. */
.topbar a.brand { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; }
.topbar a.brand span { color: var(--accent-hot); }
.topbar nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--accent-hot); }

h1 { font-size: 2.4rem; line-height: 1.15; margin-bottom: 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin: 2.25rem 0 0.75rem; color: var(--accent-hot); }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
p { margin: 0.75rem 0; }
a { color: var(--accent-hot); }
.muted { color: var(--muted); }
.hero { padding: 2.5rem 0 1rem; }
.hero .tag { color: var(--accent-hot); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.12em; }
.hero .lede { font-size: 1.15rem; }

/* ---- product cards (home) ---- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Card art comes from three different sources at three aspect ratios (engine captures at
   1707x799, the editor golden at 1280x800, the mascot as SVG). Pin one ratio and crop, so every
   card in the grid is the same height no matter what it is showing. */
.card img { border-radius: 8px; border: 1px solid var(--line); aspect-ratio: 1707 / 799; object-fit: cover; }
/* Crop from the top instead of the middle — keeps a console/prompt bar at the frame's bottom. */
.card img.shot-bottom { object-position: bottom; }
.card .spacer { flex: 1; }
.card a.more { font-weight: 700; text-decoration: none; }
.card a.more:hover { text-decoration: underline; }
.badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-hot);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}

/* ---- feature grid (product page) ---- */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.feature {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- price block + buy button ---- */
.price {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.price strong { font-size: 1.6rem; }
a.buy {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.85rem 2.2rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
}
a.buy:hover { background: var(--accent-hot); color: var(--bg); }  /* 6.92:1 — white on the hot shade fails AA */

/* ---- screenshots ---- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.shot { margin: 0; }
.shot img { border-radius: 12px; border: 1px solid var(--line); display: block; }
.shot figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }
.shot-wide { margin: 2rem 0; }
.shot-wide img { border-radius: 12px; border: 1px solid var(--line); display: block; }
.shot-wide figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }

/* ---- pricing matrix ----
   A wide table scrolls INSIDE this wrapper, so it can never widen the document (WCAG 1.4.10).
   The WRAPPER — not the table — carries the frame and the overflow: a <table> cannot be its own
   scroll container, because display:block takes it out of table layout and the cells stop
   filling the frame. That is also why the old rule's border-radius did nothing: it sat on a
   border-collapse table, where most engines ignore it.

   tabindex="0" on the wrapper is the part that mattered. A scroll region containing no focusable
   element cannot be reached or scrolled by keyboard at all in Safari (WCAG 2.1.1) — the old
   .matrix was exactly that, an overflow-x container a keyboard user could not touch. The
   [tabindex]:focus-visible rule above gives it a visible ring. overscroll-behavior keeps a
   horizontal swipe from triggering the browser's back gesture. */
.tscroll {
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background: var(--panel);
}
.dtable, table.dtable { width: 100%; border-collapse: collapse; margin: 0; border: none; }
.dtable th, .dtable td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.dtable th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dtable tr:last-child td { border-bottom: 0; }
a.buy-small {
    display: inline-block;
    padding: 0.35rem 1.1rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
}
a.buy-small:hover { background: var(--accent-hot); color: var(--bg); }

/* ---- not for sale yet ----
   The shape of a Buy button so the column still reads as a column, but a <span>: not a link, not
   focusable, nothing to click. A disabled <a> is the wrong tool — an anchor without href is still
   announced as a link by some screen readers, and one WITH a dead href is worse. Muted rather
   than accent, because the accent means "you can act on this". */
.soon {
    display: inline-block;
    padding: 0.35rem 1.1rem;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.soon-big { padding: 0.85rem 2.2rem; margin-top: 0.75rem; font-size: 1rem; }

/* ---- callouts + FAQ ---- */
.note {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--panel);
    border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    color: var(--muted);
}
.note strong { color: var(--ink); }
.faq { margin: 1rem 0; }
.faq dt { font-weight: 700; margin-top: 1.1rem; }
.faq dd { margin: 0.25rem 0 0; color: var(--muted); }

ul { margin: 0.75rem 0 0.75rem 1.4rem; }
li { margin: 0.4rem 0; }
code, .key {
    font-family: ui-monospace, "Cascadia Code", monospace;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}
/* Code samples (/cheatah). A <pre> cannot be its own scroll container accessibly: the wrapper
   scrolls and tabindex makes that scroller keyboard-operable (WCAG 1.4.10 / 2.1.1) — the same
   contract .tscroll has for tables. The inner <code> drops the inline pill styling above,
   which is for single words inside a sentence, not for a block. */
.codeblock {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 1.25rem 0;
    overflow-x: auto;
}
.codeblock pre { margin: 0; }
.codeblock code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

form.download { margin: 1.5rem 0; display: flex; gap: 0.6rem; flex-wrap: wrap; }
form.download input {
    flex: 1;
    min-width: 260px;
    padding: 0.7rem 0.9rem;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
}
form.download button {
    padding: 0.7rem 1.6rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
form.download button:hover { background: var(--accent-hot); color: var(--bg); }
footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    padding: 1.25rem;
    text-align: center;
}
footer a { color: var(--muted); margin: 0 0.5rem; }
footer p { margin: 0.25rem 0; }

/* ---- small screens ---- */
@media (max-width: 700px) {
    h1 { font-size: 1.8rem; }
    .cards, .features, .shots { grid-template-columns: 1fr; }
    .hero { padding: 1.5rem 0 0.5rem; }
}