/* Leopol status (status.leopol.ai): leopol.ai's look, from the leopolai repo: the tokens and type of app/globals.css,
   the bar (src/components/site/header.module.css), the page hero (ui/page-hero.module.css), the house card with its
   grey title band (ui/plan-card.module.css), the pill buttons (ui/button.module.css) and the black footer
   (site/footer.module.css). Always white, as the site: `color-scheme: light`, so no browser darkens it. The font is the
   site's own Inter file (latin, with its optical-size axis, so large titles draw in Inter Display; SIL OFL). /app.js
   draws the same markup as on TrapSpotter's page; only these rules differ. */

@font-face {
  font-family: "Inter";
  src: url("/leopol/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* next/font's metric-matched fallback, so the swap does not move the page. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #fafafa;
  --surface-2: #f4f4f4;
  --ink: #000000;
  --ink-2: #605f5f;
  --ink-4: #d9d9d9;
  --line: rgb(0 0 0 / 0.08);
  --line-2: rgb(0 0 0 / 0.12);
  --line-strong: rgb(0 0 0 / 0.2);
  --frame-line: rgb(0 0 0 / 0.1);
  --well: rgb(0 0 0 / 0.04);
  --well-2: rgb(0 0 0 / 0.07);
  --glass: rgb(255 255 255 / 0.86);
  --shadow-float: 0 15px 30px 5px rgb(0 0 0 / 0.16);
  --focus: #2266ff;
  --error: #d70015;
  --selection: rgb(195 154 74 / 0.24);

  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-title: 1.25rem;
  --t-lead: 1.125rem;
  --t-body: 0.9375rem;
  --w-text: 400;
  --w-control: 500;
  --w-title: 500;
  --track-tight: -0.04em;
  --track-snug: -0.03em;
  --track-small: -0.02em;

  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --content: 79.5rem;
  --content-wide: 87.5rem;
  --margin: 4rem;
  --section: 6.25rem;
  --r-sm: 11px;
  --r-pill: 999px;
  --r-card: 20px;
  --header-h: 4.5rem;
  --dur-1: 160ms;
  --dur-2: 280ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Status: the usual green, amber, orange and red; the fills for the bars and dots, the inks for text on their tints
     (each 4.5:1 or more on its tint). Gold stays the brand's accent, never a status. */
  --ok-fill: #34c759;
  --ok-ink: #17733a;
  --ok-tint: rgb(52 199 89 / 0.12);
  --slow-fill: #f5b400;
  --slow-ink: #8a5300;
  --slow-tint: rgb(245 180 0 / 0.14);
  --part-fill: #ff8a00;
  --part-ink: #a64b00;
  --part-tint: rgb(255 138 0 / 0.12);
  --down-fill: #ff3b30;
  --down-ink: var(--error);
  --down-tint: rgb(255 59 48 / 0.1);
}

@media (max-width: 1279px) {
  :root {
    --margin: var(--s-10);
  }
}
@media (max-width: 743px) {
  :root {
    --margin: var(--s-5);
    --section: 4.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-text);
  line-height: 1.4;
  letter-spacing: var(--track-snug);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection {
  background: var(--selection);
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: var(--w-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}
img,
svg {
  display: block;
  max-inline-size: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
ul[role="list"] {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}
.skip {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #ffffff;
  font-weight: var(--w-control);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* THE FRAME: the bar and the page stand in a 1400 px column drawn with two dashed lines; sections are divided by a
   dashed rule. On a phone the frame is the screen and its lines go. */
.frame {
  inline-size: min(100% - 2.5rem, var(--content-wide));
  margin-inline: auto;
  border-inline: 1px dashed var(--frame-line);
}
.frame main > section + section {
  border-block-start: 1px dashed var(--frame-line);
}
@media (max-width: 743px) {
  .frame {
    inline-size: 100%;
    border-inline: 0;
  }
}
.container {
  inline-size: min(100% - 2 * var(--margin), var(--content));
  margin-inline: auto;
}
.container.narrow {
  inline-size: min(100% - 2 * var(--margin), 60rem);
}

/* ── The logo (leopolai src/components/brand/mark.module.css): the mark and the name, never altered ───────────────── */
.wordmark {
  --size: 23px;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  color: var(--ink);
  direction: ltr;
}
.wm-mark {
  flex: none;
  inline-size: calc(var(--size) * 0.87);
  block-size: calc(var(--size) * 0.983);
}
.wm-name {
  flex: none;
  inline-size: calc(var(--size) * 5669 / 2000);
  block-size: calc(var(--size) * 1427 / 2000);
  overflow: visible;
}
.wordmark.lg {
  --size: 26px;
}

/* ── The bar (header.module.css): sticky white glass, a dashed rule under it ─────────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
  border-block-end: 1px dashed var(--frame-line);
}
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
  inline-size: min(100% - 2 * var(--margin), var(--content));
  block-size: var(--header-h);
  margin-inline: auto;
}
.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.nav {
  justify-self: center;
}
.links {
  display: flex;
  gap: 2.25rem;
  margin: 0;
}
.link {
  display: inline-flex;
  align-items: center;
  block-size: 36px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: var(--w-control);
  letter-spacing: var(--track-snug);
  text-decoration: none;
  transition: opacity var(--dur-1) var(--ease);
}
.link:hover {
  opacity: 0.6;
}
.end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* the pill buttons (button.module.css): SECONDARY white with a light edge, 38 px in the bar */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 38px;
  padding-inline: 1.125rem;
  border: 1px solid #e6e6e6;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: #000000;
  font-size: 0.9375rem;
  font-weight: var(--w-control);
  line-height: 1.3;
  letter-spacing: var(--track-snug);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease);
}
.button:hover {
  background: #f4f4f4;
}

/* the language: its flag, its code and the picker arrow in a pill; the four languages in a white card under it */
.lang {
  position: relative;
}
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  block-size: 40px;
  padding-inline: 0.625rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: var(--w-control);
  text-transform: uppercase;
  transition: border-color var(--dur-1) var(--ease);
}
.lang-button:hover {
  border-color: var(--line-strong);
}
.lang-code {
  min-inline-size: 1.25em;
}
.picker {
  color: var(--ink-2);
  transition: transform var(--dur-2) var(--ease);
}
.lang-button[aria-expanded="true"] .picker {
  transform: rotate(180deg);
}
.flag {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(14 14 16 / 0.08);
}
.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--s-3));
  inset-inline-end: 0;
  z-index: 60;
  inline-size: 13.5rem;
  margin: 0;
  padding: 0.625rem;
  list-style: none;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), var(--shadow-float);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  block-size: 42px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.lang-menu a:hover,
