/* Developers, desktop. Four frames under the hero: quickstart with the contract figure, nine runs,
   build on it, references; then the close. Phones override in /m/developers.css. */
.developer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 40px; }

.dv-frame { border-top:1px solid var(--line); padding-block:56px; }
.dv-frame h2 { max-width:25ch; font:400 var(--fs-h2)/1.1 Plex,sans-serif; letter-spacing:-.025em; }
.dv-frame b { font-family:PlexM,Plex,sans-serif; font-weight:600; }
.dv-frame code, .dv-frame pre { font-family:PlexMono,Consolas,monospace; }
.dv-frame > div > .text-link { width:fit-content; }

/* Quickstart: the contract figure left, the commands right. */
.dv-start-grid { display:grid; grid-template-columns:minmax(0,1fr) fit-content(660px); gap:clamp(40px,5vw,96px); align-items:center; }
.dv-contract { display:flex; flex-direction:column; align-items:center; width:100%; max-width:560px; justify-self:center; text-align:center; }
.dv-contract ul { list-style:none; margin:0; padding:0; display:grid; width:100%; }
.dv-contract li { display:flex; flex-direction:column; align-items:center; min-width:0; }
.dv-contract li svg { display:block; width:88px; height:auto; }
.dv-contract li b { margin-top:6px; font-size:16px; line-height:1.25; color:#142950; }
.dv-contract li span { font:400 14px/1.4 Plex,sans-serif; color:var(--ink); }
.dv-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dv-verdicts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dv-verdicts code { font-size:14px; line-height:1.4; color:var(--ink); }
.dv-ok b { color:#17834f !important; }
.dv-reject b { color:#c22a39 !important; }
.dv-error b { color:#3f5874 !important; }
.dv-lines { display:block; width:100%; height:36px; overflow:visible; }
.dv-lines path { fill:none; stroke-width:1.25; vector-effect:non-scaling-stroke; }
.dv-lines-in path { stroke:#5fb585; }
.dv-lines-out path { stroke:#57739a; }
.dv-lines-in { margin-top:8px; }
.dv-lines-out { margin-bottom:6px; }
.dv-verifier { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:72%; aspect-ratio:500/160; }
.dv-verifier svg { position:absolute; inset:0; width:100%; height:100%; }
.dv-verifier b, .dv-verifier span { position:relative; }
.dv-verifier b { font-size:16px; color:#142950; }
.dv-verifier span { font:400 16px/1.35 Plex,sans-serif; }
.dv-contract figcaption { max-width:44ch; margin-top:18px; font:400 14px/1.45 Plex,sans-serif; color:var(--ink); text-wrap:balance; }

.dv-terminal { display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:100%; }
.dv-req { font:400 var(--fs-body)/1.5 Plex,sans-serif; }
.dv-code { position:relative; width:100%; margin-top:16px; background:var(--wash); border-left:2px solid var(--ink); }
.dv-code pre { margin:0; padding:18px 22px; overflow-x:auto; white-space:pre; font-size:14px; line-height:1.75; color:var(--ink); }
.dv-code pre code { font:inherit; }
.dv-copy { position:absolute; top:12px; right:12px; min-height:32px; padding:0 14px; border:1px solid var(--line); background:#fff; font:500 14px/1 PlexM,Plex,sans-serif; color:var(--ink); cursor:pointer; }
.dv-copy:hover { border-color:var(--ink); }
.dv-result { margin-top:16px; font:400 var(--fs-body)/1.5 Plex,sans-serif; }
.dv-result code { font-size:15px; }
.dv-terminal .text-link { margin-top:18px; }

/* Nine runs: one row of three verdict groups. */
.dv-runs-body { display:flex; flex-direction:column; align-items:flex-start; }
.dv-runs-sub { max-width:60ch; font:400 var(--fs-body)/1.5 Plex,sans-serif; }
.dv-runs-grid { display:grid; grid-template-columns:1fr 2fr 1fr; gap:0 40px; width:100%; margin-top:32px; }
.dv-run-head { display:flex; align-items:baseline; gap:14px; padding-bottom:12px; border-bottom:2px solid var(--ink); }
.dv-run-head b { font-size:22px; line-height:1.2; letter-spacing:-.01em; }
.dv-run-head code { font-size:14px; color:var(--ink); }
.dv-run-group ul { list-style:none; margin:0; padding:0; }
.dv-reject ul { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
.dv-run-group li { border-bottom:1px solid var(--line); }
.dv-run-group a { display:flex; align-items:center; gap:10px; min-height:52px; font:400 var(--fs-body)/1.3 Plex,sans-serif; }
.dv-run-group a:hover { color:var(--accent); }
.dv-fine { margin-top:24px; font:400 14px/1.45 Plex,sans-serif; color:var(--ink); }
.dv-fine a { margin-left:8px; text-decoration:underline; text-underline-offset:3px; }

/* Build on it: two roles over five steps. */
.dv-build-body { display:flex; flex-direction:column; align-items:flex-start; }
.dv-build-sub { max-width:60ch; font:400 var(--fs-body)/1.5 Plex,sans-serif; }
.dv-build-figure { width:100%; max-width:980px; margin-top:28px; align-self:center; text-align:center; }
.dv-tier { margin:0 0 10px; font:500 16px/1.3 PlexM,Plex,sans-serif; color:var(--ink); }
.dv-build-figure ol + figcaption, .dv-roles + .dv-tier { margin-top:20px; }
.dv-roles, .dv-steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.dv-roles { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:480px; margin-inline:auto; }
.dv-steps { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dv-build-figure li { display:flex; flex-direction:column; align-items:center; min-width:0; }
.dv-build-figure li svg { display:block; width:92px; height:auto; }
.dv-build-figure li b { margin-top:6px; font-size:17px; line-height:1.25; color:#142950; }
.dv-build-figure li span { margin-top:2px; font:400 16px/1.4 Plex,sans-serif; color:var(--ink); white-space:nowrap; }
.dv-build-figure figcaption { max-width:60ch; margin-inline:auto; font:400 14px/1.45 Plex,sans-serif; color:var(--ink); text-wrap:balance; }
.dv-build-body > .text-link { margin-top:16px; }

/* References: a row list, label and arrow together on the left axis. */
.dv-refs-body { display:flex; flex-direction:column; align-items:flex-start; }
.dv-licence { font:400 var(--fs-body)/1.5 Plex,sans-serif; }
.dv-refs-list { list-style:none; width:100%; max-width:560px; margin:28px 0 0; padding:0; border-top:2px solid var(--ink); }
.dv-refs-list li { border-bottom:1px solid var(--line); }
.dv-refs-list a { display:flex; align-items:center; gap:12px; min-height:60px; font:400 var(--fs-row)/1.3 Plex,sans-serif; }
.dv-refs-list a:hover { color:var(--accent); text-decoration:none; }

/* Short desktop windows: tighten the figures so each frame still fits. */
@media (min-width:900px) and (max-height:820px) {
  .dv-frame { padding-block:40px; }
  .dv-contract li svg { width:76px; }
  .dv-lines { height:28px; }
  .dv-verifier { width:64%; }
  .dv-build-figure { margin-top:20px; }
  .dv-build-figure li svg { width:80px; }
  .dv-run-group a { min-height:48px; }
}

/* The close line reads in ink, never grey. */
main .contact-inner .close-line { color:var(--ink); }