/* Shared product system: all styles are isolated to this section. */
#ngenco-product-system.ngenco-product-system {
  --system-cyan: #19adbe;
  --system-navy: #0c212e;
  --system-text: #354f67;
  width: 100%;
  margin: 0;
  padding: 58px 0 42px;
  color: #fff;
  background: radial-gradient(ellipse at 50% 100%, #173746 0, #0b202d 65%);
  font-family: "DIN", Helvetica, Arial, sans-serif;
  text-align: left;
}
#ngenco-product-system,
#ngenco-product-system *,
#ngenco-product-system *::before,
#ngenco-product-system *::after { box-sizing: border-box; }
#ngenco-product-system .ngenco-system__inner { width: 90%; max-width: 1400px; margin: 0 auto; }
#ngenco-product-system .ngenco-system__intro { margin: 0 0 28px; padding: 0; text-align: center; }
#ngenco-product-system .ngenco-system__eyebrow,
#ngenco-product-system .ngenco-system__range,
#ngenco-product-system .ngenco-system__phase-description,
#ngenco-product-system .ngenco-system__caption {
  margin: 0;
  padding: 0;
  color: #c9d5dc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .25em;
  text-transform: uppercase;
}
#ngenco-product-system .ngenco-system__eyebrow::after,
#ngenco-product-system .ngenco-system__group-header h3::after,
#ngenco-product-system .ngenco-system__caption::before {
  display: block;
  width: 50px;
  height: 3px;
  margin: 16px auto;
  border-radius: 2px;
  background: var(--system-cyan);
  content: "";
}
#ngenco-product-system .ngenco-system__intro h2 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__intro h2 span { color: var(--system-cyan); }
#ngenco-product-system .ngenco-system__description {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0;
  color: #b9c7d1;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  letter-spacing: .035em;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__groups {
  display: grid;
  grid-template-columns: repeat(var(--system-group-count, 3), minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
#ngenco-product-system .ngenco-system__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #6095ac;
  border-radius: 10px;
  background: #fff;
  color: var(--system-text);
}
#ngenco-product-system .ngenco-system__group-header {
  min-width: 0;
  margin: 0;
  padding: 23px 16px 20px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(125deg, #112c3c, #0b202d);
  text-align: center;
}
#ngenco-product-system .ngenco-system__range { font-size: 13px; }
#ngenco-product-system .ngenco-system__group-header h3 {
  margin: 5px 0 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__group-header h3::after { margin: 10px auto; }
#ngenco-product-system .ngenco-system__phase-description { font-size: 11px; letter-spacing: .22em; }
#ngenco-product-system .ngenco-system__stages { padding: 0 24px; }
#ngenco-product-system .ngenco-system__stage {
  --number-width: 42px;
  --number-gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 26px 0 22px;
}
#ngenco-product-system .ngenco-system__stage + .ngenco-system__stage { border-top: 1px solid #d5dfe7; }
#ngenco-product-system .ngenco-system__stage-header {
  display: grid;
  grid-template-columns: var(--number-width) minmax(0, 1fr);
  gap: var(--number-gap);
  align-items: start;
  padding: 0;
  margin: 0;
}
#ngenco-product-system .ngenco-system__number {
  display: block;
  min-width: 0;
  padding: 0 8px 6px 0;
  border-right: 1px solid var(--system-cyan);
  color: #00a7bf;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#ngenco-product-system .ngenco-system__stage-intro,