.lang-menu a[aria-current="true"] {
  background: var(--bg-2);
}
.lang-menu a[aria-current="true"] {
  font-weight: var(--w-control);
}
.lang-menu .tick {
  flex: none;
  margin-inline-start: auto;
  inline-size: 16px;
  block-size: 16px;
}

/* below 1024 px the places go (the site moves them into its menu sheet; here the footer carries them); below 744 px
   Download too, and the language stays */
@media (max-width: 1023px) {
  .bar {
    grid-template-columns: 1fr auto;
  }
  .nav {
    display: none;
  }
}
@media (max-width: 743px) {
  .download {
    display: none;
  }
}

/* ── The hero (page-hero.module.css): the pill, the verdict, the lead, the live strip; the painting ends it ───────── */
.hero {
  padding-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}
.hero-text {
  display: grid;
  justify-items: center;
  text-align: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  block-size: 30px;
  padding-inline: 0.75rem;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: var(--w-control);
  letter-spacing: var(--track-small);
}
.hero h1 {
  max-inline-size: 24ch;
  margin-block-start: var(--s-6);
  font-size: clamp(2.125rem, 1.7rem + 1.7vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}
.lead {
  max-inline-size: 36rem;
  margin-block-start: var(--s-6);
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.4;
  text-wrap: pretty;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  min-block-size: 30px;
  margin-block-start: var(--s-8);
  color: var(--ink-2);
  font-size: 0.875rem;
}
.meta .sep {
  inline-size: 1px;
  block-size: 0.875rem;
  background: var(--line-2);
}
.strip-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  block-size: 30px;
  padding-inline: 0.625rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: var(--w-control);
}
.dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--ink-4);
}
.dot.s-operational {
  background: var(--ok-fill);
  box-shadow: 0 0 0 3px var(--ok-tint);
}
.dot.s-degraded {
  background: var(--slow-fill);
  box-shadow: 0 0 0 3px var(--slow-tint);
}
.dot.s-partial {
  background: var(--part-fill);
  box-shadow: 0 0 0 3px var(--part-tint);
}
.dot.s-major {
  background: var(--down-fill);
  box-shadow: 0 0 0 3px var(--down-tint);
}
.notice {
  max-inline-size: 36rem;
  margin-block-start: var(--s-4);
  color: var(--slow-ink);
  font-size: 0.875rem;
  line-height: 1.45;
}
/* the painting across the bottom of the hero, its empty sky cut away so the systems come sooner (leopolai
   public/leopol/art/banner-vehicle, a byte copy) */
