/* ============================================================
   attention labs - refined-B "editorial lab" design system
   TM reading typography on AMI structure. Dark theme + alternating section zones.
   Serif (Iowan/Palatino) for h1+h2 only; system-ui body.
   Accent: lime #D6F20F on dark zones, indigo #4549a5 on light zones; #E15D35 orange retired.
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0e1a1b;   /* deep teal-black (established brand) */
  --bg-card:   #1a2c30;
  --ink:       #F2F0EA;
  --ink-mid:   #CBC6BC;
  --ink-muted: #B4B2A7;
  --rule:      rgba(180,178,167,0.12);
  --accent:    #D6F20F;   /* official brand lime (established) */
  --code-bg:   #15262a;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Berkeley Mono", "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --max:        1100px;
  --max-prose:  88ch;
  --pad-x:      max(1.5rem, 4vw);
}

html {
  background: #0f1619; /* fix: match body.subpage bg to eliminate overscroll seam; was var(--bg)=#0e1a1b */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

/* ---- links: ink with hairline underline; yellow only on hover ---- */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-muted); text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
a:hover { text-decoration-color: var(--accent); }

/* ============================================================ LAYOUT */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
.prose { width: 100%; max-width: var(--max-prose); margin: 0 auto; padding: 0 var(--pad-x); }
.rule { display: none; }

/* ============================================================ HEADER / NAV */
/* PERF LITE 2026-07-08: the per-frame frosted-glass backdrop blur is REMOVED so
   the sticky bar no longer re-rasterizes a blurred backdrop every scroll frame
   (the dominant hero cost under software rendering). Replaced with a cheap,
   near-opaque dark tint GRADIENT so it still reads as a frosted bar. The old
   will-change:transform + translateZ(0) (which only pinned the blur on its own
   layer) are dropped too - no layer to force once the effect is gone. */
header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, rgba(9,16,18,0.94) 0%, rgba(6,12,14,0.88) 100%); border-bottom: 1px solid rgba(180,178,167,0.12); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; min-height: 44px; }
.wordmark:hover { text-decoration: none; }
.wordmark-accent { width: 8px; height: 8px; background: var(--accent); flex-shrink: 0; position: relative; top: 0; }
.wordmark-text { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
nav { display: flex; align-items: center; gap: 32px; }
nav a { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: #F2F0EA; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
nav a:hover { color: var(--accent); text-decoration: none; }
nav a.active { color: #F2F0EA; border-bottom-color: var(--accent); }
nav a.nav-cta { color: var(--accent); }
nav a.nav-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--ink); }

/* ============================================================ BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; padding: 12px 26px; border: 1px solid var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; border-radius: 0; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #16160f; border-color: var(--accent); }
.btn-primary:hover { background: #C2DE0C; border-color: #C2DE0C; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: border-color .15s, color .15s; }
.link-arrow:hover { text-decoration: none; color: var(--ink-mid); border-color: var(--accent); }
.link-arrow svg { width: 12px; height: 12px; }

/* ============================================================ HERO (left-aligned, Tinker-style) */
.hero { padding: clamp(72px,11vw,150px) 0 clamp(56px,8vw,104px); }
.hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; }
.hero-tagline { font-family: var(--serif); font-size: clamp(2.5rem,6vw,4.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
.hero-tagline em { font-style: italic; }
.hero-thesis { font-family: var(--sans); font-size: clamp(1rem,1.2vw,1.0625rem); line-height: 1.75; color: var(--ink-mid); max-width: 440px; margin-bottom: 24px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================ SECTION SHARED */
section { padding: clamp(64px,8vw,112px) 0; border-top: 1px solid var(--rule); }
.section-label { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 32px; }
/* "Get in touch" contact-section label -> brand lime. Scoped to the first
   (un-styled) .section-label inside the #access CTA block; the styled
   "Last updated" / "Learn more" labels in #access keep --ink-muted. The
   eval page's #access opens with "Get started" (not "Get in touch"), so it
   is excluded via body.eval-page. */
#access .section-label:not([style]) { color: #D6F20F; }
body.eval-page #access .section-label:not([style]) { color: var(--ink-muted); }
.section-title { font-family: var(--serif); font-size: clamp(1.75rem,3.5vw,2.75rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 40px; max-width: none; }
.section-intro { font-family: var(--sans); font-size: clamp(1rem,1.1vw,1.0625rem); line-height: 1.75; color: var(--ink-mid); max-width: 760px; margin-bottom: 40px; }

/* ============================================================ NUMBERED BUILD GRID */
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.build-item { padding: 32px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
/* bottom row closes the grid so the central vertical line is fully continuous */
.build-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.build-item:nth-child(odd)  { padding-right: 56px; border-right: 1px solid var(--rule); }
.build-item:nth-child(even) { padding-left: 56px; }
.build-num { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-muted); padding-top: 5px; letter-spacing: 0.02em; }
.build-body h3 { font-family: var(--serif); font-size: clamp(1.125rem,2vw,1.375rem); font-weight: 400; line-height: 1.25; color: var(--ink); margin-bottom: 9px; }
.build-body p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-mid); }

/* ============================================================ FEATURE GRID (Tinker: mono function labels) */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feature-card { border: 1px solid var(--rule); border-radius: 6px; padding: 26px; background: var(--bg-card); min-width: 0; }
.feature-card .fn { font-family: var(--mono); font-size: 13px; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.feature-card h3 { font-family: var(--serif); font-size: clamp(1.125rem,2vw,1.375rem); font-weight: 400; line-height: 1.25; margin-bottom: 9px; color: var(--ink); }
.feature-card p { font-family: var(--sans); font-size: 0.875rem; line-height: 1.65; color: var(--ink-mid); }
.feature-card p.section-label { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }

/* ============================================================ CODE BLOCK (warm, mono, subtle radius) */
.codeblock { background: var(--code-bg); font-family: var(--mono); font-size: 0.875rem; line-height: 1.6; padding: 1rem 1.25rem; border-radius: 4px; overflow-x: auto; color: var(--ink); margin: 14px 0 0; }
.codeblock code { font-family: var(--mono); background: none; padding: 0; color: inherit; }
.codeblock--wide { padding: 1.25rem 1.5rem; }
.feature-card .codeblock { margin: 0 0 14px; }

/* ============================================================ ARTICLE / PROSE (blog, research, docs) */
.article-header { max-width: var(--max-prose); margin: 0 auto; padding: clamp(48px,7vw,88px) var(--pad-x) 0; }
.article-cat { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 20px; }
.article-title { font-family: var(--serif); font-size: clamp(2rem,4.5vw,3.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
.article-byline { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.45; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.article-body { max-width: var(--max-prose); margin: 0 auto; padding: 2.5rem var(--pad-x) 5rem; }
.article-body p { font-size: 1.0625rem; line-height: 1.72; color: var(--ink); margin-bottom: 1.5rem; }
.article-body h2 { font-family: var(--serif); font-size: clamp(1.25rem,2.5vw,1.625rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; margin: 3.5rem 0 0.75rem; color: var(--ink); }
.article-body h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 2.5rem 0 0.75rem; }
.article-body ul, .article-body ol { margin: 0 0 1.5rem 1.25rem; }
.article-body li { font-size: 1.0625rem; line-height: 1.72; margin-bottom: 0.5rem; }
.article-body blockquote { border-left: 2px solid var(--rule); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: var(--ink-muted); }
.article-body figure { margin: 2.5rem 0; }
.article-body figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.article-body figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.6rem; line-height: 1.45; }
.article-body pre { background: var(--code-bg); font-family: var(--mono); font-size: 0.875rem; line-height: 1.6; padding: 1.1rem 1.3rem; border:1px solid var(--rule); border-radius: 4px; overflow-x: auto; color: var(--ink); margin: 1.5rem 0; }
.article-body code { font-family: var(--mono); font-size: 0.9em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 2px; }
.article-body pre code { background: none; padding: 0; }
.toc { border-left: 2px solid var(--rule); padding-left: 1.25rem; margin: 2rem 0 2.5rem; }
.toc .toc-label { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.toc ul { list-style: none; margin: 0; padding-left: 0; }
.toc li { margin-bottom: 8px; }
.toc a { font-family: var(--sans); font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }

/* ---- article/blog index list ---- */
.post-list { display: flex; flex-direction: column; }
.post-row { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: baseline; text-decoration: none; }
.post-row:hover { text-decoration: none; }
.post-row:hover .post-title { text-decoration-color: var(--accent); }
.post-date { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.post-title { font-family: var(--serif); font-size: clamp(1.125rem,2vw,1.5rem); font-weight: 400; line-height: 1.25; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; }
.post-excerpt { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-mid); margin-top: 8px; }

/* ============================================================ PAPER CARD */
.paper-card { border: 1px solid var(--rule); padding: 30px; background: var(--bg-card); }
.paper-type { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.paper-title { font-family: var(--serif); font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 400; line-height: 1.35; color: var(--ink); margin-bottom: 14px; }
.paper-authors { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); line-height: 1.6; margin-bottom: 22px; }

/* ============================================================ ACCESS FORM (matches Mailchimp field names) */
.access-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mid); }
.form-field input, .form-field textarea, .form-field select { font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--bg-card); border: 1px solid var(--rule); padding: 11px 14px; outline: none; border-radius: 0; width: 100%; transition: border-color .15s; -webkit-appearance: none; appearance: none; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-muted); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--ink-mid); }
.form-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.form-field.full { grid-column: 1 / -1; }
.hp { position: absolute; left: -5000px; } /* honeypot */
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.form-privacy { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); line-height: 1.5; max-width: 220px; text-align: right; }

