/* The unified navbar, as web-v3 ships it: its stylesheet is copied below this
   token block unchanged, so a fix on either side is the same diff on both.

   web-v3 reads its faces from next/font and its dark values from MUI's
   [data-color-scheme]. Neither exists here, so the block below binds the same
   token names to the faces this page already self-hosts and to the [data-theme]
   attribute the page's own theme script writes. */

:root {
  --lm-font-body: "Bai Jamjuree", Tahoma, sans-serif;
  --lm-font-display: Arvo, Georgia, Cambria, "Times New Roman", serif;
  --lm-font-technical: "JetBrains Mono", SFMono-Regular, Consolas, monospace;

  /* One row height for every surface. */
  --lm-nav-height: 48px;

  /* Calm reading state. The row keeps its height and every target keeps its
     rectangle; only surface alpha and the emphasis of each control's inner
     visual change. */
  --lm-nav-content-calm-scale: 0.82;
  --lm-nav-content-calm-opacity: 0.72;
  --lm-nav-surface-prominent-alpha: 92%;
  --lm-nav-surface-calm-alpha: 26%;
  --lm-nav-state-duration: 560ms;
  /* The page's own name for the same number. Its stylesheet reserves space with
     this — scroll-padding for in-page anchors, and the hero's 100svh maths — so
     it has to follow the bar rather than the 76px the page shipped with. This
     sheet loads after the page's, and both rules are :root, so this one wins. */
  --site-header-height: 48px;

  --lm-surface-canvas: #f6f7f3;
  --lm-surface-alt: #eef1ee;
  --lm-surface-card: #fcfcfa;
  --lm-surface-raised: #ffffff;
  --lm-surface-soft: #e5e9e6;
  --lm-surface-blue-tint: #e2e9ed;
  /* Identity, not a surface: one value in both themes. */
  --lm-brand-blue: #1d4497;
  --lm-brand-beige: #f2f1df;
  --lm-text-primary: #182327;
  --lm-text-secondary: #5f635a;
  --lm-text-metadata: #5c6a61;
  --lm-border-hairline: #dce1dd;
  --lm-border-default: #c9d0cb;
  --lm-interaction-accent: #176b82;
  --lm-interaction-focus-ring: #176b82;
  --lm-energy-yellow: #ffbc1f;
  --lm-fg-on-light-primary: #182327;
  /* The rail's tooltip keeps one ink pair in both themes: it floats over page
     content, not over a navbar surface. */
  --lm-overlay-glass: rgba(17, 25, 29, 0.88);
  --lm-overlay-glass-ink: #ffffff;
  --lm-elevation-xs: 0 1px 2px rgba(30, 34, 48, 0.08);
  --lm-elevation-sm: 0 4px 12px rgba(30, 34, 48, 0.1);

  --lm-motion-duration-state: 200ms;
  --lm-motion-duration-feedback: 120ms;
  --lm-motion-duration-emphasis: 560ms;
  --lm-motion-ease-state: cubic-bezier(0.2, 0, 0, 1);
  --lm-motion-ease-press: cubic-bezier(0.3, 0, 0.6, 1);

  /* The wordmark holds one grey in both themes, so it is not a themed token. */
  --lm-identity-wordmark: #757575;
}

/* The media query covers the moment before the attribute is written, and the
   :not() keeps an explicit light choice from being overridden by the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lm-surface-canvas: #11191d;
    --lm-surface-alt: #172126;
    --lm-surface-card: #20292d;
    --lm-surface-raised: #293337;
    --lm-surface-soft: #2b3534;
    --lm-surface-blue-tint: #18333e;
    --lm-text-primary: #f1f4ef;
    --lm-text-secondary: #c4ceca;
    --lm-text-metadata: #a6b5b1;
    --lm-border-hairline: #33403d;
    --lm-border-default: #46524f;
    --lm-interaction-accent: #68c4e2;
    --lm-interaction-focus-ring: #68c4e2;
  }
}

:root[data-theme="dark"] {
  --lm-surface-canvas: #11191d;
  --lm-surface-alt: #172126;
  --lm-surface-card: #20292d;
  --lm-surface-raised: #293337;
  --lm-surface-soft: #2b3534;
  --lm-surface-blue-tint: #18333e;
  --lm-text-primary: #f1f4ef;
  --lm-text-secondary: #c4ceca;
  --lm-text-metadata: #a6b5b1;
  --lm-border-hairline: #33403d;
  --lm-border-default: #46524f;
  --lm-interaction-accent: #68c4e2;
  --lm-interaction-focus-ring: #68c4e2;
}

/* React unmounts the panel; static markup keeps it in the document for a
   crawler and hides it instead, so the two states need a rule. */
