/*
  Site shell · the one header, footer and page frame every page of the site uses (Site · Shell, 14 Oct 2026).
  Lifted from /home/k/ (k.css: its header, type scale, section head and buttons) and the footer study
  (/marketing/studies/footer/, Figma 445:1808). Tokens: /shared/adam-v1.css only; the accent is set on <html> before first paint
  (raspberry by default), as /home/k/ does. Every class is site-*, so this file can sit beside k.css.
  Markup: header.html and footer.html, stamped into each page by tools/site/stamp.mjs. Behaviour: site.js.
*/
:root {
  --k-weight: 400;                                   /* one display weight */
  --k-h1: clamp(48px, 7.8vw, 112px);
  --k-h2: clamp(39px, 4.45vw, 64px);                /* 39 px on phones: "Built for engineering" and "Cosmon, compared" keep their line at 390 */
  --k-lead: clamp(18px, 1.53vw, 22px);
  /* display tracking: the H1 and the footer's sign-off, then the H2s; smaller display heads sit at -.02em. Opened from
     -.045 / -.04 (Tong, 15 Oct, evening, on the migrations H1's "history.": "increase the spacing a bit") */
  --k-track-h1: -.03em;
  --k-track-h2: -.025em;
  --k-pad: clamp(16px, 5.5556vw, 80px);              /* the one container: 1280 px of content and 80 px gutters at 1440 */
  /* the one section rhythm, every page and the landing page's bands (Tong, 15 Oct: "some space inconsistency at the
     landing page and other page"): a section's last content to the next head's hairline (or to a band's edge), and a
     head to its content. The values the inner pages already had, which read evenly; the landing page had 184 */
  --sec-gap: 112px;
  --sec-head-gap: 56px;
}
@media (max-width: 767px) { :root { --sec-gap: 72px; --sec-head-gap: 40px; } }
body.site-page { margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }   /* anchors land under the compact bar */

/* the mono's own features (Paper Mono, the live type a and the study's d–j: the slashed zero on, contextual alternates
   off …; adam-v1.css's --mono-features), on the shell's mono pieces; !important because the font shorthand they're set
   with resets font-feature-settings; a type without the variable (b, c, k) gets normal */
:is(.site-label, .site-head, .site-head *, .site-hd-nav a, .site-hd-pbtn, .site-btn, .site-hd-menu, .site-menu-group, .site-ft-cols, .site-ft-cols *, .site-ft-base, .site-ft-base *, .site-contents a, .site-contents-toggle, .site-ruler-eye, .site-skip) {
  font-feature-settings: var(--mono-features, normal) !important;
}

/* ---------------------------------------------------------------- the container */
.site-wrap { box-sizing: border-box; max-width: 1440px; margin-inline: auto; padding-inline: var(--k-pad); }

/* ---------------------------------------------------------------- type: one scale */
.site-h1 { margin: 0; font-family: var(--font-display); font-weight: var(--k-weight); font-size: var(--k-h1); line-height: var(--leading-display, .94); letter-spacing: var(--k-track-h1); text-wrap: balance; }
.site-h2 { margin: 0; font-family: var(--font-display); font-weight: var(--k-weight); font-size: var(--k-h2); line-height: var(--leading-display, 1); letter-spacing: var(--k-track-h2); text-wrap: balance; }
/* the quieter words of a heading are pink, and stay whole */
:is(.site-h1, .site-h2, .site-ft-title) span { color: var(--accent); white-space: nowrap; }
.site-lead { margin: 0; font-family: var(--font-body); font-size: var(--k-lead); line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
.site-label { font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; }
.site-body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.site-body p { margin: 0 0 1em; text-wrap: pretty; }
.site-body > :last-child { margin-bottom: 0; }
.site-prose { max-width: 680px; }
/* the [ 0n / 0N ] index (Tong, 15 Oct): the brackets, the slash and the total in the label grey, only the section's own
   number pink (stamp.mjs wraps it); read where it sits, so a band can set its own mark */
.site-n { color: var(--muted); }
.site-n-own { color: var(--mark, var(--accent)); }

/* ---------------------------------------------------------------- the page hero and sections */
.site-hero { padding-block: 96px var(--sec-gap); }
.site-hero .site-lead { max-width: 640px; margin-top: 32px; }
.site-sec { padding-bottom: var(--sec-gap); }
/* a section head: a hairline, the pink index left and the label at a third (column 5 of 12) */
.site-head {
  box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 51px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.site-head > :first-child { grid-column: 1 / span 4; }
.site-head > :last-child { grid-column: 5 / -1; text-wrap: balance; }
/* a section's body on the same 12 columns; .site-at-5 starts a block under the label */
.site-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 32px; padding-top: var(--sec-head-gap); }
.site-grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) { .site-grid > .site-at-5 { grid-column: 5 / -1; } }
@media (max-width: 767px) {
  .site-hero { padding-top: 56px; }
  .site-hero .site-lead { margin-top: 24px; }
  .site-grid { row-gap: 24px; }
  .site-body { font-size: 16px; }
}

