:root{--ink:#112b46;--blue:#2868d6;--paper:#f6f4ed;--lime:#d6f27a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Work Sans",sans-serif}nav{height:78px;padding:0 5vw;border-bottom:1px solid var(--ink);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font:600 12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}nav a:last-child{justify-self:end;color:inherit}.mark{position:relative;display:grid;place-items:center;width:44px;height:34px;background:var(--ink);color:white;text-decoration:none;font:bold 18px Arial}.mark i{position:absolute;right:-7px;top:-1px;width:8px;height:8px;background:var(--lime)}nav span,.route{color:var(--blue)}.hero{display:grid;grid-template-columns:1.07fr .93fr;min-height:610px;border-bottom:1px solid var(--ink)}.intro{padding:9vw 7vw 7vw 5vw;border-right:1px solid var(--ink)}.route{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.08em}h1,h2{margin:0;font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.07em;line-height:.84}h1{font-size:clamp(64px,8.5vw,152px)}h1 em{color:var(--blue);font-style:normal}.intro>p:not(.route){max-width:43ch;margin:46px 0 32px;font-size:17px;line-height:1.5}.chips{display:flex;flex-wrap:wrap;width:max-content;border:1px solid var(--ink)}.chips b{padding:9px 12px;border-right:1px solid var(--ink);font:600 10px "IBM Plex Mono",monospace;text-transform:uppercase}.chips b:last-child{border:0}form{align-self:center;padding:32px clamp(28px,4vw,64px)}.head{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:13px;font:11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.head b{color:var(--blue)}.drop{min-height:194px;margin:18px 0;display:flex;flex-direction:column;justify-content:flex-end;padding:23px;border:1px dashed var(--blue);transition:.2s}.drop:hover,.drop.over{background:var(--blue);color:#fff}.drop input{display:none}.drop span{margin-bottom:auto;color:var(--blue);font-size:37px}.drop:hover span,.drop.over span{color:var(--lime)}.drop strong{font-size:24px}.drop small{margin-top:4px;font:11px "IBM Plex Mono",monospace}label{display:flex;flex-direction:column;gap:6px;margin-top:13px;color:#486075;font:600 10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}input{height:36px;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font:14px "Work Sans",sans-serif;outline:0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}button{width:100%;margin-top:20px;padding:14px 16px;border:1px solid var(--ink);background:var(--ink);color:white;text-transform:uppercase;font-weight:700;letter-spacing:.05em;text-align:left}button b{float:right;font-size:21px}#message{min-height:18px;font-size:12px;color:#9a1d38}#message a{color:inherit;font-weight:700}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}.steps div{padding:28px 5vw;min-height:210px;border-right:1px solid var(--ink)}.steps div:last-child{border:0}.steps>b{color:var(--blue);font:12px "IBM Plex Mono",monospace}.steps h2{margin:45px 0 8px;font-size:28px;line-height:.95}.steps p{max-width:27ch;color:#486075;font-size:13px;line-height:1.5}#agent{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:9vw 5vw;background:var(--ink);color:white}#agent .route,#agent code{color:var(--lime)}#agent h2{font-size:clamp(40px,5vw,78px)}#agent p:not(.route){max-width:43ch;color:#c5d7e7;line-height:1.55}pre{align-self:center;overflow:auto;padding:25px;border:1px solid #7292ae;background:#183d60;color:#e7f3ff;font:12px/1.7 "IBM Plex Mono",monospace}footer{display:flex;justify-content:space-between;padding:21px 5vw;color:#486075;font:10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em}@media(max-width:760px){nav{grid-template-columns:1fr 1fr}nav span{display:none}.hero,#agent{grid-template-columns:1fr}.intro{padding:55px 25px 48px;border-right:0;border-bottom:1px solid var(--ink)}form{padding:32px 25px 45px}.steps{grid-template-columns:1fr}.steps div{min-height:160px;border-right:0;border-bottom:1px solid var(--ink)}#agent{padding:65px 25px;gap:44px}footer{padding:20px 25px;flex-direction:column;gap:8px}}
