:root {
    --primary-color: #333333;
    --secondary-color: #666666;
    /* --text-primary: #2F2722;
    --text-secondary: #2F2722; */
    --text-primary: #003b16;
    /* --text-primary: #002e59; */
    --text-secondary: #2F2722;
    --text-light: #999999;
    --background: #F8F5F0;
    --surface: #EFE8DE;
}

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

body {
    font-family: 'Source Serif 4', serif;
    font-size: 1rem;
    font-weight: 400;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}

body strong {
    font-weight: 600;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.005) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--background);
    /* background: var(--surface); */
    /* border-bottom: 1px solid rgba(47, 39, 34, 0.1); */
    z-index: 100;
}

.nav-logo {
    text-decoration: none;
}

.nav-logo img {
    height: 55px;
    width: auto;
    display: block;
}

.nav-logo h1 {
    /* font-family: 'IBM Plex Mono', monospace, sans-serif; */
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-color);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    text-transform: none;
    transition: opacity 0.2s ease;
}

.nav-links a:hover {
    opacity: 0.5;
}

.nav-links a.nav-active {
    font-weight: 500;
}

.nav-links a.nav-emph {
    font-weight: 500;
    padding: 0.4rem 1rem;
    background: var(--text-primary);
    color: var(--background);
    transition: opacity 0.2s ease;
    border-radius: 4px;
}

.nav-links a.nav-emph:hover {
    opacity: 0.75;
}

/* Layout */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 6rem 2rem 2rem;
    position: relative;
    z-index: 2;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.logo {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primary-color);
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
}

.hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.hero-logo img {
    height: 120px;
    width: auto;
}

.launch-post {
    width: 100%;
    text-align: left;
    margin: 2rem 0;
    padding: 0 2rem;
}

.launch-post a {
    color: #c5a354;
    text-decoration: underline;
}

.launch-post h1 {
    font-family: 'Lexend', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.launch-post h2 {
    font-family: 'Lexend', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.launch-post p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.launch-post ul,
.launch-post ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.launch-post li {
    margin-bottom: 0.5rem;
}

.launch-post h3 {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.launch-post h4 {
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.launch-post pre {
    background: var(--surface);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    border-radius: 6px;
    line-height: 1.6;
}

.launch-post pre,
.launch-post code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
}

.launch-post p code,
.launch-post li code {
    background: var(--surface);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

.launch-post pre code {
    background: none;
    padding: 0;
}

.tldr-box {
    background: var(--surface);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 10px;
}

.tldr-box > strong {
    display: block;
    margin-bottom: 0.75rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-light);
}

.tldr-box ul {
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.tldr-box li {
    margin-bottom: 0.5rem;
}


.post-image {
    margin: 1.25rem 0;
}

.post-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.post-image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.post-image-pair img {
    width: 100%;
    height: auto;
    display: block;
}

.post-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.post-image-grid img {
    max-width: 100%;
    height: auto;
    display: block;
}

.table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.launch-post table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    white-space: nowrap;
}

.launch-post th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border-bottom: 2px solid rgba(47, 39, 34, 0.15);
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
}

.launch-post td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(47, 39, 34, 0.08);
    color: var(--text-secondary);
}

.launch-post tr:last-child td {
    border-bottom: none;
}

.post-footnote {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(47, 39, 34, 0.1);
}

.contact-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Lexend', sans-serif;
}

.contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    /* background: var(--surface); */
    background: var(--background);
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-primary);
    border-radius: 7px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.contact:hover {
    color: var(--surface);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--text-primary);
}

.contact:hover::before {
    opacity: 1;
}

.email-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.contact:hover .email-icon {
    transform: scale(1.1);
}

/* Latest Updates */
.updates-section {
    width: 100%;
    padding: 1.5rem 2rem;
    background: var(--surface);
    margin-bottom: 2rem;
    border-radius: 10px;
}

.updates-title {
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.updates-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.update-item {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    font-size: 0.9rem;
}

.update-date {
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-light);
    white-space: nowrap;
    min-width: 5rem;
}

.update-text {
    color: var(--text-secondary);
    line-height: 1.5;
}

.update-text a {
    color: #c5a354;
    text-decoration: underline;
}

.post-meta {
    margin-bottom: 0.5rem;
}

