/* =========================================================================
   Stratus Labs — site styles
   Tokens, type, and layout transcribed from design.pen (v2.17).
   Dark is the primary theme; the light palette (l-* tokens in the design)
   is applied when the visitor's system asks for light.
   ========================================================================= */

/* Self-hosted so the type never falls back to a system grotesk. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --bg: #0B0C0E;
  --surface: #0F1115;
  --surface-2: #14171C;
  --text: #F4F5F7;
  --text-2: #C2C7CE;
  --muted: #8B929B;
  --hairline: rgba(255, 255, 255, 0.102);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --accent: #3D7DD9;
  --accent-dim: rgba(61, 125, 217, 0.333);
  --link: #3D7DD9;
  --amber: #D9993D;
  --ok: #4EA96B;

  /* terminal / code chrome stays dark in both themes */
  --code-bg: #0E1013;
  --code-head: #131619;
  --code-line: rgba(255, 255, 255, 0.102);
  --code-text: #F4F5F7;
  --code-text-2: #C2C7CE;
  --code-muted: #8B929B;
  --dot: #3A3F46;
  --dot-sm: #33383F;

  --bar-fill: rgba(11, 12, 14, 0.77);

  --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 120px;
  --page: 1440px;
  --bar-h: 64px;
  /* what the bar actually takes out of the page: its content row plus the
     hairline underneath, which holds flow space even while it is transparent.
     Tracks --bar-h, so the mobile override below feeds through. */
  --bar-outer: calc(var(--bar-h) + 1px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --surface: #F6F7F8;
    --surface-2: #EDEFF2;
    --text: #0B0C0E;
    --text-2: #3A4048;
    --muted: #5F666F;
    --hairline: rgba(11, 12, 14, 0.122);
    --hairline-strong: rgba(11, 12, 14, 0.28);
    /* the blue fill stays; only text links darken — #3D7DD9 is 4.1:1 on white */
    --accent-dim: rgba(44, 100, 180, 0.28);
    --link: #2C64B4;
    --bar-fill: rgba(255, 255, 255, 0.78);
  }
}

@media (max-width: 1180px) {
  .capset { grid-template-columns: repeat(3, 1fr); gap: 32px; }
 :root { --gutter: 56px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --bar-h: 56px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-dim); color: var(--text); }

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
}
.skip:focus { left: 16px; top: 12px; }

/* ---------- shared type + bits ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.eyebrow--amber { color: var(--amber); }

.tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.7px;
  color: var(--amber);
  white-space: nowrap;
}
.tag--muted { color: var(--muted); }

/* Buttons. Both tiers are glass in dark mode ("03 · Homepage — Desktop"): a
   translucent fill over a 10px blur, ringed by a 1px gradient that is brighter
   at the bottom than the top. The ring is drawn on ::after with a masked
   overlay rather than border-image, which cannot round its corners, or a
   padding-box/border-box background pair, which would tint the translucent
   fill from underneath. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -0.1px;
  padding: 13px 21px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 120ms ease;
}
.btn--primary {
  background: rgba(15, 17, 21, 0.6);
  color: #F4F5F7;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}
.btn--primary::after {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.278), rgba(255, 255, 255, 0.122));
}
.btn--primary:hover { background: rgba(24, 27, 33, 0.76); }
.btn--primary:hover::after { opacity: 0.72; filter: brightness(1.6); }
.btn--secondary {
  background: rgba(255, 255, 255, 0.031);
  color: var(--text-2);
}
.btn--secondary::after {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.122), rgba(255, 255, 255, 0.059));
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.075); color: var(--text); }
.btn--secondary:hover::after { filter: brightness(1.9); }
.btn--sm { padding: 9px 15px; font-size: 13.5px; }
.btn--lg { padding: 13px 22px; font-size: 15px; }

@media (prefers-color-scheme: light) {
  /* glass needs something dark to sit on; on a white page the two tiers go
     back to an ink fill and a hairline outline */
  .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn--primary {
    background: #14171C;
    color: #F4F5F7;
    box-shadow: 0 10px 24px -12px rgba(11, 12, 14, 0.45);
  }
  .btn--primary:hover { background: #24282F; }
  .btn--primary::after { background: rgba(11, 12, 14, 0.9); }
  .btn--primary:hover::after { opacity: 1; filter: none; }
  .btn--secondary { background: none; color: var(--text); }
  .btn--secondary::after { background: var(--hairline-strong); }
  .btn--secondary:hover { background: rgba(11, 12, 14, 0.04); }
  .btn--secondary:hover::after { background: var(--text-2); filter: none; }
}

