/* Infrastructure */
.infra-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; margin-bottom: 1.25rem; }
.infra-diagram { min-height: 430px; overflow: hidden; }
.infra-diagram__body { position: relative; min-height: 365px; padding: 1.5rem; }
.diagram-canvas { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 0.65rem; min-height: 310px; align-items: center; }
.diagram-node { position: relative; z-index: 2; display: grid; place-items: center; min-height: 62px; padding: 0.55rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(14,27,42,0.96); text-align: center; box-shadow: var(--shadow-small); }
.diagram-node strong { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.05em; }
.diagram-node span { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.61rem; }
.diagram-node--root { grid-column: 3; grid-row: 1; border-color: rgba(79,182,232,0.55); background: var(--celeste-soft); color: var(--celeste-bright); }
.diagram-node--engine { grid-column: 3; grid-row: 3; border-color: rgba(79,182,232,0.62); box-shadow: 0 0 0 5px rgba(63,169,224,0.06), var(--shadow-small); }
.diagram-node--hip { grid-column: 2; grid-row: 5; border-color: rgba(82,211,154,0.34); }
.diagram-node--core { grid-column: 1; grid-row: 5; }
.diagram-node--asset { grid-column: 4; grid-row: 5; border-color: rgba(232,169,60,0.38); }
.diagram-node--evm { grid-column: 5; grid-row: 5; }
.diagram-connector { position: absolute; z-index: 1; background: var(--line-strong); }
.diagram-connector--root { top: 25%; left: calc(50% - 1px); width: 2px; height: 24%; }
.diagram-connector--left { top: calc(73% - 1px); left: 22%; width: 29%; height: 2px; }
.diagram-connector--right { top: calc(73% - 1px); right: 22%; width: 29%; height: 2px; }
.diagram-connector--core { top: 73%; left: calc(10% - 1px); width: 2px; height: 20%; }
.diagram-connector--evm { top: 73%; right: calc(10% - 1px); width: 2px; height: 20%; }
.diagram-connector--arrow-left::after, .diagram-connector--arrow-right::after { position: absolute; top: -3px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; content: ""; }
.diagram-connector--arrow-left::after { right: 0; border-left: 5px solid var(--line-strong); }
.diagram-connector--arrow-right::after { left: 0; border-right: 5px solid var(--line-strong); }
.diagram-caption { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: 0.7rem; text-align: center; }
.infra-intro { display: grid; align-content: space-between; gap: 1.25rem; padding: 1.35rem; }
.infra-intro__number { color: var(--celeste-bright); font-family: "IBM Plex Mono", monospace; font-size: 2.2rem; font-weight: 500; line-height: 1; }
.infra-intro h2 { margin: 0.7rem 0 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.infra-intro p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.8rem; }
.infra-intro__legend { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.legend-status { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.72rem; }
.legend-status__marker { width: 8px; height: 8px; border-radius: 2px; background: var(--celeste); }
.legend-status__marker--amber { background: var(--amber); }

.infra-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.infra-card { position: relative; min-height: 225px; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(14,27,42,0.64); }
.infra-card--source { border-top: 2px solid var(--celeste); }
.infra-card--engine { border-top: 2px solid var(--amber); }
.infra-card--core { border-top: 2px solid var(--green); }
.infra-card--evm { border-top: 2px solid #ba8ff5; }
.infra-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.infra-card h2 { margin: 0; font-size: 0.88rem; }
.infra-card__tag { margin-top: 0.3rem; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.61rem; text-transform: uppercase; }
.infra-card__list { display: grid; gap: 0.44rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.infra-card__list li { display: flex; align-items: center; gap: 0.45rem; color: var(--muted-strong); font-size: 0.72rem; }
.infra-card__list li::before { width: 4px; height: 4px; border-radius: 50%; background: var(--celeste); content: ""; }
.infra-card__footer { position: absolute; right: 1.15rem; bottom: 1.15rem; left: 1.15rem; display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; }
.infra-flow { display: flex; align-items: center; gap: 0.65rem; margin: 1.25rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,0.025); }
.infra-flow__label { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; }
.infra-flow__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--celeste), transparent); }
.infra-flow__path { color: var(--celeste-bright); font-family: "IBM Plex Mono", monospace; font-size: 0.67rem; }

