/* ===================== Powered by Gridtek ===================== */
.sc-home { position: relative; z-index: 2; overflow: hidden; margin: 30px calc(var(--fr, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px) 0 calc(var(--fl, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px); padding: 20px 0; }   /* no box: the logos sit straight on the page */
.sc-h { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: .35em; font-size: clamp(30px, 5.2vw, 60px); font-weight: 700; line-height: 1; letter-spacing: .08em; white-space: nowrap; color: var(--ink); opacity: .07; text-decoration: none; transition: opacity .3s ease, color .3s ease; }   /* a large, very faint watermark behind the sliding logos */
.sc-h .sc-mark svg { width: .82em; height: .82em; }
.sc-link { display: block; color: inherit; text-decoration: none; }
.sc-link:hover .sc-h, .sc-link:focus-visible .sc-h { opacity: .14; color: var(--accent); }
.sc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sc-mark svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.sc-all { font-size: 14px; color: var(--accent); text-decoration: none; }
.sc-all:hover { text-decoration: underline; }
.sc-marquee { position: relative; z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sc-track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 6px 0; animation: sc-scroll calc(var(--n, 8) * var(--sp, 6s)) linear infinite; }
.sc-dup { display: flex; align-items: center; gap: 28px; }
.sc-item { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; color: var(--muted); text-decoration: none; pointer-events: auto; opacity: .55; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }   /* every logo the same square size, no box, grayed out */
.sc-item:focus-visible { opacity: 1; filter: none; outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .sc-item:hover { opacity: 1; filter: none; transform: translateY(-3px); } }   /* its own colours only when pointed at with a mouse; phones stay gray */
.sc-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-item .sc-ini { width: 100%; height: 100%; font-size: 22px; }
.sc-tag { position: absolute; left: 0; right: 0; top: calc(100% + 3px); font-family: "JetBrains Mono", monospace; font-size: 7.5px; font-style: normal; line-height: 10px; letter-spacing: .2em; text-align: center; color: var(--muted); white-space: nowrap; }
.sc-tag.is-inline { padding: 0 5px; border: 1px solid var(--rule); background: var(--bg); line-height: 14px; }
.sc-word { font-size: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.sc-marquee:hover .sc-track, .sc-marquee:focus-within .sc-track { animation-play-state: paused; }
@keyframes sc-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } }
@media (prefers-reduced-motion: reduce) { .sc-track { animation: none; flex-wrap: wrap; width: auto; } .sc-dup { display: none; } }
.sc-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
a.sc-card:hover { border-color: var(--accent); }
.sc-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.sc-logo img { max-width: 44px; max-height: 44px; width: auto; height: auto; }
.sc-ini { display: grid; place-items: center; width: 44px; height: 44px; font-weight: 600; color: #fff; background: var(--ink); }
.sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sc-body b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ind { font-size: 12px; color: var(--muted); }
.sc-go { flex: none; color: var(--muted); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 30px 0; }
.sc-card.is-full { align-items: flex-start; padding: 18px; }
.sc-card.is-full .sc-logo, .sc-card.is-full .sc-ini { width: 64px; height: 64px; }
.sc-card.is-full .sc-logo img { max-width: 64px; max-height: 64px; }
.sc-card.is-full .sc-body b { white-space: normal; font-size: 17px; }
.sc-about { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sc-uses { margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; color: var(--accent); }
.sc-cta { margin: 0 0 20px; }
/* The Powered by directory: industry chips, then square tiles (logo + name at the bottom), grayed until pointed at */
.sc-inds { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.sc-inds a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-size: 14px; text-decoration: none; transition: border-color .15s ease; }
.sc-inds a:hover { border-color: var(--accent); }
.sc-inds a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sc-inds small { font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: .7; }
.sc-ind-group { margin: 22px 0 26px; }
.sc-ind-h { margin: 0 0 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; margin: 0 0 30px; }
.sc-tile { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 1; min-width: 0; padding: 14px 10px 10px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.sc-tile-l { position: relative; flex: 1; display: grid; place-items: center; width: 100%; min-height: 0; opacity: .55; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.sc-tile-l img { position: absolute; inset: 4% 8%; display: block; width: 84%; height: 92%; object-fit: contain; }   /* every logo grows or shrinks until its width or height fills the space, whichever comes first */
.sc-tile-l .sc-ini { width: 56px; height: 56px; font-size: 24px; }
.sc-tile-n { width: 100%; margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); transition: color .2s ease; }
.sc-tile-s { position: absolute; top: 6px; right: 6px; font-family: "JetBrains Mono", monospace; font-size: 8px; font-style: normal; letter-spacing: .16em; color: var(--muted); }
.sc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-tile:focus-visible .sc-tile-l { opacity: 1; filter: none; }
@media (hover: hover) { .sc-tile:hover { border-color: var(--accent); transform: translateY(-2px); } .sc-tile:hover .sc-tile-l { opacity: 1; filter: none; } .sc-tile:hover .sc-tile-n { color: var(--ink); } }
@media (max-width: 600px) { .sc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sc-tile { padding: 10px 6px 8px; } .sc-tile-l .sc-ini { width: 44px; height: 44px; font-size: 20px; } .sc-tile-n { font-size: 11.5px; } }
@media (max-width: 800px) { .sc-home { margin: 20px 16px 0; padding: 12px 0; } .sc-track, .sc-dup { gap: 20px; } .sc-h { font-size: min(26px, 5.6vw); letter-spacing: .04em; } .sc-item { width: 52px; height: 52px; } }

/* Desktop: the same height as the three link boxes above it (120px), content centred in the box. */
@media (min-width: 1021px) {
  /* Same visible gap above the logos (to the page) and below them (to the footer text): 40px */
  .sc-home { box-sizing: border-box; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 0; margin-top: 40px; }
  body.home-page .panel-gap { flex: 0 0 18px; }   /* + the footer's own 22px above its text = 40px */
  body.home-page .home-band { margin-top: auto; }   /* very tall screens: spare height goes above the link boxes */
  .sc-track { padding: 0; }
  .sc-item { width: 64px; height: 64px; }
}
/* Other pages: the same strip under the white page panel, just above the footer */
.sc-home.is-page { margin-top: calc(40px - var(--u)); margin-bottom: 18px; }
@media (max-width: 800px) {   /* phones: the same 32px above the logos and below them, down to the footer's first line */
  .sc-home, .sc-home.is-page { padding: 0; margin-bottom: 18px; }
  .sc-home .sc-track { padding: 0; }
  body.home-page .sc-home { margin-top: 20px; margin-bottom: 22px; }
  .sc-home.is-page { margin-top: calc(32px - var(--u)); }
}