/* ==========================================================================
   Plek marketing site: shared layer.
   Tokens, faces, type roles, the column-and-rule scaffolding, controls and the
   two weave grounds. Loaded by landing/templates/base.html AFTER tokens.css and
   bridge.css; page styles (home.css, the legal and error partials) build on it.
   Everything is namespaced pk- so it cannot collide with the product shell.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-latin-400.1a806675790e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono/space-mono-latin-400.049dfc5919c2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* grounds and rules */
  --pk-ground: #F9F9F9;
  --pk-surface: #FAFAFA;
  --pk-card: #F0F0F0;
  --pk-rule: #E0E0E0;
  --pk-control-border: #8C8C8C;   /* 3.3:1 on the ground: anything that bounds a control */
  /* ink */
  --pk-ink: #292929;
  --pk-ink-strong: #000000;
  --pk-ink-2: #575757;
  --pk-muted: #6E6E6E;            /* the design's #868686 label grey, darkened to 4.9:1 */
  --pk-faint: #737373;            /* the design's #A2A2A2/#ADADAD, darkened to 4.6:1 */
  /* accent and dark grounds */
  --pk-navy: #294460;
  --pk-navy-2: #2F4C6A;
  --pk-blue: #3C7EB3;
  --pk-sky: #ACC9E8;
  --pk-charcoal: #27282A;
  --pk-on-dark: #FFFFFF;
  --pk-on-dark-2: #DADADA;
  /* faces */
  --pk-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --pk-font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --pk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* shape, motion, layout */
  --pk-radius-s: 2px;
  --pk-radius: 4px;
  --pk-ease: cubic-bezier(.2, .7, .2, 1);
  --pk-dur: 300ms;
  --pk-col-width: 90%;
  --pk-col-max: 1440px;
  --pk-nav-h: 41px;               /* fixed bar height: 39px cells in a 1px frame */
  --pk-nav-top: 20px;             /* how far below the viewport top it floats */
  --pk-nav-offset: 80px;          /* sticky-top used by the scroll-driven panels */
  --pk-section-pad: 40px;
  /* weave grounds (8x8 tile decoded from the design's texture) */
  --pk-weave-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' shape-rendering='crispEdges'%3E%3Crect width='100%25' height='100%25' fill='%23294460'/%3E%3Cpath fill='%232F4C6A' d='M9 0h4.5v4.5h-4.5zM27 0h4.5v4.5h-4.5zM4.5 4.5h4.5v4.5h-4.5zM22.5 4.5h4.5v4.5h-4.5zM31.5 4.5h4.5v4.5h-4.5zM0 9h4.5v4.5h-4.5zM9 9h4.5v4.5h-4.5zM18 9h4.5v4.5h-4.5zM22.5 9h4.5v4.5h-4.5zM27 9h4.5v4.5h-4.5zM4.5 13.5h4.5v4.5h-4.5zM9 13.5h4.5v4.5h-4.5zM13.5 13.5h4.5v4.5h-4.5zM22.5 13.5h4.5v4.5h-4.5zM31.5 13.5h4.5v4.5h-4.5zM0 18h4.5v4.5h-4.5zM9 18h4.5v4.5h-4.5zM27 18h4.5v4.5h-4.5zM4.5 22.5h4.5v4.5h-4.5zM13.5 22.5h4.5v4.5h-4.5zM22.5 22.5h4.5v4.5h-4.5zM0 27h4.5v4.5h-4.5zM4.5 27h4.5v4.5h-4.5zM9 27h4.5v4.5h-4.5zM18 27h4.5v4.5h-4.5zM27 27h4.5v4.5h-4.5zM4.5 31.5h4.5v4.5h-4.5zM13.5 31.5h4.5v4.5h-4.5zM22.5 31.5h4.5v4.5h-4.5zM27 31.5h4.5v4.5h-4.5zM31.5 31.5h4.5v4.5h-4.5z'/%3E%3C/svg%3E");
  --pk-weave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' shape-rendering='crispEdges'%3E%3Crect width='100%25' height='100%25' fill='%23F8F8F8'/%3E%3Cpath fill='%23F2F2F2' d='M9 0h4.5v4.5h-4.5zM27 0h4.5v4.5h-4.5zM4.5 4.5h4.5v4.5h-4.5zM22.5 4.5h4.5v4.5h-4.5zM31.5 4.5h4.5v4.5h-4.5zM0 9h4.5v4.5h-4.5zM9 9h4.5v4.5h-4.5zM18 9h4.5v4.5h-4.5zM22.5 9h4.5v4.5h-4.5zM27 9h4.5v4.5h-4.5zM4.5 13.5h4.5v4.5h-4.5zM9 13.5h4.5v4.5h-4.5zM13.5 13.5h4.5v4.5h-4.5zM22.5 13.5h4.5v4.5h-4.5zM31.5 13.5h4.5v4.5h-4.5zM0 18h4.5v4.5h-4.5zM9 18h4.5v4.5h-4.5zM27 18h4.5v4.5h-4.5zM4.5 22.5h4.5v4.5h-4.5zM13.5 22.5h4.5v4.5h-4.5zM22.5 22.5h4.5v4.5h-4.5zM0 27h4.5v4.5h-4.5zM4.5 27h4.5v4.5h-4.5zM9 27h4.5v4.5h-4.5zM18 27h4.5v4.5h-4.5zM27 27h4.5v4.5h-4.5zM4.5 31.5h4.5v4.5h-4.5zM13.5 31.5h4.5v4.5h-4.5zM22.5 31.5h4.5v4.5h-4.5zM27 31.5h4.5v4.5h-4.5zM31.5 31.5h4.5v4.5h-4.5z'/%3E%3C/svg%3E");
}
@media (max-width: 1199.98px) { :root { --pk-section-pad: 32px; } }
@media (max-width: 809.98px)  { :root { --pk-section-pad: 24px; } }