.onchain-section, .deployments-section { margin-top: 1.25rem; }
.onchain-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.75fr); gap: 1rem; padding: 1.25rem; }
.onchain-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.onchain-fact { display: grid; align-content: start; gap: 0.4rem; min-height: 72px; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,0.025); }
.onchain-fact > span:first-child, .onchain-summary__status > span:first-child, .onchain-summary__cost > span { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.61rem; letter-spacing: 0.04em; text-transform: uppercase; }
.onchain-fact strong, .onchain-fact code { color: var(--text); font-size: 0.78rem; font-weight: 700; word-break: break-word; }
.onchain-fact code { font-family: "IBM Plex Mono", monospace; }
.onchain-summary { display: grid; align-content: start; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(14,27,42,0.7); }
.onchain-summary__status { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.onchain-summary p { margin: 0; color: var(--muted); font-size: 0.73rem; line-height: 1.5; }
.onchain-summary__cost { display: grid; gap: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.63rem; }
.onchain-summary__cost strong { color: var(--text); }
.deployment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0 1.25rem 1.25rem; }
.deployment-card { display: grid; gap: 0.8rem; padding: 1rem; border: 1px solid var(--line); border-top: 2px solid var(--celeste); border-radius: var(--radius-sm); background: rgba(255,255,255,0.025); }
.deployment-card:nth-child(2) { border-top-color: var(--amber); }
.deployment-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.deployment-card h3 { margin: 0; font-size: 0.84rem; }
.deployment-card__header p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.68rem; }
.deployment-field { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; min-width: 0; padding-top: 0.65rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.68rem; }
.deployment-field > span:first-child { font-family: "IBM Plex Mono", monospace; font-size: 0.61rem; text-transform: uppercase; }
.deployment-field code, .deployment-field strong { min-width: 0; color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 0.64rem; font-weight: 500; overflow-wrap: anywhere; }
.deployment-copy { align-self: center; padding: 0.24rem 0.45rem; border: 1px solid var(--line-strong); border-radius: 3px; background: transparent; color: var(--muted-strong); font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; cursor: pointer; }
.deployment-copy:hover, .deployment-copy:focus-visible { border-color: var(--celeste); color: var(--celeste-bright); }
.deployment-copy[data-copy-state="copied"] { border-color: var(--green); color: var(--green); }
.deployment-transactions { margin: 0 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,0.018); }
.deployment-transactions .surface__header { padding: 0.85rem 1rem; }
.deployment-transaction-list { display: grid; gap: 0.55rem; padding: 0 1rem 1rem; }
.deployment-transaction { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--line); }
.deployment-transaction__label { display: block; color: var(--muted); font-size: 0.68rem; }
.deployment-transaction code { display: block; margin-top: 0.22rem; color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 0.64rem; }
.deployment-transaction__meta { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.6rem; }
@media (max-width: 980px) {
  .onchain-grid { grid-template-columns: 1fr; }
  .onchain-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .deployment-grid { grid-template-columns: 1fr; }
  .deployment-transaction { grid-template-columns: 1fr auto; }
  .deployment-transaction__meta { grid-column: 1; }
  .deployment-transaction .deployment-copy { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 480px) {
  .onchain-grid { padding: 1rem; }
  .onchain-facts { grid-template-columns: 1fr; }
  .deployment-grid { padding-inline: 1rem; }
  .deployment-transactions { margin-inline: 1rem; }
  .deployment-field { grid-template-columns: 1fr auto; }
  .deployment-field > span:first-child { grid-column: 1 / -1; }
  .deployment-field code, .deployment-field strong { grid-column: 1; }
}