/* ============================================================ PRICING TABLE */
.pricing { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.pricing th, .pricing td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.pricing th { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.pricing td.num { font-family: var(--mono); }

/* ============================================================ LICENSING (no-price commercial blocks) */
.license-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; align-items: stretch; }
.license-item { padding: 32px 36px 32px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; }
.license-item + .license-item { padding-left: 36px; border-left: 1px solid var(--rule); }
.license-item h3 { font-family: var(--serif); font-size: clamp(1.125rem,2vw,1.375rem); font-weight: 400; line-height: 1.25; color: var(--ink); margin-bottom: 12px; }
.license-item p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-mid); margin-bottom: 22px; }
.license-item .link-arrow { margin-top: auto; align-self: flex-start; }

/* ============================================================ FAQ (accordion via <details>) */
.faq-item { border-top: 1px solid var(--rule); }
.faq-item summary { font-family: var(--serif); font-size: 1.0625rem; font-weight: 400; line-height: 1.4; color: var(--ink); padding: 15px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--sans); color: var(--ink-muted); font-size: 18px; line-height: 1.4; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-mid); padding: 0 0 18px; max-width: 640px; }

/* ============================================================ DOCS LAYOUT */
.docs-shell { display: grid; grid-template-columns: 220px 1fr; gap: 56px; max-width: var(--max); margin: 0 auto; padding: clamp(40px,5vw,64px) var(--pad-x) 6rem; }
.docs-nav { position: sticky; top: 80px; align-self: start; border-left: 2px solid var(--rule); padding-left: 1.25rem; }
.docs-nav .grp { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 20px 0 10px; }
.docs-nav a { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-muted); text-decoration: none; padding: 4px 0; }
.docs-nav a:hover, .docs-nav a.active { color: var(--ink); }
.docs-content { max-width: var(--max-prose); }

/* ============================================================ BELIEF / CLOSER */
.belief { padding: clamp(80px,10vw,140px) 0; border-top: 1px solid var(--rule); }
.belief-inner { display: grid; grid-template-columns: 1fr 3fr; gap: 64px; align-items: center; }
.belief-marker { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); grid-column: 1; grid-row: 1; }
.belief-text { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2.375rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); max-width: 820px; grid-column: 2; }
/* fix: when a belief block has >1 .belief-text paragraph, default grid auto-placement
   drops the 2nd paragraph into the narrow marker column (row2/col1) instead of stacking
   it under the 1st in the body column. Pinning grid-column keeps any number of
   .belief-text paragraphs stacked in column 2, marker pinned at column 1 row 1. */
.belief-text + .belief-text { margin-top: 16px; }

/* ============================================================ FOOTER */
footer { border-top: 1px solid var(--rule); padding: 48px 0 40px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 48px; }
.footer-wordmark { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.footer-wordmark-dot { width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; }
.footer-tagline { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); line-height: 1.6; max-width: 260px; }
.footer-ces { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-muted); margin-top: 20px; }
.footer-col h4 { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-family: var(--sans); font-size: 13px; color: var(--ink-mid); text-decoration: none; }
.footer-col ul li a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-copy, .footer-locs { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); }
.footer-locs { letter-spacing: 0.02em; }