.arrow-link {
  color: var(--link);
  font-size: 14.5px;
  font-weight: 500;
  display: inline-block;
  transition: opacity 120ms ease;
}
.arrow-link:hover { opacity: 0.78; }

.icon-link {
  display: inline-flex;
  color: var(--text-2);
  transition: color 120ms ease;
}
.icon-link:hover { color: var(--text); }

/* =========================================================================
   Top bar + mega panels
   ========================================================================= */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, backdrop-filter 160ms ease;
}
.bar.is-scrolled,
.bar.has-panel {
  background: var(--bar-fill);
  border-bottom-color: var(--hairline);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.bar__inner {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark { display: flex; align-items: center; color: var(--text); }
.wordmark__svg { width: 172.5px; height: 20px; }

.nav { align-self: stretch; }
.nav__list { display: flex; align-items: stretch; gap: 30px; height: 100%; }

.trigger {
  position: relative;
  /* a trigger is a button or a link depending on whether its section has a
     page yet; inline-flex makes both of them fill the bar's height */
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.1px;
  color: var(--text-2);
  cursor: pointer;
  transition: color 120ms ease;
}
.trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 120ms ease;
}
.trigger:hover { color: var(--text); }
.trigger[aria-expanded='true'] { color: var(--text); }
.trigger[aria-expanded='true']::after { opacity: 1; }
.trigger[aria-current='page'] { color: var(--text); }
.trigger[aria-current='page']::after { opacity: 1; background: var(--hairline-strong); }

.bar__actions { display: flex; align-items: center; gap: 20px; }

/* panels */
.panels {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}
.panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  /* full bleed like .bar, with the content column still landing on the page
     gutter — so panel items line up with the wordmark and the page below */
  padding-block: 48px 52px;
  padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
}
.panel[hidden] { display: none; }
.panel.is-open { animation: panel-in 140ms ease-out both; }
.panel.is-open.is-swap { animation: none; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.panel__grid { display: grid; gap: 32px; }
.panel__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel__rows { display: grid; gap: 34px; }

.panel__foot {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.panel__foot--tight { margin-top: 30px; padding-top: 26px; }
.panel__foot--end { justify-content: flex-end; }
.panel__note { color: var(--muted); font-size: 13px; }

/* one item inside a panel */
.pitem { display: grid; gap: 5px; align-content: start; }
.pitem__row { display: flex; align-items: center; gap: 6px; }
.pitem__name {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.15px;
  transition: color 120ms ease;
}
.pitem__ext { color: var(--muted); font-size: 12px; }
.pitem__desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pitem:hover .pitem__name { color: var(--link); }
/* nothing to open yet — the row stays put and sits back from the tools that
   ship, matching how the homepage index marks the same tool */
.pitem--soon { cursor: default; }
.pitem--soon .pitem__name { color: var(--text-2); }
.pitem--soon:hover .pitem__name { color: var(--text-2); }

/* agent panel */
.panel--agent { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; }
.panel__promo {
  border-right: 1px solid var(--hairline);
  padding-right: 32px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.panel__promo h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.5px; }
.panel__promo p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.promo__links { display: flex; align-items: center; gap: 22px; padding-top: 6px; flex-wrap: wrap; }
.promo__links a { color: var(--link); font-size: 13.5px; font-weight: 500; }
.promo__links a:hover { opacity: 0.78; }
.badges { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.badge {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* company panel is a right-anchored sheet, not full bleed */
/* held for the Company panel, which is coming back once its pages exist */
.panel--company {
  left: auto;
  /* the drawer's right edge lands on the content column, under the CTA */
  right: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  width: min(660px, 100%);
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding: 36px 40px 36px;
  margin-inline: 0;
}
@media (max-width: 767px) {
  .panel--company { right: 0; border-right: 0; }
}

/* =========================================================================
   Mobile bar + overlay
   ========================================================================= */
.bar__mobile { display: none; align-items: center; gap: 4px; }
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overscroll-behavior: contain;
}
.mnav[hidden] { display: none; }
.mnav__top { display: flex; flex-direction: column; min-height: 0; }
.mnav__bar {
  height: 56px;
  flex: none;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}
.mnav__scroll { overflow-y: auto; padding: 0 20px; -webkit-overflow-scrolling: touch; }

.acc { border-bottom: 1px solid var(--hairline); }
.acc__head {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--text-2);
  cursor: pointer;
}
.acc__head[aria-expanded='true'] { color: var(--text); }
.acc__head[aria-expanded='true'] .acc__chevron { color: var(--accent); transform: rotate(180deg); }
.acc__chevron { color: var(--muted); transition: transform 140ms ease, color 140ms ease; flex: none; }
.acc__panel { padding-bottom: 14px; }
.acc__panel[hidden] { display: none; }
.acc__item {
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--hairline);
  padding: 10px 0 10px 14px;
}
.acc__item .pitem__name { font-size: 15px; }
.acc__item .pitem__desc { line-height: 1.45; }
.acc__item--soon { cursor: default; }
.acc__item--soon .pitem__name { color: var(--text-2); }

/* panel furniture carried down into the mobile accordion */
.acc__blurb {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 2px 0 12px 14px;
  border-left: 1px solid var(--hairline);
}
.acc__foot {
  border-top: 1px solid var(--hairline);
  margin: 12px 0 4px 14px;
  padding-top: 14px;
  display: grid;
  gap: 12px;
}
.acc__foot--end { justify-items: start; }
.acc__foot .badges { padding-top: 0; }
.acc__foot .panel__note { margin: 0; }

.mnav__dock {
  flex: none;
  border-top: 1px solid var(--hairline);
  padding: 16px 20px 34px;
  display: grid;
  gap: 10px;
}

/* =========================================================================
   Code + terminal chrome (shared)
   ========================================================================= */
.code {
  background: var(--code-bg);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  overflow: hidden;
}
.code__head {
  height: 36px;
  background: var(--code-head);
  border-bottom: 1px solid var(--code-line);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--code-muted);
}
.code__head span:last-child { font-size: 10.5px; }
.code__body {
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--code-muted);
}
.code__body .l { line-height: 23px; white-space: pre; }
.code__body .v { color: var(--code-text); }
.code__body .v2 { color: var(--code-text-2); }
.code__body .amber { color: var(--amber); }
.code__body .acc { color: var(--accent); border: 0; }
.code__prose { color: var(--code-text-2); line-height: 1.75; white-space: normal; }

