/* The /sdlc hero banner: one pixel world, four things you say.
 *
 * The page is laid out ON the art's grid. --s is how many screen pixels one game pixel is
 * worth, and everything — the band, the caption columns, even the hero's own text column —
 * is sized from it, so nothing can drift out of alignment at any breakpoint. The band is
 * 256 game pixels wide and its stations end on exact quarters, so the four captions sit
 * under their own station without a single hand-tuned number.
 *
 * The band PNG is stored at 1x and scaled by whole multiples with image-rendering: pixelated
 * — that is the only way a game pixel stays square.
 */

.ub {
  --s: 2;
  --w: calc(256px * var(--s));
  --ub-line: var(--line, #2C2C3A);
  --ub-white: var(--white, #F4F4F8);
  --ub-muted: var(--muted, #A9A9BA);
  --ub-blue: var(--blue, #0098EB);
  --ub-green: #5BD98A;
  --ub-head: 'Space Grotesk', system-ui, sans-serif;
  --ub-body: 'Outfit', system-ui, sans-serif;
  --ub-pixel: 'Press Start 2P', monospace;
  --ub-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-bottom: 26px;
  color: var(--ub-white);
}
@media (min-width: 820px)  { .ub { --s: 3; } }
@media (min-width: 1080px) { .ub { --s: 4; } }
@media (min-width: 1340px) { .ub { --s: 5; } }
.ub *, .ub *::before, .ub *::after { box-sizing: border-box; }

/* the stage: the world, and the card riding its conveyor */
.ub-stage {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 3px solid var(--ub-line);
  background: #0E0E14;
}
.ub-stage::-webkit-scrollbar { display: none; }
.ub-world {
  position: relative;
  width: var(--w);
  margin-inline: auto;
}
.ub-band {
  display: block;
  width: var(--w);
  height: calc(44px * var(--s));
  image-rendering: pixelated;
}
.ub-rider {
  position: absolute;
  left: 0;
  bottom: calc(1px * var(--s));
  width: calc(9px * var(--s));
  height: calc(7px * var(--s));
  image-rendering: pixelated;
  animation: ub-ride 22s steps(247, end) infinite;
}
@keyframes ub-ride {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(247px * var(--s))); }
}
@media (prefers-reduced-motion: reduce) {
  .ub-rider { animation: none; transform: translateX(calc(96px * var(--s))); }
}

/* the captions: one column per station, tied to it by a coloured rule, no boxes */
.ub-steps {
  list-style: none;
  width: min(var(--w), 100% - 32px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .ub-steps { grid-template-columns: repeat(4, 1fr); } }
.ub-steps li {
  padding: 13px 18px 4px 0;
  border-top: 3px solid var(--ub-blue);
}
.ub-steps li:first-child { border-top-color: var(--ub-green); }
@media (max-width: 819px) {
  .ub-steps li { padding-right: 0; padding-bottom: 14px; }
}

.ub-n {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ub-pixel);
  font-size: 10px;
  line-height: 1;
  color: var(--ub-blue);
  margin: 0 0 9px;
}
.ub-steps li:first-child .ub-n { color: var(--ub-green); }
.ub-free {
  font-family: var(--ub-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 2px solid currentColor;
}
.ub-say {
  font-family: var(--ub-mono);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ub-white);
  text-indent: -0.85em;
  padding-left: 0.85em;
}
.ub-say::before { content: "\203A"; color: var(--ub-blue); font-weight: 700; margin-right: .45em; }
.ub-steps li:last-child .ub-say::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin-left: .2em;
  background: var(--ub-blue);
  vertical-align: text-bottom;
  animation: ub-blink 1.1s steps(1, end) infinite;
}
@keyframes ub-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ub-steps li:last-child .ub-say::after { animation: none; } }
.ub-cap {
  font-family: var(--ub-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--ub-muted);
}
.ub-cap b { color: var(--ub-white); font-weight: 600; }

.ub-note {
  width: min(var(--w), 100% - 32px);
  max-width: 92ch;
  margin: 18px auto 0;
  margin-inline: max(calc(50% - var(--w) / 2), 16px) auto;
  font-family: var(--ub-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ub-muted);
}
.ub-note b { color: var(--ub-white); font-weight: 600; }
.ub-note code {
  font-family: var(--ub-mono);
  font-size: 13px;
  color: var(--ub-white);
}
.ub-hint { color: var(--ub-blue); }
@media (min-width: 820px) { .ub-hint { display: none; } }

/* The hero's own text column is sized from the same grid, so the headline, the world and the
   captions all start on one left edge. */
.sd-hero .doc { width: min(var(--sdlc-w, 1180px), 100% - 32px); }
.sd-hero .doc > * { max-width: 900px; }
.sd-hero { --sdlc-w: calc(256px * 2); }
@media (min-width: 820px)  { .sd-hero { --sdlc-w: calc(256px * 3); } }
@media (min-width: 1080px) { .sd-hero { --sdlc-w: calc(256px * 4); } }
@media (min-width: 1340px) { .sd-hero { --sdlc-w: calc(256px * 5); } }