.post-date {
    font-family: 'Lexend', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Blog post */
.post-header {
    width: 100%;
    padding: 0 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-link {
    font-family: 'Lexend', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.back-link:hover {
    opacity: 0.6;
}

.post-header-meta .post-date {
    font-family: 'Lexend', sans-serif;
    font-size: 0.8rem;
    color: var(--text-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* TOC Sidebar */
.toc-sidebar {
    position: fixed;
    left: max(1rem, calc(50vw - 670px));
    top: 80px;
    width: 200px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0.75rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.toc-sidebar::-webkit-scrollbar {
    width: 3px;
}

.toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.toc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

.toc-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}

.toc-label {
    font-family: 'Lexend', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    padding: 0 0.75rem;
}

.toc-link {
    display: block;
    font-family: 'Lexend', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    text-decoration: none;
    padding: 0.2rem 0.75rem;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}

.toc-link:hover {
    color: var(--text-secondary);
}

.toc-link.toc-active {
    color: var(--text-primary);
    border-left-color: var(--text-primary);
    font-weight: 500;
}

.toc-link[data-level="1"] { padding-left: 0.75rem; }
.toc-link[data-level="2"] { padding-left: 0.75rem; }
.toc-link[data-level="3"] { padding-left: 1.25rem; font-size: 0.74rem; }
.toc-link[data-level="4"] { padding-left: 1.75rem; font-size: 0.72rem; }
.toc-link[data-level="5"] { padding-left: 2.25rem; font-size: 0.7rem; }

.site-footer {
    margin-top: 4rem;
}

footer {
    text-align: center;
    color: var(--text-light);
    font-size: 0.875rem;
    margin-top: 2rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.875rem;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--text-primary);
}

.footer-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .toc-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 1rem;
    }

    .nav-links {
        gap: 1.25rem;
    }

    .container {
        padding: 5rem 1rem 2rem;
    }
}


/* ==========================================================================
   PRODUCT LAYER
   Added for the product-first pages (home, research, work).
   Standard Kernel's palette and typography; catalogue structure borrowed
   from the Maison Token prototype. Everything below is namespaced away from
   the blog classes above, which are untouched.
   ========================================================================== */

:root {
    --rule: #E2DBCF;
    --rule-strong: #C9C0B1;
    --ink-soft: #4A443C;
    --ink-mute: #6E675D;

    /* One colour, spent on data. The house green marks our bar; the
       baseline is a warm neutral so the contrast carries the meaning. */
    --bar-ours: var(--text-primary);
    --bar-base: #D3CBBD;

    /* Hover must read against both the page and the panel, so it is a tint
       rather than a swap to --surface. */
    --tint: rgba(0, 59, 22, 0.055);

    /* Diagram palette. Four flat colours, Bauhaus-plain: the house green
       plus a warm pair and a neutral. Kept separate from the text colours
       so the figures can be retuned without touching type. */
    --fig-green:  #1F4433;
    --fig-rust:   #C0673E;
    --fig-gold:   #D7A75F;
    --fig-stone:  #D5CFC3;
    --fig-line:   #B5AE9F;

    --band: clamp(3rem, 6.5vw, 6rem);
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --measure: 31rem;
}

/* --- Wider shell for catalogue pages ------------------------------------ */
.container--wide { max-width: 1120px; }

/* --- Shared primitives -------------------------------------------------- */

/* Micro-label. Lexend, letterspaced, never larger than this. */
.label {
    font-family: 'Lexend', sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    line-height: 1.4;
    margin: 0;
}

/* Roman numerals index the product lines and the benchmark regimes. */
.numeral {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

/* Any quantity we claim. Mono and tabular so columns of them line up. */
.figure {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.1;
}
.figure--sm { font-size: 1rem; }
.figure--lg { font-size: clamp(1.5rem, 2.9vw, 1.95rem); }

.muted { color: var(--ink-soft); }

/* --- Band: the vertical unit of every page ------------------------------ */
.band { padding: var(--band) 0; border-top: 1px solid var(--rule); }

/* Same split as the hero: heading on the left, its note alongside on the
   right. The note spans whatever rows the heading occupies, so a band with a
   numeral and a band without both lay out correctly. */
.band__head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin-bottom: 2.75rem;
}
.band__head > *:not(.band__note) { grid-column: 1; }
.band__head > .band__note { grid-column: 2; grid-row: 1 / -1; }

.band__head .numeral { display: block; margin-bottom: 0.75rem; }
.band__head h2 {
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    margin: 0.35rem 0 0;
    text-wrap: balance;
}
.band__note {
    font-size: 0.9375rem;
    margin: 0;
    padding-top: 0.25rem;
    color: var(--ink-soft);
}

/* Body with a left rail of terms. The rail answers the buyer's standing
   questions without crowding the main column. */
.band__body {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.band__aside {
    font-family: 'Lexend', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--ink-mute);
    margin: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--rule);
}
.band__aside a { color: var(--ink-mute); }

@media (max-width: 760px) {
    .band__body { grid-template-columns: 1fr; }
    .band__aside { order: 2; }
}

/* --- Hero --------------------------------------------------------------- */
/* Two columns: the statement on the left, the explanation on the right. A
   single left-aligned column left the right half of the page empty, and the
   split matches the rail grid the bands below already use. */
/* Plain by default: the index pages use a hero with no figure, and the
   two-column grid left them in a narrow column with a dead half beside it. */
.hero { padding: 2rem 0 var(--band); }

/* .content is a flex column with align-items:center, so a section shrinks to
   its content and centres unless told otherwise. Wide sections hid this; a
   header holding one short word did not. */
.hero,
.band,
.entries,
.content > section,
.content > div { width: 100%; }
.hero:not(.hero--split) .hero__sub { max-width: var(--measure); }

/* Split only where there is something to sit beside the text. */
.hero--split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
}