.term {
  background: var(--code-bg);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  overflow: hidden;
}
.term__chrome {
  height: 38px;
  background: var(--code-head);
  border-bottom: 1px solid var(--code-line);
  padding: 0 14px;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
}
.term__dots { display: flex; gap: 7px; }
.term__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.term__title {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--code-muted);
}
.term__body {
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--code-muted);
}
.term__body .l { line-height: 24px; white-space: pre-wrap; }
.term__body .p { color: var(--accent); }
.term__body .in { color: var(--code-text); }
.term__body .out { color: var(--code-text-2); }
.caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--accent);
  vertical-align: -3px;
  animation: blink 1.05s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.install {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}
.install button { color: var(--muted); cursor: pointer; display: inline-flex; }
.install button:hover { color: var(--text); }
.install .copied { color: var(--accent); }

/* =========================================================================
   Sections
   ========================================================================= */
.section { padding: 112px 0; }
.section > .wrap { display: block; }

/* --- hero (home) --- *\
   Composition from the "Crisp 02 · Dissolved signal" export: a 948px field
   with the atmosphere behind it, the headline dropped low, and the subhead and
   buttons on the bottom line.

   The field never runs past the fold: 948px is the design height, but it gives
   way to whatever is left under the sticky bar on a shorter window. svh is the
   viewport with a phone's browser chrome showing, so the buttons stay on
   screen before the URL bar collapses rather than after.
\* */
.hero {
  position: relative;
  min-height: 948px;
  min-height: min(948px, calc(100svh - var(--bar-outer)));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 104px;
  overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(38px, 7.2vw, 104px);
  line-height: 0.93;
  letter-spacing: -0.031em;
  font-weight: 600;
  margin-bottom: 56px;
}