/* In-page navigation glides to its section, as in the design; a reader who
   asked for less motion gets the jump. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- scaffolding: full-bleed rules, one column, continuous side rails ----
   `body.pk-page` is the opt-in: base.html's inline block still carries the
   pre-port `body { background: var(--ground) }` and
   `main { padding: 8rem 0 2rem; min-height: 100vh }` that four unported
   templates outside landing stand on (the two auth pages, the workspace
   notice and the integrations shell), so the new layout takes them off
   rather than deleting them out from under those pages. */
.pk-page { background: var(--pk-ground); color: var(--pk-ink); font-family: var(--pk-font-body); }
body.pk-page main { padding: 0; min-height: 0; }
/* Sections stack flush. Only a section that opens directly under a full-bleed
   block draws its own top rule (Problem, under the hero frame); everywhere else
   the rules belong to the card rows, as in the design. */
.pk-section--rule-top { border-top: 1px solid var(--pk-rule); }
.pk-col {
  width: var(--pk-col-width);
  max-width: var(--pk-col-max);
  margin-inline: auto;
  border-inline: 1px solid var(--pk-rule);
}
/* Keep numbered section copy clear of the vertical rails. The hero already
   carries an inline gutter; section heads need the same breathing room rather
   than placing the label and title directly against the separators. */
.pk-section__head {
  padding: var(--pk-section-pad) 10px;
  display: grid;
  gap: 20px;
}

/* ---- type roles ---- */
.pk-display, .pk-h2 {
  font-family: var(--pk-font-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--pk-ink);
  margin: 0;
  text-wrap: balance;
}
.pk-display { font-size: 48px; }
.pk-h2 { font-size: 36px; }
.pk-accent { color: var(--pk-navy); }
.pk-label {
  font-family: var(--pk-font-mono);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--pk-muted);
  margin: 0;
}
.pk-label__n { color: var(--pk-navy); }
.pk-body { font-size: 16px; line-height: 1.4; letter-spacing: -0.04em; color: var(--pk-ink-2); margin: 0; }
.pk-small { font-size: 14px; line-height: 1.3; letter-spacing: -0.04em; color: var(--pk-ink-2); margin: 0; }
@media (max-width: 1199.98px) { .pk-label { font-size: 14px; } }
@media (max-width: 809.98px) {
  .pk-display { font-size: 32px; }
  .pk-h2 { font-size: 24px; }
  .pk-label { font-size: 12px; }
}