.hero--split .hero__text { grid-column: 1; }

.hero__fig {
    grid-column: 2;
    margin: 0;
    min-width: 0;
}
.stack-fig { display: block; width: 100%; height: auto; overflow: visible; }

/* Type inside the figure is mono, like every other label on the site. */
.stack-fig text {
    font-family: 'IBM Plex Mono', monospace;
    fill: var(--ink-soft);
}
.stack-fig .fig-label {
    font-size: 12.5px;
    letter-spacing: 0.07em;
    fill: var(--text-primary);
}
.stack-fig .fig-item,
.stack-fig .fig-instr {
    font-size: 10.5px;
    letter-spacing: 0.02em;
    fill: var(--ink-mute);
}

.stack-fig .fig-rule line,
.stack-fig line.fig-rule { stroke: var(--rule); stroke-width: 1; }
.stack-fig .fig-grid line { stroke: var(--fig-line); stroke-width: 1; }
.stack-fig .fig-stripe line { stroke: var(--fig-green); stroke-width: 1.5; }

.stack-fig .fig-arrow path {
    stroke: var(--ink-mute);
    stroke-width: 1.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stack-fig .fig-stem path {
    stroke: var(--rule-strong);
    stroke-width: 1;
    fill: none;
}
.stack-fig .fig-node { fill: var(--text-primary); }
.stack-fig .fig-mark circle { opacity: 0.92; }


.hero__eyebrow {
    grid-column: 1 / -1;
    padding-bottom: 1.25rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid var(--rule);
}

.hero h1 {
    font-size: clamp(1.6rem, 3.8vw, 2.45rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
}
.hero h1 em { font-style: italic; }

.hero__sub {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    color: var(--ink-soft);
}

/* The product cards run the full width beneath both columns. */
.hero--split .tabs,
.hero--split .lines__head { grid-column: 1 / -1; }

/* Sits between the hero text and the tab strip, closer to the tabs it
   labels than to the paragraph above it. */
.lines__head { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0.85rem; }
.band > .lines__head { margin-top: 0; }

@media (max-width: 980px) {
    .hero--split { grid-template-columns: 1fr; row-gap: 2.5rem; }
    .hero__text, .hero__fig { grid-column: 1; }
    .hero__sub { margin-top: 1.4rem; padding-top: 0; max-width: var(--measure); }

    /* Five columns of mono do not survive a phone width; let it scroll. */
    .hero__fig { overflow-x: auto; }
    .stack-fig { min-width: 34rem; }
}

/* --- Product tabs ------------------------------------------------------- */
/* The three products as a tab strip: the header is the control, and the panel
   below swaps in place rather than sending the reader down the page. */
.tabs { margin-top: 0; }

.tablist {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.tab {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1.4rem clamp(1.25rem, 2.5vw, 2.25rem) 1.3rem;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.tab + .tab { border-left: 1px solid var(--rule); }
/* Anchored from the nav, so clear the fixed navbar when scrolled to. */
.tab { scroll-margin-top: 7rem; }
section[id] { scroll-margin-top: 5rem; }
.tab:hover:not([aria-expanded="true"]) { background: var(--tint); }
.tab:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -4px; }

/* The selected tab joins the panel below it: its underline opens up and the
   accent moves to the top edge. */
.tab[aria-expanded="true"] {
    background: var(--surface);
    border-top-color: var(--text-primary);
    border-bottom-color: transparent;
}

.tab__name {
    font-family: 'Source Serif 4', serif;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.tab[aria-expanded="true"] .tab__name { font-weight: 600; }

.tab__desc {
    font-size: 0.875rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.panel {
    background: var(--surface);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
}
.panel[hidden] { display: none; }

/* A copy of the tab's description, for when the strip is too narrow to show
   it. Exactly one of the two is ever displayed, so nothing is read twice. */
.panel__lede { display: none; }

/* --- Company ------------------------------------------------------------ */
/* Track record stands alone now, so it carries the top rule the .cols grid
   used to provide. The bullets keep a reading measure at full width. */
.track {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-strong);
}
.track .bullets { max-width: 52rem; }

.bullets {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
}
.bullets > li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bullets > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--fig-rust);
}
.bullets > li:last-child { margin-bottom: 0; }
.bullets a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.bullets a:hover { border-bottom-color: var(--text-primary); }

.backers {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-strong);
}
.backers__lead {
    margin: 0.7rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.backers__lead strong { font-weight: 600; color: var(--text-primary); }

/* Firms as a logo wall. Cells are sized for a logo; the wordmarks inside
   are placeholders until the SVGs land. */
.logos {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.logos > li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    padding: 1rem;
    text-align: center;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.logos span {
    font-family: 'Lexend', sans-serif;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ink-soft);
}
@media (max-width: 620px) {
    /* One column would stack eight cells into a wall of scrolling. */
    .logos { grid-template-columns: repeat(2, 1fr); }
    .logos > li { min-height: 3.75rem; padding: 0.75rem; }
}

.logos img {
    /* Wide wordmarks are bounded by width; the cap only binds on stacked
       lockups like Ericsson's, which would otherwise sit tiny in the cell. */
    max-height: 2.5rem;
    max-width: 100%;
    width: auto;
    opacity: 0.85;
}

/* Angels stay as names: a person is not a logo. */
.backers__angels-label { margin-top: 2rem; }
.backers__angels {
    margin: 0.7rem 0 0;
    max-width: 52rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.backers__hiring {
    margin: 1.25rem 0 0;
    font-family: 'Lexend', sans-serif;
    font-size: 0.8125rem;
}
.backers__hiring a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.backers__hiring a::after { content: ' \2192'; }
.backers__hiring a:hover { border-bottom-color: var(--text-primary); }

.panel__note {
    font-size: 0.9375rem;
    color: var(--ink-soft);
    max-width: var(--measure);
    margin: 0 0 2rem;
}

/* A panel that leads on an argument: the claim set large on the left, the
   qualifier across a rule on the right, then the offer, then the evidence. */
.claim { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.claim__line {
    font-size: clamp(1.2rem, 2.1vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: pretty;
}
.claim__note {
    /* Runs the full width under the claim, like the cards below it — the
       measure cap made it a narrow column against a full-width heading. */
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

/* Boxed cards. Used for the two ways to buy and for the research items —
   discrete things you pick from, as against the plain columns used for
   reasons and evidence. */
.cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* auto-fill, not auto-fit: with seven cards the last row holds one,
       and auto-fit would stretch it across the full width. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.cards--two {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.cards > li {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule-strong);
    padding: 1.25rem clamp(1rem, 2vw, 1.5rem) 1.35rem;
}

.card__name {
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}
/* Except where a kicker still precedes it, as in the two product cards. */
.label + .card__name { margin-top: 0.4rem; }
.card__desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

/* Pushed to the foot of the card, so the links sit on one line whatever the
   descriptions above them run to. */
.card__go {
    margin-top: auto;
    padding-top: 1.1rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-primary);
    text-decoration: none;
    align-self: start;
    border-bottom: 1px solid var(--rule-strong);
}
.card__go::after { content: ' \2192'; }
.card__go:hover { border-bottom-color: var(--text-primary); }

/* Terms and the three factors share one grid, so the standing terms read as
   a column of the argument rather than a leftover rail beside it. */
.cols {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--rule-strong);
}
.cols > * { padding: 1.5rem clamp(0.85rem, 1.8vw, 1.4rem) 0.25rem; margin: 0; }
.cols > *:first-child { padding-left: 0; }
.cols > * + * { border-left: 1px solid var(--rule); }
.cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.terms { list-style: none; }
.terms > li {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink-soft);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
}
.terms > li:first-child { padding-top: 0; }
.terms > li:last-child { border-bottom: 0; }

/* --- Engagement results ------------------------------------------------- */
/* The evidence panel: the figure leads, then what it beat, then the shape of
   the workload it was measured on. */
.results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    border-top: 1px solid var(--rule-strong);
}
.results > li {
    padding: 1.5rem clamp(0.85rem, 1.8vw, 1.4rem) 1.5rem;
    border-bottom: 1px solid var(--rule);
}
.results > li:first-child { padding-left: 0; }
.results > li + li { border-left: 1px solid var(--rule); }

.result__figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.75rem 0 0.4rem;
}
.result__second {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--fig-rust);
}
.result__against {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.result__detail {
    margin: 0.7rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-mute);
}

