/* ERPDataArchive — redesign, July 2026.
   Component styling is inline on each element; this file holds only what an
   inline style cannot express: the body reset, link colours and the responsive
   collapse rules. See Design System.dc.html for the tokens and conventions.
   Grid wrappers carry data-g="4|3|2|rail|cta|foot"; split column pairs that use
   a border as their divider carry data-split="a|b". */

body {
  margin: 0;
  background: #f7f5f0;
  color: #15201c;
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: #0d4f42; }
a:hover { color: #093c32; }

.article-meta {
  margin: 0 0 28px;
  color: #6b7873;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.legal-copy h2 {
  margin: 44px 0 16px;
  padding-top: 24px;
  border-top: 1px solid #ddd8ce;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.legal-copy h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-copy h3 {
  margin: 28px 0 10px;
  color: #15201c;
  font-size: 18px;
  font-weight: 600;
}

.legal-copy p,
.legal-copy li {
  color: #4c5a54;
  font-size: 17px;
}

.legal-copy p { margin: 0 0 16px; }
.legal-copy ul,
.legal-copy ol { margin: 0 0 20px; padding-left: 24px; }
.legal-copy li { margin: 0 0 8px; }

.legal-note {
  margin: 24px 0 !important;
  padding: 16px 18px;
  border-radius: 6px;
  background: #e7f0ed;
  color: #0d3b32 !important;
  font-size: 15.5px !important;
}

.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #44514c;
  border-radius: 10px;
  background: #15201c;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
  color: #fff;
}

.cookie-banner p { margin: 0 0 16px; color: #c3ccc7; font-size: 15px; }
.cookie-banner a { color: #9fd4c8; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #73807b;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 600 15px/1.2 "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}
.cookie-button--accept { border-color: #fff; background: #fff; color: #0d4f42; }
.cookie-settings {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 999;
  padding: 7px 10px;
  border: 1px solid #c7c0b3;
  border-radius: 5px;
  background: #fff;
  color: #15201c;
  cursor: pointer;
  font: 500 12px/1.2 "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

:focus-visible { outline: 2px solid #0d4f42; outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -5rem;
  z-index: 100;
  background: #fff;
  color: #15201c;
  padding: 10px 16px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

@media (max-width: 900px) {
  [data-g="4"], [data-g="3"], [data-g="foot"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-g="2"], [data-g="rail"], [data-g="cta"], [data-g="typerow"] { grid-template-columns: 1fr !important; }
  [data-g="cta"] { gap: 28px !important; }
  [style*="position:sticky"] { position: static !important; }
  [data-split] { padding-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
  [data-split="b"] { padding-top: 32px !important; margin-top: 0 !important; border-top: 1px solid #ddd8ce !important; background: transparent !important; }
  section > div { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 620px) {
  [data-g="4"], [data-g="3"], [data-g="2"], [data-g="foot"], [data-g="rail"], [data-g="cta"], [data-g="typerow"] { grid-template-columns: 1fr !important; }
  section > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* Keep the primary action visible without turning the header into three rows. */
  body > div > div:first-child > div { padding: 7px 20px !important; }
  body > div > div:first-child a { display: none; }
  header > div { padding: 12px 20px !important; gap: 12px !important; flex-wrap: nowrap !important; }
  header nav { gap: 0 !important; flex-wrap: nowrap !important; }
  header nav a:not(:last-child) { display: none; }
  header nav a:last-child { padding: 9px 12px !important; font-size: 13px !important; white-space: nowrap; }
  header > div > a > span:last-child { font-size: 14px !important; }
  .cookie-banner { right: 10px; bottom: 10px; left: 10px; padding: 18px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr; }
}