/* ---- controls ---- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--pk-radius-s);
  font: 500 16px/1.2 var(--pk-font-body);
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease), border-color var(--pk-dur) var(--pk-ease);
}
.pk-btn--solid { background: var(--pk-charcoal); color: var(--pk-on-dark); }
.pk-btn--solid:hover { background: var(--pk-navy); color: var(--pk-on-dark); }
.pk-btn--ghost { background: var(--pk-surface); color: var(--pk-ink-2); border-color: var(--pk-control-border); border-radius: 3px; }
.pk-btn--ghost:hover { background: var(--pk-card); color: var(--pk-ink); border-color: #737272; }
.pk-btn--quiet { background: var(--pk-surface); color: var(--pk-muted); font-weight: 400; }
.pk-btn--quiet:hover { background: var(--pk-card); color: var(--pk-ink); }

.pk-page :focus-visible, .pk-btn:focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 2px; }
.pk-on-dark :focus-visible { outline-color: var(--pk-on-dark); }

/* ---- grounds ---- */
.pk-weave-navy { background-color: var(--pk-navy); background-image: var(--pk-weave-navy); }
.pk-weave-light { background-color: #F8F8F8; background-image: var(--pk-weave-light); }

.pk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pk-btn { transition: none; }
}

/* ==========================================================================
   SHELL: the floating nav rail
   --------------------------------------------------------------------------
   Lives here rather than in base.html's inline <style> because every page
   extending the shell wears it and none of it is page-specific -- the inline
   block is down to the two generic rules the pre-port auth pages still stand
   on (body colour/weight and main's padding), which this layer deliberately
   does not touch.

   The rail is three bands of #FAFAFA cells floating on a 1px --pk-rule frame:
   the frame is simply the group's own background showing through 1px of
   padding and 1px gaps. That is how the design draws it, and it means a cell
   can be added or removed without restating a border anywhere.

   Heights: 39px cells inside a 1px frame = --pk-nav-h (41px) total, floating
   --pk-nav-top (20px) below the viewport top. Pages that need to clear it
   read those two tokens rather than measuring the bar.
   ========================================================================== */

.top-bar {
  /* The lockup's two inks. Written as custom properties because the SVG
     geometry below is verbatim from design/assets and paints through them. */
  --nav-ink: #2A2A2A;
  --nav-signal: var(--pk-blue);
  position: fixed;
  top: var(--pk-nav-top);
  left: 50%;
  z-index: 10;
  width: 89%;
  max-width: 1420px;
  font-family: var(--pk-font-body);
  transform: translateX(-50%);
  /* The rail's middle is empty and the page scrolls behind it; only the
     cell groups themselves take the pointer. */
  pointer-events: none;
}

.top-bar__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-bar__group {
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 1px;
  border-radius: 3px;
  background: var(--pk-rule);
  pointer-events: auto;
}

.top-bar__brand,
.top-bar__link,
.top-bar__cta,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 39px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--pk-radius-s);
  background: var(--pk-surface);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease);
}

.top-bar__brand {
  width: 240px;
  line-height: 0;
}

/* The asset's native 34px height renders its internal mark at 26px; 27px
   here puts the live <text> wordmark at the design's 16px. */
.logo__lockup {
  display: block;
  width: auto;
  height: 27px;
  font-family: var(--pk-font-body);
}

