/* Termovia — classic desktop UI chrome, image-free */
:root{
  --chrome:#C8C8C8;
  --beige:#F3EFE3;
  --teal:#5F8A86;
  --btn:#0B6B0B;
  --ink:#000000;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  padding:18px 14px 34px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,0) 2px 6px),
    var(--chrome);
  color:var(--ink);
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
  line-height:1.55;
}

h1,h2,h3,.tb-name,.menustrip a,.btn,.num,.card-bar,.price{
  font-family:"Trebuchet MS", Verdana, sans-serif;
}

h1{font-size:25px;line-height:1.2;margin:0 0 10px;}
h2{font-size:18px;margin:0 0 8px;}
h3{font-size:15px;margin:0 0 6px;}
p{margin:0 0 10px;}

a{color:var(--ink);}

.mono{font-family:"Courier New", Courier, monospace;}

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

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

/* ---------- window ---------- */
.win{
  background:var(--chrome);
  border:3px solid var(--ink);
  border-top-color:var(--beige);
  border-left-color:var(--beige);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
  margin:0 0 22px;
  padding:4px;
}

.titlebar{
  display:flex;align-items:center;gap:10px;
  background:var(--teal);
  border:2px solid var(--ink);
  padding:5px 6px;
}
.titlebar-sub{background:var(--teal);}
.tb-name{
  color:var(--beige);
  font-weight:bold;
  font-size:14px;
  letter-spacing:.4px;
  flex:1 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-boxes{display:flex;gap:4px;flex:0 0 auto;}
.box{
  width:19px;height:17px;
  background:var(--chrome);
  border:2px solid var(--ink);
  border-top-color:var(--beige);
  border-left-color:var(--beige);
  display:flex;align-items:center;justify-content:center;
}
.box i{display:block;background:var(--ink);}
.min{width:8px;height:2px;margin-top:6px;}
.max{width:9px;height:8px;background:transparent !important;border:2px solid var(--ink);}
.clo{width:9px;height:2px;transform:rotate(45deg);box-shadow:0 0 0 0 var(--ink);position:relative;}
.clo:after{content:"";position:absolute;left:0;top:0;width:9px;height:2px;background:var(--ink);transform:rotate(-90deg);}

/* ---------- menu + toolbar ---------- */
.menustrip{
  display:flex;flex-wrap:wrap;gap:2px;
  background:var(--chrome);
  border:2px solid var(--ink);
  border-top:none;
  padding:3px 4px;
}
.menustrip a{
  text-decoration:none;
  font-size:13px;
  padding:4px 9px;
  border:2px solid transparent;
}
.menustrip a:hover,.menustrip a:focus{
  background:var(--teal);
  color:var(--beige);
  border-color:var(--ink);
}
.menustrip a[aria-current="page"]{
  background:var(--beige);
  border-color:var(--ink);
}

.toolbar{
  display:flex;flex-wrap:wrap;gap:5px;
  border:2px solid var(--ink);
  border-top:none;
  padding:5px;
  background:var(--chrome);
}
.tool{
  font-size:11px;
  padding:3px 8px;
  background:var(--beige);
  border:2px solid var(--ink);
  border-top-color:#fff;
  border-left-color:#fff;
}
.teal-tool{background:var(--teal);color:var(--beige);}

/* ---------- panels ---------- */
.panel{
  background:var(--beige);
  padding:16px;
  margin-top:4px;
}
.inset{
  border:3px solid var(--ink);
  border-right-color:var(--chrome);
  border-bottom-color:var(--chrome);
}
.inner{
  background:var(--chrome);
  margin:12px 0 0;
  padding:13px;
}
.inner h2{border-bottom:2px solid var(--ink);padding-bottom:5px;}

.hero .lead{font-size:16px;}
.lead{margin-bottom:12px;}

.fieldlist{list-style:none;margin:0 0 14px;padding:0;}
.fieldlist li{
  border-bottom:2px dotted var(--teal);
  padding:5px 0;
  font-size:13px;
}
.fieldlist b{display:inline-block;min-width:78px;}

/* ---------- buttons ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 12px;}
.btn{
  display:inline-block;
  font-size:14px;
  text-decoration:none;
  padding:9px 16px;
  background:var(--chrome);
  color:var(--ink);
  border:3px solid var(--ink);
  border-top-color:#fff;
  border-left-color:#fff;
  cursor:pointer;
}
.btn:active{
  border-top-color:var(--ink);
  border-left-color:var(--ink);
  border-right-color:#fff;
  border-bottom-color:#fff;
}
.btn-primary{
  background:var(--btn);
  color:var(--beige);
  border-top-color:#5aa35a;
  border-left-color:#5aa35a;
}

.status{
  font-size:12px;
  background:var(--chrome);
  border:2px solid var(--ink);
  border-right-color:#fff;
  border-bottom-color:#fff;
  padding:5px 8px;
  margin:12px 0 0;
}

/* ---------- steps ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.steps li{
  background:var(--chrome);
  border:3px solid var(--ink);
  border-top-color:#fff;
  border-left-color:#fff;
  padding:12px;
}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  background:var(--teal);
  color:var(--beige);
  border:2px solid var(--ink);
  font-weight:bold;
  margin-bottom:8px;
}
.steps p{margin:0;font-size:13px;}

/* ---------- form ---------- */
.form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.field{display:flex;flex-direction:column;gap:5px;}
.field-wide{grid-column:1 / -1;}
.form .btnrow,.form .status{grid-column:1 / -1;margin-top:0;}
label{font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;}
input,textarea{
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
  padding:8px;
  background:#fff;
  color:var(--ink);
  border:3px solid var(--ink);
  border-right-color:var(--chrome);
  border-bottom-color:var(--chrome);
}
input:focus,textarea:focus{outline:3px solid var(--teal);outline-offset:0;}
textarea{resize:vertical;}
.err{border-right-color:var(--teal);border-bottom-color:var(--teal);background:#fff;}

/* ---------- cards ---------- */
.cards{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.card{
  background:var(--beige);
  border:3px solid var(--ink);
  border-top-color:#fff;
  border-left-color:#fff;
  display:flex;flex-direction:column;
}
.card-bar{
  background:var(--teal);
  color:var(--beige);
  font-size:12px;
  font-weight:bold;
  padding:4px 8px;
  border-bottom:3px solid var(--ink);
  letter-spacing:.6px;
}
.card-body{padding:12px;}
.price{
  font-size:22px;
  font-weight:bold;
  background:var(--chrome);
  border:2px solid var(--ink);
  display:inline-block;
  padding:3px 10px;
  margin:0 0 10px;
}
.price-alt{font-size:16px;background:var(--btn);color:var(--beige);}
.ticks{list-style:none;margin:0;padding:0;font-size:13px;}
.ticks li{display:flex;gap:8px;align-items:flex-start;padding:3px 0;}
.tick{
  flex:0 0 auto;
  width:11px;height:11px;margin-top:4px;
  background:var(--teal);
  border:2px solid var(--ink);
}

.notes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.note{
  background:var(--beige);
  border:2px solid var(--ink);
  padding:10px;
}
.note b{display:block;border-bottom:2px dotted var(--teal);margin-bottom:6px;padding-bottom:4px;font-size:12px;text-transform:uppercase;}
.note p{margin:0;font-size:13px;}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
address{font-style:normal;font-size:13px;margin-bottom:10px;}
.phone{font-size:17px;font-weight:bold;}
.phone a{text-decoration:none;}
.phone a:hover{text-decoration:underline;}
.link{font-weight:bold;}
.social{list-style:none;margin:0;padding:0;}
.social li{margin-bottom:6px;}
.social a{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;font-size:13px;
  background:var(--beige);
  border:2px solid var(--ink);
  border-top-color:#fff;
  border-left-color:#fff;
  padding:6px 9px;
}
.social a:hover{background:var(--teal);color:var(--beige);}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;flex-wrap:wrap;gap:4px;
  margin-top:14px;
  font-family:"Courier New", Courier, monospace;
  font-size:11px;
}
.statusbar .cell{
  background:var(--chrome);
  border:2px solid var(--ink);
  border-right-color:#fff;
  border-bottom-color:#fff;
  padding:4px 7px;
}
.statusbar .grow{flex:1 1 260px;}
.statusbar a{color:var(--ink);}

.brandline{
  text-align:center;
  font-size:11px;
  margin:0;
}

@media (max-width:560px){
  body{padding:10px 8px 26px;}
  h1{font-size:21px;}
  .panel{padding:12px;}
  .tb-name{font-size:12px;}
}