/* Styling for the floating accessibility menu injected by a11y-widget.js.
   Falls back to sensible colours so the widget also works on a page that does
   not define the site tokens. */
.skiplink {
  position: absolute; right: -9999px; top: 0; z-index: 120;
  /* --acc-ink, not --acc: this carries white text, and the marketing page's
     brand blue only reaches 3.26:1 against white. The fallback is already
     dark enough for pages that define no tokens. */
  background: var(--acc-ink, #2a56c6); color: #fff; padding: 10px 16px;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skiplink:focus { right: 0; }

.a11y-w {
  position: fixed; bottom: 18px; left: 18px; z-index: 100;
  font-family: var(--f, "Rubik", system-ui, sans-serif);
}
.a11y-w button { font: inherit; cursor: pointer; }
.a11y-fab {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--acc, #2a56c6); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(30, 42, 110, .55);
  display: grid; place-items: center;
}
.a11y-fab:focus-visible, .a11y-w button:focus-visible {
  outline: 3px solid var(--ink, #141a33); outline-offset: 2px;
}
.a11y-fab svg { width: 27px; height: 27px; fill: currentColor; }

.a11y-panel {
  position: absolute; bottom: 62px; left: 0; width: 264px;
  background: var(--card, #fff); color: var(--ink, #141a33);
  border: 1px solid var(--line, #e7eaf6); border-radius: 16px; padding: 14px;
  box-shadow: 0 24px 60px -28px rgba(30, 42, 110, .45);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 15px; margin: 0 0 10px; font-weight: 700; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.a11y-row span { font-size: 13.5px; }
.a11y-t {
  border: 1px solid var(--line, #e7eaf6); background: var(--tint, #f4f6fe);
  border-radius: 9px; padding: 6px 10px; font-size: 13px; min-width: 44px;
  color: var(--ink, #141a33);
}
.a11y-t[aria-pressed="true"] { background: var(--acc, #2a56c6); color: #fff; border-color: transparent; }
.a11y-size { display: flex; gap: 6px; align-items: center; }
.a11y-size button {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line, #e7eaf6); background: var(--tint, #f4f6fe);
  font-size: 16px; line-height: 1; color: var(--ink, #141a33);
}
.a11y-reset {
  width: 100%; margin-top: 9px; border: 0; border-radius: 10px; padding: 9px;
  background: var(--ink, #141a33); color: #fff; font-size: 13.5px; font-weight: 600;
}
.a11y-note { margin: 10px 0 0; font-size: 12px; text-align: center; }
.a11y-note a { text-decoration: underline; color: var(--acc, #2a56c6); }

/* The filters sit on body's children rather than on body: a filter creates a
   containing block, which would break the widget's own position:fixed. */
.a11y-grayscale body > *:not(.a11y-w) { filter: grayscale(1); }
.a11y-contrast body > *:not(.a11y-w) { filter: contrast(1.25); }
.a11y-grayscale.a11y-contrast body > *:not(.a11y-w) { filter: grayscale(1) contrast(1.25); }
.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px; font-weight: 600; }
.a11y-noanim *, .a11y-noanim *::before, .a11y-noanim *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}