/* ---------------------------------------------------------------- the contents rail (contents.js; Tong's review 3.1)
   First in a .site-grid, in columns 1–3 beside the body: sticky under the compact bar, the H2s in mono caps on a
   hairline, a 2 px pink mark that travels to the current one, the emphasis rippling out from it (data-near, --wd).
   Under 1024 px: a "Contents" disclosure above the body. */
.site-contents { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(56px + 40px + env(safe-area-inset-top, 0px)); min-width: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.site-contents-toggle { display: none; }
.site-contents-rail { position: relative; border-left: 1px solid var(--line); }
.site-contents ol { margin: 0; padding: 0; list-style: none; }
.site-contents a {
  display: block; padding: 7px 0 7px 16px; color: var(--muted); text-decoration: none; text-wrap: balance;
  transition: color .32s ease calc(var(--wd, 0) * 45ms);
}
.site-contents li[data-near="1"] a { color: var(--ink-2); }
.site-contents li[data-near="0"] a { color: var(--ink); font-weight: 500; }
.site-contents a:hover { color: var(--ink); }
.site-contents a:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: -2px; }
.site-contents-mark {
  position: absolute; left: -1px; top: 0; width: var(--active-weight, 2px); height: var(--mark-h, 0); transform: translateY(var(--mark-y, 0));
  background: var(--active, var(--accent)); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.site-contents[data-active] .site-contents-mark { opacity: 1; }
@media (max-width: 1023px) {
  .site-contents { position: static; grid-column: 1 / -1; }
  .site-contents-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; border: 0; border-block: 1px solid var(--line);
    background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  }
  .site-contents-toggle .ic { width: 12px; height: 12px; transition: transform .2s ease; }
  .site-contents-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .site-contents:not([data-open]) .site-contents-rail { display: none; }
  .site-contents-rail { margin: 12px 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .site-contents a, .site-contents-mark, .site-contents-toggle .ic { transition: none; } }

/* a page that has the tick ruler keeps its contents rail for phones and tablets only: the "Contents" disclosure */
@media (min-width: 1024px) { .site-contents--fold { display: none; } }

/* ---------------------------------------------------------------- the navigator (ruler.js; Tong, 15 Oct, evening: Codex's
   chat navigator in our UI, in place of the window-tall tick ruler of 3.2 and 5.2)
   A grid item in columns 1–4 beside the blocks' column, where the contents rail was: as tall as its ticks (--h, N ×
   --gap, which ruler.js keeps under 40% of the window), sticky with its middle at the window's middle, scrolling away
   with the blocks at their end. The ticks hang from the column's left edge and grow to the right: a 1 px line --L long,
   scaled to its rest length (8 px; an H2 among paragraphs 12 px) and up to --L with its k (0 rest … 1 the current or
   hovered block), and inked from --line towards --ink as k nears 1; the current tick is ink. ruler.js sets --k only on
   the ticks whose length changes, so a frame is transforms and colours. Hover or focus a tick and its card opens to
   the right of the ticks, centred on it (--cy).
   The navigator's parent is the 12-column grid with the blocks' column beside it in row 1, said here at zero
   specificity too, so a page's stale stylesheet can't stack the blocks under it (Tong's "weird design", 15 Oct: a
   fresh site.css with a day-old changelog.css left a window-tall empty band). */
.site-ruler { display: none; }
@media (min-width: 1024px) {
  :where(:has(> .site-ruler)) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :where(:has(> .site-ruler) > :not(.site-ruler, .site-contents)) { grid-column: 5 / -1; grid-row: 1; }
  .site-ruler {
    --L: 20px; --r: .4; --rm: .6;                     /* the longest tick; 8 px and 12 px as fractions of it */
    --top: calc(56px + 24px + env(safe-area-inset-top, 0px));
    display: block; grid-column: 1 / span 4; grid-row: 1; align-self: start; position: sticky; z-index: 2;
    top: max(var(--top), calc(50vh - var(--h, 0px) / 2)); box-sizing: border-box; height: var(--h, 0px); min-width: 0;
  }
}
.site-ruler-list { margin: 0; padding: 0; list-style: none; }
.site-ruler-t { position: absolute; left: 0; top: calc(var(--i, 0) * var(--gap, 8px)); display: block; width: calc(var(--L) + 12px); height: var(--gap, 8px); cursor: pointer; }
.site-ruler-t i {
  position: absolute; left: 0; top: var(--mid, 4px); width: var(--L); height: 1px; transform-origin: 0 50%;
  transform: scaleX(calc(var(--r) + (1 - var(--r)) * var(--k, 0)));
  background: color-mix(in srgb, var(--ink) calc(var(--k, 0) * var(--k, 0) * var(--k, 0) * 100%), var(--line));
}
.site-ruler-t.is-major i { transform: scaleX(calc(var(--rm) + (1 - var(--rm)) * var(--k, 0))); }
.site-ruler-t[aria-current] i { background: var(--ink); }
.site-ruler-t:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: 0; }
/* the card: white, a --line hairline, square, the faintest shadow; the eyebrow in mono caps, the title on one line,
   the preview in up to three (a block of one sentence gives its title the three) */
