* { box-sizing: border-box; }

body {
  margin: 0;
  background: #d7d4c7;
  color: #333;
  font: 13px/1.5 Arial, Helvetica, sans-serif;
}

a { color: #4a531b; }
a:hover { color: #876624; }
a:focus-visible { outline: 2px dotted #596323; outline-offset: 3px; }

.site-header {
  background: #f7f6f0;
  border-bottom: 1px solid #a8a58f;
}

.header-inner,
.nav-inner,
main,
.footer-inner {
  width: min(960px, 100% - 24px);
  margin-inline: auto;
}

.header-inner {
  min-height: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}

.brand img { display: block; width: 205px; height: auto; }

.tagline {
  margin: 0;
  color: #666;
  font-size: 15px;
  font-style: italic;
}

.nav-wrap {
  display: block;
  border-top: 1px solid #9da453;
  border-bottom: 1px solid #3e4817;
  background: #69752d;
}

.nav-inner { display: flex; }

.nav-inner a {
  display: block;
  padding: 9px 18px;
  border-right: 1px solid #879045;
  border-left: 1px solid #586224;
  color: #fff;
  text-decoration: none;
}

.nav-inner a:hover,
.nav-inner a:focus-visible,
.nav-inner a.active {
  background: #d6cb7e;
  color: #333;
}

main {
  margin-block: 22px;
  padding: 16px;
  border: 1px solid #b5b19d;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: start;
  gap: 18px;
}

.welcome,
.page-heading {
  margin-bottom: 15px;
  padding: 15px 18px;
  border: 1px solid #b4b987;
  background: #f2f3e8;
}

.eyebrow {
  margin: 0 0 4px;
  color: #747d32;
  font-size: 11px;
}

h1, h2, h3 { line-height: 1.3; }
.welcome h1, .page-heading h1 { margin: 0; color: #4f591f; font-size: 25px; }
.welcome p:last-child, .page-heading p { margin: 4px 0 0; color: #5e5e52; }

.content-section { margin: 16px 0; }
.content-section > h2 {
  margin: 0 0 10px;
  padding: 6px 9px;
  border: 1px solid #c8c5b6;
  border-left: 4px solid #778136;
  background: #efeee8;
  color: #4d5720;
  font-size: 17px;
}

.content-section > p { margin: 9px 2px; }

.software-list { display: grid; gap: 10px; }

.software-card,
.software-detail,
.contact-card {
  padding: 12px 14px;
  border: 1px solid #d2d0c5;
  background: #fafaf7;
}

.software-card h3,
.software-detail h2 {
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e3e1d8;
  color: #6a6d36;
  font-size: 17px;
}

.software-card p,
.software-detail p { margin: 8px 0; }
.software-card h3 a { text-decoration: none; }
.software-card h3 a:hover { text-decoration: underline; }

.product-icon {
  float: right;
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 0 6px 10px;
  place-items: center;
  border: 1px solid #b9b48c;
  border-radius: 4px;
  background: linear-gradient(#fff, #e6e3d3);
  color: #69643c;
  font: bold 19px Georgia, serif;
}

.notice {
  padding: 7px 9px;
  border: 1px solid #ded5a8;
  background: #faf7e9;
  color: #6c5721;
}

.sidebar { display: grid; gap: 12px; }

.side-box {
  border: 1px solid #c8c5b6;
  background: #f8f8f3;
}

.side-box h2 {
  margin: 0;
  padding: 7px 9px;
  border-bottom: 1px solid #b9ba97;
  background: linear-gradient(#e9eadb, #d8dac4);
  color: #4e5722;
  font-size: 14px;
}

.side-box-content { padding: 9px 10px; }
.side-box-content p { margin: 5px 0; }
.side-links { margin: 0; padding: 0; list-style: none; }
.side-links li { border-bottom: 1px dotted #c9c6b7; }
.side-links li:last-child { border-bottom: 0; }
.side-links a { display: block; padding: 6px 9px; text-decoration: none; }
.side-links a:hover { background: #efeee8; text-decoration: underline; }

.contact-card { background: #f8f8f3; }
.contact-card h2 { margin: 0 0 10px; color: #4e5722; font-size: 18px; }

footer {
  padding: 13px 0;
  border-top: 1px solid #aaa792;
  background: #d1cebf;
  color: #666;
}

@media (max-width: 700px) {
  .content-layout { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .header-inner { min-height: 0; flex-direction: column; gap: 5px; }
  .brand img { width: 180px; }
  .nav-inner { width: 100%; justify-content: center; }
  .nav-inner a { padding-inline: 13px; }
  main { padding: 10px; }
  .sidebar { grid-template-columns: 1fr; }
}