/* Atmosphere. The art sits straight on the black, ramping from 20% opacity at
   the top to 50% at the bottom — the mask does the fade, so the dither stays
   crisp rather than being veiled by a second layer. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('hero-atmosphere.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}
/* A scrim over the art, 10% black at the top and 50% at the bottom, so the
   subhead and the buttons sit on something darker than the dither. The ramp
   is weighted late rather than linear: the headline needs no help, and an
   even fade would dim the middle of the picture to buy legibility at the
   bottom. Above the art, below the copy. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.14) 45%,
    rgba(0, 0, 0, 0.28) 75%,
    rgba(0, 0, 0, 0.5) 100%
  );
}
@media (prefers-color-scheme: light) {
  /* the art is a negative — it reads as a black slab on a white page */
  .hero__field { display: none; }
  /* and with no art there is nothing to scrim */
  .hero::after { display: none; }
  .hero__sub { color: var(--muted); }
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
}
.hero__sub {
  /* lifted off --muted: the art runs at 50% behind this line, and #8B929B
     disappears into the dither */
  color: #C9CED5;
  font-size: 17px;
  line-height: 1.6;
  max-width: 600px;
}
.hero__buttons { display: flex; gap: 12px; flex: none; }

/* A short desktop window (a docked inspector, a half-height browser) runs out
   of room before min-height can help: the padding, headline and bottom row
   have a floor of their own. Tighten the rhythm so the field keeps fitting
   further down. Below roughly 480px of usable height the headline alone
   cannot fit and the section grows past the fold. */
@media (min-width: 768px) and (max-height: 700px) {
  .hero { padding-block: 56px; }
  .hero h1 { margin-bottom: 32px; }
}
/* the subhead's break only lands where the line is long enough to need it */
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: inline; } }


/* --- what we do --- */
.thesis {
  font-size: clamp(27px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.029em;
  line-height: 1.15;
  max-width: 820px;
}
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 64px; }
.door {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 26px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.door h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.7px; }
.door p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* --- agent in depth --- */
.split { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 64px; align-items: start; }
.split--code { grid-template-columns: 620px minmax(0, 1fr); }
.prose-h2 {
  font-size: clamp(30px, 3.3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.031em;
  line-height: 1;
}
.h2 {
  font-size: clamp(27px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.029em;
  line-height: 1.1;
}
.lede { color: var(--text-2); font-size: 17px; line-height: 1.6; }
.body { color: var(--muted); font-size: 16px; line-height: 1.65; }
.stack { display: grid; gap: 20px; align-content: start; }
.inline-links { display: flex; gap: 24px; padding-top: 6px; flex-wrap: wrap; }
.inline-links a { color: var(--link); font-size: 15px; font-weight: 500; }
.inline-links a:hover { opacity: 0.78; }

.caps { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 72px; }
.caps > div {
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  padding: 22px 24px 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
.caps > div:first-child { border-left: 0; padding-left: 0; }
.caps h3 { font-size: 15.5px; font-weight: 550; letter-spacing: -0.2px; }
.caps p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* --- surfaces --- */
.section__head { display: grid; gap: 12px; padding-bottom: 44px; }
.section__head p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 660px; }

.surfaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.surface { display: grid; gap: 16px; align-content: start; }
.surface__meta { border-top: 1px solid var(--hairline); padding-top: 16px; display: grid; gap: 5px; }
.surface__meta h3 { font-size: 15.5px; font-weight: 550; }
.surface__meta p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.sketch {
  height: 158px;
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  font-family: var(--mono);
  color: var(--code-muted);
  font-size: 10px;
}
.sketch__chrome {
  height: 22px;
  background: var(--code-head);
  border-bottom: 1px solid var(--code-line);
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sketch__dots { display: flex; gap: 4px; }
.sketch__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-sm); }
.sketch__url {
  flex: 1;
  background: #1A1E24;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 8.5px;
}
.sketch__body { padding: 12px; display: grid; gap: 6px; }
.sketch__body .in { color: var(--code-text); }
.sketch__body .out { color: var(--code-text-2); }
.sketch__body .p { color: var(--accent); }
.sketch__msg { display: flex; gap: 8px; padding: 13px 12px; }
.sketch__avatar {
  width: 22px; height: 22px; flex: none;
  background: var(--accent);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #0B0C0E;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}
.sketch__msg h4 { margin: 0; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--code-text); }
.sketch__msg time { font-size: 9px; }
.sketch__msg p { font-family: var(--font); font-size: 10.5px; line-height: 1.5; color: var(--code-text-2); margin-top: 4px; }
.sketch__row {
  height: 30px;
  border-bottom: 1px solid var(--code-line);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--code-text-2);
}
.sketch__row span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--code-muted); }
.sketch__row i { width: 5px; height: 5px; border-radius: 50%; background: var(--code-muted); }
.sketch__row i.run { background: var(--accent); }
.sketch__row i.wait { background: var(--amber); }
.sketch__menubar {
  height: 20px;
  background: #16191E;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 10px;
  font-size: 9px;
}
.sketch__menuitem {
  background: #252A31;
  border-radius: 3px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--code-text-2);
}
.sketch__menuitem i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); }
.sketch__dropdown {
  position: absolute;
  top: 26px;
  left: 112px;
  width: 150px;
  background: #15181D;
  border: 1px solid var(--code-line);
  border-radius: 5px;
  overflow: hidden;
}
.sketch__dropdown div {
  height: 26px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font);
  font-size: 10px;
  color: var(--code-text-2);
}
.sketch__dropdown span { font-family: var(--mono); font-size: 9px; color: var(--code-muted); }

