.hero { position: relative; padding-block: var(--s-4) var(--s-5); }
.hero .container { position: relative; container-type: inline-size; }
.hero .eyebrow { margin-bottom: var(--s-2); }
.hero h1 { max-width: none; white-space: nowrap; text-align: center; font-size: clamp(1.5rem, 6.5vw, 5rem); font-size: clamp(1.5rem, 8cqw, 8.2rem); font-weight: 900; line-height: 1; letter-spacing: -.045em; margin: 0 0 var(--s-3); }
.hero h1 .shout { display: block; color: var(--accent); }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-5); }
.hero-row .lead { margin: 0 auto; flex: 1 1 420px; font-size: var(--fs-lg); max-width: 64ch; }
.hero-row .btn-row { flex: 0 1 auto; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-6); margin-block: var(--s-7) var(--s-4); }
.btn-xl { padding: 1.1rem 2.6rem; font-size: var(--fs-2xl); font-weight: 800; border-radius: var(--r-3); }
@media (max-width: 520px) { .hero-cta .btn-xl { width: 100%; padding-inline: 1rem; } .hero-cta { margin-top: var(--s-6); } }
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0 0 var(--s-5); }

.section-head { max-width: 70ch; margin-bottom: var(--s-6); }
.split { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; margin-block: var(--s-6); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.tool-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--s-6); }
.tool-grid .knows { color: var(--text-1); }
.tool-grid .misses { color: var(--text-2); margin-top: var(--s-2); }
.tool-grid .misses::before { content: "Misses: "; color: var(--warn); font-weight: 600; }
.tool-grid .knows::before { content: "Knows: "; color: var(--ok); font-weight: 600; }
.figure { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-4); margin: 0 0 var(--s-5); }
.figure img { display: block; width: 100%; }
.figure figcaption { margin-top: var(--s-3); }
.model-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--s-5); }
.model-strip div { border: 1px dashed var(--line-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font: var(--fs-sm) var(--font-mono); color: var(--text-1); }
@media (max-width: 600px) { .model-strip { grid-template-columns: 1fr; } }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); align-items: start; }
.steps li::before { content: counter(s); font: 600 var(--fs-sm) var(--font-mono); color: var(--accent-ink); background: var(--accent); border-radius: 999px; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; }
.levels { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--s-6); }
.final-cta .card-grid .card a.btn { margin-top: var(--s-3); }
.section .badge { margin-bottom: var(--s-4); }

/* how it works */
.pipe { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
.pipe li { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--bg-2); padding: var(--s-4); }
.pipe li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-4) + 1px); top: 50%; transform: translate(50%, -50%); font: 800 var(--fs-xl)/1 var(--font-mono); color: var(--primary); background: var(--bg-0); padding-inline: 2px; z-index: 1; }
.pipe-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font: 700 var(--fs-sm) var(--font-mono); margin-bottom: var(--s-2); }
.pipe h3 { margin: 0 0 var(--s-1); }
.pipe p { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr 1fr; }
  .pipe li:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .pipe { grid-template-columns: 1fr; } }
