<style>
/* navigation adjustments */
.navbar .brand {
max-width: 155px !important;
}

.navbar {
border-bottom: 1px solid #dbdbdb;
}

/* font */
:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* link color related articles */
.related ul>li a {
color: #78429A;
text-decoration: none;
}

/* homepage main button */
#searchBar button .icon-search {
display: inline-flex;
color: #ffffff;
padding: 0 4px 0 0;
}

#searchBar button {
color: #ffffff !important;
text-shadow: none;
background: #C7A3E7;
border-radius: 0 5px 5px 0;
border: 1px solid #dbdbdb;
}

/* styling for homepage category buttons */
.category-list .category {
background-color:#ffffff;
border-bottom: 1px solid #dbdbdb;
border-radius: 3px;
border-left: 1px solid #F5F5F5;
border-right:1px solid #F5F5F5;
border-top:1px solid #F5F5F5;
}

.twoCol .collection, .threeCol .collection { 
background: #ffffff; 
border-color: #DBDBDB; 
}

/* button */
.download-btn {
border-radius: 3px;
    color: #C7A3E7 !important;
    font-size: 16px;
    background: #ffffff;
    padding: 10px;
    border: solid #e5b237 1px;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    max-width: 100%;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    overflow: hidden;
}

.download-btn:hover, .download-btn:hover a {
color: #ffffff !important;
background: #78429A;
text-decoration: none;
text-align: center;
}

/* base font for the whole site */
body, button, input, select, textarea {
font-family: var(--system-ui);
}

/* screenshot border */
.imgborder {
border: 2px solid #575652 !important;
}

/* box with background color */
#quotebox {
font-family: var(--system-ui);
padding: 25px;
border-width: 1px;
border-color: #35284b;
background-color: #35284b;
border-style: solid;
border-radius: 0px 0px 30px 0px;
}
#quotebox, #quotebox li, #quotebox p, #quotebox h1, #quotebox h2, #quotebox h3, #quotebox h4 {
color: #ffffff !important;
}

/* bulleted list with checkmark */
#check ul {
list-style: none;
padding-left: 0;
}

#check li {
position: relative;
padding-left: 1.5em;  /* space to preserve indentation on wrap */
}

#check li:before {
content: '';  /* placeholder for the SVG */
position: absolute;
left: 0;  /* place the SVG at the start of the padding */
width: 2em;
height: 2em;
background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='20' height='20' fill='gray' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'></path></svg>") no-repeat;
}

/* styling for h tags */
#fullArticle .title {
color: #291E3B !important;
font-family: var(--system-ui);
font-weight: 400 !important;
font-style: normal !important;
font-size: 1.8rem  !important;
}

#fullArticle h2 {
color: #363636 !important;
font-family: var(--system-ui);
font-size: 1.125rem !important;
font-weight: 400 !important;
}

h3 {
color: #C7A3E7 !important;
font-family: var(--system-ui);
font-weight: 300;
font-style: normal;
}

/* intro line — automatically styles the article's opening paragraph,
   plus anything still manually tagged with the .blurb class */
#fullArticle > p:first-of-type,
p.blurb {
color:  #C7A3E7 !important;
font-family: var(--system-ui);
font-weight: 300;
font-style: italic;
font-size: 1.1rem !important;
}

/* remove border from images */
#fullArticle img {
border: 0px solid #d6d6d6;
border-radius: 0px;
}

/* breakpoint for small images, use when you want the image to take up half the screen on larger screen sizes */
@media only screen and (max-width: 600px) {
.smallImg {
width: 100%; 
margin: auto !important;
display: block !important;
}
}
@media only screen and (min-width: 600px) {
.smallImg {
width: 50%; 
margin: auto !important;
display: block !important;
}
}

/* breakpoint for med images */
@media only screen and (max-width: 600px) {
.medImg {
width: 100%; 
margin: auto !important;
display: block !important;
}
}

/* make iframe responsive */
iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}