#ngenco-product-system .ngenco-system__stage-body { min-width: 0; overflow-wrap: anywhere; }
#ngenco-product-system .ngenco-system__stage-intro h4 {
  margin: 0;
  padding: 0;
  color: #0a2941;
  font-family: inherit;
  font-size: clamp(21px, 1.65vw, 25px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__summary,
#ngenco-product-system .ngenco-system__additional p {
  margin: 10px 0 0;
  padding: 0;
  color: var(--system-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__stage-body { margin-left: calc(var(--number-width) + var(--number-gap)); }
#ngenco-product-system .ngenco-system__list-title {
  margin: 20px 0 9px;
  padding: 0;
  color: #0a2941;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__list { margin: 0; padding: 0; list-style: none; }
#ngenco-product-system .ngenco-system__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 7px;
  padding: 0;
  color: var(--system-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
}
#ngenco-product-system .ngenco-system__list li:last-child { margin-bottom: 0; }
#ngenco-product-system .ngenco-system__list li > span { min-width: 0; }
#ngenco-product-system .ngenco-system__list b,
#ngenco-product-system .ngenco-system__list strong { font-weight: 400; }
#ngenco-product-system .ngenco-system__tick { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; stroke: #00a7bf; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#ngenco-product-system .ngenco-system__details { margin: 15px 0 0; padding: 0; }
#ngenco-product-system .ngenco-system__details > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  color: #007f96;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
#ngenco-product-system .ngenco-system__details > summary::-webkit-details-marker { display: none; }
#ngenco-product-system .ngenco-system__details > summary::marker { content: ""; }
#ngenco-product-system .ngenco-system__details > summary::before { content: none; }
#ngenco-product-system .ngenco-system__details > summary:hover { color: #005e70; text-decoration: underline; text-underline-offset: 4px; }
#ngenco-product-system .ngenco-system__details > summary:focus-visible { outline: 2px solid #007f96; outline-offset: 4px; border-radius: 2px; }
#ngenco-product-system .ngenco-system__details > summary svg { flex: 0 0 19px; width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#ngenco-product-system .ngenco-system__hide-label { display: none; }
#ngenco-product-system .ngenco-system__details[open] .ngenco-system__view-label { display: none; }
#ngenco-product-system .ngenco-system__details[open] .ngenco-system__hide-label { display: inline; }
#ngenco-product-system .ngenco-system__details[open] > summary svg { transform: rotate(90deg); }
#ngenco-product-system .ngenco-system__additional { margin: 9px 0 0; padding: 0 0 4px; }
#ngenco-product-system .ngenco-system__additional .ngenco-system__list-title:first-child { margin-top: 0; }
#ngenco-product-system .ngenco-system__additional .ngenco-system__list li::before { flex: 0 0 4px; width: 4px; height: 4px; margin-top: 9px; background: #00a7bf; border-radius: 50%; content: ""; }
#ngenco-product-system .ngenco-system__caption { margin: 22px 0 0; text-align: center; }
#ngenco-product-system .ngenco-system__caption::before { margin: 0 auto 12px; }
#ngenco-product-system .ngenco-system__sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) and (min-width: 901px) {
  #ngenco-product-system .ngenco-system__groups { gap: 14px; }
  #ngenco-product-system .ngenco-system__stages { padding: 0 17px; }
  #ngenco-product-system .ngenco-system__stage { --number-width: 36px; --number-gap: 12px; }
  #ngenco-product-system .ngenco-system__number { font-size: 29px; }
  #ngenco-product-system .ngenco-system__stage-intro h4 { font-size: 21px; }
  #ngenco-product-system .ngenco-system__list li { font-size: 15px; }
}
@media (max-width: 900px) {
  #ngenco-product-system.ngenco-product-system { padding: 42px 0 34px; }
  #ngenco-product-system .ngenco-system__groups { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #ngenco-product-system .ngenco-system__group-header { padding: 22px 20px; }
  #ngenco-product-system .ngenco-system__stages { padding: 0 28px; }
  #ngenco-product-system .ngenco-system__stage { --number-width: 43px; --number-gap: 20px; padding: 25px 0; }
  #ngenco-product-system .ngenco-system__stage-intro h4 { font-size: 24px; }
}
@media (max-width: 480px) {
  #ngenco-product-system .ngenco-system__inner { width: calc(100% - 32px); }
  #ngenco-product-system .ngenco-system__intro h2 { font-size: 30px; }
  #ngenco-product-system .ngenco-system__description { font-size: 17px; letter-spacing: normal; }
  #ngenco-product-system .ngenco-system__eyebrow { font-size: 11px; letter-spacing: .2em; }
  #ngenco-product-system .ngenco-system__stages { padding: 0 18px; }
  #ngenco-product-system .ngenco-system__stage { --number-width: 34px; --number-gap: 13px; }
  #ngenco-product-system .ngenco-system__number { font-size: 29px; }
  #ngenco-product-system .ngenco-system__stage-intro h4 { font-size: 22px; }
  #ngenco-product-system .ngenco-system__list li { gap: 8px; }
  #ngenco-product-system .ngenco-system__caption { letter-spacing: .18em; }
}