.site-ruler-card {
  position: absolute; left: calc(var(--L) + 16px); top: 0; z-index: 1;
  box-sizing: border-box; width: min(320px, calc(100% - var(--L) - 40px)); padding: 12px 14px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 8px 24px -16px rgb(0 0 0 / .16);
  transform: translateY(calc(var(--cy, 0px) - 50%)); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s .12s;
}
.site-ruler-card[data-on] { opacity: 1; visibility: visible; transition: opacity .12s ease; }
.site-ruler-card p { margin: 0; }
.site-ruler-eye { font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-ruler-card .site-ruler-title { margin-top: 6px; font: 500 15px/1.4 var(--font-body); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-ruler-card .site-ruler-text { margin-top: 4px; font: 400 14px/1.45 var(--font-body); color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.site-ruler-card[data-solo] .site-ruler-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.site-ruler-card[data-solo] .site-ruler-text { display: none; }
@media (prefers-reduced-motion: reduce) { .site-ruler-card, .site-ruler-card[data-on] { transition: none; } }

/* ---------------------------------------------------------------- buttons: one shape; Try Adam pink, Book a demo black
   adam-v1.css gives both their colours and the 3D hover: .btn-cta Try Adam's pink and label, and .site-btn--book (with
   .btn-ink) the solid black in ink shades. */
/* :where() keeps the shape at zero specificity, so .btn-cta's own border and colours win on Try Adam */
:where(.site-btn) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 212px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
:where(.site-btn) .ic { width: 16px; height: 16px; flex: none; }
.site-btn--sm { min-width: 0; min-height: 36px; gap: 14px; padding: 0 13px; font-size: 12px; }
.site-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- the reveal and the loading state (/marketing/shared/reveal.js; S.1)
   reveal.js marks a block below the fold data-rv="wait", "in" when it scrolls into view, "done" ~0.5 s later. Heads:
   the hairline sweeps in left to right, the index and the label type in (one step a character). Frames: the overlay
   .site-rv-frame draws the frame's four edges, then its contents appear. html[data-reveal] picks the variant:
   1 hairline (default), 2 pen (the tip being drawn is pink, then settles), 3 plot (a pink plotter line crosses the
   block and leaves it drawn). Nothing moves; reduced motion: reveal.js does nothing. */
@property --rv-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --rv-c { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rv-a { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rv-b { syntax: '<number>'; inherits: false; initial-value: 0; }
[data-rv-kind="head"]:is([data-rv="wait"], [data-rv="in"]) { position: relative; }
/* 1 and 2: the hairline is drawn by ::before while the real one waits; the labels type in */
:root:not([data-reveal="3"]) [data-rv-kind="head"]:is([data-rv="wait"], [data-rv="in"]) { border-top-color: transparent; }
:root:not([data-reveal="3"]) [data-rv-kind="head"]:is([data-rv="wait"], [data-rv="in"])::before {
  content: ''; position: absolute; left: 0; top: -1px; width: var(--rv-p); height: 1px; background: var(--line); pointer-events: none;
}
:root:not([data-reveal="3"]) [data-rv-kind="head"][data-rv="in"]::before { animation: rv-sweep 340ms cubic-bezier(.22, 1, .36, 1) forwards; }
:root:not([data-reveal="3"]) [data-rv-kind="head"][data-rv="wait"] > * { clip-path: inset(0 100% 0 0); }
:root:not([data-reveal="3"]) [data-rv-kind="head"][data-rv="in"] > * {
  clip-path: inset(-4px calc(100% - var(--rv-c) * (1ch + .04em)) -4px -4px);
  animation: rv-type min(calc(var(--rv-n, 12) * 20ms), 280ms) steps(var(--rv-n, 12), end) 90ms both;
}
@keyframes rv-sweep { from { --rv-p: 0%; } to { --rv-p: 100%; } }
@keyframes rv-type { from { --rv-c: 0; } to { --rv-c: var(--rv-n, 12); } }
/* 2: the pen's tip, pink, rides the end of the line being drawn and goes as it lands */
[data-reveal="2"] [data-rv-kind="head"][data-rv="in"]::after {
  content: ''; position: absolute; top: -1px; left: max(0px, calc(var(--rv-p) - 28px)); width: 28px; height: 1px; background: var(--accent); pointer-events: none;
  animation: rv-sweep 340ms cubic-bezier(.22, 1, .36, 1) forwards, rv-settle 160ms ease 300ms forwards;
}
@keyframes rv-settle { to { opacity: 0; } }
/* 3: the plotter: the block is drawn behind a pink line that crosses it once */
[data-reveal="3"] :is([data-rv-kind="head"], [data-rv-kind="frame"])[data-rv="wait"] { -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat; mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat; }
[data-reveal="3"] :is([data-rv-kind="head"], [data-rv-kind="frame"])[data-rv="in"] {
  -webkit-mask: linear-gradient(#000 0 0) left / var(--rv-p) 100% no-repeat; mask: linear-gradient(#000 0 0) left / var(--rv-p) 100% no-repeat;
  animation: rv-sweep 420ms cubic-bezier(.45, 0, .55, 1) forwards;
}
[data-reveal="3"] .site-rv-frame { display: none; }
[data-reveal="3"] .site-rv-scan { position: absolute; z-index: 5; width: 1px; background: var(--accent); pointer-events: none; animation: rv-scan 420ms cubic-bezier(.45, 0, .55, 1) forwards, rv-settle 120ms ease 400ms forwards; }
@keyframes rv-scan { from { transform: translateX(0); } to { transform: translateX(var(--rv-w)); } }
/* frames (1 and 2): the element's own border waits; the overlay draws top and left from the corner, then right and
   bottom; its contents appear when the frame is closed */
:root:not([data-reveal="3"]) [data-rv-kind="frame"]:is([data-rv="wait"], [data-rv="in"]) { border-color: transparent; }
:root:not([data-reveal="3"]) [data-rv-kind="frame"][data-rv="wait"] > * { visibility: hidden; }
:root:not([data-reveal="3"]) [data-rv-kind="frame"][data-rv="in"] > * { animation: rv-show 0s linear 340ms both; }
@keyframes rv-show { from { visibility: hidden; } to { visibility: visible; } }
.site-rv-frame {
  --e: var(--line);
  position: absolute; z-index: 5; pointer-events: none; box-sizing: border-box;
  background:
    linear-gradient(var(--e), var(--e)) left top / calc(var(--rv-a) * 100%) 1px no-repeat,
    linear-gradient(var(--e), var(--e)) left top / 1px calc(var(--rv-a) * 100%) no-repeat,
    linear-gradient(var(--e), var(--e)) right top / 1px calc(var(--rv-b) * 100%) no-repeat,
    linear-gradient(var(--e), var(--e)) left bottom / calc(var(--rv-b) * 100%) 1px no-repeat;
  animation: rv-frame 360ms cubic-bezier(.22, 1, .36, 1) forwards;
}
[data-reveal="2"] .site-rv-frame { --e: var(--accent); animation: rv-frame 360ms cubic-bezier(.22, 1, .36, 1) forwards, rv-ink 160ms ease 340ms forwards; }
@keyframes rv-frame { 0% { --rv-a: 0; --rv-b: 0; } 55% { --rv-a: 1; --rv-b: 0; } 100% { --rv-a: 1; --rv-b: 1; } }
@keyframes rv-ink { to { opacity: .35; } }

/* the loading state: grid paper, a hairline drawing in progress (a settled grey copy under it, so a pass never
   starts from blank), and a pink progress tick along the foot; it fades once the content is in */
.site-loading {
  --g: color-mix(in srgb, var(--ink) 7%, transparent); --g2: color-mix(in srgb, var(--ink) 3.5%, transparent);
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; pointer-events: none;
  background-color: var(--bg);
  background-image: linear-gradient(var(--g) 1px, transparent 1px), linear-gradient(90deg, var(--g) 1px, transparent 1px),
    linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  transition: opacity .3s ease;
}
[data-site-loading="done"] > .site-loading { opacity: 0; }
.site-loading svg { width: min(56%, 300px); height: auto; overflow: visible; fill: none; stroke-width: .6; stroke-linecap: round; stroke-linejoin: round; }
.site-loading .b :is(path, circle) { stroke: color-mix(in srgb, var(--ink) 16%, transparent); }   /* the settled copy */
.site-loading .p :is(path, circle) { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: site-draw 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.site-loading .p :nth-child(2) { animation-delay: .15s; } .site-loading .p :nth-child(3) { animation-delay: .3s; }
.site-loading .p :nth-child(4) { animation-delay: .45s; } .site-loading .p :nth-child(5) { animation-delay: .6s; }
@keyframes site-draw { 0% { stroke-dashoffset: 1; stroke: color-mix(in srgb, var(--ink) 55%, transparent); } 55% { stroke-dashoffset: 0; stroke: color-mix(in srgb, var(--ink) 55%, transparent); } 100% { stroke-dashoffset: 0; stroke: color-mix(in srgb, var(--ink) 16%, transparent); } }
.site-loading i { position: absolute; left: 0; bottom: 0; width: 22%; height: 2px; background: var(--accent); animation: site-tick 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes site-tick { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
@media (prefers-reduced-motion: reduce) {
  .site-loading .p :is(path, circle) { animation: none; stroke-dashoffset: 0; stroke: color-mix(in srgb, var(--ink) 35%, transparent); }
  .site-loading i { display: none; }
  .site-loading { transition: none; }
}

/* ---------------------------------------------------------------- the header (sticky; site.js sets its state)
   At the top: 76 px on white with a hairline. Scrolled (data-scrolled): the bar eases to 56 px, white at 92 % with a
   blur, the wordmark a touch smaller. Over a dark band (data-tone="dark"): black at 92 %, white type, the pink CTA
   unchanged. The current page's link, and on the home page the section under the reading line, has a pink underline.
   The header's box keeps its height in the flow whatever the bar does, so compacting never moves the page. */
.site-hd {
  --hd-h: 76px; --hd-h-s: 56px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--hd-h); pointer-events: none;
}
.site-hd-bar {
  position: relative;   /* Product ▾'s panel hangs from its bottom rule */
  box-sizing: border-box; height: var(--hd-h); pointer-events: auto; color: var(--ink);
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: height .32s cubic-bezier(.22, 1, .36, 1), background-color .32s ease, border-color .32s ease, color .32s ease;
}
.site-hd[data-scrolled] .site-hd-bar {
  height: var(--hd-h-s); background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.site-hd[data-tone="dark"] .site-hd-bar { color: var(--dark-ink); background: color-mix(in srgb, var(--dark-bg) 92%, transparent); border-color: var(--dark-line); }
.site-hd[data-tone="dark"] .site-hd-book { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark-ink) 38%, transparent); }
.site-hd-in { --hd-gap: 40px; box-sizing: border-box; display: flex; align-items: center; gap: var(--hd-gap); height: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--k-pad); }
.site-hd-logo { display: inline-flex; flex: none; line-height: 0; border-radius: 2px; color: inherit; }
.site-wm { display: block; width: auto; height: 24px; transition: height .32s cubic-bezier(.22, 1, .36, 1); }
.site-hd[data-scrolled] .site-wm { height: 20px; }
.site-hd-nav { margin-left: auto; }
.site-hd-nav > ul { display: flex; align-items: center; gap: 36px; margin: 0; padding: 0; list-style: none; }
.site-hd-nav :is(a, .site-hd-pbtn) {
  display: inline-flex; align-items: center; padding: 6px 0; border: 0; color: inherit; text-decoration: none; font: 400 13px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))) left bottom / 0 var(--active-weight, 2px) no-repeat;
  transition: background-size .32s cubic-bezier(.22, 1, .36, 1);
}
.site-hd-nav :is(a, .site-hd-pbtn):hover { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; }
.site-hd-nav a:is([aria-current="true"], [aria-current="page"]), .site-hd-product[data-current] .site-hd-pbtn {
  background-image: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))); background-size: 100% var(--active-weight, 2px);
}
.site-hd :focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
.site-hd .site-btn { min-width: 0; min-height: 36px; gap: 14px; padding: 0 13px; font-size: 12px; }
.site-hd-book + .site-hd-try { margin-left: calc(12px - var(--hd-gap)); }   /* the pair sits 12 px apart, whatever the bar's gap */
.site-hd-menu {
  display: none; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border: 1px solid currentColor; border-radius: 0;
  background: none; color: inherit; font: 400 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.site-hd .ic { width: 16px; height: 16px; flex: none; }

/* Product ▾: a disclosure (site.js), drawn as the site's drafting boxes are (the promo card, the use-case legend): square,
   one hairline, the page's white, no shadow. The bar is its containing block, so it hangs from the bar's bottom rule
   (no gap, no overlap), at rest and compact alike; with no left set, it keeps its place under the Product label. */
.site-hd-pbtn { gap: 6px; cursor: pointer; }
.site-hd-pbtn .ic { width: 12px; height: 12px; transition: transform .2s ease; }
.site-hd-pbtn[aria-expanded="true"] .ic { transform: rotate(180deg); }   /* the caret flips while it's open */
.site-hd-panel { display: none; position: absolute; top: calc(100% + 1px); }
.site-hd-pbtn[aria-expanded="true"] + .site-hd-panel { display: block; }
.site-hd-panel ul { min-width: 192px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-top: 0; background: var(--bg); color: var(--ink); }
.site-hd-panel li + li { border-top: 1px solid var(--line); }
.site-hd[data-tone="dark"] .site-hd-panel :is(ul, li) { border-color: var(--dark-line); }
.site-hd[data-tone="dark"] .site-hd-panel ul { background: var(--dark-bg); color: var(--dark-ink); }
/* the rows: the nav's own mono caps, and its underline under the word: ink on hover and focus, pink on the current page */
.site-hd-nav .site-hd-panel a { display: flex; padding: 10px 14px; }
.site-hd-nav .site-hd-panel a, .site-hd-nav .site-hd-panel a:hover { background: none; }   /* the underline is the word's (below), not the row's */
.site-hd-panel a > span {
  padding: 3px 0; margin: -3px 0;
  background: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))) left bottom / 0 var(--active-weight, 2px) no-repeat;
  transition: background-size .32s cubic-bezier(.22, 1, .36, 1);
}
.site-hd-panel a:is(:hover, :focus-visible) > span { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; }
.site-hd-panel a[aria-current="page"] > span { background-image: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))); background-size: 100% var(--active-weight, 2px); }
.site-hd .site-hd-panel a:focus-visible { outline: none; }
.site-hd-panel a:focus-visible > span { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: 3px; }