/* responsive */
.o-control-group {
  box-sizing: border-box;
  display: flex;
  position: relative;
  vertical-align: middle; }
  .o-control-group > * {
    box-sizing: border-box;
    margin-top: 0;
    position: relative;
    width: auto; }
    .o-control-group > *:hover {
      z-index: 1; }
    .o-control-group > * + *:not(:first-child) {
      margin-left: -1px; }
    .o-control-group > *:first-child {
      border-bottom-left-radius: 3px;
      border-top-left-radius: 3px;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0; }
    .o-control-group > *:last-child {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      border-bottom-right-radius: 3px;
      border-top-right-radius: 3px; }
    .o-control-group > *:not(:first-child):not(:last-child) {
      border-radius: 0; }
    .o-control-group > *:only-child {
      border-radius: 3px; }
    .o-control-group > *:focus {
      z-index: 2; }
  .o-control-group--block > * {
    flex: 1; }
  .o-control-group--left {
    justify-content: flex-start; }
  .o-control-group--center {
    justify-content: center; }
  .o-control-group--right {
    justify-content: flex-end; }
  @media (min-width: 544px) {
    .o-control-group--left\@sm {
      justify-content: flex-start; }
    .o-control-group--center\@sm {
      justify-content: center; }
    .o-control-group--right\@sm {
      justify-content: flex-end; } }
  @media (min-width: 768px) {
    .o-control-group--left\@md {
      justify-content: flex-start; }
    .o-control-group--center\@md {
      justify-content: center; }
    .o-control-group--right\@md {
      justify-content: flex-end; } }
  @media (min-width: 992px) {
    .o-control-group--left\@lg {
      justify-content: flex-start; }
    .o-control-group--center\@lg {
      justify-content: center; }
    .o-control-group--right\@lg {
      justify-content: flex-end; } }

.o-control-group__block {
  box-sizing: border-box;
  flex: 1; }

.o-flexy {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: space-between; }
  @media (min-width: 544px) {
    .o-flexy\@sm {
      align-items: center;
      display: flex;
      justify-content: space-between; } }
  @media (min-width: 768px) {
    .o-flexy\@md {
      align-items: center;
      display: flex;
      justify-content: space-between; } }
  @media (min-width: 992px) {
    .o-flexy\@lg {
      align-items: center;
      display: flex;
      justify-content: space-between; } }

.o-flexy--top {
  align-items: flex-start; }

.o-flexy--middle {
  align-items: center; }

.o-flexy--bottom {
  align-items: flex-end; }

.o-flexy--stretch {
  align-items: stretch; }

@media (min-width: 544px) {
  .o-flexy--top\@sm {
    align-items: flex-start; }
  .o-flexy--middle\@sm {
    align-items: center; }
  .o-flexy--bottom\@sm {
    align-items: flex-end; }
  .o-flexy--stretch\@sm {
    align-items: stretch; } }

@media (min-width: 768px) {
  .o-flexy--top\@md {
    align-items: flex-start; }
  .o-flexy--middle\@md {
    align-items: center; }
  .o-flexy--bottom\@md {
    align-items: flex-end; }
  .o-flexy--stretch\@md {
    align-items: stretch; } }

@media (min-width: 992px) {
  .o-flexy--top\@lg {
    align-items: flex-start; }
  .o-flexy--middle\@lg {
    align-items: center; }
  .o-flexy--bottom\@lg {
    align-items: flex-end; }
  .o-flexy--stretch\@lg {
    align-items: stretch; } }

.o-flexy--gap-xs > * {
  margin-left: 4px; }
  .o-flexy--gap-xs > *:first-child {
    margin-left: 0; }

.o-flexy--gap-sm > * {
  margin-left: 8px; }
  .o-flexy--gap-sm > *:first-child {
    margin-left: 0; }

.o-flexy--gap-md > * {
  margin-left: 12px; }
  .o-flexy--gap-md > *:first-child {
    margin-left: 0; }

.o-flexy--gap-lg > * {
  margin-left: 16px; }
  .o-flexy--gap-lg > *:first-child {
    margin-left: 0; }

