:root{
  --chrome:#B8C4C4;
  --beige:#F0EDE4;
  --teal:#3D7A7A;
  --btn:#008000;
  --ink:#000000;
  --hi:#FFFFFF;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body.desktop{
  margin:0;
  padding:18px 14px 28px;
  background-color:var(--teal);
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 2px, rgba(255,255,255,0) 2px 9px);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3,.titlebar,.toolbar,.btn,label,legend,.fields dt{
  font-family:Verdana, Geneva, sans-serif;
}

.mono,.statusbar,.amt,.form-status,cite{
  font-family:"Courier New", Courier, monospace;
}

a{color:var(--teal)}
a:hover{color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--beige);border:3px solid var(--ink);padding:8px}
.skip:focus{left:10px;z-index:50}

.shell{max-width:1040px;margin:0 auto}

.window{
  background:var(--chrome);
  border:3px solid var(--ink);
  box-shadow:7px 7px 0 rgba(0,0,0,.4);
  margin:0 0 20px;
}

.titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--teal);
  color:var(--hi);
  padding:6px 8px;
  border-bottom:3px solid var(--ink);
}
.tb-title{font-size:12.5px;font-weight:bold;letter-spacing:.4px}
.tb-ctrls{display:flex;gap:4px;flex:0 0 auto}
.tb-ctrls i{
  display:block;width:17px;height:14px;background:var(--chrome);
  border-top:2px solid var(--hi);border-left:2px solid var(--hi);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
}

.toolbar{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:5px;background:var(--chrome);
  border-bottom:3px solid var(--teal);
}
.toolbar a{
  font-size:12px;text-decoration:none;color:var(--ink);
  padding:5px 11px;border:2px solid transparent;
}
.toolbar a:hover,.toolbar a:focus{
  background:var(--beige);
  border-color:var(--hi) var(--teal) var(--teal) var(--hi);
  outline:none;
}

.inset{
  border:3px solid;
  border-color:var(--teal) var(--hi) var(--hi) var(--teal);
  background:var(--beige);
}

.panel{padding:16px;margin:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:12px}
.grid .panel{margin:0}

h1{font-size:21px;margin:0 0 12px;line-height:1.3}
h2{font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--teal);padding-bottom:5px}
p{margin:0 0 9px}
.lede{font-family:Verdana, Geneva, sans-serif;font-size:15px}

.fields{display:grid;grid-template-columns:140px 1fr;gap:5px 14px;margin:0 0 14px;font-size:14px}
.fields dt{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;color:var(--teal)}
.fields dd{margin:0;border-bottom:1px dotted var(--teal)}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.btn{
  display:inline-block;font-size:13px;text-decoration:none;color:var(--ink);
  background:var(--chrome);padding:11px 18px;cursor:pointer;
  border:3px solid;border-color:var(--hi) var(--teal) var(--teal) var(--hi);
}
.btn:hover{background:var(--beige)}
.btn:active{border-color:var(--teal) var(--hi) var(--hi) var(--teal)}
.btn-primary{background:var(--btn);color:var(--hi);border-color:var(--hi) var(--ink) var(--ink) var(--hi)}
.btn-primary:hover{background:var(--btn);color:var(--hi)}

.quote-panel{position:relative;padding-left:46px}
.rail{
  position:absolute;left:14px;top:14px;bottom:14px;width:18px;
  background:repeating-linear-gradient(to bottom, var(--teal) 0 4px, rgba(255,255,255,0) 4px 12px);
  border-left:3px solid var(--teal);border-right:3px solid var(--teal);
}
blockquote{margin:0;font-family:Verdana, Geneva, sans-serif;font-size:16px;line-height:1.55}
cite{display:block;font-style:normal;font-size:12px;margin-top:12px;color:var(--teal)}

.form-note{font-size:14px}
.field{margin:0 0 13px}
label{display:block;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;margin:0 0 5px}
input,textarea{
  width:100%;font-family:Arial, Helvetica, sans-serif;font-size:14px;
  padding:9px;background:var(--hi);color:var(--ink);
  border:3px solid;border-color:var(--teal) var(--hi) var(--hi) var(--teal);
}
input:focus,textarea:focus{outline:2px solid var(--btn);outline-offset:1px}
textarea{resize:vertical}
.form-status{font-size:12px;margin:14px 0 0;background:var(--chrome);border:2px solid;border-color:var(--teal) var(--hi) var(--hi) var(--teal);padding:5px 8px}
.field.bad input,.field.bad textarea{border-color:var(--ink) var(--hi) var(--hi) var(--ink);background:var(--beige)}

.pricebox{border:3px solid;border-color:var(--teal) var(--hi) var(--hi) var(--teal);background:var(--chrome);margin:0 0 14px;padding:6px 14px 14px}
.pricebox legend{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.6px;background:var(--teal);color:var(--hi);padding:4px 9px;border:2px solid var(--ink)}
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;padding:10px 0;border-bottom:2px dotted var(--teal)}
.price-row:last-child{border-bottom:none}
.price-row .desc{flex:1 1 220px}
.price-row small{font-size:12px}
.amt{font-weight:bold;font-size:14px;white-space:nowrap;background:var(--beige);border:2px solid var(--teal);padding:4px 9px;display:inline-block}

address{font-style:normal}
.big-link{font-family:"Courier New", Courier, monospace;font-size:19px;font-weight:bold;text-decoration:none}
.social{list-style:none;margin:0 0 10px;padding:0}
.social li{margin:0 0 6px}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;background:var(--chrome);border:2px solid;border-color:var(--hi) var(--teal) var(--teal) var(--hi);padding:5px 10px;color:var(--ink)}
.social a:hover{background:var(--beige)}

.statusbar{
  display:flex;flex-wrap:wrap;gap:6px 10px;
  font-size:11.5px;background:var(--chrome);
  border-top:3px solid var(--teal);padding:7px 8px;
}
.statusbar span{
  border:2px solid;border-color:var(--teal) var(--hi) var(--hi) var(--teal);
  background:var(--beige);padding:3px 9px;
}
.statusbar a{text-decoration:none}

#privacy h2{margin-top:18px}
#privacy p{font-size:14px;max-width:70ch}

@media (max-width:620px){
  body.desktop{padding:10px 8px 20px}
  .panel{padding:13px;margin:10px}
  .grid{padding:10px}
  h1{font-size:18px}
  .fields{grid-template-columns:1fr;gap:2px}
  .fields dt{margin-top:8px}
  .tb-title{font-size:11.5px}
  blockquote{font-size:14.5px}
  .btn{width:100%;text-align:center}
}