.menuPanel[hidden],
.menuBackdrop[hidden] {
  display: none;
}

/* Every rule below hides something the copied stylesheet gives a `display` of
   its own, and the copy is appended after this block — so at equal specificity
   the copy would win. Each one therefore has to outrank a bare class. Keep that
   in mind when adding to this block: a plain `.foo { display: none }` here is
   silently dead. */

/* The button opens a panel a script controls, so it is a dead control until
   that script runs. The page's noscript nav is what serves a reader without
   one. js-ready is the page's own signal, set as its script starts. */
html:not(.js-ready) .menuToggle {
  display: none;
}

/* React renders whichever glyph the state calls for; static markup carries
   both and shows one, so the open state is what swaps them here. */
.menuToggleVisual .navMenuIconClose {
  display: none;
}

.menuToggle[aria-expanded="true"] .navMenuIconMenu {
  display: none;
}

.menuToggle[aria-expanded="true"] .navMenuIconClose {
  display: block;
}

/* The theme button carries one drawn glyph per state and hides the rest, which
   the page's own `[hidden]` rule cannot do against a class that sets display. */
.navInlineIcon[hidden] {
  display: none;
}

/* ------------------------------------------------------------------------ */
/* Copied unchanged from the web-v3 navbar stylesheet.                       */
/* ------------------------------------------------------------------------ */

/* The unified Landometer navigation shell. Tokens and faces come from
   styles/globals.css; everything here is geometry, state and motion.

   The bar looks the same on every public page — only the name after "/", which
   site is selected, and the CTA label change. Page-specific links are never on
   the bar: they are the bookmark rail on desktop and the first group in the
   menu below 820px. */

.siteHeader,
.siteHeader * {
  box-sizing: border-box;
}

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--lm-nav-height);
  color: var(--lm-text-primary);
  font-family: var(--lm-font-body);
  isolation: isolate;
}

/* The surface is a layer behind the row rather than paint on the block itself.
   Calm fades this layer; the block keeps its height, so every panel measured
   from the bar stays put and no control moves out from under the pointer. */
.siteHeader::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-bottom: 1px solid var(--lm-border-hairline);
  background: color-mix(
    in srgb,
    var(--lm-surface-canvas) var(--lm-nav-surface-prominent-alpha),
    transparent
  );
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  transition:
    background-color var(--lm-nav-state-duration) var(--lm-motion-ease-state),
    border-color var(--lm-nav-state-duration) var(--lm-motion-ease-state);
}

.navViewport {
  width: 100%;
  height: 100%;
  padding-inline: 24px;
  overflow-x: clip;
}

.navRow {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 1;
  transition: opacity var(--lm-nav-state-duration) var(--lm-motion-ease-state);
}

/* Reading: the bar recedes without moving. Each control scales its own inner
   visual — the border and fill travel with the label inside them — while the
   link or button around it keeps the rectangle a pointer and a screen reader
   were given. */
.siteHeader.isCalm::before {
  border-bottom-color: color-mix(
    in srgb,
    var(--lm-border-hairline) 20%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--lm-surface-canvas) var(--lm-nav-surface-calm-alpha),
    transparent
  );
}

.siteHeader.isCalm .navRow {
  opacity: var(--lm-nav-content-calm-opacity);
}

.siteHeader.isCalm .brandLockup,
.siteHeader.isCalm .headerControlVisual,
.siteHeader.isCalm .headerControlVisualCta,
.siteHeader.isCalm .menuToggleVisual {
  transform: scale(var(--lm-nav-content-calm-scale));
}

.skipLink {
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 1002;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--lm-border-default);
  border-radius: 999px;
  background: var(--lm-surface-raised);
  color: var(--lm-interaction-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--lm-motion-duration-state)
    var(--lm-motion-ease-state);
}

.skipLink:focus {
  outline: 3px solid var(--lm-interaction-focus-ring);
  outline-offset: 2px;
  transform: translateY(0);
}

.brand,
.brandLockup,
.productLockup,
.headerActions {
  display: inline-flex;
  align-items: center;
}