.o-flexy--gap-xl > * {
  margin-left: 20px; }
  .o-flexy--gap-xl > *:first-child {
    margin-left: 0; }

@media (min-width: 544px) {
  .o-flexy--gap-xs\@sm > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@sm > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@sm > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@sm > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@sm > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@sm > *:first-child {
      margin-left: 0; } }

@media (min-width: 768px) {
  .o-flexy--gap-xs\@md > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@md > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@md > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@md > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@md > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@md > *:first-child {
      margin-left: 0; } }

@media (min-width: 992px) {
  .o-flexy--gap-xs\@lg > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@lg > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@lg > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@lg > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@lg > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@lg > *:first-child {
      margin-left: 0; } }

.o-flexy__block {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  flex: 1; }
  @media (min-width: 544px) {
    .o-flexy__block\@sm {
      flex: 1; } }
  @media (min-width: 768px) {
    .o-flexy__block\@md {
      flex: 1; } }
  @media (min-width: 992px) {
    .o-flexy__block\@lg {
      flex: 1; } }

.o-flexy__inline-item {
  box-sizing: border-box;
  max-width: 100%; }

.o-flexy__item {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0; }

.o-container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
  padding-left: 15px;
  padding-right: 15px; }

.o-container--fluid {
  max-width: 100%; }