@media (max-width: 700px) {
    .results > li + li { border-left: 0; }
    .results > li { padding-left: 0; }
}

/* A demo runs the full width of the panel: the comparison is the point, and
   it is already a wide side-by-side. */
.demo { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.demo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-strong);
}
.demo figcaption {
    margin-top: 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-mute);
}

/* Inside a label the numeral is part of the same line of type, so it takes
   the label's face and tracking instead of the mono numeral's. */
.factor .label .numeral {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.factor__desc {
    /* One declaration: a margin shorthand after margin-top silently wiped it. */
    margin: 0.7rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Schematics, not plots: they illustrate the sentence above them and carry
   no measurements. The figures on this page are the mono ones. */
/* Flat and geometric like the hero, but each figure carries a signifier so
   the subject reads: three dies for the silicon, an interlock for the fit.
   No scale, nothing measured. */
.factor__fig {
    display: block;
    width: 100%;
    max-width: 17rem;
    height: auto;
    margin: 1.5rem 0 0;
}
.factor__fig .ff-green { fill: var(--fig-green); }
.factor__fig .ff-rust  { fill: var(--fig-rust); }
.factor__fig .ff-gold  { fill: var(--fig-gold); }
.factor__fig .ff-stone { fill: var(--fig-stone); }
.factor__fig .ff-base  { stroke: var(--rule-strong); stroke-width: 1; }
.factor__fig .ff-pin   { stroke: var(--fig-green); stroke-width: 1.5; }
/* The ring core is cut through to the package beneath it. */
.factor__fig .ff-hole  { fill: var(--fig-rust); }
.factor__fig .ff-seam  { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3 3; }

@media (max-width: 860px) {
    .cols { grid-template-columns: 1fr; }
    .cols > * { padding-left: 0; padding-right: 0; }
    .cols > * + * { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 780px) {
    /* Stay horizontal, so all three products read as one set. The panel sits
       directly under the strip, so the desktop selected-tab treatment — top
       accent, open bottom edge — still says the right thing. */
    .tab { padding: 0.8rem 0.6rem 0.85rem; }
    .tab__name { font-size: 0.9375rem; line-height: 1.25; }
    .tab__desc { display: none; }

    /* The description moves from the tab into the panel it opened. */
    .panel__lede {
        display: block;
        margin: 0 0 1.5rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--rule);
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--ink-soft);
    }
}

@media (max-width: 480px) {
    /* Three columns on a phone: the longest name wraps to three lines. */
    .tab { padding: 0.7rem 0.4rem 0.75rem; }
    .tab__name { font-size: 0.8125rem; letter-spacing: -0.005em; }
}



/* --- Hill-climbing schematic -------------------------------------------- */
/* Draws itself and repeats. Geometry, dash length and per-dot keyframes are
   generated into the SVG by tools/make-climb-figure.py; only the palette and
   the stroke live here. It carries no axis or numbers: it shows how the
   optimizer works, it does not report a measurement. */
.climb { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.climb-fig { display: block; width: 100%; height: auto; overflow: visible; }

.climb-fig .cf-axis { stroke: var(--rule-strong); stroke-width: 1; }
.climb-fig .cf-axis-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    fill: var(--ink-mute);
}

.climb-fig .cf-path {
    fill: none;
    stroke: var(--fig-green);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: var(--len);
    animation: cf-draw var(--cycle) linear infinite;
}

.climb-fig .cf-dot {
    fill: var(--fig-green);
    opacity: 0;
    animation-duration: var(--cycle);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* A round that found nothing better and kept what it had. */
.climb-fig .cf-dot--held {
    fill: var(--surface);
    stroke: var(--fig-rust);
    stroke-width: 2.5;
}

/* The motion is the point, but not at the cost of anyone's comfort: without
   it the finished staircase is simply shown. */
@media (prefers-reduced-motion: reduce) {
    .climb-fig .cf-path { animation: none; stroke-dasharray: none; }
    .climb-fig .cf-dot { animation: none; opacity: 1; }
}

/* --- Runtime results ---------------------------------------------------- */
/* One column per model, two conditions each, stock against ours. The bars are
   scaled within a condition, so the pair is comparable and the columns are
   not — which is why every bar carries its number. */
.rcharts__label { margin-bottom: 1.1rem; }

.rcharts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.75rem, 4vw, 3.25rem);
}