.site-skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--ink); color: var(--bg); font: 400 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.site-skip:focus { top: 12px; }

@media (max-width: 1279px) { .site-hd-nav > ul { gap: 22px; } .site-hd-in { --hd-gap: 28px; } }
@media (max-width: 1023px) {
  .site-hd { --hd-h: 72px; }
  .site-hd-nav { display: none; }
  .site-hd-book { margin-left: auto; }
  .site-hd-in { --hd-gap: 12px; }
  .site-hd-menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .site-hd { --hd-h: 64px; --hd-h-s: 56px; }
  .site-wm { height: 22px; }
  .site-hd[data-scrolled] .site-wm { height: 20px; }
  .site-hd .site-hd-try { margin-left: auto; padding: 0 11px; gap: 10px; }
  .site-hd .site-hd-book { display: none; }   /* a phone's bar: the wordmark, Try Adam and Menu; Book a demo is in the menu */
}

/* ---------------------------------------------------------------- the phone menu: a full-height sheet (a modal <dialog>) */
.site-menu {
  box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.site-menu[open] { display: flex; flex-direction: column; }
.site-menu::backdrop { background: transparent; }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--line); }
.site-menu-top img { display: block; width: auto; height: 22px; }
.site-menu-x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; }
.site-menu-group { margin: 20px 0 0; font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.site-menu nav ul { margin: 0; padding: 0; list-style: none; }
/* the phone menu is one plain list: Use cases, Blog, Careers (Tong, 15 Oct, evening: "no need to do this product thing for now,
   make it cleaner"); Product stays in the desktop bar. .site-menu-group and .site-menu-sub are unused until it returns */
.site-menu nav a {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: var(--k-weight); font-size: 32px; line-height: 1.1; letter-spacing: -.02em;
}
.site-menu nav a[aria-current="page"]::after { content: ''; width: 8px; height: 8px; background: var(--active, var(--accent)); }   /* the current page */
.site-menu-ctas { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.site-menu .site-menu-cta { width: 100%; min-height: 52px; }
.site-menu :focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
html.site-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .site-menu[open] { animation: site-menu-in .26s cubic-bezier(.22, 1, .36, 1); }
  @keyframes site-menu-in { from { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) {
  .site-hd-bar, .site-wm, .site-hd-nav :is(a, .site-hd-pbtn), .site-hd-pbtn .ic, .site-hd-panel a > span { transition: none; }
}

/* ---------------------------------------------------------------- the footer (the footer study, on the page's tokens) */
.site-ft { --ft-dim: color-mix(in srgb, var(--ink) 56%, transparent); --ft-mid: color-mix(in srgb, var(--ink) 64%, transparent);
  padding-bottom: 32px; background: var(--bg); color: var(--ink); }
:where(.site-ft) a:not(.site-btn) { color: inherit; text-decoration: none; }   /* buttons keep their own colours */
.site-ft a:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: 3px; }
.site-ft-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-top: var(--sec-head-gap); }
.site-ft-say { grid-column: 1 / span 7; }
.site-ft-title {
  margin: 0; font-family: var(--font-display); font-weight: var(--k-weight); font-size: clamp(40px, 6.11vw, 88px); line-height: var(--leading-display, .96);
  letter-spacing: var(--k-track-h1); white-space: nowrap;
}
.site-ft-ctas { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 10px; }
/* a page's own sign-off (stamp.mjs, from <body data-site-signoff>), with an optional lead: on one line at every width
   (Tong, 15 Oct, evening: "make it one line, you can use smaller text"), so it takes the footer title's size or less,
   whichever fits its column. 9.6cqi fits /migrations/' "See it with your models." (9.96 em long); a longer sign-off
   needs a smaller factor. */
.site-ft-say:has(.site-ft-title--wrap) { container-type: inline-size; }
.site-ft-title.site-ft-title--wrap { white-space: nowrap; font-size: min(clamp(40px, 6.11vw, 88px), 9.6cqi); }
.site-ft-lead { max-width: 520px; margin: 24px 0 0; font-family: var(--font-body); font-size: var(--k-lead); line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
.site-ft-cols {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 56px; padding: 32px 0 56px; border-top: 1px solid var(--line);   /* every hairline is the grey one (Tong, 15 Oct: 1.12, 1.19) */
  font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.site-ft-stack { display: contents; }   /* two stacks of three groups, for phones; wider, the six are the grid's columns */
.site-ft-col-h { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ft-mid); }
.site-ft-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 0 0; list-style: none; }
.site-ft-col a { color: var(--ft-dim); transition: color .15s; }
.site-ft-col a:hover, .site-ft-base a:hover { color: var(--ink); }
/* the optional band: the logo construct, full width, at the drawing's own aspect (stamp with <!-- site:footer band -->) */
.site-ft-band { container-type: inline-size; }
.site-ft-construct { display: block; width: 100%; aspect-ratio: 780 / 284; border: 0; background: transparent; color-scheme: normal; }
/* in dark mode the frame is dark too (construct.css matches it), so it stays transparent and its ground follows */
:root[data-theme="dark"] .site-ft-construct { color-scheme: dark; }
@container (max-width: 599px) { .site-ft-construct { aspect-ratio: 670 / 300; } }
.site-ft-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 20px;
  font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ft-mid);
}
.site-ft-base a { color: inherit; }
.site-ft-base > :last-child { margin-left: auto; }   /* wrapped onto its own line (phones), the email keeps the right edge */
@media (max-width: 900px) {
  .site-ft-top { display: block; }
  .site-ft-title { white-space: normal; }
  .site-ft-ctas { margin-top: 28px; }
  .site-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 40px; padding-bottom: 40px; }
}
/* under 900 px the link groups fold (Tong, 15 Oct, evening: "make this part shorter", after Ramp's phone footer): each is
   its heading row, 44 px over its hairline, with a quiet +/− (site.js makes the heading a button and shows or hides the
   list, all shut at first); two stacks of three side by side, each growing on its own as a group opens */
