:root {
  --layout-gap: 1rem;
  --site-gutter: 1.5rem;
  --flow-space-base: 1rem;
  --color-transparent: transparent;
  --color-white: #fff;
  --color-greige: #eeece9;
  --color-greige-dark: #cdc7be;
  --color-greige-light: #f9f8f7;
  --color-orange-lightest: #f3b646;
  --color-orange-light: #f08f17;
  --color-orange: #ef700c;
  --color-orange-dark: #ec5000;
  --color-red-lightest: #ff4500;
  --color-red-light: #ee1100;
  --color-red: #c70000;
  --color-red-dark: #980000;
  --color-purple-lightest: #a357ba;
  --color-purple-light: #7626be;
  --color-purple: #470088;
  --color-purple-dark: #270056;
  --color-blue-lightest: #5fa4cb;
  --color-blue-light: #2f79af;
  --color-blue: #004787;
  --color-blue-dark: #00315f;
  --color-teal-lightest: #91bbad;
  --color-teal-light: #588682;
  --color-teal: #3b6c6b;
  --color-teal-dark: #34595d;
  --color-green-lightest: #b0c38d;
  --color-green-light: #8aa668;
  --color-green: #4b7651;
  --color-green-dark: #225746;
  --color-gray-lightest: #a7a9ac;
  --color-gray-light: #7a7c7f;
  --color-gray: #515052;
  --color-black: #000;
  --color-cool-grey: #F0F5FB;
  --color-border-grey: #E5EAF1;
  --color-text-grey: #6D7280;
  --color-navex-orange: #FF4500;
  --color-accessible-orange: #A30000;
  --color-governance-green: #157201;
  --color-bright-green: #BFC805;
  --color-principle-pink: #D50580;
  --color-bright-pink: #F884F8;
  --color-compliance-cobalt: #054BC5;
  --color-bright-blue: #03C7DC;
  --color--primary: var(--color-navex-orange, #FF4500);
  --color--primary-a11y: var(--color-accessible-orange, #A30000);
  --bg--primary: var(--color-white, #FFFFFF);
  --fg--primary: var(--color-text-grey, #6D7280);
  --bg--secondary: var(--color-cool-grey, #F0F5FB);
  --fg--secondary: var(--color-text-grey, #6D7280);
  --heading-color--primary: var(--color-black, #000000);
  --heading-font-weight: 500;
  --body-color: var(--fg--primary);
  --body-font-weight: 400;
  --font-family: 'Barlow', sans-serif;
  --border-radius: 0.75rem;
  --border-color: var(--color-border-grey, #E5EAF1);
  --drop-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.04);
  --block-vertical-padding: 5rem; }
  @media (min-width: 45rem) {
    :root {
      --layout-gap: 1.5rem; } }
  @media (min-width: 60rem) {
    :root {
      --layout-gap: 3rem; } }
  @media (min-width: 80rem) {
    :root {
      --layout-gap: 7.5rem; } }
  @media (min-width: 60rem) {
    :root {
      --site-gutter: 1.5rem; } }
  @media (min-width: 80rem) {
    :root {
      --site-gutter: 7.5rem; } }
  @media (min-width: 60rem) {
    :root {
      --flow-space-base: 1.5rem; } }
  @media (min-width: 60rem) {
    :root {
      --block-vertical-padding: 7.5rem; } }
.text--body {
  font-size: 1.125rem;
  font-weight: var(--body-font-weight, 400);
  line-height: 1.4;
  color: var(--body-color, #6D7280); }
  @media (min-width: 60rem) {
    .text--body {
      font-size: 1.25rem; } }
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0; }

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none; }

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth; }

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block; }

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit; }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

.sg__title a {
  color: currentColor;
  text-decoration: none; }
  .sg__title a:focus, .sg__title a:hover {
    text-decoration: underline; }

#main > .stripe:first-child {
  padding-block-start: 2rem; }

.sg-block-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  margin-inline: -1rem;
  gap: 1rem; }
  @media (min-width: 45rem) {
    .sg-block-list {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem) {
    .sg-block-list {
      grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 80rem) {
    .sg-block-list {
      gap: 2rem; } }
.sg-block-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: transparent;
  transform: translateY(0);
  transition: all 0.25s ease-out; }
  .sg-block-card:hover, .sg-block-card:focus-within {
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.25rem 5rem rgba(0, 0, 0, 0.1);
    background-color: #f9f8f7;
    transform: translateY(-0.25rem); }
  .sg-block-card:focus-within {
    outline: 2px solid #005fcc; }

.sg-block-card__name {
  font-size: 1.1rem; }

.sg-block-card__link {
  outline: 3px solid transparent;
  text-decoration-thickness: 1px; }
  .sg-block-card__link::before {
    content: '';
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: 1; }

.sg-block-card__description {
  font-size: 0.9rem;
  font-weight: 400;
  margin-block-start: 0.25rem;
  color: #515052; }

.sg-block-card__screencap-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  order: -1;
  aspect-ratio: 16/9;
  margin-block-end: 0.5rem;
  border-radius: 0.125rem;
  background-color: #eeece9;
  font-style: italic; }
  .sg-block-card__screencap-container::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    box-shadow: inset 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); }

.sg-block-card__screencap {
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain; }

.sg-specimen-list {
  margin-block-start: 0.5rem; }

.sg-specimen-list a {
  color: #004787;
  text-decoration: none; }
  .sg-specimen-list a:focus, .sg-specimen-list a:hover {
    text-decoration: underline; }

.sg-specimen-list__item {
  list-style: decimal inside; }

.sg-specimen__stage {
  background: repeating-conic-gradient(rgba(0, 0, 0, 0.05) 0% 25%, rgba(0, 0, 0, 0) 0% 50%) 50%/1rem 1rem;
  outline: 2px dotted rgba(0, 0, 0, 0.2); }