/* Extends the landing's existing fonts, palette and section spacing. */
.infra-map { position: relative; max-width: 1210px; margin: 4px auto 0; padding: 28px 28px 0; color: var(--d-ink); }
.infra-level { position: absolute; top: 22px; left: 28px; font: 11px var(--font-mono); letter-spacing: .1em; color: var(--d-mut); text-transform: uppercase; }
.infra-origin { position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; }
.infra-origin::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: min(330px, 100%); height: 250px; top: 44px; background: radial-gradient(ellipse, var(--d-acc-bg), transparent 69%); }
.infra-clients { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; color: var(--d-ink); }
.infra-clients svg, .infra-clients img { width: 18px; height: 18px; display: block; fill: currentColor; }
.infra-clients .any { font: 11px var(--font-mono); color: var(--d-mut); letter-spacing: .04em; margin-left: 2px; }
.infra-hub-sub { font: 11px var(--font-mono); color: var(--d-acc); letter-spacing: .06em; margin-top: -3px; }
.infra-wing { width: 66px; height: 45px; fill: var(--d-acc); filter: drop-shadow(0 0 16px var(--d-acc-soft)); }
.infra-hub { margin-top: 32px; width: 230px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--d-card); border: 1px solid var(--d-bdhub); border-radius: 18px; box-shadow: 0 8px 36px var(--d-acc-bg); }
.infra-hub img { display: block; width: 152px; height: auto; }
[data-theme="dark"] .infra-hub img { filter: invert(1); }
.infra-hub-label { font: 11px var(--font-mono); color: var(--d-mut); letter-spacing: .17em; }
.infra-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.infra-wire, .infra-spine, .infra-stem { fill: none; stroke: color-mix(in srgb, var(--d-acc) 26%, transparent); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.infra-wire[data-status="next"] { stroke: color-mix(in srgb, var(--d-mut) 24%, transparent); stroke-dasharray: 4 5; }
.infra-highlight { fill: none; stroke: var(--d-acc); stroke-width: 1.7; opacity: 0; transition: opacity 220ms ease; vector-effect: non-scaling-stroke; }
.infra-highlight.is-active { opacity: .75; }
.infra-pulse { fill: none; stroke: var(--d-acc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .04 1; stroke-dashoffset: 1.04; opacity: 0; animation: infra-travel 28s linear infinite; animation-play-state: paused; }
.infra-map[data-visible="true"] .infra-pulse { animation-play-state: running; }
@keyframes infra-travel { 0%, 2% { opacity: 0; stroke-dashoffset: 1.04; } 4% { opacity: .62; } 15% { opacity: .62; stroke-dashoffset: 0; } 17%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.infra-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 110px 0 0; padding: 0; }
.infra-card { min-width: 0; min-height: 162px; padding: 21px 17px 19px; border: 1px solid var(--d-bd); border-radius: 14px; background: var(--d-card); transition: border-color 220ms ease, box-shadow 220ms ease; position: relative; }
.infra-card:hover, .infra-card:focus-visible { outline: none; border-color: var(--d-acc); box-shadow: 0 2px 24px var(--d-acc-bg); }
.infra-card[data-capability="agents"] { border-color: var(--d-acc-soft); background: linear-gradient(150deg, var(--d-acc-bg), transparent 70%), var(--d-card); box-shadow: 0 5px 24px var(--d-acc-bg); }
.infra-card:focus-visible { outline: 2px solid var(--d-acc); outline-offset: 4px; }
.infra-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 21px; }
.infra-icon { width: 23px; height: 23px; color: var(--d-acc); flex-shrink: 0; }
.infra-status { font: 10px var(--font-mono); letter-spacing: .02em; color: var(--d-mut); white-space: nowrap; }
.infra-status::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--d-acc); margin: 0 6px 2px 0; }
.infra-card h3 { font-family: var(--font-display); font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }
.infra-card p { font: 13px/1.5 var(--font-body); color: var(--d-mut); margin: 0; }
.infra-next-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(620px, 66%); margin: 34px auto 0; list-style: none; padding: 0; position: relative; z-index: 1; }
.infra-card[data-status="next"] { min-height: 112px; border-style: dashed; padding: 20px; }
.infra-card[data-status="next"] .infra-card-top { margin-bottom: 13px; }
.infra-card[data-status="next"] .infra-icon { color: var(--d-mut); }
.infra-card[data-status="next"] h3 { margin: 0; }
.infra-card[data-status="next"] .infra-status { font-size: 11px; }
.infra-card[data-status="next"] .infra-status::before { display: none; }
.infra-caption { position: relative; text-align: center; margin: 36px auto 0; padding: 25px 0 0; border-top: 1px solid var(--d-bd); }
.infra-caption p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
.infra-run-path { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--d-mut); font: 11px/1.7 var(--font-mono); }
.infra-run-path .arrow { color: var(--d-acc); }
@media (max-width: 1099px) {
  .infra-map { max-width: 590px; padding: 52px 20px 0; }
  .infra-level { inset: 6px 0 auto; text-align: center; }
  .infra-clients { font-size: 11px; }
  .infra-cards, .infra-next-cards { grid-template-columns: 1fr; gap: 14px; width: auto; margin: 64px 0 0 32px; }
  .infra-next-cards { margin-top: 14px; }
  .infra-card, .infra-card[data-status="next"] { min-height: 105px; padding: 17px 18px 16px 56px; }
  .infra-card-top { position: static; margin: 0 0 7px; }
  .infra-icon { position: absolute; left: 19px; top: 20px; width: 21px; height: 21px; }
  .infra-card h3 { font-size: 17px; margin-bottom: 5px; }
  .infra-card p { font-size: 13px; }
  .infra-card[data-status="next"] { min-height: 87px; }
  .infra-card[data-status="next"] .infra-card-top { margin: 0 0 7px; }
  .infra-caption { margin-top: 28px; }
  .infra-caption p { font-size: 14px; }
  .infra-run-path { gap: 6px 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .infra-pulse { display: none; animation: none; }
  .infra-card, .infra-highlight { transition: none; }
}

/* The existing skill.md block is the first-screen installation affordance. */
[data-agent-variant] .agent-work-hero > .hw-mcp.hero-connect { display: block; max-width: 800px; margin: 25px auto 0; padding: 0; }
.hero-connect .sk-band { padding: 0; }
[data-agent-variant] .hero-connect .sk-kick { display: block; font: 12px var(--font-mono); color: var(--d-mut); opacity: 1; margin: 0 0 12px; }
.hero-connect .sk-note { display: none; }
.hero-connect .sk-clients { display: flex; margin-top: 12px; }
.hero-connect .tx-endpoint.sk-cmd { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--d-acc-soft); background: linear-gradient(115deg, var(--d-acc-bg), transparent), var(--d-card); border-radius: 10px; box-shadow: 0 6px 28px var(--d-acc-bg); margin: 0 !important; }
.hero-connect .tx-endpoint-label { color: var(--d-acc); font-size: 13px; }
.hero-connect .tx-url { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: normal; word-break: normal; overflow-wrap: anywhere; text-align: left; }
.hero-connect .tx-copy { flex-shrink: 0; color: #fff; background: var(--d-acc); border: 1px solid var(--d-acc); font: 13px var(--font-mono); min-height: 42px; padding: 10px 16px; border-radius: 5px; }
.hero-connect .tx-copy:hover { filter: brightness(1.08); }
.hero-connect .tx-copy.done { color: #fff; }
.hero-connect .tx-copy:focus-visible { outline: 2px solid var(--d-acc); outline-offset: 4px; }
[data-theme="light"] .nav-burger { color: #fafafa; }
@media (max-width: 720px) {
  [data-agent-variant] .agent-work-hero > .hw-mcp.hero-connect { margin-top: 22px; }
  .hero-connect .tx-endpoint.sk-cmd { padding: 14px 16px 17px; gap: 10px; flex-wrap: wrap; }
  .hero-connect .tx-endpoint-label { margin-right: auto; }
  .hero-connect .tx-url { order: 3; flex-basis: 100%; font-size: 14px; line-height: 1.65; }
  .hero-connect .tx-copy { min-height: 38px; padding: 7px 15px; }
}