.brand {
  min-width: 0;
  min-height: 44px;
  flex: none;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--lm-motion-duration-feedback)
    var(--lm-motion-ease-press);
}

.brandLockup {
  gap: 10px;
  transform-origin: left center;
  transition: transform var(--lm-nav-state-duration) var(--lm-motion-ease-state);
}

/* Sits transparent on the surface with no plate or frame behind it, and the
   one approved colour rendition serves both themes unmodified. */
/* No scale on the artwork, unlike the showcase's own bar. Its symbol file is
   full-bleed, so it shrinks the mark to .558 to sit right beside the wordmark;
   ours already carries that reduction as transparent padding — the drawn mark
   is .558 of the file's own canvas — so the 34px slot renders it at ~19px on
   its own. Scaling here would apply the reduction twice. */
.brandSymbol {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

/* Type, not an image. It takes the metadata ink rather than a fixed grey, so
   it lifts against a dark canvas instead of staying at its light-theme
   value. */
.brandWordmark {
  color: var(--lm-text-metadata);
  font-family: var(--lm-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  white-space: nowrap;
  transition: font-size var(--lm-motion-duration-emphasis)
    var(--lm-motion-ease-state);
}

.productLockup {
  min-width: 0;
  gap: 14px;
  white-space: nowrap;
}

.productDivider {
  color: var(--lm-text-metadata);
  font-family: var(--lm-font-technical);
  font-size: 15px;
}

.productName {
  color: var(--lm-text-primary);
  font-size: 15px;
  font-weight: 600;
}

.headerActions {
  min-width: 0;
  justify-content: flex-end;
  /* The row's own spacing, between the group of site links, the CTA and the
     menu button. The links sit closer to each other than that, which is why
     they are a group of their own rather than three more children here. */
  gap: 14px;
  margin-left: auto;
}

.headerMainLinks {
  display: flex;
  align-items: center;
  gap: 2px;
}

.headerLink {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--lm-text-primary);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--lm-motion-duration-feedback)
    var(--lm-motion-ease-press);
}

/* The box a control paints at rest, inside the target it is given. Scaling
   this rather than the link is what lets calm shrink the chrome and its label
   as one piece. */
.headerControlVisual {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 13px;
  border-radius: 10px;
  transform-origin: center;
  transition:
    transform var(--lm-nav-state-duration) var(--lm-motion-ease-state),
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state);
}

/* Selected reads from ink, weight and the underline together — no motion, and
   no inset bar down the side. */
.headerLink[aria-current="page"] {
  color: var(--lm-interaction-accent);
  font-weight: 600;
}

.headerLink[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 0;
  left: 13px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--lm-interaction-accent);
}

/* Holds the button and the sweep in one positioning context. The spacing and
   the no-wrap live here rather than on the button, so the layer above it is
   measured against the same box. */
.navCta {
  position: relative;
  display: inline-flex;
  flex: none;
  white-space: nowrap;
}

/* The target: full height, no paint of its own. Hover and focus are read here
   and drawn on the capsule inside it. */
.secondaryButton {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lm-text-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--lm-motion-duration-feedback)
    var(--lm-motion-ease-press);
}

/* The only control in the row that paints a box at rest, so it is the only one
   whose height is read against the bar's. 32px leaves 8px of air above and
   below inside the 48px row; a 44px capsule would sit 2px off both edges and
   read as touching them. Clipped, because the sweep runs inside it. */
.headerControlVisualCta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  border: 1px solid var(--lm-interaction-accent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transform-origin: center;
  transition:
    transform var(--lm-nav-state-duration) var(--lm-motion-ease-state),
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state);
}

/* The yellow band and a second copy of the word, running opposite ways so the
   band crosses the label while the word it carries stays optically still.
   Inset 24px on both sides is the capsule's own padding, so the band lands on
   the word rather than around it. */
.navCtaLabel {
  position: relative;
  z-index: 0;
}

.navCtaSweep {
  position: absolute;
  top: 50%;
  right: 24px;
  left: 24px;
  z-index: 1;
  margin-inline: -5px;
  padding: 2px 5px;
  border-radius: 2px;
  font: inherit;
  line-height: 1.35;
  pointer-events: none;
  transform: translateY(-50%);
}

.navCtaSweepWindow,
.navCtaSweepCopy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Parked off the left at rest, so nothing shows until the button is entered. */
.navCtaSweepWindow {
  border-radius: 2px;
  background: var(--lm-energy-yellow);
  color: var(--lm-fg-on-light-primary);
  clip-path: inset(0 36% 0 36%);
  transform: translateX(-120%);
}

