@font-face{font-family:DaylightBangers;src:url('/assets/toolbox-fonts/Bangers-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Roger's explainer belongs to the comic character, not the DOS sample. */
#make .roger{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);align-items:center;gap:16px;margin-top:24px}
#make .roger-portrait{display:block;overflow:hidden;padding:10px 10px 0;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:4px 5px 0 #b43d7840}
#make .roger img{display:block;width:100%;height:auto;mask-image:none;-webkit-mask-image:none;filter:none}
#make .bubble{font:400 clamp(22px,2.1vw,28px)/1.12 DaylightBangers,sans-serif;letter-spacing:.025em;text-wrap:balance;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:18px;margin:0;max-width:250px;box-shadow:4px 5px 0 #b43d7840}
#make .bubble::after{left:-9px;bottom:calc(50% - 8px);width:14px;height:14px}
/* Keep the software boxes; make the section fit its content. */
#price{padding-block:56px}
#price .sec-head{align-items:center;margin-bottom:24px}
#price .h2{font-size:clamp(36px,4.4vw,60px);max-width:22ch}
#price .boxes{align-items:start;gap:24px;margin-top:0}
#price .box{gap:16px;align-items:center}
#price .box svg{width:min(100%,230px)}
#price .box ul{width:100%;max-width:280px;font-size:14px;line-height:1.6}
#price .credit-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;padding:24px;border:1px solid #8e663f66;border-radius:12px;background:#fff9e870}
#price .credit-notes h3{font:700 14px/1.4 var(--f-mono);letter-spacing:0;margin:0 0 8px}
#price .credit-notes p{font:400 13px/1.6 var(--f-mono);color:var(--ink-2);text-wrap:pretty}
#price .credit-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:16px;border-top:1px solid #8e663f44;font:600 13px/1.5 var(--f-mono)}
#price .credit-links a{text-underline-offset:4px}
@media(max-width:900px){#make .roger{grid-template-columns:160px minmax(0,250px);justify-content:start}}
@media(max-width:800px){#price .boxes{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:16px}#price .box ul{font-size:12px}#price .credit-notes{gap:20px;padding:20px}}
@media(max-width:600px){#make .roger{grid-template-columns:minmax(100px,140px) minmax(0,1fr);gap:12px}#make .bubble{font-size:23px;padding:14px}#price{padding-block:40px}#price .boxes{grid-template-columns:1fr;gap:26px}#price .box{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:16px;align-items:center}#price .box ul{font-size:13px}#price .credit-notes{grid-template-columns:1fr}#price .credit-links{gap:16px}}