:root{
  --olive:#7e8124;
  --olive-bright:#a4a83b;
  --ink:#f5f2e9;
  --panel:#0b0c09;
  --line:#44471d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#050604}
body{margin:0;background:#050604;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.visual-page{
  position:relative;
  width:min(100vw,1024px);
  aspect-ratio:2/3;
  margin:0 auto;
  background:url('approved-one-page-visual.png') top center/100% 100% no-repeat;
  overflow:hidden;
}
.hotspot{
  position:absolute;
  display:block;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:5;
}
.hotspot:focus-visible,
.real-qr:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}
.anchor{position:absolute;left:0;width:1px;height:1px}
.freight-anchor{top:39%}
.fist-anchor{top:39%}
.contact-anchor{top:86%}

/* Top navigation hotspot positions */
.nav-home{left:34.7%;top:2.4%;width:5%;height:3.4%}
.nav-freight{left:40.5%;top:2.4%;width:11.5%;height:3.4%}
.nav-fist{left:53.2%;top:2.4%;width:5.7%;height:3.4%}
.nav-contact{left:69.8%;top:2.4%;width:6.4%;height:3.4%}
.top-quote{left:79.6%;top:1.7%;width:18.5%;height:4%}

/* Primary CTAs */
.hero-quote{left:3%;top:35.9%;width:24%;height:3.3%}
.freight-quote{left:4.5%;top:70.6%;width:24%;height:3%}
.fist-learn{left:36%;top:70.6%;width:12%;height:3%}
.fist-beta{left:49%;top:70.6%;width:14.5%;height:3%}
.bottom-quote{left:46%;top:91.1%;width:22%;height:3.3%}

/* Bottom contact icons and QR */
.phone-link{left:77.3%;top:90.2%;width:4.8%;height:3.5%}
.email-link{left:83.8%;top:90.2%;width:4.8%;height:3.5%}
.real-qr{
  position:absolute;
  left:88.85%;
  top:89.72%;
  width:6.65%;
  aspect-ratio:1;
  z-index:8;
  display:block;
  background:#fff;
  padding:.25%;
}
.real-qr img{width:100%;height:100%;display:block}

/* Cover redundant footer nav only */
.footer-nav-cover{
  position:absolute;
  left:31%;
  bottom:0;
  width:43%;
  height:3.4%;
  background:#050604;
  z-index:7;
}

/* Modals */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
}
.modal[hidden]{display:none}
.modal-card{
  width:min(760px,100%);
  max-height:92vh;
  overflow:auto;
  position:relative;
  padding:34px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 0,rgba(126,129,36,.16),transparent 18rem),
    linear-gradient(180deg,#12140d,#080907);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.modal-card.compact{width:min(620px,100%)}
.close{
  position:absolute;right:16px;top:10px;
  border:0;background:transparent;color:#fff;
  font-size:34px;cursor:pointer
}
.eyebrow{
  color:var(--olive-bright);
  font-weight:800;
  letter-spacing:.16em;
  font-size:12px;
}
.modal h1{
  margin:0 0 22px;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:48px;
  letter-spacing:.02em;
}
.modal p{line-height:1.55}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-size:13px;font-weight:800}
input,textarea{
  width:100%;
  margin-top:6px;
  padding:13px 14px;
  border:1px solid var(--line);
  background:#080907;
  color:#fff;
  font:inherit;
}
textarea{min-height:120px;resize:vertical}
.full{grid-column:1/-1}
.submit{
  margin-top:18px;
  padding:14px 18px;
  border:1px solid var(--olive);
  background:linear-gradient(180deg,#8b8e2f,#62651f);
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
}
.form-note{color:#bbbcae;font-size:12px}
.hidden{display:none}
@media(max-width:700px){
  .form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .modal-card{padding:26px 20px}
  .modal h1{font-size:38px}
}