.navCtaSweepCopy {
  transform: translateX(120%);
}

.secondaryButton:hover .navCtaSweepWindow,
.secondaryButton:focus-visible .navCtaSweepWindow {
  animation: navCtaSweepWindow var(--lm-motion-duration-state)
    var(--lm-motion-ease-state) 0ms 1 both;
}

.secondaryButton:hover .navCtaSweepCopy,
.secondaryButton:focus-visible .navCtaSweepCopy {
  animation: navCtaSweepCopy var(--lm-motion-duration-state)
    var(--lm-motion-ease-state) 0ms 1 both;
}

@keyframes navCtaSweepWindow {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

@keyframes navCtaSweepCopy {
  from {
    transform: translateX(120%);
  }
  to {
    transform: translateX(-120%);
  }
}

/* No border of its own: in the panel these sit on a raised surface among
   links, where a ring would read as a fifth control rather than a utility. */
.utilityCircle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lm-text-primary);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    transform var(--lm-motion-duration-feedback) var(--lm-motion-ease-press);
}

.menuToggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lm-text-primary);
  font: inherit;
  cursor: pointer;
  transition: transform var(--lm-motion-duration-feedback)
    var(--lm-motion-ease-press);
}

/* No ring at rest: the button carries nothing but its glyph, and the circle is
   only what hover and focus paint.

   32px, not the button's 44px — the same height as the CTA capsule beside it,
   so the two controls sit on one optical line and the highlight keeps 8px of
   air off the top and bottom of the 48px row instead of reading as though it
   were touching them. The 44px target is unchanged; only the paint is
   smaller. */
.menuToggleVisual {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transform-origin: center;
  transition:
    transform var(--lm-nav-state-duration) var(--lm-motion-ease-state),
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state);
}

/* One outline recipe for every nav glyph, drawn inline. The stroke is held at
   its authored width through the calm scale, so a shrinking control does not
   also thin its icon. */