.rchart { margin: 0; }
.rchart__model {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule-strong);
}

.rgroup { margin-top: 1.1rem; }
.rgroup__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.7rem;
}
.rgroup__unit {
    font-family: 'Lexend', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.rgroup__ratio {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fig-green);
}

.rbar {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 3.25rem;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.rbar:last-child { margin-bottom: 0; }
.rbar__name {
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    color: var(--ink-mute);
}
.rbar__track { display: block; min-width: 0; }
.rbar__fill { display: block; height: 10px; }
.rbar__fill--base { background: var(--bar-base); }
.rbar__fill--ours { background: var(--bar-ours); }
.rbar__value {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    text-align: right;
    color: var(--ink-soft);
}
.rbar__value--ours { color: var(--text-primary); font-weight: 600; }

/* A link out of a panel to the next step. */
.panel__cta {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-family: 'Lexend', sans-serif;
    font-size: 0.8125rem;
}
.panel__cta a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.panel__cta a::after { content: ' \2192'; }
.panel__cta a:hover { border-bottom-color: var(--text-primary); }

@media (max-width: 560px) {
    .rbar { grid-template-columns: 7rem minmax(0, 1fr) 3rem; gap: 0.5rem; }
}

/* --- Case studies ------------------------------------------------------- */
.studies { display: flex; flex-direction: column; gap: var(--band); }

.study { margin: 0; }
.study__rule { border: 0; border-top: 1px solid var(--text-primary); margin: 0 0 1.25rem; }
.study h3 {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0.4rem 0 1.25rem;
    max-width: 24ch;
}
.study__figure { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem; }
.study__cond { font-size: 0.875rem; color: var(--ink-mute); }
.study p { font-size: 0.9375rem; max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1.5rem; }

.study dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.25rem 1.5rem;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}
.study dt {
    font-family: 'Lexend', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 0.35rem;
}
.study dd {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* --- Contact ------------------------------------------------------------ */
.contact__mail {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.contact__mail:hover { border-bottom-color: var(--text-primary); }

/* Details column: a labelled stack of ways to reach us. The inline styles
   this replaces were left over from the old two-item version. */
.contact__intro {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
    max-width: var(--measure);
}

.contact__details > .label { margin: 0 0 0.6rem; }
.contact__details > .label ~ .label { margin-top: 1.75rem; }
.contact__details > p { margin: 0; }

.contact__links { list-style: none; margin: 0; padding: 0; }
.contact__links > li { margin-bottom: 0.4rem; }
.contact__links > li:last-child { margin-bottom: 0; }
.contact__links a {
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.contact__links a:hover { border-bottom-color: var(--text-primary); }


/* A pending figure is visibly provisional, so a placeholder cannot ship
   unnoticed. The register at CONTENT.md lists every one. */
[data-placeholder] {
    background: rgba(138, 106, 66, 0.11);
    box-shadow: 0 0 0 2px rgba(138, 106, 66, 0.11);
}

/* On a link the tinted box reads as a rendering fault rather than a marker,
   so mark it in the underline it already has. */
a[data-placeholder] {
    background: none;
    box-shadow: none;
    border-bottom-style: dashed;
    border-bottom-color: var(--fig-rust);
}

/* --- Index entries ------------------------------------------------------ */
/* One row per published piece: meta in a left rail, substance beside it,
   thumbnail on the right where a piece has one. */
.entries {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
}

.entry {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}
.entry:hover { background: var(--tint); }
.entry--thumb { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 13rem); }

.entry__meta { display: flex; flex-direction: column; gap: 0.5rem; }
.entry__date {
    font-family: 'Lexend', sans-serif;
    font-size: 0.8125rem;
    color: var(--ink-mute);
}
.entry__title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin: 0; }
.entry__excerpt {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: 0.5rem 0 0;
    max-width: var(--measure);
}
.entry__result { margin-top: 0.9rem; display: flex; align-items: baseline; gap: 0.6rem; }
.entry__result .figure { font-size: 0.9375rem; }

.entry__thumb {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--tint);
    overflow: hidden;
}
.entry__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A logo used as a thumbnail needs air around it; a screenshot should bleed. */
.entry__thumb img[src$=".svg"] { padding: 1.5rem; }