/* ============================================================ RESPONSIVE */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .hero-thesis { max-width: 100%; }
  .build-grid { grid-template-columns: 1fr; }
  .build-item:nth-child(odd) { padding-right: 0; border-right: none; }
  .build-item:nth-child(even) { padding-left: 0; }
  .build-item:nth-last-child(-n+2) { border-bottom: none; }
  .build-item:last-child { border-bottom: 1px solid var(--rule); }
  .license-grid { grid-template-columns: 1fr; }
  .license-item { padding: 28px 0; }
  .license-item + .license-item { padding-left: 0; border-left: none; }
  .license-item:last-child { border-bottom: 1px solid var(--rule); }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .belief-inner { grid-template-columns: 1fr; gap: 32px; }
  .belief-marker { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .docs-shell { grid-template-columns: 1fr; gap: 32px; }
  .docs-nav { position: static; border-left: none; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
}
/* nav collapses to drawer at 920px (was 640px). Measured 2026-07-01: the
   logo + 7-item inline nav needs ~901-911px to fit without clipping; the old
   640px cutoff left it visible-but-overflowing (up to ~243px on /technology)
   across the whole 641-901px tablet band on every subpage. 920px gives a
   ~10-20px safety margin above the worst measured case. This also supersedes
   the narrower docs-only 860px override below (still harmless/redundant
   there, same display:none effect within its own range). */
@media (max-width: 920px) {
  header nav { display: none; position: fixed; top: 56px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 20px; z-index: 99; }
  header nav.open { display: flex; }
  header nav a { font-size: 15px; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; gap: 6px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .form-submit { flex-direction: column; align-items: flex-start; gap: 12px; }
  .form-privacy { text-align: left; max-width: 100%; }
}

/* logo wordmark image */
.wm { height: 20px; width: auto; display: block; }
.footer-wordmark .wm { height: 18px; }

/* ============================================================ DOCS (side panel, Tinker-style, light) */
.docsx { display:flex; align-items:flex-start; }
.docsx-side { width:264px; flex:0 0 264px; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; border-right:1px solid var(--rule); padding:36px 26px 56px; }
/* Hide the side-panel scrollbar (keep it scrollable so nothing is clipped) — scoped strictly to .docsx-side */
.docsx-side { scrollbar-width: none; }
.docsx-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
.docsx-side .grp { font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin:26px 0 10px; }
.docsx-side .grp:first-child { margin-top:0; }
.docsx-side a { display:block; font-family:var(--sans); font-size:14px; color:var(--ink-muted); text-decoration:none; padding:6px 0; line-height:1.4; border:none; }
.docsx-side a:hover { color:var(--ink); }
.docsx-side a.active { color:var(--ink); font-weight:600; }
/* Desktop: the mobile collapse toggle is hidden; the inner wrapper is a transparent passthrough so the sticky rail is unchanged */
.docsx-side-toggle { display:none; }
.docsx-side-inner { display:block; }
.docsx-main { flex:1 1 auto; min-width:0; padding:52px clamp(28px,5vw,72px) 104px; max-width:840px; }
.docsx-main h1 { font-family:var(--serif); font-size:clamp(2rem,4vw,2.75rem); font-weight:400; line-height:1.12; letter-spacing:-0.02em; margin-bottom:18px; }
.docsx-main .lede { font-family:var(--sans); font-size:1.0625rem; line-height:1.7; color:var(--ink-mid); margin-bottom:.5rem; max-width:64ch; }
.docsx-main h2 { font-family:var(--serif); font-size:clamp(1.375rem,2.4vw,1.75rem); font-weight:400; line-height:1.2; letter-spacing:-0.015em; margin:3rem 0 1rem; padding-top:1.6rem; border-top:1px solid var(--rule); }
.docsx-main h3 { font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin:1.8rem 0 .6rem; }
.docsx-main p { font-size:1.0625rem; line-height:1.72; color:var(--ink); margin-bottom:1rem; max-width:64ch; }
.docsx-main ul { margin:0 0 1rem 1.2rem; } .docsx-main li { margin-bottom:.4rem; line-height:1.65; }
.docsx-main pre { background:var(--code-bg); font-family:var(--mono); font-size:.8125rem; line-height:1.6; padding:1.1rem 1.3rem; border-radius:4px; overflow-x:auto; margin:1rem 0 1.5rem; color:var(--ink); }
.docsx-main code { font-family:var(--mono); font-size:.875em; background:var(--code-bg); padding:.12em .35em; border-radius:3px; }
.docsx-main pre code { background:none; padding:0; }
.docsx-main table.ev { width:100%; max-width:100%; border-collapse:collapse; margin:1.5rem 0; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-family:var(--sans); font-size:0.9375rem; } /* fix: max-width:100% prevents table blowout at 390px; scrolls within container */
.docsx-main table.ev th, .docsx-main table.ev td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.docsx-main table.ev th { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
@media (max-width:860px){
  .docsx { flex-direction:column; }
  /* Mobile: the rail becomes a collapsible disclosure menu, not a sticky rail */
  .docsx-side { position:static; width:100%; height:auto; flex:0 0 auto; overflow:visible; border-right:none; border-bottom:1px solid var(--rule); display:block; padding:0; }
  .docsx-main { padding:32px var(--pad-x) 64px; max-width:100%; }
}

/* ── Docs pages: shared near-black + mobile hardening (applies to /docs, /docs/js/, /docs/python/) ──
   Lifted out of the docs.html inline <style> block so all three docs pages stay consistent.
   Darker near-black than the default body.subpage, to match the index hero; scoped to docs pages only. */
body.subpage:has(.docsx-main) { --bg:#06090a; --bg-card:#0d1517; --code-bg:#06090a; background:#06090a; }

/* Docs pages: the 7-item top nav needs ~808-820px inline; the site-wide drawer breakpoint
   (640px, see L254) leaves it visible-but-overflowing from 641-819px. Scoped fix: collapse
   docs-page nav into the same drawer pattern up to 860px (matches the docsx-side breakpoint
   below) so it never clips, including at the 768px test width. */
@media (max-width:860px) {
  body.subpage:has(.docsx-main) header nav#main-nav { display:none; position:fixed; top:56px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--rule); flex-direction:column; align-items:flex-start; padding:24px 20px; gap:20px; z-index:99; }
  body.subpage:has(.docsx-main) header nav#main-nav.open { display:flex; }
  body.subpage:has(.docsx-main) header nav#main-nav a { font-size:15px; }
  body.subpage:has(.docsx-main) .nav-toggle { display:flex; }
}

/* 1. Mobile sidebar: established collapsed-disclosure docs-nav pattern.
   Default = a slim tappable bar ("Documentation ▾"); the page content sits right
   beneath it. Tapping the bar toggles .is-open on .docsx-side, which reveals the
   FULL grouped directory (group labels kept visible). Desktop is untouched —
   .docsx-side-toggle stays display:none above and the sticky rail is unchanged. */
@media (max-width:860px) {
  /* The toggle: a slim full-width bar with a chevron */
  .docsx-side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin: 0;
    padding: 12px var(--pad-x);
    background: transparent;
    border: 0;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .docsx-side-chev {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .18s ease;
  }
  .docsx-side.is-open .docsx-side-toggle { color: var(--ink); }
  .docsx-side.is-open .docsx-side-chev { transform: rotate(180deg); }

  /* The grouped directory: collapsed by default, revealed when open */
  .docsx-side-inner {
    display: none;
    padding: 4px var(--pad-x) 16px;
  }
  .docsx-side.is-open .docsx-side-inner { display: block; }

  /* Restore the grouped, vertical directory inside the expanded panel */
  .docsx-side .grp {
    display: block !important;
    width: auto;
    margin: 16px 0 4px;
  }
  .docsx-side .grp:first-child { margin-top: 6px; }
  .docsx-side-inner a {
    display: block !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    border-radius: 0;
  }

  /* pre::after fade overlay: remove on mobile — it stays fixed over scrollable code blocks,
     hiding content even after the user has scrolled to the end (misleading) */
  .docsx-main pre::after { display: none; }
}

/* 2. Code blocks on mobile: wrap long lines so no horizontal scrollbar appears.
   white-space:pre-wrap keeps newlines/indentation while letting long lines wrap. */
@media (max-width:640px) {
  .docsx-main pre,
  .docsx-main pre code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
  }
  .docsx-main pre::-webkit-scrollbar,
  .docsx-main pre code::-webkit-scrollbar { display: none !important; }
}

/* 3. intg-label heading: scale down to match body text at narrow widths */
@media (max-width:480px) {
  .docsx-main .intg-label { font-size: 0.875rem; }
  /* Section h2 spacing: reduce top margin/padding on narrow viewports */
  .docsx-main h2 { margin-top: 2rem; padding-top: 1.2rem; }
}

/* 4. mini-flow vertical stack: constrain height so it doesn't dominate a 430px viewport */
@media (max-width:640px) {
  .docsx .mini-flow { max-width: 260px; margin: 20px auto 24px; gap: 20px; }
}

/* logo lockup: 5-square mark + lowercase wordmark */
.wm-mark { height:22px; width:22px; display:block; flex-shrink:0; }
.wm-text { font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.005em; color:var(--ink); text-transform:none; }
.footer-wordmark .wm-mark { height:20px; width:20px; }
.footer-wordmark .wm-text { font-size:14px; }

/* ============================================================ RECURRING SQUARE MOTIF + PRODUCT MINI-FLOW */
.mark-rule { display:block; height:1px; background:var(--rule); margin: clamp(34px,4.2vw,56px) 0; }
.mark-rule::before, .mark-rule::after { content:none; }
.mark-rule img { display:none; }
body.prod .belief { border-top:none; }
/* C2: section rhythm standardized site-wide; product page keeps borderless look but inherits default section padding */
body.prod section { border-top:none; }
.mini-flow { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,40px); flex-wrap:nowrap; margin:clamp(30px,4.5vw,48px) 0; }
.mf-node { display:flex; flex-direction:column; align-items:center; gap:14px; }
.mf-sqs { display:flex; gap:8px; }
.mf-sq { width:12px; height:12px; background:var(--ink); }
.mf-sq.on { background:var(--accent); }
.mf-saa { border:1px solid var(--ink); padding:13px 22px; font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.16em; color:var(--ink); }
.mf-saa { color:#D6F20F; } /* fix: SAA node text always lime regardless of inherited --ink */
.mf-label { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; text-align:center; }
.mf-arrow { font-family:var(--mono); font-size:28px; color:var(--ink-muted); }
@media (max-width:640px){ .mini-flow{ flex-direction:column; gap:16px; } .mf-arrow{ transform:rotate(90deg); } }

/* ============================================================ OFFICIAL WORDMARK COMPONENT (brand kit v7) */
.wordmark, .hp-wordmark, .min-wordmark, .footer-wordmark { text-decoration:none; }
.wordmark:hover, .hp-wordmark:hover, .min-wordmark:hover { text-decoration:none; }
.al-wordmark__mark { position:relative; width:20px; height:20px; flex:0 0 20px; display:block; }
.al-wordmark__sq { position:absolute; width:5px; height:5px; background:var(--ink); }
.al-wordmark__sq--top { left:7.5px; top:0; }
.al-wordmark__sq--left { left:0; top:7.5px; }
.al-wordmark__sq--center { left:7.5px; top:7.5px; background:var(--accent); }
.al-wordmark__sq--right { left:15px; top:7.5px; }
.al-wordmark__sq--bottom { left:7.5px; top:15px; }
.al-wordmark__text { font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.005em; color:var(--ink); line-height:1; white-space:nowrap; }

.text-accent { color:var(--accent); }

/* ============================================================ FOOTER (unified, minimal, deliberate) */
.ft { border-top:none; padding: clamp(30px,3.4vw,42px) 0 24px; margin-top: 0; }
.ft-top { display:flex; justify-content:space-between; align-items:center; gap:28px 48px; flex-wrap:wrap; }
.ft-brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.ft-brand:hover { text-decoration:none; }
.ft-nav { display:flex; gap:30px; flex-wrap:wrap; }
.ft-nav a { font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .15s; }
.ft-nav a:hover { border-bottom-color:var(--accent); text-decoration:none; }
.ft-rule { height:1px; background:var(--rule); margin: clamp(15px,1.8vw,22px) 0 clamp(15px,1.8vw,22px); }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px 28px; flex-wrap:wrap; font-family:var(--sans); font-size:12px; color:var(--ink-muted); }
.ft-meta a { color:var(--ink-muted); text-decoration:none; } .ft-meta a:hover { color:var(--ink); }
.ft-legal { display:flex; gap:18px; flex-wrap:wrap; }
.ft-legal a { color:var(--ink-muted); text-decoration:none; display:inline-block; padding:6px 8px; min-width:44px; text-align:center; } .ft-legal a:hover { color:var(--ink); }
@media (max-width:640px){ .ft-top{ flex-direction:column; align-items:flex-start; gap:22px; } .ft-bottom{ flex-direction:column; align-items:flex-start; gap:12px; } }

/* the single conclusive logo divider (footer top only) */
.logo-div { display:flex; align-items:center; gap:18px; margin:0 0 clamp(18px,2.1vw,27px); }
.logo-div::before, .logo-div::after { content:""; flex:1; height:1px; background:var(--rule); }
.logo-div img { width:auto; height:26px; display:block; }
/* orange function-name labels */
.feature-card .fn { color: var(--accent); }
/* subtle homepage header */

/* about: abstract blocks (people at a table; attention selects one) */
.about-shapes { display:flex; gap:14px; margin-top:36px; }
.about-shapes .sq { width:18px; height:18px; background:var(--ink); transition:background .45s ease; }
.about-shapes .sq.on { background:var(--accent); }
@media (max-width:560px){ .about-shapes .sq { width:14px; height:14px; } .about-shapes { gap:11px; } }

/* footer brand statement (replaces redundant wordmark) */
.ft-statement { font-family:var(--serif); font-size:14.4px; font-weight:400; line-height:1.2; letter-spacing:-0.015em; color:var(--ink); margin:0; max-width:none; white-space:nowrap; }
.ft-gloss { font-family:var(--sans); font-size:14.4px; line-height:1.4; color:var(--ink); margin:6px 0 0; }
/* Footer gloss: unify "SAA = Selective Auditory Attention" to ONE typeface.
   The .saa wordmark elsewhere shrinks to 0.7em; inside the footer gloss it must
   match the rest of the line (same font + same size), keeping the lime color.
   Scoped to .ft so the .saa wordmark is untouched anywhere else. */
.ft .ft-gloss .saa { font-family:inherit; font-size:inherit; color:#D6F20F; }
@media (min-width:641px){ .ft-top { align-items:flex-end; } }

/* SAA definition at bottom of hero */
.hp-def { font-family:var(--sans); font-size:1.0625rem; line-height:1.72; color:var(--ink-mid); max-width:560px; margin-top: clamp(28px,4.5vh,46px); }
.hp-def-term { font-family:var(--mono); font-weight:600; color:var(--ink); letter-spacing:.06em; }
.hp-def-pos { font-style:italic; color:var(--ink-muted); }

/* about: a group (people around the table; attention moving among them) */
.about-group { display:grid; grid-template-columns:repeat(3,18px); gap:12px; margin-top:36px; width:max-content; }
.about-group .sq { width:18px; height:18px; background:var(--ink); transition:background .45s ease; }
.about-group .sq.on { background:var(--accent); }
/* research: a faint field with one signal */
.rh-split { display:flex; align-items:center; justify-content:space-between; gap:clamp(40px,5vw,72px); }
.rh-reverse { flex-direction:row-reverse; }
.rh-figure { display:grid; grid-template-columns:repeat(6,9px); gap:7px; flex-shrink:0; }
.rh-figure span { width:9px; height:9px; background:var(--ink); opacity:.16; }
.rh-figure span.on { opacity:1; background:var(--accent); }
@media (max-width:640px){ .rh-split, .rh-split.rh-reverse { flex-direction:column; align-items:flex-start; gap:32px; } .rh-figure{ order:-1; } .rh-field{ zoom:0.78; } .rh-ill[data-ill="schism"]{ zoom:0.6; } }


/* =================================================================
   MOBILE REFINEMENT (appended; additive; desktop-first to match model)
   ================================================================= */
/* G1. global guards */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, table, pre { max-width: 100%; }
/* docs/article code blocks: right-fade scroll hint */
pre { position: relative; }
pre::after { content:""; position:absolute; top:0; right:0; bottom:0; width:2.5rem; background:linear-gradient(to right, transparent, var(--code-bg)); pointer-events:none; border-radius:0 4px 4px 0; }

/* G2. horizontal padding steps */
@media (max-width: 480px) { :root { --pad-x: 18px; } }
@media (max-width: 360px) { :root { --pad-x: 15px; } }

/* G3. mobile type scale */
@media (max-width: 480px) {
  .hp-statement                        { font-size: clamp(1.875rem, 8.5vw, 2.4rem); line-height: 1.12; }
  .min-statement, .min-statement.tight { font-size: clamp(1.875rem, 8.5vw, 2.4rem); }
  .article-title                       { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .section-title, .docsx-main h1       { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .hero-tagline                        { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .hp-conv-lead                        { font-size: 1.5rem; line-height: 1.14; }
  .hp-vid-head                         { font-size: clamp(1.35rem, 6vw, 1.75rem); }
  .article-body h2                     { font-size: 1.3rem; }
  .hero-thesis, .section-intro, .min-body,
  .article-body p, .article-body li    { font-size: 1rem; line-height: 1.68; }
  .docsx-main p                        { font-size: 0.9875rem; }
}
@media (max-width: 380px) {
  .hp-statement, .min-statement { font-size: 1.75rem; }
  html { font-size: 16px; }
}

/* G4. bare legal tables + code blocks */
.article-body table, .prose table {
  width: 100%; border-collapse: collapse; font-family: var(--sans);
  font-size: 0.9375rem; margin: 1.5rem 0;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.article-body th, .article-body td, .prose th, .prose td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule);
  vertical-align: top; white-space: normal;
}
.article-body th, .prose th {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 480px) {
  .article-body table, .prose table { font-size: 0.875rem; }
  .article-body th, .article-body td, .prose th, .prose td { padding: 9px 10px; }
}

/* G5. nav drawer polish + tap targets (matches 640px nav-collapse breakpoint; nav stays inline/visible 641-768px, see L253) */
@media (max-width: 640px) {
  #main-nav { gap: 4px; padding: 16px 20px 24px; max-height: calc(100dvh - 56px); overflow-y: auto; }
  #main-nav a { font-size: 16px; padding: 10px 0; width: 100%; }
  #main-nav a.nav-cta { margin-top: 8px; color: var(--accent); }
  .nav-toggle { padding: 10px; margin-right: -10px; }
  .nav-toggle span { width: 24px; }
}

/* G6. footer polish */
@media (max-width: 640px) {
  .ft-top { gap: 26px; }
  .ft-nav { gap: 14px 22px; }
  .ft-nav a { font-size: 12px; }
  .ft-statement { font-size: 14.4px; max-width: 100%; }
  .ft-bottom { gap: 14px; font-size: 12px; }
  .ft-legal { gap: 12px 16px; }
  .logo-div { gap: 14px; margin-bottom: 26px; }
}

/* G7. decorative grids scale with mobile type */
@media (max-width: 480px) {
  .about-group { grid-template-columns: repeat(3, 15px); gap: 10px; }
  .about-group .sq { width: 15px; height: 15px; }
}
@media (max-width: 640px) {
  .rh-figure { grid-template-columns: repeat(6, 12px); gap: 9px; }
  .rh-figure span { width: 12px; height: 12px; }
}

/* research: clustered groups of people; attention shifts within each cluster */
.rh-field { position:relative; flex-shrink:0; }
.rh-field .rd { position:absolute; width:11px; height:11px; background:var(--ink); opacity:.15; transition:opacity .5s ease, background .5s ease; }
.rh-field .rd.on { opacity:1; background:var(--accent); }
@media (max-width:760px){ .rh-field{ margin-top:4px; } }

.min-list a { display:flex; justify-content:space-between; align-items:baseline; gap:16px 32px; flex-wrap:wrap; }
.min-list-date { font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-muted); flex-shrink:0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline-offset: 3px; }

/* research per-section illustrations */
.rh-text { flex:1 1 320px; }
.rh-ill { flex-shrink:0; }
.rh-field .rd.flick { opacity:.42; }
.rh-field .rd.dim2 { opacity:.06; }
.rh-ill[data-ill="gate"]::before { content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1px; background:var(--rule); }
@media (max-width:760px){ .rh-ill{ margin-top:4px; } }

.min-list a span:first-child { flex:1 1 auto; min-width:0; padding-right:24px; }
.min-list-date { margin-left:auto; }

@media (min-width:641px){ .ft-top .ft-nav { transform: translateY(5px); } }

/* product page: hero top spacing aligned to site norm (C3); separators inherit default .mark-rule 56px (C2) */
body.prod .hero { padding: clamp(64px,8vw,112px) 0 clamp(56px,8vw,104px); }

/* about: one centered vision + people section */
.ab-shift { text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }
.ab-shift .min-body { max-width:none; margin-left:auto; margin-right:auto; margin-top:2.25rem; }
.ab-people { margin-top: clamp(90px,12.5vh,165px); }
.ab-names { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; }
.ab-names a { font-size:clamp(1rem,1.5vw,1.25rem); }
.ab-backing-label { margin-top: clamp(42px,5.2vh,62px); }
.ab-shift .backer-strip { justify-content:center; }

/* code syntax highlight + larger flow arrows */
.codeblock .kw { color:#C2DE0C; }
.codeblock .st { color:#a8e8a0; }
.codeblock .cm { color:var(--ink-muted); font-style:italic; }

/* .codeblock as a proper IDE snippet: near-black surface + IDE-style token colors */
.codeblock { background:#0a0a0a; color:#e6e6e6; border:1px solid rgba(255,255,255,.08); border-radius:6px; font-family:var(--mono); }
.codeblock code { color:inherit; }
.codeblock .kw { color:#c792ea; }   /* keyword - violet */
.codeblock .st { color:#c3e88d; }   /* string - green */
.codeblock .cm { color:#6b7280; font-style:italic; }  /* comment - muted grey */
.codeblock .fn { color:#82aaff; }   /* function - blue */
.codeblock .nm { color:#f78c6c; }   /* number/literal - orange */

/* docs code facelift */
.docsx-main pre { border:1px solid var(--rule); }
.docsx-main pre .cm { color:var(--ink-muted); font-style:italic; }
.docsx-main pre .st { color:#a8e8a0; }

/* code highlight parity across docs + articles */
.docsx-main pre .kw { color:#C2DE0C; }
.article-body pre .kw { color:#C2DE0C; }
.article-body pre .st { color:#a8e8a0; }
.article-body pre .cm { color:var(--ink-muted); font-style:italic; }



/* mini brain: blocks fire orange = electrical activity */
.hp-brain { position:relative; margin:0; }
.hp-evo-row { display:flex; align-items:center; justify-content:space-between; gap:clamp(30px,5vw,68px); }
.hp-evo-row .hp-conv-lead { flex:1 1 auto; max-width:560px; margin:0; }
.hp-evo-row .hp-brain { flex:0 0 auto; }
@media (max-width:860px){ .hp-evo-row{ flex-direction:column; align-items:flex-start; gap:40px; } .hp-evo-row .hp-brain{ align-self:center; zoom:0.6; } }
.hp-brain .bd { position:absolute; width:7px; height:7px; background:var(--ink); border-radius:1px; opacity:.2; transition: background .2s ease, opacity .2s ease; }
.hp-brain .bd.s1 { opacity:.11; }
.hp-brain .bd.s2 { opacity:.16; }
.hp-brain .bd.s3 { opacity:.22; }
.hp-brain .bd.s4 { opacity:.28; }
.hp-brain .bd.s5 { opacity:.35; }
.hp-brain .bd.fire3 { background:var(--accent); opacity:.32; }
.hp-brain .bd.fire2 { background:var(--accent); opacity:.6; }
.hp-brain .bd.fire { background:var(--accent); opacity:1; }

/* product hero: single-column, dominant headline */
body.prod .hero-inner { display:block; }
body.prod .hero-tagline { font-size: clamp(2rem,5.5vw,3.5rem); line-height:1.1; max-width:none; }
.hero-eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 22px; }
body.prod .hero-thesis { max-width:560px; margin-top:1.3rem; }
body.prod .hero-cta { margin-top:2rem; }

.rh-ill[data-ill="schism"] .rd { opacity:0; transition: opacity .4s ease, background .4s ease; }
.rh-ill[data-ill="schism"] .rd.gray { opacity:.3; background:var(--ink); }
.rh-ill[data-ill="schism"] .rd.on { opacity:1; background:var(--accent); }

.mh-row { display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,28px); width:100%; }
.mh-text { flex:0 1 auto; }
.mh-row .about-group { flex:0 0 auto; margin-top:0; transform:translateY(-28px); }
.mh-sub { font-size:clamp(1.05rem,1.7vw,1.25rem) !important; color:var(--ink-mid); }
/* company hero subtext only (inside .mh-row): mono sub-text treatment, matching .section-label / .hero-eyebrow mono lines (smaller, mono family). Contact-section .mh-sub (outside .mh-row) is unaffected. */
.mh-row .mh-sub { font-family:var(--mono); font-size:clamp(0.8125rem,1.05vw,0.9375rem) !important; letter-spacing:0.01em; line-height:1.62; color:var(--ink-mid); }
@media (max-width:760px){ .mh-row { flex-direction:column; align-items:flex-start; gap:34px; } .min-hero { min-height:auto; display:block; } }

.hp-intro-sec { }
.hp-intro { font-family:var(--sans); font-size:1.0625rem; line-height:1.72; color:var(--ink-mid); max-width:600px; margin:0; }
.hp-intro + .hp-intro { margin-top:1rem; }

.evo-tree { position:relative; margin: clamp(16px,2.5vh,26px) 0 0; align-self:flex-start; }
.evo-tree .tb { position:absolute; width:9px; height:9px; background:var(--accent); opacity:0; border-radius:1px; transition: opacity .25s ease; }
.evo-tree .tb.seen { opacity:.22; }
.evo-tree .tb.on2 { opacity:.6; background:var(--accent); }
.evo-tree .tb.on { opacity:1; background:var(--accent); }
@media (max-width:1360px){ .evo-tree{ zoom:0.85; } }
@media (max-width:1100px){ .evo-tree{ zoom:0.66; } }
@media (max-width:820px){ .evo-tree{ zoom:0.48; } }
@media (max-width:560px){ .evo-tree{ zoom:0.40; } }
@media (max-width:380px){ .evo-tree{ display:none; } }

.min-hero.rh-top { min-height:auto; justify-content:flex-start; padding: clamp(54px,9.5vh,96px) 0 clamp(28px,5vh,52px); }
.min-hero.rh-top .min-statement { margin-bottom: clamp(6px,1.4vh,12px); }

.rh-note { font-family:var(--sans); font-size:clamp(0.95rem,1.4vw,1.0625rem); line-height:1.5; color:var(--ink-mid); margin: 14px 0 0; max-width:44ch; }

.card-bullets { list-style:none; margin:14px 0 4px; padding:0; display:flex; flex-direction:column; gap:9px; }
.card-bullets li { position:relative; padding-left:18px; font-family:var(--sans); font-size:0.9375rem; line-height:1.5; color:var(--ink-mid); }
.card-bullets li::before { content:""; position:absolute; left:0; top:0.5em; width:5px; height:5px; background:var(--accent); }

/* tap-target minimums (mobile) - 44px hit area, visual size unchanged.
   Widened 768->920px (2026-07-01) to match the nav-collapse breakpoint above
   (L254/920px); otherwise the hamburger button drops below 44px between
   769-920px, the exact range where it's now the only way to open the nav. */
@media (max-width:920px){
  .nav-toggle { min-height:44px; min-width:44px; }
}
/* tap targets across the full mobile range (matches the 768px nav-collapse breakpoint) */
@media (max-width:768px){
  .ft-legal a, .ft-meta a, .ft-nav a, .toc a, .docsx-side a, .footer-col ul li a { display:inline-flex; align-items:center; min-height:44px; }
  .ft-legal { gap:2px 18px; } .ft-nav { row-gap:2px; } .toc li { margin-bottom:2px; }
}
/* docs sidebar collapses to a tappable disclosure menu at <=860px; the expanded
   directory links get their 44px tap target from the .docsx-side-inner a rule above */

.saa { font-weight:700; color:#D6F20F; font-size:0.7em; }

/* ============================================================ SECTION BACKGROUND ZONES
   Alternating bands (study of old al-theme.css). Each zone re-scopes the design
   tokens, so every descendant's text/border/accent contrast inverts automatically.
   Light/warm zones: dark ink, indigo accent (lime is never readable text on light). */
html, body { overflow-x: clip; }
.z-dark,.z-deep,.z-soft,.z-black,.z-light,.z-warm { background: var(--bg); color: var(--ink); }
.home > .z-dark,.home > .z-deep,.home > .z-soft,.home > .z-black,.home > .z-light,.home > .z-warm {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
  box-shadow: 0 0 0 100vw var(--bg);
  clip-path: inset(0 -100vw);
}
.z-dark  { --bg:#0e1a1b; --bg-card:#1a2c30; --ink:#F2F0EA; --ink-mid:#CBC6BC; --ink-muted:#B4B2A7; --rule:rgba(180,178,167,.12); --accent:#D6F20F; --code-bg:#15262a; }
.z-deep  { --bg:#0a1517; --bg-card:#122023; --ink:#F2F0EA; --ink-mid:#CBC6BC; --ink-muted:#B4B2A7; --rule:rgba(180,178,167,.12); --accent:#D6F20F; --code-bg:#0a1517; }
.z-soft  { --bg:#1a2c30; --bg-card:#213539; --ink:#F4F2EC; --ink-mid:#CDC8BE; --ink-muted:#B4B2A7; --rule:rgba(180,178,167,.18); --accent:#D6F20F; --code-bg:#15262a; }
.z-black { --bg:#0a1517; --bg-card:#15262a; --ink:#F2F0EA; --ink-mid:#CBC6BC; --ink-muted:#B4B2A7; --rule:rgba(255,255,255,.08); --accent:#D6F20F; --code-bg:#0a1517; }
.z-light { --bg:#F7F6F2; --bg-card:#FCFBF7; --ink:#2B2B28; --ink-mid:#47433b; --ink-muted:#5c574e; --rule:rgba(20,40,20,.12); --accent:#4549a5; --code-bg:#EAE8E0; }
.z-warm  { --bg:#EFEBDF; --bg-card:#F2EEE2; --ink:#2B2B28; --ink-mid:#47433b; --ink-muted:#5c574e; --rule:rgba(20,40,20,.12); --accent:#4549a5; --code-bg:#d8d4c6; }
/* light/warm zones: lime button -> solid dark button (no lime on light) */
.z-light .btn-primary,.z-warm .btn-primary { background:#2B2B28; color:#F2F0EA; border-color:#2B2B28; }
.z-light .btn-primary:hover,.z-warm .btn-primary:hover { background:#333; border-color:#333; opacity:1; }
/* light zones: keep code keywords readable */
.z-light .codeblock .kw,.z-warm .codeblock .kw { color:#5a6a00; }
/* colour-band transitions replace the hairline dividers */
.home .mark-rule { display:none; }
/* BORDERS AT BACKGROUND BOUNDARIES (2026-06-30): the default `section` rule
   (line 86) puts a 1px border-top on every section, colored by that section's
   OWN --rule token. Every z-* band redefines --rule for its own zone, so at
   every zone-to-zone boundary the border renders in whichever zone sits BELOW
   it -- a visible hairline seam sitting exactly on top of the color change
   (confirmed on index.html at every hp-problem/hp-arb/hp-scene/hp-overview/
   hp-cta boundary). The bands already read as distinct via background color
   alone (see comment above); a line at the seam is always redundant and, at a
   DIFFERENT-color boundary, reads as an unwanted seam. Strip it sitewide for
   every zone band, matching the .mark-rule treatment above. */
.z-dark,.z-deep,.z-soft,.z-black,.z-light,.z-warm { border-top:none; }

/* nav wordmark = real logo (not the block motif) */
.wordmark-img { height:20.4px; width:auto; display:block; }
/* section 2 -> next section: trim ~18% */
.home > .hp-overview { padding-bottom: clamp(78px,9.75vw,135px); }

/* arbitration band: slightly more saturated light */
.home > .hp-arb { --bg:#EFECE2; --accent:#5650c8; }  /* purplish-blue, ~30% less saturated */

/* pull "Distilling attention." up ~10% (override zone top padding on hero) */
.home > .hp-hero { padding-top: clamp(45px,5.7vw,78px); padding-bottom: clamp(67px,8.4vw,118px); }

/* research: lift the three-section text ~15% for contrast on the dark bg */
.rh-text .min-label { color:#9fc4ca; }
.rh-text .min-body { color:#c5dde1; }

.hp-arb .dg-saa { background:#5650c8; border-color:#5650c8; }
.hp-arb .dg-saa b { color: #ffffff; }
.hp-arb .dg-flank { color: var(--accent); font-weight: 600; }

/* company: 3-axis orbital motif (replaces the square grid) */
.about-orbit { width:clamp(95px,10.8vw,135px); aspect-ratio:1; perspective:600px; flex:0 0 auto; opacity:0; animation: orbitFade 1.4s ease-out forwards; }
.gyro { position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:translateX(-10%); }
.gyro .gr { position:absolute; inset:5%; transform-style:preserve-3d; will-change:transform; }
.about-orbit.is-paused .gr { animation-play-state:paused !important; will-change:auto; }
.gyro .gr svg { width:100%; height:100%; display:block; }
.gyro .gr-roll { width:100%; height:100%; display:block; transform-style:preserve-3d; /* roll removed for uniform single-axis spin */ }
@keyframes grRoll { 0%{transform:rotateX(0deg)} 100%{transform:rotateX(360deg)} }
.gyro .gr:nth-child(1){ animation: spin1 12.2s cubic-bezier(.45,0,.15,1) infinite; }
.gyro .gr:nth-child(2){ animation: spin2 12.2s cubic-bezier(.45,0,.15,1) infinite; }
.gyro .gr:nth-child(3){ animation: spin3 12.2s cubic-bezier(.45,0,.15,1) infinite; }
@keyframes gyro { 0%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} }
@keyframes orbitFade { from{opacity:0} to{opacity:1} }
@keyframes spin1 { 0%{transform:translateX(20%) translateZ(-16px) rotateZ(0deg) rotateX(0deg) rotateY(16deg)} 18%,100%{transform:translateX(20%) translateZ(-16px) rotateZ(360deg) rotateX(360deg) rotateY(376deg)} }
@keyframes spin2 { 0%{transform:translateX(4%) translateZ(0px) rotateZ(0deg) rotateX(0deg) rotateY(49deg)} 18%,100%{transform:translateX(4%) translateZ(0px) rotateZ(360deg) rotateX(720deg) rotateY(409deg)} }
@keyframes spin3 { 0%{transform:translateX(-12%) translateZ(16px) rotateZ(0deg) rotateX(0deg) rotateY(72deg)} 18%,100%{transform:translateX(-12%) translateZ(16px) rotateZ(360deg) rotateX(360deg) rotateY(432deg)} }
@keyframes grZ1 { from{transform:rotateZ(0deg) rotateY(-46deg)} to{transform:rotateZ(360deg) rotateY(-46deg)} }
@keyframes grZ2 { from{transform:rotateZ(0deg) rotateY(0deg)} to{transform:rotateZ(360deg) rotateY(0deg)} }
@keyframes grZ3 { from{transform:rotateZ(0deg) rotateY(46deg)} to{transform:rotateZ(360deg) rotateY(46deg)} }
@media (prefers-reduced-motion: reduce){ .about-orbit{ opacity:1; animation:none; } .gyro,.gyro .gr,.gyro .gr-roll{ animation:none; } .gyro .gr:nth-child(1){transform:translateX(20%) translateZ(-16px) rotateY(16deg)} .gyro .gr:nth-child(2){transform:translateX(4%) translateZ(0px) rotateY(49deg)} .gyro .gr:nth-child(3){transform:translateX(-12%) translateZ(16px) rotateY(72deg)} }
@media (max-width:760px){ .mh-row .about-orbit{ transform:none; margin:8px auto 0; } }

/* ============================================================ HOMEPAGE VERTICAL RHYTHM (operator-tuned spacing) */
.home > .hp-problem.z-soft { padding-top: clamp(300px,35vw,508px); padding-bottom: clamp(300px,35vw,508px); } /* "What SAA solves for" ~2x taller (rendered height doubled) */
.home > .hp-arb { padding-top: clamp(83px,10.4vw,146px); padding-bottom: clamp(90px,11.2vw,158px); }            /* arb +30% top / +40% bottom */
.home > .hp-arb .dg { margin-block: clamp(48px,7vw,84px); }                                                     /* diagram (brain) +40% room */
.home > section[aria-label="Field demos"] { padding-top: clamp(90px,11.2vw,158px); padding-bottom: clamp(90px,11.2vw,158px); } /* demos +40% above & below */
.home > .hp-cta { padding-top: clamp(83px,10.4vw,146px); padding-bottom: clamp(83px,10.4vw,146px); }            /* cta +30% above & below */

.hp-overview-lead + .hp-overview-body { margin-top: 20px; }  /* +50% gap lead -> next paragraph */

.hp-arb .dg-saa { border-width: 2px; }  /* thicker SAA box border */

/* company: tuck ring animation tight to the headline + brighter team/backing */
.mh-row { gap: 0; justify-content:flex-start; }
.mh-row .about-orbit { margin-inline:auto; transform: translate(-10vw, -20px); }
.ab-people .ab-names a { color:#FFFFFF; }
.ab-people .min-label { color:#807b72; }

/* ===== seamless section -> footer blend =====
   Footer base is near-black (#06090a, the site's darkest token, same as docs).
   A top fade band (::before) spans the seam, fading from transparent into the
   footer black, so WHATEVER dark section sits above blends down into the footer
   with no hard line. Cross-page safe: starts transparent, so it adapts to any
   section shade above (subpage sections sit on #0f1619; homepage CTA on #17282b).
   The footer content sits above the fade via z-index. */
.ft { position: relative; background: #06090a; isolation: isolate; }
.ft > .container { position: relative; z-index: 1; }
.ft::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,9,10,0) 0%, #06090a 100%);
}
/* z-black industry-page footers end on a dark section sitting on the body bg
   (#0f1619). Keep the same transparent -> black fade as the base rule so the
   footer top can NEVER be lighter than the section above it (which would read as
   a band): the fade simply darkens whatever is above down into the footer black.
   (The homepage has its own dedicated, slightly tinted fade below.) */
footer.ft.z-black::before {
  background: linear-gradient(180deg, rgba(6,9,10,0) 0%, #06090a 100%);
}
/* CANONICAL z-black footer background (2026-06-30): the "prod"-family pages
   (body.prod, bg #0b0c0d) were getting this exact gradient pasted into a
   per-page inline <style> !important block on ~25 pages, with a few pages
   missing the patch entirely (visibly inconsistent footer tone). Establishing
   it here as the ONE shared rule is a no-op on the pages that already carry
   the inline copy and fixes the outliers to match. Do not re-add per-page
   copies of this — edit it here. */
footer.ft.z-black { background: #06090a; }
/* SEAM FIX: the universal bridge above the footer (HARDENED UNIVERSAL FOOTER
   BLEND, below) fades to the base footer tone #06090a. z-black footers start
   at the lighter #16181a instead, so that generic fade landed short and left
   a visible one-pixel step exactly at the section->footer boundary — the
   "weird effect" at this seam. Re-target the bridge's end color to match the
   z-black footer's own starting color so the handoff is seamless, matching
   research.html's no-boundary transition. */
footer.ft.z-black::after { background: linear-gradient(180deg, rgba(23,40,43,0) 0%, #17282b 100%); }
/* HOMEPAGE: the last section is .hp-cta.z-soft painting a solid #17282b. The
   footer fade starts from EXACTLY that color and darkens monotonically to black,
   so the section color hands off to the footer top with no step (one continuous
   darkening: #17282b section -> #17282b footer-top -> #06090a). A taller band
   (210px) makes the blend gradual rather than a quick ramp. */
.home ~ footer.ft.z-black::before,
body:has(.home) footer.ft.z-black::before {
  height: 340px;
  background: linear-gradient(180deg, #17282b 0%, #142327 30%, #0d181b 62%, #06090a 100%);
}

/* === HARDENED UNIVERSAL FOOTER BLEND (operator 2026-06-29) ===
   Every NON-homepage footer gets a full-width gradient bridge painted ABOVE it.
   The footer lives OUTSIDE the max-width content container (.min), so it is
   full-bleed and never clipped by html,body{overflow-x:clip}. The bridge is
   transparent at the top so it adapts to ANY section color above it, darkening
   monotonically into the footer black. This is page-agnostic: no per-page patch
   is ever needed again. (Homepage keeps its dedicated #17282b fade above.) */
body:not(:has(.home)) .ft::after {
  content: ""; position: absolute; left: 0; right: 0; top: -160px;
  height: 160px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(6,9,10,0) 0%, #06090a 100%);
}

.min-body.ab-bright { color:#FCFCFB; }

#contact .min-body a { color:#FAF9F5; text-decoration-color:rgba(250,249,245,.45); }

.min-lede.ab-dim { color:#837e74; line-height:0.9; }
.min-body.ab-bright { max-width:46ch; margin-left:auto; margin-right:auto; }

/* arb section: all text ~50% darker + heading letter +20% */
.home > .hp-arb { --ink:#151514; --ink-mid:#23211d; --ink-muted:#2e2b27; }
.hp-arb .hp-conv-lead { letter-spacing:-0.016em; }

/* ===== mobile a11y fixes from responsive audit (tap targets >=40px, logo CLS) ===== */
.wordmark-img, .hp-top-logo img { aspect-ratio: 1252 / 202; }
a.wordmark, .hp-logo-link { display:inline-flex; align-items:center; min-height:44px; }
.min-link { display:inline-flex; align-items:center; min-height:44px; width:max-content; max-width:100%; }
.ft-legal a { display:inline-block; padding-block:8px; }


/* "What SAA solves for" — centered block + concise copy */
.hp-problem.z-soft { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hp-problem.z-soft .hp-conv-lead { margin:0 auto; max-width:720px; }

/* orphan/widow prevention — replaces manual <br> balancing, responsive */
.hp-statement, .hp-overview-lead, .hp-conv-lead, .min-statement, .min-lede, h1, h2 { text-wrap: balance; }
.hp-overview-body, .min-body, .hp-conv-arb { text-wrap: pretty; }

/* index section-2 (overview): dark band + yellow text (operator) */
.home > .hp-overview.z-light { --bg:#0e1a1b; --bg-card:#15262a; --ink:#F2F0EA; --ink-mid:#CBC6BC; --ink-muted:#B4B2A7; --rule:rgba(180,178,167,.18); --accent:#D6F20F; }
.hp-overview .hp-overview-lead, .hp-overview .hp-overview-body { color:#F2F0EA; }
.hp-overview .saa { color:#D6F20F; }
.hp-overview .hp-build-intro, .hp-overview .hp-build-list li { color:#D6F20F; }
.hp-overview .hp-build-box { border-color:rgba(214,242,15,.3); }

/* ===== mobile-optimization fixes (full audit) ===== */
/* docs code blocks: inherit the <pre> 13px (was ~11.4px, below floor) */
.docsx-main pre code { font-size: inherit; }
/* company backer logos: wrap cleanly on mobile — drop desktop negative margins + clip */
@media (max-width:760px){ .backer-strip { overflow: visible; } .backer-item { margin-left:0 !important; margin-right:0 !important; } }
/* home section-2 build-box: keep >=12.5px on phones (yellow-on-dark legibility) */
@media (max-width:600px){ .home .hp-build-intro, .home .hp-build-list li { font-size:0.78rem; } }
/* technology form-privacy: >=12px + bigger inline-link hit area */
.form-privacy { font-size:12px; line-height:1.6; }
.form-privacy a { display:inline-block; padding-block:4px; }
/* company team-name links: >=44px tap target */
.ab-people .ab-names a { display:inline-flex; align-items:center; min-height:44px; }
/* research: avoid diagram gutter crowding in the 641-760 band */
@media (max-width:760px) and (min-width:641px){ .rh-field, .rh-ill { zoom:0.82; } }

/* how-it-works: "your audio" 4 blocks = increasingly-bright yellow hues L->R; arrows + card numbers yellow */
.mini-flow .mf-node:first-child .mf-sq { animation: mfPulse 2.4s ease-in-out infinite; }
.mini-flow .mf-node:first-child .mf-sq:nth-child(1){ --lit:#6B7908; animation-delay:0s; }
.mini-flow .mf-node:first-child .mf-sq:nth-child(2){ --lit:#A0B60B; animation-delay:.6s; }
.mini-flow .mf-node:first-child .mf-sq:nth-child(3){ --lit:#D6F20F; animation-delay:1.2s; }
.mini-flow .mf-node:first-child .mf-sq:nth-child(4){ --lit:#E9FB7A; animation-delay:1.8s; }
@keyframes mfPulse { 0%,12%,37%,100%{ background:var(--ink); } 18%,28%{ background:var(--lit); } }
@media (prefers-reduced-motion: reduce){ .mini-flow .mf-node:first-child .mf-sq{ animation:none; } }
.mf-arrow{ color:#D6F20F; }
.build-num{ color:#D6F20F; }

.mh-row .min-statement { margin-bottom:0; flex:0 1 auto; }

.min-divider:empty { gap: 0; }  /* no logo -> solid border, no gap */


/* company hero: single-column — orbit area removed, no empty gap */
.mh-row { display:grid; grid-template-columns:1fr; grid-template-areas:"h1" "lede"; align-items:center; column-gap:0; }
.mh-row > .min-statement { grid-area:h1; margin-bottom:0; }
.mh-row > .about-orbit { display:none; }
.mh-row > .mh-sub { grid-area:lede; }
@media (max-width:768px){
  .min-hero { min-height:auto; }
}

.ft-home { display:block; text-decoration:none; color:inherit; }
.ft-home:hover .ft-statement { opacity:.82; }

/* mobile footer: centered + compact (modern mobile practice) */
@media (max-width:640px){
  .ft { padding: clamp(30px,7vw,42px) 0 26px; text-align:center; }
  .logo-div { margin-bottom:22px; }
  .ft-top { flex-direction:column; align-items:center; gap:18px; }
  .ft-statement-col { text-align:center; }
  .ft-home { text-align:center; }
  .ft-statement { margin:0 auto; max-width:none; white-space:normal; }
  .ft-gloss { margin:6px auto 0; }
  .ft-nav { display:grid; grid-template-columns:repeat(3,auto); justify-content:center; justify-items:center; column-gap:18px; row-gap:2.3px; }
  .ft-rule { margin:20px 0 20px; }
  .ft-bottom { flex-direction:column; align-items:center; gap:9px; text-align:center; line-height:1.5; }
  .ft-legal { flex-wrap:wrap; justify-content:center; gap:0 2px; }
  .ft-legal a { padding:6px 8px; min-width:36px; font-size:12px; white-space:nowrap; } /* fix: was 10.5px/min-width:0; now >=12px + meaningful tap target for "X" link */
}
/* subpage near-black — secondary/legal pages (#0f1619); docs pages override to #06090a via :has(.docsx-main) above */
body.subpage { --bg:#0f1619; --bg-card:#122023; --code-bg:#0f1619; background:#0f1619; }

/* ============================================================ CODE-BLOCK SCROLLBARS (brand lime)
   Scoped ONLY to the scrolling code blocks (overflow-x:auto):
     .codeblock        — /technology install snippet + feature-card snippets
     .article-body pre — /docs
     .docsx-main pre   — /docs/js/ and /docs/python/
   Black track, lime thumb + arrow buttons. Does NOT touch any other scrollbar on the site. */
.codeblock::-webkit-scrollbar,
.article-body pre::-webkit-scrollbar,
.docsx-main pre::-webkit-scrollbar { width:11px; height:11px; }
.codeblock::-webkit-scrollbar-track,
.article-body pre::-webkit-scrollbar-track,
.docsx-main pre::-webkit-scrollbar-track { background:#000; }
.codeblock::-webkit-scrollbar-thumb,
.article-body pre::-webkit-scrollbar-thumb,
.docsx-main pre::-webkit-scrollbar-thumb { background:#D6F20F; border-radius:4px; }
.codeblock::-webkit-scrollbar-thumb:hover,
.article-body pre::-webkit-scrollbar-thumb:hover,
.docsx-main pre::-webkit-scrollbar-thumb:hover { background:#e4ff2a; }
.codeblock::-webkit-scrollbar-button,
.article-body pre::-webkit-scrollbar-button,
.docsx-main pre::-webkit-scrollbar-button { background:#D6F20F; display:block; }
/* Firefox */
.codeblock,
.article-body pre,
.docsx-main pre { scrollbar-color:#D6F20F #000; scrollbar-width:thin; }

/* ===== SAA acronym = always lime, sitewide (operator) =====
   Catch-all wins by source order + matches the zone-scoped specificity pattern,
   so any band/zone override of .saa color resolves back to lime. Color only —
   non-color .saa styling (font-weight:700) stays intact. */
.saa { color:#D6F20F; }
.hp-overview .saa,
[class] .saa,
.z-light .saa,
.z-dark .saa { color:#D6F20F; }

/* footer nav: mobile 3+4 split (operator 2026-06-29) — row1: Research/Technology/Preview, row2: Docs/Company/Contact/Sign up; tighter + compact */
@media (max-width:640px){
  .ft-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; row-gap:10px; }
  .ft-nav a{ box-sizing:border-box; text-align:center; padding:5px 4px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
  .ft-nav a:nth-child(-n+3){ width:33.333%; }
  .ft-nav a:nth-child(n+4){ width:25%; }
}

/* QA a11y fix (2026-06-29): visually-hidden skip link, revealed on keyboard focus */
.skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:12px; top:12px; width:auto; height:auto; overflow:visible; padding:10px 16px; background:var(--accent); color:#16140f; z-index:10000; border-radius:4px; font-family:var(--sans); font-weight:600; text-decoration:none; }

/* GEO definition callout (2026-06-29): consistent liftable SAA definition across pages */
.saa-definition { border-left:2px solid var(--accent); padding-left:16px; margin:clamp(20px,3vh,32px) 0; max-width:680px; font-family:var(--sans); font-size:0.95rem; line-height:1.6; color:var(--ink-mid); }


/* ============================================================ CANONICAL COMPARISON TABLE (cmp-*)
   Use these classes on all comparison tables. Inline-styled tables are an anti-pattern. */
.cmp-wrap { overflow-x: auto; margin-top: clamp(28px,4vw,44px); }
.cmp-table { width:100%; border-collapse:collapse; font-size:0.92rem; min-width:560px; }
.cmp-table th { text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); font-weight:400; }
.cmp-table td { padding:13px 14px; border-bottom:1px solid var(--rule); color:var(--ink-mid); }
.cmp-table td:first-child { color:var(--ink); }
.cmp-table tr.cmp-saa td { color:var(--ink); }
.cmp-table tr.cmp-saa td:first-child { color:var(--accent); font-weight:500; }
.cmp-table tr.cmp-saa td:last-child { color:var(--accent); font-weight:500; }
@media (max-width:600px) {
  .cmp-table { min-width:0; }
  .cmp-table thead { display:none; }
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td { display:block; width:100%; box-sizing:border-box; }
  .cmp-table tr { border:1px solid var(--rule); border-radius:6px; margin-bottom:14px; padding:6px 0 2px; }
  .cmp-table td { border-bottom:none; padding:7px 14px; }
  .cmp-table td::before { content:attr(data-label); display:block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:3px; }
}


/* mobile: prevent wide code <pre> from forcing build-grid columns past the viewport */
.build-item, .build-body { min-width: 0; }
.build-item pre, .build-item .codeblock { min-width: 0; max-width: 100%; }

/* ===== prod-page CTA seam blend (QA 2026-07-01) =====
   Prod pages end: black #faq (#0b0c0d) -> teal #access CTA (#17282b) -> footer.
   The black->teal boundary was a hard ~25-luminance step (the homepage smooths its
   equivalent to 0). Fade the body-black down into the teal over ~96px at the top of
   #access so the handoff is gradual, matching the homepage/research smooth standard.
   Full-bleed (100vw) to cover the teal's edge-to-edge paint; content sits above via z-index. */
body.prod #access { position: relative; isolation: isolate; }
body.prod #access > * { position: relative; z-index: 1; }
body.prod #access::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 96px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #0b0c0d 0%, rgba(11,12,13,0) 100%);
}

/* ===== shared code-block copy button (2026-07-01) ===== */
.code-wrap { position: relative; }
.code-copy-btn { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--ink-mid); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s, border-color .15s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.code-wrap:hover .code-copy-btn, .code-copy-btn:focus-visible { opacity: 1; }
.code-copy-btn:hover { background: rgba(255,255,255,.12); color: var(--ink); border-color: rgba(255,255,255,.30); }
.code-copy-btn.copied { color: var(--accent); border-color: var(--accent); opacity: 1; }

/* ===== careers job-detail pages (.jd-page) — consolidated from 6 identical
   inline <style> blocks (perf: dedupe so it ships once, cached, not inlined
   per-page) (2026-07-01) ===== */
/* PAGE PALETTE: match the site's depth-aware dark theme (careers recipe) */
body.subpage.jd-page {
  --bg:      #0f1619;
  --bg-card: #161f23;
  --rule:    #232e33;
  --ink:     #e6e8e7;
  background: #0f1619 !important;
  color: #e6e8e7;
}

/* ROLE HERO */
.jd-page .jd-hero { padding: clamp(44px,7vh,84px) 0 clamp(8px,1.5vh,16px); }
.jd-page .jd-crumb { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s, border-color .15s; }
.jd-page .jd-crumb:hover { color: var(--ink); border-bottom-color: var(--accent); }
.jd-page .jd-title { max-width: 22ch; margin: 0 0 18px; }
.jd-page .jd-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; }
.jd-page .jd-meta .dot { color: var(--ink-muted); margin: 0 8px; }
.jd-page .jd-summary { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.75; color: var(--ink-mid); max-width: 60ch; margin: 0 0 30px; }
.jd-page .jd-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* CONTENT BLOCKS */
.jd-page .jd-block { padding: clamp(40px,6vw,72px) 0; }
.jd-page .jd-block .section-label { margin-bottom: 20px; }
.jd-page .jd-list { list-style: none; margin: 0; padding: 0; max-width: 66ch; display: flex; flex-direction: column; gap: 15px; }
.jd-page .jd-list li { position: relative; padding-left: 24px; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-mid); }
.jd-page .jd-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; background: var(--accent); }
.jd-page .jd-list li strong { color: var(--ink); font-weight: 600; }
.jd-page .jd-about .min-body { max-width: 66ch; }

/* CLOSING CTA */
.jd-page .jd-cta { padding: clamp(40px,6vw,72px) 0 clamp(64px,9vw,104px); }
.jd-page .jd-cta-lead { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; }
.jd-page .jd-cta-body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-mid); max-width: 52ch; margin: 0 0 24px; }

/* NAV COLLAPSE FIX: job-detail pages widen the drawer breakpoint to 768px (nav
   items wrap earlier on these pages than the sitewide 640px breakpoint) */
@media (max-width: 768px) {
  .jd-page #main-nav {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 20px;
    z-index: 99;
  }
  .jd-page #main-nav.open { display: flex; }
  .jd-page .nav-toggle { display: flex; }
}
@media (hover: none) { .code-copy-btn { opacity: .72; } }
@media (max-width: 640px) { .code-copy-btn { width: 40px; height: 40px; } }  /* mobile tap-target >=40px */

/* C-port: scroll-reveal system
   Ported from Variant C's shared reveal foundation (index.html / company.html).
   Contract: elements opt in with the [data-reveal] attribute. With zero JS, or
   under prefers-reduced-motion, they are simply visible (default rule below).
   reveal.js confirms JS + non-reduced motion, adds .reveal-js to <html>, then an
   IntersectionObserver toggles .is-in per element once (fade + 14px rise).
   Optional per-item stagger via inline style="--i:N" (N * 60ms delay).
   Tokens --dur-el / --ease-out fall back to C's values when B has not defined
   them, so the block is self-contained. */
[data-reveal] { opacity: 1; transform: none; }
html.reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-el, 420ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
              transform var(--dur-el, 420ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform;
}
html.reveal-js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}




/* No-flash section scroll-reveal (auto-reveal.js + a synchronous <head> setter).
   `html.sr` is set before first paint (only when motion + IntersectionObserver are
   available), so section content is HIDDEN from the first paint and eases in per
   section as it enters view. Sections that use their own reveal (:has([data-reveal]))
   and the hero are excluded. Reduced-motion / no-JS never get `sr` => fully visible. */
html.sr .home > section:not([class*="hp-hero"]):not(.hp-arb):not(.hp-problem):not(:has([data-reveal])) > *:not(script):not(style),
html.sr body.subpage main > section:not(.hero):not(.min-hero):not(:has([data-reveal])) > *:not(script):not(style),
html.sr body.prod main > section:not(.hero):not(:has([data-reveal])) > *:not(script):not(style),
html.sr .min > section:not(.min-hero):not(:has([data-reveal])) > *:not(script):not(style),
html.sr .docsx-main > section:not(:has([data-reveal])) > *:not(script):not(style),
html.sr main > .container > *:not(script):not(style) {
  opacity: 0; transform: translateY(14px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
html.sr .home > section.sr-in > *, html.sr body.subpage main > section.sr-in > *,
html.sr body.prod main > section.sr-in > *, html.sr .min > section.sr-in > *,
html.sr .docsx-main > section.sr-in > *, html.sr main > .container.sr-in > * { opacity: 1 !important; transform: none !important; }
/* visuals lag slightly after their section's text */
html.sr section.sr-in > .scene-compare, html.sr section.sr-in > figure, html.sr section.sr-in > svg,
html.sr section.sr-in > [class*="-ill"], html.sr section.sr-in > .feature-grid, html.sr section.sr-in > .evo-tree { transition-delay: .16s; }

/* Perf: pause animations inside off-screen containers (auto-perf.js). */
.anim-off, .anim-off *{animation-play-state:paused !important}