.o-container--responsive {
  max-width: 100%; }
  @media (min-width: 544px) {
    .o-container--responsive {
      max-width: 576px; } }
  @media (min-width: 768px) {
    .o-container--responsive {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .o-container--responsive {
      max-width: 940px; } }

[class*="o-col-"],
.o-col {
  box-sizing: border-box;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 100%; }

.o-col-0 {
  width: 0%; }

.o-col-1 {
  width: 8.33333%; }

.o-col-2 {
  width: 16.66667%; }

.o-col-3 {
  width: 25%; }

.o-col-4 {
  width: 33.33333%; }

.o-col-5 {
  width: 41.66667%; }

.o-col-6 {
  width: 50%; }

.o-col-7 {
  width: 58.33333%; }

.o-col-8 {
  width: 66.66667%; }

.o-col-9 {
  width: 75%; }

.o-col-10 {
  width: 83.33333%; }

.o-col-11 {
  width: 91.66667%; }

.o-col-12 {
  width: 100%; }

.o-col-20 {
  width: 20%; }

.o-col-offset-1 {
  margin-left: 8.33333%; }

.o-col-pull-1 {
  right: 8.33333%; }

.o-col-push-1 {
  left: 8.33333%; }

.o-col-offset-2 {
  margin-left: 16.66667%; }

.o-col-pull-2 {
  right: 16.66667%; }

.o-col-push-2 {
  left: 16.66667%; }

.o-col-offset-3 {
  margin-left: 25%; }

.o-col-pull-3 {
  right: 25%; }

.o-col-push-3 {
  left: 25%; }

.o-col-offset-4 {
  margin-left: 33.33333%; }

.o-col-pull-4 {
  right: 33.33333%; }

.o-col-push-4 {
  left: 33.33333%; }

.o-col-offset-5 {
  margin-left: 41.66667%; }

.o-col-pull-5 {
  right: 41.66667%; }

.o-col-push-5 {
  left: 41.66667%; }

.o-col-offset-6 {
  margin-left: 50%; }

.o-col-pull-6 {
  right: 50%; }

.o-col-push-6 {
  left: 50%; }

.o-col-offset-7 {
  margin-left: 58.33333%; }

.o-col-pull-7 {
  right: 58.33333%; }

.o-col-push-7 {
  left: 58.33333%; }

.o-col-offset-8 {
  margin-left: 66.66667%; }

.o-col-pull-8 {
  right: 66.66667%; }

.o-col-push-8 {
  left: 66.66667%; }

.o-col-offset-9 {
  margin-left: 75%; }

.o-col-pull-9 {
  right: 75%; }

.o-col-push-9 {
  left: 75%; }

.o-col-offset-10 {
  margin-left: 83.33333%; }

.o-col-pull-10 {
  right: 83.33333%; }

.o-col-push-10 {
  left: 83.33333%; }

.o-col-offset-11 {
  margin-left: 91.66667%; }

.o-col-pull-11 {
  right: 91.66667%; }

.o-col-push-11 {
  left: 91.66667%; }

.o-col-offset-12 {
  margin-left: 100%; }

.o-col-pull-12 {
  right: 100%; }

.o-col-push-12 {
  left: 100%; }

.o-col-offset-20 {
  margin-left: 20%; }

.o-col-pull-20 {
  right: 20%; }

.o-col-push-20 {
  left: 20%; }

@media (min-width: 544px) {
  .o-col-0\@sm {
    width: 0%; }
  .o-col-1\@sm {
    width: 8.33333%; }
  .o-col-2\@sm {
    width: 16.66667%; }
  .o-col-3\@sm {
    width: 25%; }
  .o-col-4\@sm {
    width: 33.33333%; }
  .o-col-5\@sm {
    width: 41.66667%; }
  .o-col-6\@sm {
    width: 50%; }
  .o-col-7\@sm {
    width: 58.33333%; }
  .o-col-8\@sm {
    width: 66.66667%; }
  .o-col-9\@sm {
    width: 75%; }
  .o-col-10\@sm {
    width: 83.33333%; }
  .o-col-11\@sm {
    width: 91.66667%; }
  .o-col-12\@sm {
    width: 100%; }
  .o-col-20\@sm {
    width: 20%; }
  .o-col-offset-0\@sm {
    margin-left: 0%; }
  .o-col-pull-0\@sm {
    right: auto; }
  .o-col-push-0\@sm {
    left: auto; }
  .o-col-offset-1\@sm {
    margin-left: 8.33333%; }
  .o-col-pull-1\@sm {
    right: 8.33333%; }
  .o-col-push-1\@sm {
    left: 8.33333%; }
  .o-col-offset-2\@sm {
    margin-left: 16.66667%; }
  .o-col-pull-2\@sm {
    right: 16.66667%; }
  .o-col-push-2\@sm {
    left: 16.66667%; }
  .o-col-offset-3\@sm {
    margin-left: 25%; }
  .o-col-pull-3\@sm {
    right: 25%; }
  .o-col-push-3\@sm {
    left: 25%; }
  .o-col-offset-4\@sm {
    margin-left: 33.33333%; }
  .o-col-pull-4\@sm {
    right: 33.33333%; }
  .o-col-push-4\@sm {
    left: 33.33333%; }
  .o-col-offset-5\@sm {
    margin-left: 41.66667%; }
  .o-col-pull-5\@sm {
    right: 41.66667%; }
  .o-col-push-5\@sm {
    left: 41.66667%; }
  .o-col-offset-6\@sm {
    margin-left: 50%; }
  .o-col-pull-6\@sm {
    right: 50%; }
  .o-col-push-6\@sm {
    left: 50%; }
  .o-col-offset-7\@sm {
    margin-left: 58.33333%; }
  .o-col-pull-7\@sm {
    right: 58.33333%; }
  .o-col-push-7\@sm {
    left: 58.33333%; }
  .o-col-offset-8\@sm {
    margin-left: 66.66667%; }
  .o-col-pull-8\@sm {
    right: 66.66667%; }
  .o-col-push-8\@sm {
    left: 66.66667%; }
  .o-col-offset-9\@sm {
    margin-left: 75%; }
  .o-col-pull-9\@sm {
    right: 75%; }
  .o-col-push-9\@sm {
    left: 75%; }
  .o-col-offset-10\@sm {
    margin-left: 83.33333%; }
  .o-col-pull-10\@sm {
    right: 83.33333%; }
  .o-col-push-10\@sm {
    left: 83.33333%; }
  .o-col-offset-11\@sm {
    margin-left: 91.66667%; }
  .o-col-pull-11\@sm {
    right: 91.66667%; }
  .o-col-push-11\@sm {
    left: 91.66667%; }
  .o-col-offset-12\@sm {
    margin-left: 100%; }
  .o-col-pull-12\@sm {
    right: 100%; }
  .o-col-push-12\@sm {
    left: 100%; }
  .o-col-offset-20\@sm {
    margin-left: 20%; }
  .o-col-pull-20\@sm {
    right: 20%; }
  .o-col-push-20\@sm {
    left: 20%; } }

@media (min-width: 768px) {
  .o-col-0\@md {
    width: 0%; }
  .o-col-1\@md {
    width: 8.33333%; }
  .o-col-2\@md {
    width: 16.66667%; }
  .o-col-3\@md {
    width: 25%; }
  .o-col-4\@md {
    width: 33.33333%; }
  .o-col-5\@md {
    width: 41.66667%; }
  .o-col-6\@md {
    width: 50%; }
  .o-col-7\@md {
    width: 58.33333%; }
  .o-col-8\@md {
    width: 66.66667%; }
  .o-col-9\@md {
    width: 75%; }
  .o-col-10\@md {
    width: 83.33333%; }
  .o-col-11\@md {
    width: 91.66667%; }
  .o-col-12\@md {
    width: 100%; }
  .o-col-20\@md {
    width: 20%; }
  .o-col-offset-0\@md {
    margin-left: 0%; }
  .o-col-pull-0\@md {
    right: auto; }
  .o-col-push-0\@md {
    left: auto; }
  .o-col-offset-1\@md {
    margin-left: 8.33333%; }
  .o-col-pull-1\@md {
    right: 8.33333%; }
  .o-col-push-1\@md {
    left: 8.33333%; }
  .o-col-offset-2\@md {
    margin-left: 16.66667%; }
  .o-col-pull-2\@md {
    right: 16.66667%; }
  .o-col-push-2\@md {
    left: 16.66667%; }
  .o-col-offset-3\@md {
    margin-left: 25%; }
  .o-col-pull-3\@md {
    right: 25%; }
  .o-col-push-3\@md {
    left: 25%; }
  .o-col-offset-4\@md {
    margin-left: 33.33333%; }
  .o-col-pull-4\@md {
    right: 33.33333%; }
  .o-col-push-4\@md {
    left: 33.33333%; }
  .o-col-offset-5\@md {
    margin-left: 41.66667%; }
  .o-col-pull-5\@md {
    right: 41.66667%; }
  .o-col-push-5\@md {
    left: 41.66667%; }
  .o-col-offset-6\@md {
    margin-left: 50%; }
  .o-col-pull-6\@md {
    right: 50%; }
  .o-col-push-6\@md {
    left: 50%; }
  .o-col-offset-7\@md {
    margin-left: 58.33333%; }
  .o-col-pull-7\@md {
    right: 58.33333%; }
  .o-col-push-7\@md {
    left: 58.33333%; }
  .o-col-offset-8\@md {
    margin-left: 66.66667%; }
  .o-col-pull-8\@md {
    right: 66.66667%; }
  .o-col-push-8\@md {
    left: 66.66667%; }
  .o-col-offset-9\@md {
    margin-left: 75%; }
  .o-col-pull-9\@md {
    right: 75%; }
  .o-col-push-9\@md {
    left: 75%; }
  .o-col-offset-10\@md {
    margin-left: 83.33333%; }
  .o-col-pull-10\@md {
    right: 83.33333%; }
  .o-col-push-10\@md {
    left: 83.33333%; }
  .o-col-offset-11\@md {
    margin-left: 91.66667%; }
  .o-col-pull-11\@md {
    right: 91.66667%; }
  .o-col-push-11\@md {
    left: 91.66667%; }
  .o-col-offset-12\@md {
    margin-left: 100%; }
  .o-col-pull-12\@md {
    right: 100%; }
  .o-col-push-12\@md {
    left: 100%; }
  .o-col-offset-20\@md {
    margin-left: 20%; }
  .o-col-pull-20\@md {
    right: 20%; }
  .o-col-push-20\@md {
    left: 20%; } }

@media (min-width: 992px) {
  .o-col-0\@lg {
    width: 0%; }
  .o-col-1\@lg {
    width: 8.33333%; }
  .o-col-2\@lg {
    width: 16.66667%; }
  .o-col-3\@lg {
    width: 25%; }
  .o-col-4\@lg {
    width: 33.33333%; }
  .o-col-5\@lg {
    width: 41.66667%; }
  .o-col-6\@lg {
    width: 50%; }
  .o-col-7\@lg {
    width: 58.33333%; }
  .o-col-8\@lg {
    width: 66.66667%; }
  .o-col-9\@lg {
    width: 75%; }
  .o-col-10\@lg {
    width: 83.33333%; }
  .o-col-11\@lg {
    width: 91.66667%; }
  .o-col-12\@lg {
    width: 100%; }
  .o-col-20\@lg {
    width: 20%; }
  .o-col-offset-0\@lg {
    margin-left: 0%; }
  .o-col-pull-0\@lg {
    right: auto; }
  .o-col-push-0\@lg {
    left: auto; }
  .o-col-offset-1\@lg {
    margin-left: 8.33333%; }
  .o-col-pull-1\@lg {
    right: 8.33333%; }
  .o-col-push-1\@lg {
    left: 8.33333%; }
  .o-col-offset-2\@lg {
    margin-left: 16.66667%; }
  .o-col-pull-2\@lg {
    right: 16.66667%; }
  .o-col-push-2\@lg {
    left: 16.66667%; }
  .o-col-offset-3\@lg {
    margin-left: 25%; }
  .o-col-pull-3\@lg {
    right: 25%; }
  .o-col-push-3\@lg {
    left: 25%; }
  .o-col-offset-4\@lg {
    margin-left: 33.33333%; }
  .o-col-pull-4\@lg {
    right: 33.33333%; }
  .o-col-push-4\@lg {
    left: 33.33333%; }
  .o-col-offset-5\@lg {
    margin-left: 41.66667%; }
  .o-col-pull-5\@lg {
    right: 41.66667%; }
  .o-col-push-5\@lg {
    left: 41.66667%; }
  .o-col-offset-6\@lg {
    margin-left: 50%; }
  .o-col-pull-6\@lg {
    right: 50%; }
  .o-col-push-6\@lg {
    left: 50%; }
  .o-col-offset-7\@lg {
    margin-left: 58.33333%; }
  .o-col-pull-7\@lg {
    right: 58.33333%; }
  .o-col-push-7\@lg {
    left: 58.33333%; }
  .o-col-offset-8\@lg {
    margin-left: 66.66667%; }
  .o-col-pull-8\@lg {
    right: 66.66667%; }
  .o-col-push-8\@lg {
    left: 66.66667%; }
  .o-col-offset-9\@lg {
    margin-left: 75%; }
  .o-col-pull-9\@lg {
    right: 75%; }
  .o-col-push-9\@lg {
    left: 75%; }
  .o-col-offset-10\@lg {
    margin-left: 83.33333%; }
  .o-col-pull-10\@lg {
    right: 83.33333%; }
  .o-col-push-10\@lg {
    left: 83.33333%; }
  .o-col-offset-11\@lg {
    margin-left: 91.66667%; }
  .o-col-pull-11\@lg {
    right: 91.66667%; }
  .o-col-push-11\@lg {
    left: 91.66667%; }
  .o-col-offset-12\@lg {
    margin-left: 100%; }
  .o-col-pull-12\@lg {
    right: 100%; }
  .o-col-push-12\@lg {
    left: 100%; }
  .o-col-offset-20\@lg {
    margin-left: 20%; }
  .o-col-pull-20\@lg {
    right: 20%; }
  .o-col-push-20\@lg {
    left: 20%; } }

.o-row {
  box-sizing: border-box;
  margin-left: -15px;
  margin-right: -15px;
  display: flex; }
  .o-row > [class*="o-col"] {
    float: left; }
  .o-row--md {
    margin-left: -8px;
    margin-right: -8px; }
    .o-row--md > [class*="o-col"] {
      padding-left: 8px;
      padding-right: 8px; }
  .o-row--sm {
    margin-left: -4px;
    margin-right: -4px; }
    .o-row--sm > [class*="o-col"] {
      padding-left: 4px;
      padding-right: 4px; }
  .o-row--xs {
    margin-left: -2px;
    margin-right: -2px; }
    .o-row--xs > [class*="o-col"] {
      padding-left: 2px;
      padding-right: 2px; }

.o-row-flex {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px; }
  .o-row-flex--md {
    margin-left: -8px;
    margin-right: -8px; }
    .o-row-flex--md > [class*="o-col"] {
      padding-left: 8px;
      padding-right: 8px; }
  .o-row-flex--sm {
    margin-left: -4px;
    margin-right: -4px; }
    .o-row-flex--sm > [class*="o-col"] {
      padding-left: 4px;
      padding-right: 4px; }
  .o-row-flex--xs {
    margin-left: -2px;
    margin-right: -2px; }
    .o-row-flex--xs > [class*="o-col"] {
      padding-left: 2px;
      padding-right: 2px; }

.o-inline {
  box-sizing: border-box;
  display: block;
  list-style: none;
  margin-bottom: -4px;
  margin-left: 0;
  padding-left: 0; }
  .o-inline::after {
    box-sizing: border-box;
    content: " ";
    clear: both;
    display: table; }
  .o-inline:last-child {
    margin-bottom: -4px; }
  .o-inline--xs {
    margin-bottom: -4px;
    margin-right: -4px; }
    .o-inline--xs:last-child {
      margin-bottom: -4px; }
    .o-inline--xs .o-inline__item {
      margin-bottom: 4px;
      margin-right: 4px; }
  .o-inline--sm {
    margin-bottom: -8px;
    margin-right: -8px; }
    .o-inline--sm:last-child {
      margin-bottom: -8px; }
    .o-inline--sm .o-inline__item {
      margin-bottom: 8px;
      margin-right: 8px; }
  .o-inline--md {
    margin-bottom: -16px;
    margin-right: -16px; }
    .o-inline--md:last-child {
      margin-bottom: -16px; }
    .o-inline--md .o-inline__item {
      margin-bottom: 16px;
      margin-right: 16px; }
  .o-inline--lg {
    margin-bottom: -24px;
    margin-right: -24px; }
    .o-inline--lg:last-child {
      margin-bottom: -24px; }
    .o-inline--lg .o-inline__item {
      margin-bottom: 24px;
      margin-right: 24px; }

.o-inline__item {
  box-sizing: border-box;
  display: inline-block;
  margin: 0 0 4px;
  padding: 0;
  vertical-align: middle; }

.o-responsive-wrapper {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto; }

/* vertical align */
.steps {
display: flex !important;
}

.stepsVert {
align-self: center !important;
}

/* ============================================================
   Self-numbering steps (purple/gold)
   Paste one .step block per step — numbers generate automatically,
   screenshots get a stroke, and everything stacks on mobile.
   ============================================================ */

/* restart the numbering at the top of each article */
#fullArticle {
counter-reset: step-counter;
}

/* one step = auto number + text + screenshot, side by side on desktop */
.step {
counter-increment: step-counter;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
margin: 1.5em 0;
}

/* the auto-generated numbered circle */
.step::before {
content: counter(step-counter);
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 50%;
background: #c7a3e7;
color: #f8f4ed;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 600;
line-height: 1;
}

/* the instruction text column */
.step-text {
flex: 1 1 200px;
min-width: 0;
}

/* the screenshot column (wider than the text on desktop) */
.step-img {
flex: 2 1 280px;
min-width: 0;
}

/* small stroke on step screenshots
   (scoped under #fullArticle so it beats the site-wide no-border rule) */
#fullArticle .step-img img {
border: 2px solid #c7a3e7;
max-width: 100%;
height: auto;
padding: 0px;
}

/* stack cleanly on phones: number, then text, then screenshot */
@media (max-width: 600px) {
.step {
flex-direction: column;
align-items: flex-start;
}
.step-text,
.step-img {
width: 100%;
flex: 0 0 auto;
}
}
</style>