/* --- services rows --- */
.rows { display: grid; padding-top: 48px; }
.row {
  border-top: 1px solid var(--hairline);
  padding: 30px 0;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 64px;
}
.rows .row:last-child { border-bottom: 1px solid var(--hairline); }
.row h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.029em;
  line-height: 1.05;
}
.row__copy { display: grid; gap: 8px; padding-top: 6px; align-content: start; }
.row__copy p:first-child { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.row__copy p + p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* --- tools index --- */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
}
.head-row p { color: var(--muted); font-size: 14.5px; }

.tool {
  height: 60px;
  border-top: 1px solid var(--hairline);
  display: grid;
  /* 230px so the longest name, model-output-comparison, stays on one line */
  grid-template-columns: 230px minmax(0, 1fr) 52px 16px;
  align-items: center;
  gap: 32px;
  transition: background-color 120ms ease;
}
.index .tool:last-child { border-bottom: 1px solid var(--hairline); }
.tool__name { font-family: var(--mono); font-size: 15px; color: var(--text); }
.tool__name .tag { display: none; }
/* a row with a badge has no arrow, so the badge takes the arrow's column too
   and ends where the arrows end */
.tool > .tag { grid-column: 3 / -1; justify-self: end; }
.tool__desc { color: var(--muted); font-size: 15px; }
.tool svg { color: var(--link); transition: transform 140ms ease; }
.tool:hover svg { transform: translateX(4px); }
/* nothing to click yet: no arrow, no hover, and the row sits back from the
   ones that ship. The arrow column stays in the grid so the rule above it
   still lines up. */
.tool--soon { cursor: default; }
.tool--soon .tool__name { color: var(--text-2); }