@media (width < 900px) {
  .site-ft-cols { gap: 0 16px; padding-top: 0; }
  .site-ft-stack { display: flex; flex-direction: column; min-width: 0; }
  .site-ft-col-h:has(> .site-ft-tog) { padding-bottom: 0; }
  .site-ft-col:has(.site-ft-tog) ul { gap: 0; padding: 6px 0 14px; }
  .site-ft-col:has(.site-ft-tog) a { display: block; padding-block: 5px; }
}
.site-ft-tog {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .15s;
}
.site-ft-tog[aria-expanded="true"] { color: var(--ink); }
@media (hover: hover) { .site-ft-tog:hover { color: var(--ink); } }
.site-ft-tog:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: 2px; }
.site-ft-pm { position: relative; flex: none; width: 9px; height: 9px; }   /* + shut, − open: two 1 px strokes */
.site-ft-pm::before, .site-ft-pm::after { content: ''; position: absolute; background: currentColor; }
.site-ft-pm::before { left: 0; top: 4px; width: 9px; height: 1px; }
.site-ft-pm::after { left: 4px; top: 0; width: 1px; height: 9px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.site-ft-tog[aria-expanded="true"] .site-ft-pm::after { transform: scaleY(0); }
/* a shut group: gone, or, where the browser has hidden="until-found", kept for find in page (which opens it) */
.site-ft-col ul[hidden]:not([hidden="until-found" i]) { display: none; }
.site-ft-col ul[hidden="until-found" i] { padding-block: 0; }
@media (max-width: 767px) { .site-ft-ctas .site-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .site-ft-col a, .site-ft-tog, .site-ft-pm::after { transition: none; } }

/* ---------------------------------------------------------------- the Klein study (?accent=klein): the wordmark's faces */
:root[data-accent="klein"] .site-wm [fill="#ff2d92" i] { fill: #002fa7; }
:root[data-accent="klein"] .site-wm [fill="#fc7ab1" i] { fill: #99acdc; }
:root[data-accent="klein"] .site-wm [fill="#c12d9c" i] { fill: #25272d; }
:root[data-accent="klein"] :is(.site-hd[data-tone="dark"], :root[data-theme="dark"] .site-hd) .site-wm :is([fill="#ff2d92" i], [fill="#002fa7" i]) { fill: #4a6fe3; }
:root[data-accent="klein"] :is(.site-hd[data-tone="dark"], :root[data-theme="dark"] .site-hd) .site-wm :is([fill="#c12d9c" i], [fill="#25272d" i]) { fill: #4a4e57; }
/* the site's raspberry (Tong, 15 Oct, review 1.20): the a in the page's accent, its faces in the accent's lighter and
   darker shades, on either tone of the bar; the phone menu shows the matching -raspberry file (the brand files stay).
   In dark mode the a is the brand's own hot pink, as on every black ground (docs/dark-mode.md) */
:root[data-accent="raspberry"]:not([data-theme="dark"]) .site-wm [fill="#ff2d92" i] { fill: #d8277c; }
:root[data-accent="raspberry"]:not([data-theme="dark"]) .site-wm [fill="#fc7ab1" i] { fill: #e87db0; }
:root[data-accent="raspberry"]:not([data-theme="dark"]) .site-wm [fill="#c12d9c" i] { fill: #9c1e5c; }
.site-menu-top :is(.site-menu-img-klein, .site-menu-img-raspberry), :root:is([data-accent="klein"], [data-accent="raspberry"]) .site-menu-top .site-menu-img { display: none; }
:root[data-accent="klein"] .site-menu-top .site-menu-img-klein, :root[data-accent="raspberry"] .site-menu-top .site-menu-img-raspberry { display: block; }
/* dark mode: the wordmark with light letters (the brand's adam-wordmark.svg, hot pink a; klein's own on dark) */
.site-menu-top :is(.site-menu-img-dark, .site-menu-img-klein-dark), :root[data-theme="dark"] .site-menu-top img[class] { display: none; }
:root[data-theme="dark"]:not([data-accent="klein"]) .site-menu-top img.site-menu-img-dark, :root[data-theme="dark"][data-accent="klein"] .site-menu-top img.site-menu-img-klein-dark { display: block; }