@media (max-width: 1030px) { .site-header .nav-tools > .button { display: none; } }
.service-example, .package-example { margin-block-start: 9px; color: #b9c9df; }
.service-row .service-desc > p { margin: 0; }
.service-row .service-desc > .service-example { margin-block-start: 9px; color: #b9c9df; }
.system-screens, #faq { scroll-margin-top: 105px; }
.system-screens-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.system-screens-grid figure { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: #101e30; }
.system-screens-grid figure a { display: block; overflow: hidden; background: #14274a; }
.system-screens-grid figure a:focus-visible { outline-offset: -4px; }
.system-screens-grid img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; }
.system-screens-grid figcaption { padding: 15px 17px 18px; }
.system-screens-grid h3 { margin: 0 0 6px; font-size: 17px; }
.system-screens-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.footer-links a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 840px) {
  .system-screens-grid { grid-template-columns: 1fr; }
  .system-screens-grid figure { max-width: 610px; }
}

/* Centre the navigation against the viewport, independently of each flank. */
.site-header .nav {
  width: 100%;
  max-width: none;
  min-height: 74px;
  padding-inline: clamp(12px, 2.3vw, 36px);
}
@media (min-width: 1001px) {
  .site-header .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
  }
  .site-header .nav > .brand { justify-self: start; }
  .site-header .nav > .links { justify-content: center; }
  .site-header .nav > .nav-tools { justify-self: end; }
}
@media (max-width: 1000px) {
  .site-header .nav { min-height: 68px; }
  .site-header .nav > .links { top: 100%; text-align: center; }
  .site-header .nav > .links a { display: flex; justify-content: center; }
}

.footer-links a[href^="https://www.instagram.com/"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border-radius: 5px;
  white-space: nowrap;
}
.footer-links a[href^="https://www.instagram.com/"] .arrow { flex: none; }
.footer-links a[href^="https://www.instagram.com/"] .arrow svg { width: 14px; height: 14px; }
.footer-links a[href^="https://www.instagram.com/"]:focus-visible { outline-offset: 3px; }