.how-text { max-width: 70ch; margin-block: var(--s-6) var(--s-4); }
.how-text h3 { margin: var(--s-2) 0; }
.pane { margin: 0; min-width: 0; }
.pane figcaption { margin-bottom: var(--s-2); font: 600 var(--fs-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.pane .codeblock { margin: 0; }
.pane pre { max-height: 26rem; overflow: auto; }

/* connectors */
.market { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mk-card { display: flex; flex-direction: column; gap: var(--s-3); }
.mk-card > p { margin: 0; font-size: var(--fs-sm); }
.mk-head { display: flex; align-items: center; gap: var(--s-3); }
.mk-head h3 { margin: 0; }
.mk-tile { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--text-0); color: var(--bg-0); font: 800 var(--fs-sm) var(--font-mono); border-radius: var(--r-2); }
.mk-tile-plus { background: transparent; color: var(--text-1); border: 2px dashed var(--line-strong); font-size: var(--fs-xl); }
.mk-cat { margin: 0; color: var(--text-2); font-size: var(--fs-xs); }
.mk-own { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.connectors-cta { margin-top: var(--s-5); }
.market-note { margin: var(--s-4) 0 0; font-size: var(--fs-xs); max-width: 80ch; }
.pipe li:not(:last-child)::after { font-size: var(--fs-2xl); right: calc(-1 * var(--s-2)); padding-inline: 0; }

/* scattered, then one looped lifecycle: scatter.js fades one layout out and the other in */
.scatter { --tint: 0; margin: 0 0 var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: color-mix(in srgb, var(--primary) calc(var(--tint) * 9%), var(--bg-1)); padding: var(--s-4) var(--s-5) var(--s-5); }
.sc-head { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); min-height: 2.75rem; margin-bottom: var(--s-3); }
.sc-caption { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-md) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.scatter[data-phase="lifecycle"] { border-color: var(--primary); box-shadow: 0 0 36px 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.scatter[data-phase="lifecycle"] .sc-caption { color: var(--primary); }
.sc-replay { margin-left: auto; flex: none; }
.sc-replay[hidden] { display: none; }
/* the Techlog robot: one element in the centre of the stage in both states. Grey, unconnected and glowing in and out
   in the legacy state (press it), green and connected to the agents in the Techlog state */
.sc-go { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 4.75rem; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; font: 800 var(--fs-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; transition: color .3s; }
.sc-go-disc { display: block; width: 4.75rem; height: 4.75rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg-0); animation: sc-ask 1.8s ease-in-out infinite; transition: border-color .3s; }
.sc-go img { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: .5rem; filter: grayscale(1) opacity(.7); transition: filter .3s; }
.sc-go:hover, .sc-go:focus-visible { color: var(--primary); }
.sc-go:hover .sc-go-disc, .sc-go:focus-visible .sc-go-disc { border-color: var(--primary); }
.sc-go:hover img, .sc-go:focus-visible img { filter: none; }
.sc-go.is-on { color: var(--primary); cursor: default; pointer-events: none; }
.sc-go.is-on .sc-go-disc { border-color: var(--primary); box-shadow: 0 0 22px 3px color-mix(in srgb, var(--primary) 40%, transparent); animation: none; }
.sc-go.is-on img { filter: none; }
@keyframes sc-ask { 0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--line-strong); } 50% { box-shadow: 0 0 30px 9px color-mix(in srgb, var(--primary) 65%, transparent); border-color: var(--primary); } }
/* base.css switches every animation off for reduced motion. This soft glow is the call to press, and it moves nothing, so it stays. */
@media (prefers-reduced-motion: reduce) { .sc-go:not(.is-on) .sc-go-disc { animation: sc-ask 1.8s ease-in-out infinite !important; } }
.sc-replay { border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text-1); padding: .45rem 1rem; font: 700 var(--fs-sm) var(--font-sans); cursor: pointer; white-space: nowrap; }
.sc-replay:hover { border-color: var(--text-0); color: var(--text-0); }
.sc-stage { position: relative; height: 18.7rem; --tag: 0; }
.sc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-chaos { fill: none; stroke: var(--danger); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; }
.sc-q { fill: var(--danger); font: 800 15px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.sc-claude { stroke: var(--text-0); stroke-width: 2.4; stroke-linecap: round; }
.sc-claude-label { fill: var(--text-0); font: 800 12px var(--font-mono); text-anchor: middle; letter-spacing: .04em; }
.sc-spoke { stroke: var(--primary); stroke-width: 1.8; stroke-dasharray: 3 5; stroke-linecap: round; }
.sc-spoke-1 { stroke: var(--info); }
.sc-loop { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: sc-flow 1.1s linear infinite; }
.sc-arrow { fill: var(--primary); }
@keyframes sc-flow { to { stroke-dashoffset: -11; } }
.sc-hublink { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; }
.sc-hublink-1 { stroke: var(--info); }
.sc-cards { list-style: none; margin: 0; padding: 0; }
.sc-card { --sys: var(--text-1); --zone: var(--ok); position: absolute; width: 19%; min-width: 9.5rem; display: grid; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--bg-0); border: 1px solid var(--line-strong); border-left: 4px solid var(--sys); border-radius: var(--r-2); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); will-change: opacity; }
.sc-sys { font: 700 var(--fs-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sys); }
.sc-card strong { font-size: var(--fs-sm); color: var(--text-0); line-height: 1.3; }
.sc-step { position: absolute; top: -.75rem; right: .5rem; padding: .15rem .5rem; border-radius: 999px; background: var(--zone); color: var(--bg-0); font: 700 var(--fs-xs)/1.2 var(--font-mono); font-style: normal; opacity: var(--tag); white-space: nowrap; }
.sc-card.sc-agent { --agent: var(--primary); --sys: var(--agent); --zone: var(--agent); z-index: 2; width: 15%; border-color: var(--agent); background: color-mix(in srgb, var(--agent) 8%, var(--bg-0)); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--agent) 30%, transparent); }
.sc-card.sc-a2 { --agent: var(--info); }
.sc-agent strong { font-size: var(--fs-md); }
.sc-sub { font-size: var(--fs-xs); color: var(--text-1); line-height: 1.3; }
.sc-github { --sys: var(--text-1); } .sc-slack { --sys: var(--hyp); } .sc-atlassian { --sys: var(--info); } .sc-pagerduty { --sys: var(--ok); }
.sc-card:nth-child(n+5) { --zone: var(--orange); }
.sc-card:nth-child(1) { --sx: 11; --sy: 64; --sr: -6; --cx: 20; --cy: 15; }
.sc-card:nth-child(2) { --sx: 29; --sy: 20; --sr: 5; --cx: 50; --cy: 15; }
.sc-card:nth-child(3) { --sx: 47; --sy: 78; --sr: -3; --cx: 80; --cy: 15; }
.sc-card:nth-child(4) { --sx: 66; --sy: 28; --sr: 4; --cx: 88; --cy: 50; }
.sc-card:nth-child(5) { --sx: 89; --sy: 68; --sr: 6; --cx: 80; --cy: 85; }
.sc-card:nth-child(6) { --sx: 17; --sy: 86; --sr: 4; --cx: 50; --cy: 85; }
.sc-card:nth-child(7) { --sx: 84; --sy: 16; --sr: -5; --cx: 20; --cy: 85; }
.sc-card:nth-child(9) { --sx: 68; --sy: 56; --sr: 3; --cx: 33; --cy: 58; }
.sc-card:nth-child(10) { --sx: 47; --sy: 13; --sr: -3; --cx: 67; --cy: 42; }
.sc-card:nth-child(8) { --sx: 31; --sy: 46; --sr: -4; --cx: 12; --cy: 50; }
.sc-nav { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--s-4); }
.sc-who { margin: 0; display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--fs-md); color: var(--text-1); }
.sc-who > span:first-child { font-size: 1.5em; line-height: 1; }
.sc-who strong { color: var(--text-0); margin-right: .25em; }
@media (max-width: 700px) {
  .scatter { padding-inline: var(--s-3); }
  .sc-stage { height: 25rem; }
  .sc-card { width: 38%; min-width: 0; }
  .sc-card.sc-agent { width: 20%; padding-inline: var(--s-2); text-align: center; }
  .sc-card:nth-child(9) { --cx: 50; --cy: 30; } .sc-card:nth-child(10) { --cx: 50; --cy: 70; }
  .sc-go, .sc-go-disc { width: 2.9rem; height: 2.9rem; } .sc-go img { padding: .3rem; } .sc-go-name { display: none; }
  .sc-caption { font-size: var(--fs-sm); }
  .sc-agent .sc-sub, .sc-agent .sc-step { display: none; }
  .sc-agent .sc-sys { letter-spacing: 0; }
  .sc-card:nth-child(1) { --sx: 22; --sy: 66; } .sc-card:nth-child(2) { --sx: 38; --sy: 16; }
  .sc-card:nth-child(3) { --sx: 58; --sy: 84; } .sc-card:nth-child(4) { --sx: 74; --sy: 30; }
  .sc-card:nth-child(5) { --sx: 77; --sy: 62; } .sc-card:nth-child(6) { --sx: 28; --sy: 86; }
  .sc-card:nth-child(7) { --sx: 74; --sy: 12; } .sc-card:nth-child(8) { --sx: 40; --sy: 70; }
  .sc-card:nth-child(9) { --sx: 62; --sy: 70; } .sc-card:nth-child(10) { --sx: 36; --sy: 30; }
  .sc-step { right: auto; left: .4rem; max-width: calc(100% - .8rem); overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .sc-card:nth-child(1) { --cx: 22; --cy: 12.5; } .sc-card:nth-child(2) { --cx: 78; --cy: 12.5; }
  .sc-card:nth-child(3) { --cx: 78; --cy: 37.5; } .sc-card:nth-child(4) { --cx: 78; --cy: 62.5; }
  .sc-card:nth-child(5) { --cx: 78; --cy: 87.5; } .sc-card:nth-child(6) { --cx: 22; --cy: 87.5; }
  .sc-card:nth-child(7) { --cx: 22; --cy: 62.5; } .sc-card:nth-child(8) { --cx: 22; --cy: 37.5; }
}
@media (prefers-reduced-motion: reduce) { .sc-loop { animation: none; } }