.top-bar__links {
  display: flex;
  align-items: stretch;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-bar__link {
  color: var(--pk-muted);
  font: 400 16px/1.2 var(--pk-font-display);
  letter-spacing: -0.04em;
}

.top-bar__link:hover,
.top-bar__link:focus-visible {
  background: var(--pk-card);
  color: var(--pk-ink);
}

/* No `[aria-current="page"]` rule here on purpose: the four rail links are
   in-page anchors to sections of the home page, and aria-current="page" names
   the current DOCUMENT, not the section the reader happens to be level with.
   Marking one would be wrong on /privacy/ (where all four leave the page) and
   a scroll-spy lie on /. */

/* Sign in is Inter, not the display face: it is a control, not a destination
   in the section list. */
.top-bar__auth {
  font-family: var(--pk-font-body);
}

.top-bar__cta {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  font: 500 16px/1.2 var(--pk-font-body);
  letter-spacing: -0.04em;
}

.top-bar__cta:hover,
.top-bar__cta:focus-visible {
  background: var(--pk-navy);
  color: var(--pk-on-dark);
}

.top-bar a:focus-visible,
.menu-toggle:focus-visible,
.menu-overlay a:focus-visible {
  outline: 2px solid var(--pk-ink);
  outline-offset: 2px;
}

/* ---- the <1200 disclosure controller ---- */

.menu-toggle {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 13px;
  color: var(--pk-ink);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: opacity var(--pk-dur) var(--pk-ease),
              transform var(--pk-dur) var(--pk-ease);
  transform-origin: center;
}

.menu-toggle.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- the disclosure panel ----------------------------------------------
   The design's "Phone opend" variant: the bar grows downward into one card,
   rather than a full-screen sheet that would cover a page the visitor is
   mid-read of. The panel is a sibling of <header>, so it takes the rail's own
   geometry -- same top, same width, same cap -- and reserves the bar's height
   as padding, letting the fixed rail (z-index 10) sit inside it. The rail
   gives up its frame while the panel is open, exactly as the variant draws
   it: the cells then float on the panel's ground instead of on a hairline. */

.menu-overlay {
  position: fixed;
  top: var(--pk-nav-top);
  left: 50%;
  z-index: 9;
  display: none;
  box-sizing: border-box;
  width: 89%;
  max-width: 1420px;
  flex-direction: column;
  gap: 24px;
  padding: calc(var(--pk-nav-h) + 24px) 1px 1px;
  border: 1px solid var(--pk-rule);
  border-radius: var(--pk-radius);
  background: var(--pk-ground);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity var(--pk-dur) var(--pk-ease),
              visibility var(--pk-dur) var(--pk-ease);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Both groups inside the panel are framed the same way, and it is the rail's
   own construction carried down into it: the group's --pk-rule background
   shows through 1px of padding and through the 1px gaps between its cells, so
   the frame and the dividers are the same pixel and a cell can come or go
   without restating a border.

   Deviation on purpose: the Framer "Phone opend" variant gives that field to
   the actions group only (navbar.md l.85, fill rgb(237,237,237)) and leaves
   the section list on the panel ground (l.71, no fill), which made the four
   destinations read as loose rows beside a framed pair -- and left
   `.menu-overlay__nav` selecting nothing. The two are matched here. */
.menu-overlay__nav,
.menu-overlay__actions {
  padding: 1px;
  border-radius: 3px;
  background: var(--pk-rule);
}

.menu-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-overlay__link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 39px;
  padding: 0 20px;
  border-radius: var(--pk-radius-s);
  background: var(--pk-surface);
  color: var(--pk-muted);
  font: 400 16px/1.2 var(--pk-font-body);
  letter-spacing: -0.04em;
  text-decoration: none;
  transition: background-color var(--pk-dur) var(--pk-ease),
              color var(--pk-dur) var(--pk-ease);
}

.menu-overlay__link--nav {
  font-family: var(--pk-font-display);
}

.menu-overlay__link:hover {
  background: var(--pk-card);
  color: var(--pk-ink);
}

.menu-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-overlay__actions .menu-overlay__link--cta {
  background: var(--pk-charcoal);
  color: var(--pk-on-dark);
  font-weight: 500;
}

.menu-overlay__actions .menu-overlay__link--cta:hover {
  background: var(--pk-navy);
  color: var(--pk-on-dark);
}

@media (max-width: 1199.98px) {
  /* One frame around the whole bar: the logo cell stretches and the
     disclosure controller closes the row, exactly as the phone variants
     draw it. `display: contents` dissolves the two desktop groups so their
     cells become items of that single frame. */
  .top-bar__rail {
    gap: 1px;
    padding: 1px;
    border-radius: 3px;
    background: var(--pk-rule);
    pointer-events: auto;
  }

  .top-bar__group { display: contents; }

  .top-bar__brand {
    flex: 1 1 auto;
    width: auto;
  }

  .top-bar__links,
  .top-bar__auth,
  .top-bar__cta { display: none; }

  /* The open panel draws the frame around the bar as well as around itself,
     so the bar stops drawing its own. */
  body.menu-is-open .top-bar__rail { background: transparent; }

  .menu-overlay { display: flex; }
}

@media (min-width: 1200px) {
  .menu-toggle { display: none; }
}

/* The page behind the open panel does not scroll away under it. */
body.menu-is-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .top-bar__brand,
  .top-bar__link,
  .top-bar__cta,
  .menu-toggle,
  .menu-toggle span,
  .menu-overlay,
  .menu-overlay__link { transition: none; }
}