/* --- agent roster teaser --- *\
   A wall of personas that runs off the right edge of the page and dissolves,
   so the five on screen read as the near end of a longer roster rather than
   the whole cast. The rail reaches into the page gutter with a negative
   margin — the gutter is exactly what .wrap pads by, so it lands on the
   window edge and never past it — and its own overflow clips the rest.
\* */
.roster {
  /* .split top-aligns its columns, which left the shorter card wall riding
     high against the copy. In one column this is a no-op — the row is its
     own height. */
  align-self: center;
  /* out to the physical page edge, then clipped: nothing escapes to scroll */
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
  /* room for a hovered card to lift without the clip cutting its top edge;
     the negative margin keeps the box the same height as before */
  padding-block: 6px;
  margin-block: -6px;
  -webkit-mask-image: linear-gradient(to right, #000 48%, transparent 95%);
  mask-image: linear-gradient(to right, #000 48%, transparent 95%);
}
.roster__rail { display: grid; gap: 20px; width: max-content; }
.roster__row { display: flex; gap: 20px; }
/* the second row breaks the column, so the wall reads as a crowd */
.roster__row--offset { margin-left: 68px; }

.persona {
  width: 172px;
  flex: none;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  /* not links and not selectable prose — an I-beam over a card is a lie */
  cursor: default;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
/* the card steps forward and the face warms up; enough to say the roster is
   made of people, not enough to look clickable */
.persona:hover {
  transform: translateY(-3px);
  background: var(--surface-2);
  border-color: var(--hairline-strong);
}
.persona:hover .persona__face { filter: saturate(1.15) brightness(1.06); }
.persona__face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  transition: filter 160ms ease;
  /* placeholders live in assets/agents/<name>.webp — drop the real art in
     over them and nothing here changes */
  background: var(--surface-2);
}
.persona__name { font-size: 15px; font-weight: 550; letter-spacing: -0.2px; }
.persona__role { color: var(--muted); font-size: 13px; }
/* a sixth card with nothing in it, to carry the row into the fade */
.persona--more { opacity: 0.5; }
.persona--more:hover { transform: none; background: var(--surface); border-color: var(--hairline); }
.persona__face--empty { display: block; }

/* --- closing cta --- */
.cta { padding: 136px 0 140px; display: grid; gap: 32px; justify-items: center; text-align: center; }
.cta h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.05;
  max-width: 800px;
}
.cta p { color: var(--muted); font-size: 16px; max-width: 600px; }
.cta__buttons { display: flex; gap: 14px; padding-top: 8px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { padding-top: 72px; }
.footer__cols {
  display: grid;
  grid-template-columns: 300px repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 64px;
}
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand strong { font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.footer__brand p { color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 230px; }
.footer__social { display: flex; gap: 16px; padding-top: 6px; color: var(--muted); }
.footer__social a { color: var(--muted); display: inline-flex; }
.footer__social a:hover { color: var(--text); }
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.9px;
  color: var(--muted);
}
.footer__links { display: grid; gap: 9px; padding-top: 4px; }
.footer__links a { color: var(--text-2); font-size: 14px; }
.footer__links a:hover { color: var(--text); }
/* a tool with no page yet: same row, no link, and the note set back so the
   column still scans as a list of names */
.footer__soon { color: var(--muted); font-size: 14px; cursor: default; }
.footer__bottom {
  height: 64px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: 13px;
}
.footer__bottom nav { display: flex; align-items: center; gap: 22px; }
.footer__bottom a:hover { color: var(--text); }
.status { display: inline-flex; align-items: center; gap: 7px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* =========================================================================
   Agent page
   ========================================================================= */
.agent-hero { padding: 96px 0 104px; }
.agent-hero__split { display: grid; grid-template-columns: 580px minmax(0, 540px); gap: 80px; justify-content: space-between; align-items: start; }
.agent-hero h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 22px 0 24px;
}
.agent-hero__sub { color: var(--muted); font-size: 17px; line-height: 1.6; }
.agent-hero__buttons { display: flex; gap: 12px; padding: 30px 0 24px; flex-wrap: wrap; }
.eyebrow-row { display: flex; align-items: center; gap: 10px; }
.eyebrow-row .sep { color: var(--hairline-strong); font-family: var(--mono); font-size: 11px; }
.agent-hero__badges {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 48px; }
.step {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 22px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.step__num { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.8px; color: var(--amber); }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.cmd {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  gap: 8px;
}
.cmd .p { color: var(--link); }

.keys { display: grid; padding-top: 32px; }
.key { border-top: 1px solid var(--hairline); padding: 15px 0; display: grid; gap: 5px; }
.key dt { font-family: var(--mono); font-size: 13px; color: var(--text); }
.key dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.feature-rows { display: grid; padding-top: 44px; }
.feature {
  border-top: 1px solid var(--hairline);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 64px;
}
.feature-rows .feature:last-child { border-bottom: 1px solid var(--hairline); }
.feature h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.6px; }
.feature__lead { color: var(--text-2); font-size: 15px; line-height: 1.55; margin-top: 8px; }
.feature p:last-child { color: var(--muted); font-size: 16px; line-height: 1.65; }

/* the capability set: three stacks of named rows, some of them not built yet */
.capset { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.capset__col { align-content: start; }
.capset__col h3 {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.capset .keys { padding-top: 12px; }
.capset .key dt { display: flex; align-items: baseline; gap: 8px; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 44px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.card .arrow-link { font-size: 14px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1180px) {
  .split, .split--code { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .agent-hero__split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .panel--agent { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .surfaces, .cards { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .caps > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .row, .feature { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .capset { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 32px; }
  .hero__buttons { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  /* nav swaps to the hamburger overlay */
  .nav, .bar__actions, .panels { display: none; }
  .bar__mobile { display: flex; }
  .wordmark__svg { width: 172.5px; }

  .section { padding: 72px 0; }
  .hero {
    min-height: 620px;
    min-height: min(620px, calc(100svh - var(--bar-outer)));
    padding-block: 44px 56px;
  }
  .hero h1 { letter-spacing: -0.032em; line-height: 0.97; margin-bottom: 0; }
  .hero__field { background-size: auto 100%; background-position: 58% center; }
  .hero__sub { font-size: 16px; }
  .hero__foot { gap: 24px; margin-top: 18px; }
  .hero__buttons { display: grid; gap: 10px; }
  .hero__buttons .btn { padding: 14px 15px; }


  .doors { padding-top: 36px; }
  .door { padding-top: 22px; gap: 12px; }
  .door h3 { font-size: 21px; letter-spacing: -0.5px; }
  .door p { font-size: 15px; }

  .caps { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .caps > div { border-left: 0; padding: 16px 0; }

  .surfaces, .cards { gap: 16px; row-gap: 26px; }
  .sketch { height: 104px; font-size: 8.5px; }
  .sketch__chrome { height: 18px; padding: 0 8px; }
  .sketch__body { padding: 10px; gap: 5px; }
  .sketch__dropdown { left: 44px; top: 22px; width: 104px; }
  .surface__meta h3 { font-size: 14.5px; }
  .surface__meta p { font-size: 12.5px; }

  .rows, .feature-rows { padding-top: 30px; }
  .row, .feature { padding: 22px 0; gap: 10px; }
  .row h3 { font-size: 24px; letter-spacing: -0.7px; line-height: 1.08; }
  .row__copy p:first-child { font-size: 15px; }
  .row__copy p + p { font-size: 14px; }

  .roster__row--offset { margin-left: 34px; }
  .persona { width: 158px; padding: 16px 16px 18px; }

  .capset { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 28px; }
  .tool {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name arrow' 'desc desc';
    gap: 6px 10px;
    padding: 16px 0;
  }
  .tool__name { grid-area: name; font-size: 14px; display: flex; align-items: center; gap: 10px; }
  .tool__desc { grid-area: desc; font-size: 13.5px; line-height: 1.5; }
  .tool > .tag { display: none; }
  .tool__name .tag { display: inline; font-size: 10px; }
  .tool svg { grid-area: arrow; }

  .cta { padding: 80px 0 88px; gap: 24px; }
  .cta__buttons { flex-direction: column; align-self: stretch; }
  .cta__buttons .btn { width: 100%; }

  .footer { padding-top: 52px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding-bottom: 44px; }
  .footer__bottom { height: auto; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0 28px; }

  .agent-hero { padding: 44px 0 56px; }
  .agent-hero h1 { line-height: 1; letter-spacing: -0.032em; }
  .agent-hero__buttons { display: grid; grid-template-columns: 1fr 1fr; padding: 24px 0 16px; }
  .agent-hero__buttons .btn { padding: 13px 15px; }
  .install { font-size: 12.5px; display: flex; justify-content: space-between; }
  .agent-hero__badges { gap: 8px 20px; }
  .steps { padding-top: 30px; gap: 26px; }
  .keys { padding-top: 24px; }
}

/* tap targets on touch: give small footer / panel links room */
@media (hover: none) {
  .footer__links a, .promo__links a, .inline-links a { padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .panel.is-open { animation: none; }
  /* the colour shift still reads the hover; the lift is what to drop */
  .persona:hover { transform: none; }
}

/* Full width over the densest part of the art: the exported ring is too faint
   to find at phone size, so the hero's secondary gets a definite edge. Dark
   only — in light mode it keeps the ink hairline. */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .hero__buttons .btn--secondary { background: rgba(255, 255, 255, 0.07); }
  .hero__buttons .btn--secondary::after {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.16));
  }
}