*{box-sizing:border-box}
:root{--paper:#f2eedf;--black:#111;--yellow:#f3db24;--red:#ff4e35}
body{margin:0;background:var(--paper);color:var(--black);font-family:"Courier New",monospace}
a{color:inherit;text-decoration:none}
.ticker{padding:9px 20px;border-bottom:3px solid var(--black);background:var(--yellow);font-weight:900;font-size:12px;letter-spacing:2px;white-space:nowrap;overflow:hidden}
.bar{display:grid;grid-template-columns:260px 1fr auto;align-items:stretch;border-bottom:3px solid var(--black)}
.logo{padding:24px;border-right:3px solid var(--black);font-size:23px;font-weight:900}
.nav{display:flex}
.nav a{display:grid;place-items:center;padding:0 20px;border-right:3px solid var(--black);font-size:12px;font-weight:900}
.nav a:hover,.nav a.on{background:var(--black);color:var(--paper)}
.build{display:grid;place-items:center;padding:0 25px;background:var(--red);color:#fff;font-weight:900}
.main{padding:28px}
.hero{display:grid;grid-template-columns:2fr 1fr;border:3px solid var(--black)}
.hero-copy{padding:55px;border-right:3px solid var(--black)}
.codebox{display:grid;align-content:space-between;padding:30px;background:var(--black);color:#fff}
.codebox pre{white-space:pre-wrap;color:var(--yellow);font-size:13px;line-height:1.8}
.eyebrow{display:inline-block;padding:7px 10px;border:2px solid var(--black);background:var(--yellow);font-weight:900;font-size:12px}
h1{margin:25px 0;font-family:Arial Black,Arial,sans-serif;font-size:clamp(53px,9vw,120px);line-height:.82;letter-spacing:-7px;text-transform:uppercase}
.lead{max-width:750px;font-size:17px;line-height:1.7}
.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:25px;border-top:3px solid var(--black);border-left:3px solid var(--black)}
.card{min-height:250px;padding:28px;border-right:3px solid var(--black);border-bottom:3px solid var(--black)}
.card:nth-child(even){background:var(--yellow)}
.card-number{font-size:38px;font-weight:900}
.card h2{margin:40px 0 12px;font-family:Arial Black,Arial,sans-serif;font-size:24px}
.card p{line-height:1.65}
.footer{display:flex;justify-content:space-between;margin-top:25px;padding:22px;border:3px solid var(--black);font-size:12px;font-weight:900}
@media(max-width:850px){.bar{grid-template-columns:1fr auto}.nav{display:none}.logo{border-right:3px solid var(--black)}.hero{grid-template-columns:1fr}.hero-copy{padding:30px;border-right:0;border-bottom:3px solid var(--black)}.cards{grid-template-columns:1fr}h1{letter-spacing:-4px}}