/* ==========================================================================
   SHELL: the site footer
   --------------------------------------------------------------------------
   One footer per page, rendered by base.html after </main>. Four blocks:
   the brand column with its etymology, three link columns, the oversized
   gradient lockup, and the legal base row. The lockup is inline SVG rather
   than an image because it carries live <text> -- inside an <img> the SVG
   cannot see the page's self-hosted Inter and would silently fall back to
   system-ui -- and because the gradient has to run across the mark and the
   wordmark as one field.
   ========================================================================== */

.mgmt-footer {
  border-top: 1px solid var(--pk-rule);
  background: var(--pk-surface);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
}

.mgmt-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  box-sizing: border-box;
  max-width: 1560px;
  margin-inline: auto;
  padding: 60px 60px 0;
}

.mgmt-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.mgmt-footer__brand {
  display: grid;
  gap: 14px;
  flex: 0 0 235px;
  width: 235px;
}

.mgmt-footer__gloss-block { display: grid; gap: 10px; }

.mgmt-footer__wordmark {
  margin: 0;
  color: var(--pk-ink);
  font: 400 32px/1.2 var(--pk-font-display);
  letter-spacing: -0.05em;
}

.mgmt-footer__etymology { display: grid; gap: 2px; }

.mgmt-footer__gloss,
.mgmt-footer__gloss-def {
  margin: 0;
  color: var(--pk-ink-2);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

/* The design's #ABABAB, taken to the token that clears 4.5:1. */
.mgmt-footer__gloss-term { color: var(--pk-faint); }

.mgmt-footer__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: #D9D9D9;
}

.mgmt-footer__tagline {
  margin: 0;
  color: var(--pk-ink);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.mgmt-footer__cols {
  display: flex;
  justify-content: flex-end;
  gap: 133px;
}

.mgmt-footer__col {
  display: grid;
  align-content: start;
  gap: 28px;
}

.mgmt-footer__col-title {
  margin: 0;
  color: var(--pk-ink-strong);
  font: 500 16px/1.3 var(--pk-font-body);
  letter-spacing: -0.04em;
}

/* The type is declared on the list, not on the anchor inside it: the <li>'s
   own strut is what sets each row's height, so a 14px anchor in a 16px list
   item still rides a 28px line box and the 12px gap reads as 40. */
.mgmt-footer__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  list-style: none;
}

.mgmt-footer__list a {
  color: var(--pk-ink);
  text-decoration: none;
  transition: color var(--pk-dur) var(--pk-ease);
}

.mgmt-footer__list a:hover {
  color: var(--pk-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mgmt-footer__lockup {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--pk-font-body);
}

.mgmt-footer__base { border-top: 1px solid var(--pk-rule); }

.mgmt-footer__base-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding: 20px 60px;
}

.mgmt-footer__copyright {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pk-faint);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}


@media (max-width: 1199.98px) {
  .mgmt-footer__inner { padding: 32px 5% 0; }
  .mgmt-footer__cols { gap: 50px; }
  .mgmt-footer__base-row { padding: 20px 32px; }
}

@media (max-width: 809.98px) {
  .mgmt-footer__inner {
    gap: 40px;
    padding: 40px 20px 0;
  }

  /* Stacked, so the cross axis is now the horizontal one: `flex-start` from
     the row layout would shrink both blocks to their content width and the
     Company row below could not spread across the column. */
  .mgmt-footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: 49px;
  }

  .mgmt-footer__brand {
    flex: none;
    width: auto;
  }

  /* Platform beside Resources, Company across the foot of the block with
     its four destinations on one line -- the phone variant's layout. */
  .mgmt-footer__cols {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 49px 20px;
  }

  .mgmt-footer__col--company { grid-column: 1 / -1; }

  .mgmt-footer__col--company .mgmt-footer__list {
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 12px;
  }

  .mgmt-footer__base-row { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .mgmt-footer__list a { transition: none; }
}