/* agent.cloud marketing site. Colour means a release's stage, always as a grainy stripe or dot: build (the mirror)
   green to cyan, ship (the rehearsal) violet to pink, decide (your OK) amber to coral, run (live) blue to cyan.
   Everything else is neutral. Light and dark follow the system unless the visitor picks one (data-theme). */
:root {
  color-scheme: light;
  /* Light is dark's mirror: a pure white page (as dark's is pure black), cool slate greys rather than warm ones, and the
     stage colours a step deeper so a stripe holds its own on white. Text: ink 19.6:1, muted 7.4:1, soft 4.5:1 (headlines). */
  --bg: #ffffff; --surface: #ffffff; --sunk: #f3f5f8; --ink: #0a0c10; --muted: #4d5664; --soft: #6e7887; --line: #e4e8ed; --line-2: #cdd3db;
  --btn-bg: #0a0c10; --btn-ink: #ffffff; --focus: #0891b2;
  --fade: 0%; /* how much colour a stripe starts with: from nothing, out of the page's own white or black */
  --grain-op: .55; --grain-mask: linear-gradient(90deg, transparent 6%, #000 42%); /* the grain only where a stripe is solid: on white, a faint start would read as dust */
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 32px -16px rgba(15, 23, 42, .16);
  --build-a: #10b981; --build-b: #06b6d4; --ship-a: #7c3aed; --ship-b: #db2777; --decide-a: #f59e0b; --decide-b: #ef4444; --run-a: #2563eb; --run-b: #0ea5e9;
  --stop: #dc2626; --stop-ink: #c81e1e; /* the stripe's red, and the tag's text red at 5.7:1 */
  --code-bg: #0b0c0d; --code-ink: #ededed; --code-dim: #7d8288; --code-key: #9ba1a8;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1180px; --gut: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #000000; --surface: #0b0c0d; --sunk: #111214; --ink: #ededed; --muted: #8b9096; --soft: #6b7178; --line: #1f2123; --line-2: #2c2f32;
    --btn-bg: #ededed; --btn-ink: #000000; --focus: #22d3ee; --fade: 0%; --shadow: none; --stop: #f87171; --stop-ink: #f87171; --code-bg: #000000;
    --grain-op: .9; --grain-mask: none; --build-a: #3ecf8e; --build-b: #22d3ee; --ship-a: #8b5cf6; --ship-b: #ec4899; --decide-a: #f59e0b; --decide-b: #f43f5e; --run-a: #3b82f6; --run-b: #22d3ee;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #000000; --surface: #0b0c0d; --sunk: #111214; --ink: #ededed; --muted: #8b9096; --soft: #6b7178; --line: #1f2123; --line-2: #2c2f32;
  --btn-bg: #ededed; --btn-ink: #000000; --focus: #22d3ee; --fade: 0%; --shadow: none; --stop: #f87171; --stop-ink: #f87171; --code-bg: #000000;
  --grain-op: .9; --grain-mask: none; --build-a: #3ecf8e; --build-b: #22d3ee; --ship-a: #8b5cf6; --ship-b: #ec4899; --decide-a: #f59e0b; --decide-b: #f43f5e; --run-a: #3b82f6; --run-b: #22d3ee;
}

/* Each stage's colours, wherever the stage appears */
.build { --a: var(--build-a); --b: var(--build-b); } .ship { --a: var(--ship-a); --b: var(--ship-b); }
.decide { --a: var(--decide-a); --b: var(--decide-b); } .run { --a: var(--run-a); --b: var(--run-b); }
.bar { display: block; position: relative; overflow: hidden; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) var(--fade), transparent), var(--a) 38%, var(--b)); }
.bar::after { content: ''; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: overlay; opacity: var(--grain-op); -webkit-mask-image: var(--grain-mask); mask-image: var(--grain-mask); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(56px, 9vw, 112px) 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); flex: none; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 30px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 600 19px/1 var(--sans); letter-spacing: -.03em; }
.mark { display: inline-flex; gap: 3px; padding: 0 3px; } /* four slashes, one per stage, leaning forward */
.mark i { width: 4px; height: 18px; border-radius: 1px; transform: skewX(-17deg); background: linear-gradient(0deg, var(--a), var(--b)); }
.nav { display: flex; gap: 24px; font-size: 15px; color: var(--muted); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.theme:hover { border-color: var(--line-2); }
.theme svg { width: 18px; height: 18px; }
:root[data-theme='dark'] .theme .moon, :root:not([data-theme='dark']) .theme .sun { display: none; }
:root:not([data-theme]) .theme { display: none; } /* no script, no toggle: the system decides */
@media (max-width: 720px) { .nav { display: none; } .top-r .btn.go { display: none; } } /* the hero has its own Start building; the header keeps Sign in */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px; font: 500 15px/1 var(--sans); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; transition: transform .15s, border-color .15s, background .15s; }
.btn:hover { border-color: var(--muted); }
.btn.go { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.btn.go:hover { transform: translateY(-1px); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.h1 { font: 700 clamp(42px, 6vw, 76px)/1 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.h1 .then { display: block; color: var(--soft); }
.h2 { font: 700 clamp(30px, 4vw, 48px)/1.06 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.h2 .then { display: block; color: var(--soft); }
.h2 .soft { color: var(--soft); }
.lede { margin-top: 24px; max-width: 34em; color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
.sec-h { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 52px); max-width: 860px; }

/* Hero */
.hero { padding: clamp(44px, 8vw, 100px) 0 clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy > .eyebrow { display: flex; margin-bottom: 22px; }
.hero .actions { margin-top: 32px; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Release lines: each release lights the stages it passes through, in order; a code-only release skips straight to
   live, a failed check ends the line. It plays once, then stays still. */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px clamp(14px, 2vw, 24px) 12px; box-shadow: var(--shadow); }
.board-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.board-h .note { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.stations, .line { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); column-gap: 8px; align-items: center; }
.stations span { display: flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; padding-bottom: 12px; }
.stations span:empty { padding: 0; }
.stations span:not(:empty)::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.line { height: 48px; border-top: 1px dashed var(--line); }
.line .what { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.track { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; }
.track > :nth-child(1) { --i: 0; } .track > :nth-child(2) { --i: 1; } .track > :nth-child(3) { --i: 2; } .track > :nth-child(4) { --i: 3; }
.track .bar, .track .gap { height: 12px; border-radius: 6px; }
.track .bar { transform-origin: left; animation: ride .45s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--row) * .3s + var(--i) * .45s); }
.track .gap { border: 1px dashed var(--line-2); }
.track .bar.failed { background: linear-gradient(90deg, color-mix(in srgb, var(--ship-a) var(--fade), transparent), var(--ship-a) 38%, var(--stop)); }
.stoptag { grid-column: 3 / 5; justify-self: start; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stop-ink) 45%, var(--line)); color: var(--stop-ink); font: 500 12px/1.2 var(--sans); white-space: nowrap; animation: arrive .3s ease-out both; animation-delay: calc(var(--row) * .3s + .95s); }
@keyframes ride { from { transform: scaleX(0); } }
@keyframes arrive { from { opacity: 0; transform: translateX(-6px); } }
@media (max-width: 520px) { .stations, .line { grid-template-columns: 70px repeat(4, minmax(0, 1fr)); column-gap: 5px; } .track { gap: 5px; } .stations span { font-size: 10.5px; } .stations span::before { display: none; } .stoptag { font-size: 11px; padding: 2px 7px; } }

/* The composer: an idea in, a prompt for the agent out */
.composer { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.idea { display: block; width: 100%; margin: 10px 0 16px; padding: 10px 0 12px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--ink); font: 500 clamp(19px, 2.2vw, 26px)/1.3 var(--sans); letter-spacing: -.02em; resize: none; overflow: hidden; field-sizing: content; min-height: 1.3em; }
.idea:focus { outline: none; border-bottom-color: var(--focus); }
/* Example ideas: a small picture of each app, captioned with the idea */
.ill-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ex-label { margin: 4px 0 12px; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.idea-card { appearance: none; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; min-width: 0; background: var(--sunk); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.idea-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.idea-card[aria-pressed='true'] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ill { display: block; width: 100%; height: auto; aspect-ratio: 240 / 130; }
.ill .pn { fill: var(--surface); stroke: var(--line); }
.ill .mu { fill: var(--line-2); }
.ill .tx { fill: var(--ink); opacity: .7; }
.ill .ol { fill: none; stroke: var(--line-2); }
.ill .ax { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.ill .dash { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.ill .ink { stroke: var(--ink); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .ring { fill: none; stroke: var(--sunk); stroke-width: 12; }
.ill .seg-mu { stroke: var(--line-2); stroke-width: 12; }
.cap { display: grid; align-content: start; gap: 4px; padding: 12px 14px 14px; background: var(--surface); border-top: 1px solid var(--line); flex: 1; }
.cap b { font: 600 14.5px/1.3 var(--sans); letter-spacing: -.015em; }
.cap span { font: 400 13px/1.45 var(--sans); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap span { display: none; } }
.handoff { margin-top: 22px; background: var(--sunk); border-radius: 16px; padding: 16px 18px 18px; }
.handoff-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.prompt-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.65; color: var(--ink); }

/* Agents: their marks drift past slowly and stop under a pointer or focus. The first list is the real one; the second,
   hidden from screen readers, only closes the loop. Without motion it's one still, wrapped row. */
.agents { text-align: center; }
.agents p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.agents .more { margin: 16px 0 0; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee:focus-visible { outline-offset: -2px; }
.marquee-track { display: flex; width: max-content; animation: drift 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.names { list-style: none; margin: 0; padding: 8px 44px 8px 0; display: flex; align-items: center; gap: 44px; }
.names li { display: inline-flex; align-items: center; gap: 10px; font: 600 clamp(17px, 1.8vw, 20px)/1.4 var(--sans); letter-spacing: -.025em; color: var(--muted); white-space: nowrap; transition: color .15s; }
.names li:hover { color: var(--ink); }
.names svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.names .mono { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border: 1.5px solid currentColor; border-radius: 6px; font: 700 12px/1 var(--mono); letter-spacing: 0; }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; justify-content: center; }
  .names { flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding-right: 0; }
  .names[aria-hidden='true'] { display: none; }
}

/* How a release ships: the stages as a vertical line, beside what the agent sees */
.ships { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 0 0 30px 58px; }
.steps li:last-child { padding-bottom: 0; }
/* Each stage's station: a small drawing in its colours (a masked laptop, a branch, a person's check, a watched commit) */
.steps .ico { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.steps .ico svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.steps li.decide .ico { box-shadow: 0 0 0 4px color-mix(in srgb, var(--decide-a) 22%, transparent); }
.steps .pulse { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; background: var(--line-2); }
.steps code { font-size: 13px; color: var(--muted); }
.steps h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; margin-top: 2px; }
.steps p { color: var(--muted); margin-top: 4px; }
.term { background: var(--code-bg); color: var(--code-ink); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); min-width: 0; }
.term-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #1f2123; font: 500 12.5px/1.3 var(--mono); color: var(--code-dim); }
.term-h b { color: var(--code-ink); font-weight: 500; }
.term pre { margin: 0; padding: 16px 18px 20px 0; font-size: 13px; line-height: 1.75; overflow-x: auto; counter-reset: ln; }
.term pre .l { display: block; padding-left: 50px; position: relative; white-space: pre; }
.term pre .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 32px; text-align: right; color: #3a3e42; }
.k { color: var(--code-key); } .s { color: var(--build-a); } .n { color: var(--decide-a); } .c { color: var(--code-dim); }
@media (max-width: 900px) { .ships { grid-template-columns: 1fr; } }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 2.6vw, 30px); transition: border-color .2s, transform .2s; min-width: 0; }
a.card:hover { border-color: color-mix(in srgb, var(--a) 60%, var(--line)); transform: translateY(-2px); }
a.card:hover .bar { filter: saturate(1.2) brightness(1.06); }
.card .eyebrow { margin-bottom: 6px; }
.card h3 { font: 600 21px/1.25 var(--sans); letter-spacing: -.025em; }
.card p { color: var(--muted); font-size: 15.5px; }
.card code { margin-top: auto; font-size: 12.5px; color: var(--ink); background: var(--sunk); border-radius: 8px; padding: 6px 10px; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.card .tick { width: 56px; height: 6px; margin-bottom: 8px; transition: width .25s; }
.card:target { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 30%, transparent); }
.card:target .tick { width: 112px; }
.strip { align-self: stretch; margin-top: auto; padding-top: 18px; display: grid; gap: 8px; }
.strip div { display: flex; gap: 8px; height: 14px; }
.strip .bar:nth-child(1) { flex: 1.1; } .strip .bar:nth-child(2) { flex: 2.4; } .strip .bar:nth-child(3) { flex: .7; }
.strip div:nth-child(2) .bar:nth-child(1) { flex: 2; } .strip div:nth-child(2) .bar:nth-child(2) { flex: .8; } .strip div:nth-child(2) .bar:nth-child(3) { flex: 1.5; }
@media (max-width: 960px) { .cards, .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards.two { grid-template-columns: 1fr; } }

/* Stacks */
.stackbox { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.stack-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--sunk); border-radius: 12px; }
.seg button { font: 500 14px/1 var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer; }
.seg button[aria-selected='true'] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(11, 12, 13, .12); }
.stack { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.stack[hidden] { display: none; }
.stack .bar { width: 120px; height: 6px; margin-bottom: 20px; }
.stack h3 { font: 600 26px/1.15 var(--sans); letter-spacing: -.035em; }
.stack p { color: var(--muted); margin-top: 10px; }
.stack p code { font-size: 14px; color: var(--ink); }
.stack pre { margin: 0; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; font-size: 13px; line-height: 1.75; overflow-x: auto; }
@media (max-width: 900px) { .stack { grid-template-columns: 1fr; } }

/* The close: the page's one inverted moment */
.close-box { background: var(--btn-bg); color: var(--btn-ink); border-radius: 28px; padding: clamp(44px, 8vw, 96px) clamp(20px, 4vw, 48px); text-align: center; display: grid; justify-items: center; gap: 30px; }
.close-box .mark { gap: 6px; padding: 0 6px; }
.close-box .mark i { width: 8px; height: 36px; border-radius: 2px; }
.close-box .h1 { font-size: clamp(38px, 5.6vw, 68px); }
.close-box .h1 .then { color: color-mix(in srgb, var(--btn-ink) 50%, var(--btn-bg)); }
.close-box .btn { border-color: color-mix(in srgb, var(--btn-ink) 30%, transparent); background: transparent; color: var(--btn-ink); }
.close-box .btn.go { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.close-box .actions { justify-content: center; }

/* Footer */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; color: var(--muted); font-size: 14px; }
.foot .who { display: inline-flex; align-items: center; gap: 12px; }
.foot .brand { font-size: 16px; color: var(--ink); }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a:hover { color: var(--ink); }

/* Features page */
.feat-hero { padding: clamp(44px, 8vw, 96px) 0 clamp(28px, 4vw, 44px); }
.feat-hero .h1 { font-size: clamp(36px, 5vw, 60px); }
.feat-hero .eyebrow { margin-bottom: 22px; }
.jump { position: sticky; top: 68px; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.jump .wrap { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.jump a { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; }
.jump a::before { content: ''; width: 18px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--a), var(--b)); }
.jump a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--a) 60%, var(--line)); }
.group { scroll-margin-top: 140px; }
.group + .group { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}