.hero-art {
  margin-block-start: clamp(1.5rem, 0.5rem + 3vw, 3rem);
}
.hero-art img {
  inline-size: min(100%, 58rem);
  block-size: auto;
  margin-inline: auto;
  aspect-ratio: 3.1;
  object-fit: cover;
  object-position: 50% 100%;
  user-select: none;
}
@media (max-width: 743px) {
  .hero-art img {
    inline-size: 100%;
    aspect-ratio: 2.5;
  }
}

/* ── The body: the cards on white ─────────────────────────────────────────────────────────────────────────────────── */
.body {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--section);
}
.body .container {
  display: grid;
  gap: var(--s-6);
}
#active:empty {
  display: none;
}
#active {
  display: grid;
  gap: var(--s-6);
}

/* THE HOUSE CARD (plan-card.module.css, the featured plan): the title in a grey band to the card's sides and top
   corners, the white content riding up over its last 20 px with one hairline, the edge drawn over everything. */
.band-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #ffffff;
}
.band-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
  pointer-events: none;
}
.band-header {
  background: var(--well);
}
.band-header + * {
  position: relative;
  margin-block-start: calc(-1 * var(--r-card));
  border-block-start: 1px solid var(--line);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #ffffff;
}
.card-head {
  padding: var(--s-6) var(--s-8) calc(var(--s-6) + var(--r-card));
}
.card-head h2 {
  font-size: var(--t-title);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
}
.card-head .sub {
  margin-block-start: 0.25rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.card-body {
  min-inline-size: 0;
  flex: 1;
  padding: var(--s-6) var(--s-8);
}
.card-body.rows {
  padding: 0;
}
.rows > * + * {
  border-block-start: 1px solid var(--line);
}
@media (max-width: 743px) {
  .card-head {
    padding-inline: var(--s-5);
  }
  .card-body {
    padding-inline: var(--s-5);
  }
}

/* A system: its name and status, its days, its checks behind the arrow. */
.row {
  padding: var(--s-5) var(--s-8) var(--s-6);
}
@media (max-width: 743px) {
  .row {
    padding-inline: var(--s-5);
  }
}
.row-head {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}
.row-name {
  flex: 1;
  min-inline-size: 0;
  font-size: 1rem;
  font-weight: var(--w-title);
  letter-spacing: var(--track-small);
}
.chev {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  color: var(--ink-2);
  transition: transform var(--dur-2) var(--ease);
}
.row-head[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.row-head:hover .row-name {
  opacity: 0.6;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  block-size: 28px;
  padding-inline: 0.4375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: var(--w-control);
  letter-spacing: var(--track-small);
  white-space: nowrap;
}
.tag svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
}
.tag.s-operational,
.tag.c-up {
  background: var(--ok-tint);
  color: var(--ok-ink);
}
.tag.s-degraded,
.tag.c-slow {
  background: var(--slow-tint);
  color: var(--slow-ink);
}
.tag.s-partial {
  background: var(--part-tint);
  color: var(--part-ink);
}
.tag.s-major,
.tag.c-down {
  background: var(--down-tint);
  color: var(--down-ink);
}

/* the days, on the scale of the whole window: history fills in from the right */
.days {
  margin-block-start: var(--s-4);
}
.bars {
  display: grid;
  grid-template-columns: repeat(var(--n, 90), minmax(0, 1fr));
  gap: 2px;
  block-size: 30px;
  touch-action: pan-y;
}
.bars span {
  border-radius: 3px;
  background: var(--ok-fill);
}
.bars span[data-s="degraded"] {
  background: var(--slow-fill);
}
.bars span[data-s="partial"] {
  background: var(--part-fill);
}
.bars span[data-s="major"] {
  background: var(--down-fill);
}
.bars span[data-s="none"] {
  background: var(--well-2);
}
.bars span.on {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.days-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
  color: var(--ink-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.days-foot .rule {
  flex: 1;
  min-inline-size: 0.75rem;
  block-size: 0;
  border-block-start: 1px dashed var(--line-2);
}
.days-uptime {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* the checks, on the grey of a pill track */
.inner {
  margin-block-start: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checks li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: 0.625rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.checks li + li {
  border-block-start: 1px solid var(--line);
}
.checks .name {
  flex: 1;
  min-inline-size: 0;
  color: var(--ink);
}
.checks .ms {
  font-variant-numeric: tabular-nums;
}

/* ── Incidents ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.quiet {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.inc + .inc {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
}
.inc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.inc-head h3 {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: var(--track-small);
}
.inc-when {
  margin-block-start: 0.25rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
}
.updates {
  margin: var(--s-4) 0 0;
  padding: 0 0 0 var(--s-4);
  list-style: none;
  border-inline-start: 1px dashed var(--line-strong);
}
.updates li + li {
  margin-block-start: var(--s-3);
}
.updates p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-line;
}
.updates b {
  color: var(--ink);
  font-weight: var(--w-control);
}
.updates time {
  display: block;
  margin-block-start: 0.125rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
}
.band-card.active-inc .card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--down-tint);
  color: var(--down-ink);
}
.icon-tile svg {
  inline-size: 22px;
  block-size: 22px;
}
.icon-tile.neutral {
  background: #ffffff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ── The day under the pointer ────────────────────────────────────────────────────────────────────────────────────── */
.tip {
  position: fixed;
  z-index: 70;
  max-inline-size: 240px;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 12px 28px rgb(0 0 0 / 0.14);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.4;
  pointer-events: none;
}
.tip b {
  display: block;
  color: var(--ink);
  font-weight: var(--w-control);
}

/* ── The footer (footer.module.css): black, full width; the name very large and light, cut off by its end ────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  --ink: #ffffff;
  --ink-2: rgb(255 255 255 / 0.6);
  background: #000000;
  color: var(--ink);
  font-size: 0.9375rem;
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-10) var(--s-6);
  padding-block: clamp(4rem, 3rem + 3vw, 5.5rem) var(--s-10);
}
.foot-brand {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-5);
}
.tagline {
  max-inline-size: 16ch;
  margin-block-start: var(--s-2);
  color: rgb(255 255 255 / 0.82);
  font-size: clamp(1.5rem, 1.35rem + 0.55vw, 1.75rem);
  font-weight: var(--w-title);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
}
.foot-links {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  margin: 0;
}
.foot-links a {
  color: rgb(255 255 255 / 0.86);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.foot-links a:hover {
  color: #ffffff;
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  padding-block: var(--s-10);
  border-block-start: 1px dashed rgb(255 255 255 / 0.22);
  color: var(--ink-2);
  font-size: 0.875rem;
}
.foot-legal-text {
  display: grid;
  gap: 0.25rem;
}
.legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin: 0;
}
.legal a {
  color: var(--ink-2);
  text-decoration: none;
}
.legal a:hover {
  color: var(--ink);
}
.giant {
  display: block;
  inline-size: min(100% - 2 * var(--margin), var(--content));
  block-size: auto;
  margin: var(--s-4) auto -2.2%;
  overflow: visible;
  color: rgb(255 255 255 / 0.16); /* the name's path is drawn in currentColor */
  mask-image: linear-gradient(180deg, #000 35%, rgb(0 0 0 / 0.2) 100%);
  pointer-events: none;
}
@media (max-width: 743px) {
  .foot-top {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  .bars span,
  .dot {
    forced-color-adjust: none;
  }
}