@font-face{font-family:Roboto;font-weight:300;font-display:swap;src:url(fonts/Roboto-Light.ttf) format("truetype")}
@font-face{font-family:Roboto;font-weight:400;font-display:swap;src:url(fonts/Roboto-Regular.ttf) format("truetype")}
@font-face{font-family:Roboto;font-weight:700;font-display:swap;src:url(fonts/Roboto-Bold.ttf) format("truetype")}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Roboto,Helvetica,Arial,sans-serif;color:#fff;background:#1c1c1c}
/* hero with the live-site background; the panel overflows its bottom edge like the dashboard image on the live homepage */
.hero{display:flow-root;background:#000 url(bg.png) center/cover no-repeat;padding:50px 24px 0}
.wrap{max-width:1080px;margin:0 auto}
header img{width:186px;height:60px;display:block}
.panel{margin:100px 0 -60px calc(50% - min(700px,50vw - 24px));width:min(1400px,100vw - 48px);position:relative;background:#1c1c1c;
  padding:40px 32px 72px;min-height:580px;text-align:center}
h1{font-size:clamp(2.25rem,5vw,4rem);font-weight:400;line-height:1.2;margin:0 0 32px}
.lead{font-size:1.5rem;font-weight:300;line-height:1.6;margin:0}
.note{max-width:760px;margin:140px auto 0;text-align:left;font-size:1rem;line-height:1.5}
.after{height:120px} /* white space under the panel; 60px of it overflows the hero */