/* Shared technical panels keep the three product cards visually balanced. */
.product-system-visual.certificate-mini,
.product-system-visual.protection-mini {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
  gap: 0;
  width: 100%;
  max-width: 340px;
  height: 257px;
  min-height: 0;
  margin: 26px auto 21px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2a4b72;
  border-radius: 12px;
  color: #c5dcf5;
  background:
    radial-gradient(ellipse at 50% 46%, #183c6370, transparent 70%),
    linear-gradient(135deg, #162b46, #101f34);
  box-shadow:
    0 10px 24px #172c4921,
    inset 0 1px 0 #b4d5ff0c;
}
.product-system-heading,
.product-system-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 6px;
  padding: 10px 12px;
  line-height: 1.3;
  font-size: 9px;
}
.product-system-heading {
  border-bottom: 1px solid #aacdff15;
  font-family: var(--mono);
  letter-spacing: 0.4px;
}
.product-system-heading > span,
.product-system-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.product-system-heading small {
  color: #829bbd;
  font: 8px var(--font);
  letter-spacing: 0;
  white-space: nowrap;
}
.product-system-heading i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94d6ff;
  box-shadow: 0 0 9px #6ecbff;
}
.product-system-scene {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: visible;
}
.product-system-scene text {
  fill: #c4def8;
  font: 11px var(--mono);
  text-anchor: middle;
}
.product-system-scene .system-label {
  fill: #cde3fa;
  font: 11px var(--font);
}
.product-system-scene .system-caption {
  fill: #83a6cb;
  font: 8px var(--mono);
  letter-spacing: 0.5px;
}
.system-grid {
  fill: none;
  stroke: #5588bd;
  stroke-width: 0.65;
  opacity: 0.17;
}
.system-grid ellipse:first-child {
  stroke-dasharray: 2 5;
}
.system-wire {
  fill: none;
  stroke: #5d96cd;
  stroke-width: 1;
  opacity: 0.55;
}
.system-packet {
  fill: none;
  stroke: #8ac7ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  filter: drop-shadow(0 0 3px #5798e8);
  animation: product-system-flow 3.8s linear infinite;
}
.system-packet-secondary {
  stroke: #a8e7ef;
  animation-delay: -1.6s;
}
.certificate-document > rect:not(.certificate-lock) {
  fill: url(#certificate-surface);
  stroke: #79a9d5;
  stroke-width: 1;
  filter: drop-shadow(0 4px 7px #020c1e70);
}
.certificate-document > .certificate-backplate {
  fill: #17334f;
  stroke: #3a6088;
}
.certificate-document .certificate-lock,
.certificate-corner {
  fill: none;
  stroke: #b3e2ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.certificate-corner {
  stroke: #709dc8;
  stroke-width: 1;
}
.certificate-document .certificate-domain {
  font-size: 10px;
  fill: #e0efff;
}
.certificate-document .certificate-type {
  font-size: 8px;
  fill: #91bada;
  letter-spacing: 0.4px;
}
.certificate-rule {
  stroke: #547ea766;
  stroke-width: 1;
}
.certificate-endpoint rect,
.protection-probes rect,
.protection-resources rect {
  fill: #1c3552;
  stroke: #4f789f;
  stroke-width: 0.8;
}
.certificate-endpoint path {
  fill: none;
  stroke: #9ac5e7;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.certificate-endpoint circle {
  fill: #a4dfff;
}
.certificate-endpoint text {
  font-size: 9px;
}
.certificate-renew-track,
.certificate-renew-arrow {
  fill: none;
  stroke: #68b8d0;
  stroke-width: 1;
  opacity: 0.6;
}
.certificate-renew-packet {
  stroke: #a8e7ef;
  stroke-width: 1.8;
  animation-duration: 5s;
}
.protection-probes circle {
  fill: #98d4ff;
  filter: drop-shadow(0 0 3px #76b5ff);
}
.protection-probe-packets {
  animation: none;
}
.protection-probe-packets path {
  animation: product-system-flow 3.8s linear infinite;
}
.protection-probe-packets path:nth-child(2) {
  animation-delay: -1.3s;
}
.protection-probe-packets path:nth-child(3) {
  animation-delay: -2.6s;
}
.protection-engine-shadow {
  fill: #041527;
  opacity: 0.5;
}
.protection-engine-base {
  fill: #173450;
  stroke: #49759f;
  stroke-width: 0.8;
}
.protection-engine-top {
  fill: #254a6e;
  stroke: #6698c7;
  stroke-width: 0.8;
}
.protection-policy-engine rect {
  fill: url(#protection-engine);
  stroke: #8ebce7;
  stroke-width: 1;
  filter: drop-shadow(0 4px 7px #020c1e70);
}
.protection-shield {
  fill: none;
  stroke: #b5e2ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.protection-register-packet {
  animation-delay: -2.7s;
  stroke: #8baecd;
  stroke-width: 1.5;
}
.protection-resources rect:first-child {
  fill: #203f53;
  stroke: #71aec2;
}
.protection-resources rect:nth-child(2) {
  stroke-dasharray: 3 3;
}
.protection-resources .system-label {
  font-size: 10px;
}
.protection-resources .system-caption {
  font-size: 7px;
}
.product-system-footer {
  color: #91aac6;
  background: #ffffff03;
  border-top: 1px solid #aacdff12;
  font-size: 8px;
  padding-block: 8px;
}
.product-system-footer i {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: #7db6ff;
}
.product-system-footer > span:last-child i {
  background: #9fe9ef;
}
@keyframes product-system-flow {
  to {
    stroke-dashoffset: -100;
  }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    #products .product-grid {
      row-gap: 0;
    }
    #products .product-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      row-gap: 0;
    }
  }
}
@media (min-width: 700px) and (max-width: 899px) {
  .product-system-visual.certificate-mini,
  .product-system-visual.protection-mini {
    height: 224px;
  }
  .product-system-heading,
  .product-system-footer {
    padding-inline: 9px;
  }
  .product-system-heading {
    font-size: 8px;
    letter-spacing: 0;
  }
}
@media (max-width: 699px) {
  .product-system-visual.certificate-mini,
  .product-system-visual.protection-mini {
    margin-top: 20px;
  }
}