.navInlineIcon {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.navInlineIcon * {
  vector-effect: non-scaling-stroke;
}

/* 18px inside the 32px circle, so the glyph keeps 7px of ground on each side
   rather than filling the tint to its edge. */
.menuToggleVisual .navInlineIcon {
  width: 18px;
  height: 18px;
}

/* Hover tints rather than darkens, and paints the box the control actually
   shows rather than the invisible rectangle around it. */
.headerLink:hover .headerControlVisual,
.headerLink:focus-visible .headerControlVisual,
.utilityCircle:hover,
.utilityCircle:focus-visible {
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
}

.menuToggle:hover .menuToggleVisual,
.menuToggle:focus-visible .menuToggleVisual,
.menuToggle[aria-expanded="true"] .menuToggleVisual {
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
}

/* The capsule inverts rather than tinting: it is the one control already
   carrying a border, so a tint alone would barely read. */
.secondaryButton:hover .headerControlVisualCta,
.secondaryButton:focus-visible .headerControlVisualCta {
  background: var(--lm-interaction-accent);
  color: var(--lm-surface-canvas);
}

/* Press moves down 2px and nothing else — no scale, no bounce. */
.brand:active,
.headerLink:active,
.menuToggle:active,
.utilityCircle:active,
.pageLink:active,
.ecosystemLink:active,
.accountLink:active,
.menuAll:active,
.railLink:active {
  background: var(--lm-surface-soft);
  transform: translateY(2px);
}

.secondaryButton:active {
  transform: translateY(2px);
}

/* What is already current does not move when pressed. */
.headerLink[aria-current]:active,
.pageLink[aria-current]:active,
.railLink[aria-current]:active {
  background: var(--lm-surface-blue-tint);
  transform: none;
}

.ecosystemLink[aria-current]:active {
  background: var(--lm-surface-blue-tint);
  transform: none;
}

.brand:focus-visible,
.headerLink:focus-visible,
.secondaryButton:focus-visible,
.menuToggle:focus-visible,
.utilityCircle:focus-visible,
.pageLink:focus-visible,
.ecosystemLink:focus-visible,
.accountLink:focus-visible,
.menuAll:focus-visible,
.railLink:focus-visible {
  outline: 3px solid var(--lm-interaction-focus-ring);
  outline-offset: 2px;
}

/* Rows draw the ring inside, where a 2px offset would collide with the row
   next to them. */
.pageLink:focus-visible,
.ecosystemLink:focus-visible,
.accountLink:focus-visible,
.menuAll:focus-visible {
  outline-offset: -3px;
}

/* --- menu ---------------------------------------------------------------- */

.menuBackdrop {
  position: fixed;
  inset: var(--lm-nav-height) 0 0;
  z-index: 900;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

/* Pinned to the bar's own right edge, which is now the gutter at every width. */
.menuPanel {
  position: fixed;
  top: calc(var(--lm-nav-height) + 6px);
  right: 24px;
  z-index: 901;
  width: min(340px, calc(100% - 48px));
  max-height: calc(100svh - var(--lm-nav-height) - 24px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--lm-border-default);
  border-radius: 16px;
  background: var(--lm-surface-raised);
  color: var(--lm-text-primary);
  /* sm, not md — md is reserved for dialogs that take the whole screen. */
  box-shadow: var(--lm-elevation-sm);
  font-family: var(--lm-font-body);
}

.menuGroup,
.menuLinks {
  display: grid;
  gap: 4px;
}

.menuGroup {
  padding: 8px;
}

/* A section is divided from whatever precedes it, rather than each one being
   told by hand whether it needs a line.
   `~` rather than `+`, and the mobile-only group named explicitly: a section
   hidden at this width is still a sibling, so a rule that only looked at the
   element immediately before would take its line from something invisible and
   draw it across the top of the panel. Naming a section that is actually shown
   means the first visible one is the one with nothing above it. */
.menuGroup:not(.menuMobileOnly) ~ .utilityRow,
.menuGroup:not(.menuMobileOnly) ~ .menuGroup,
.utilityRow ~ .menuGroup {
  border-top: 1px solid var(--lm-border-hairline);
}

.menuMobileOnly {
  display: none;
}

/* Every section is headed the same way — the ecosystem group no longer gets a
   treatment of its own. */
.menuLabel {
  margin: 0;
  padding: 4px 10px;
  color: var(--lm-text-metadata);
  font-family: var(--lm-font-technical);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pageLink,
.ecosystemLink,
.accountLink {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--lm-text-primary);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition:
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    transform var(--lm-motion-duration-feedback) var(--lm-motion-ease-press);
}

.accountLink {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 400;
  cursor: pointer;
}

.accountLink .navInlineIcon,
.pageLink .navInlineIcon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--lm-text-metadata);
}

.pageLink {
  font-size: 15px;
  font-weight: 400;
}

/* The stop you are at is tinted and marked down its leading edge, rather than
   lifted onto a raised surface of its own. */
.pageLink[aria-current] {
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
  box-shadow: inset 3px 0 0 var(--lm-interaction-accent);
}

.pageLink[aria-current] .navInlineIcon {
  color: var(--lm-interaction-accent);
}

.pageLink:hover,
.pageLink:focus-visible,
.ecosystemLink:hover,
.ecosystemLink:focus-visible,
.accountLink:hover,
.accountLink:focus-visible {
  background: var(--lm-surface-blue-tint);
}

.accountIdentity {
  display: grid;
  gap: 2px;
  padding: 8px 14px 10px;
}

.accountIdentity strong {
  font-size: 14.5px;
  font-weight: 600;
}