@media (max-width: 760px) {
    .entry { grid-template-columns: 1fr; gap: 0.6rem; }
    .entry__meta { flex-direction: row; align-items: baseline; gap: 0.9rem; }
    .entry__thumb { max-width: 22rem; margin-top: 0.4rem; }
}

/* Index entries and cards are built from <span>s inside a single <a>, so the
   ones meant to stack need to be told to. */
.entry__title,
.entry__excerpt,
.entry__result .figure { display: block; }

/* An entry with no result figure leaves an empty span behind; don't let it
   open a gap under the excerpt. */
.entry__result:empty { display: none; }

/* --- Products dropdown -------------------------------------------------- */
/* Opens on hover, and on keyboard focus via :focus-within, so it is not a
   mouse-only affordance. The parent stays a real link to the section. */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;           /* full navbar height, so the menu clears it */
}

/* A caret marks the items that open something. Keyed off aria-haspopup, so
   it appears on any item that actually has a menu and never on one that
   does not. */
.nav-item > a[aria-haspopup]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.45em;
    vertical-align: 0.14em;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.5;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-item:hover > a[aria-haspopup]::after,
.nav-item:focus-within > a[aria-haspopup]::after {
    opacity: 1;
    transform: rotate(180deg);
}

.nav-menu {
    position: absolute;
    top: 100%;
    left: -0.9rem;
    min-width: 13.5rem;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0;
    background: var(--background);
    border: 1px solid var(--rule-strong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 10;
}
/* The last item's menu would run off the right edge, so hang it the other
   way. */
.nav-links > .nav-item:last-child .nav-menu { left: auto; right: -0.9rem; }

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-menu a {
    padding: 0.5rem 0.9rem;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.nav-links .nav-menu a:hover { opacity: 1; background: var(--tint); }

/* The nav carries six items now, one of them two words. Tighten it down
   rather than let it run off the side. */
@media (max-width: 900px) {
    .navbar { padding: 0 1.25rem; }
    .nav-links { gap: 1.15rem; font-size: 0.875rem; }
    .nav-logo img { height: 48px; }
}

@media (max-width: 620px) {
    /* 2rem each side costs a sixth of a phone screen. */
    .container { padding-left: 1.15rem; padding-right: 1.15rem; }
    .panel { padding-left: 1rem; padding-right: 1rem; }

    .navbar {
        height: auto;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
    }
    .nav-links {
        flex-wrap: wrap;
        gap: 0.15rem 1.1rem;
        font-size: 0.9375rem;
    }
    /* Taller hit areas: 12px text with no padding is not a tap target. */
    .nav-links a { padding: 0.35rem 0; }
    /* The bar wraps here, so the logo has its own row and the full width.
       Shrinking it was solving a crowding problem that no longer exists. */
    .nav-logo img { height: 50px; }
    /* No hover on touch, and no room once the bar wraps. The Products link
       still reaches the section, where the tabs are visible anyway. */
    .nav-menu { display: none; }
    .nav-item > a[aria-haspopup]::after { display: none; }
    /* The fixed navbar no longer has a fixed height, so the shell can't
       reserve a constant gap for it. */
    .container { padding-top: 10.5rem; }
}