.accountIdentity small {
  color: var(--lm-text-metadata);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.menuCtaWrap {
  padding: 4px 0 0;
}

.menuCtaWrap .navCta {
  width: 100%;
}

/* In the panel there is no bar height to sit inside, so the capsule takes the
   full 44px itself and hands back the padding that stood in for it. */
.menuCtaWrap .secondaryButton {
  width: 100%;
  min-height: 44px;
}

.menuCtaWrap .headerControlVisualCta {
  width: 100%;
  min-height: 44px;
}

/* The button goes full width here, which would stretch the band across the
   whole capsule. The sweep sizes to its own text instead and centres on the
   button, so it hugs the label the way it does on the bar. */
.menuCtaWrap .navCtaSweep {
  right: auto;
  left: 50%;
  width: max-content;
  margin-inline: 0;
  transform: translate(-50%, -50%);
}

.utilityRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

.utilityCircle {
  font-family: var(--lm-font-technical);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.utilityCircle .navInlineIcon {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.ecosystemLink {
  align-items: flex-start;
  justify-content: space-between;
}

/* Above 820px the bar shows these itself. Below it the bar keeps only the
   hamburger, so this is where they are reached. */
.ecosystemOnBar {
  display: none;
}

.ecosystemCopy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ecosystemCopy strong {
  font: inherit;
  font-weight: 600;
}

.ecosystemCopy small {
  color: var(--lm-text-metadata);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

/* The same mark as a current page stop: tint, accent ink and a line down the
   leading edge. It replaces a phrase saying so, which only a reader who got to
   the end of the row would find. */
.ecosystemLink[aria-current="page"] {
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
  box-shadow: inset 3px 0 0 var(--lm-interaction-accent);
}

.menuAll {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--lm-border-hairline);
  color: var(--lm-interaction-accent);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

/* Announcements for a change a sighted reader sees happen — the theme and the
   language both change the page around the button rather than the button. */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- bookmark rail ------------------------------------------------------- */

.bookmarkRail {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--lm-border-default);
  border-radius: 16px;
  background: var(--lm-surface-canvas);
  background: color-mix(in srgb, var(--lm-surface-canvas) 92%, transparent);
  box-shadow: var(--lm-elevation-sm);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  transform: translateY(-50%);
}

.railLink {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--lm-text-secondary);
  text-decoration: none;
  transition:
    border-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    border-radius var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    background-color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    color var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    transform var(--lm-motion-duration-feedback) var(--lm-motion-ease-press);
}

.railLink:hover,
.railLink:focus-visible {
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
}

/* The stop you are at reads from its surface, its border and its shape — the
   square becomes a circle — never from a filled or heavier glyph. Every icon
   on the rail keeps one outline cut, selected or not. */
.railLink[aria-current] {
  border-color: var(--lm-interaction-accent);
  border-radius: 999px;
  background: var(--lm-surface-blue-tint);
  color: var(--lm-interaction-accent);
}

.railLink[aria-current] .navInlineIcon {
  transform: scale(1.08);
}

/* The label an icon-only control cannot show, on hover and on focus. It floats
   over page content rather than a bar surface, so it keeps one ink pair. */
.railLink::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  z-index: 1;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--lm-overlay-glass);
  color: var(--lm-overlay-glass-ink);
  box-shadow: var(--lm-elevation-xs);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition:
    opacity var(--lm-motion-duration-state) var(--lm-motion-ease-state),
    transform var(--lm-motion-duration-state) var(--lm-motion-ease-state);
}

.railLink:hover::after,
.railLink:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* --- breakpoints --------------------------------------------------------- */

/* The name after "/" is the first thing to go: the page's own H1 and the
   current row in the menu still say which site this is. */
@media (max-width: 900px) {
  .productLockup {
    display: none;
  }
}

/* Controls collapse into the menu before the size tokens change at 600px,
   because the four-control row stops fitting first. */
@media (max-width: 820px) {
  .desktopOnly {
    display: none !important;
  }

  .menuMobileOnly {
    display: grid;
  }

  /* Shown here, so it divides and is divided like any other section. */
  .menuMobileOnly ~ .utilityRow,
  .menuMobileOnly ~ .menuGroup,
  .menuGroup ~ .menuMobileOnly {
    border-top: 1px solid var(--lm-border-hairline);
  }

  /* The bar has dropped its links, so the ecosystem carries them again. */
  .ecosystemOnBar {
    display: flex;
  }

  .menuPanel {
    top: var(--lm-nav-height);
    right: 0;
    width: 100%;
    max-height: calc(100svh - var(--lm-nav-height));
    border-radius: 0 0 16px 16px;
  }

  .bookmarkRail {
    display: none;
  }
}

@media (max-width: 600px) {
  .navViewport {
    padding-inline: 16px;
  }

  .navRow {
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .brandWordmark {
    font-size: 18px;
  }
}

@media print {
  .siteHeader,
  .menuPanel,
  .menuBackdrop,
  .bookmarkRail {
    display: none !important;
  }
}

/* The kit's single kill switch. */
@media (prefers-reduced-motion: reduce) {
  .siteHeader,
  .siteHeader *,
  .menuPanel,
  .menuPanel *,
  .bookmarkRail,
  .bookmarkRail * {
    animation: none !important;
    transition: none !important;
  }

  /* Stopping the sweep would leave the band frozen mid-word, which reads as a
     stuck highlight. The decorative copy goes instead. */
  .navCtaSweep {
    display: none !important;
  }
}