/* 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;
}

/* article summary — cream card with a gold accent bar.
   Applies automatically to the article's opening paragraph, plus anything
   still manually tagged with the .blurb class. */
#fullArticle > p:first-of-type,
p.blurb {
background: #f8f4ed;
border-left: 5px solid #d0960c;
border-radius: 0;
padding: 16px 20px;
color: #291E3B;
font-family: var(--system-ui);
font-size: 1.1rem;
line-height: 1.5;
}

/* stroke around article images (applies to every image in an article body).
   Add class="no-stroke" to an image to remove it on a case-by-case basis. */
#fullArticle img {
border: 2px solid #78429A;
border-radius: 0px;
max-width: 100%;
height: auto;
}

#fullArticle img.no-stroke {
border: 0;
}

/* 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 instruction text — reserves space on the left for the number
   and vertically centers that number against the text itself */
.step-text {
position: relative;
flex: 1 1 200px;
min-width: 0;
min-height: 64px;
padding-left: 88px;
display: flex;
flex-direction: column;
justify-content: center;
}

/* the auto-generated numbered circle, centered to the text */
.step-text::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
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 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) */
/* stack cleanly on phones: text (with number beside it), then screenshot */
@media (max-width: 600px) {
.step {
flex-direction: column;
align-items: flex-start;
}
.step-text,
.step-img {
width: 100%;
flex: 0 0 auto;
}
}

/* ============================================================
   Text + image side by side, no number (matches .step styling)
   Use when you want a supporting image beside a block of text.
   Text is the wider column; image sits to the side.
   ============================================================ */

.pair {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
margin: 1.5em 0;
}

/* the text column (wider) */
.pair-text {
flex: 2 1 300px;
min-width: 0;
}

/* the image column (narrower) */
.pair-img {
flex: 1 1 200px;
min-width: 0;
}

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

/* ------------------------------------------------------------
   Keep the number lined up with the text when <p> tags are used.
   Help Scout's default paragraph spacing adds invisible room around
   the text, which left the number sitting low next to it. Trimming
   the outer paragraph margins makes them line up again.
   (Spacing BETWEEN stacked paragraphs is preserved.)
   ------------------------------------------------------------ */
#fullArticle .step-text p:first-child,
#fullArticle .pair-text p:first-child {
margin-top: 0;
}

#fullArticle .step-text p:last-child,
#fullArticle .pair-text p:last-child {
margin-bottom: 0;
}

/* ============================================================
   Tighter lists in article body (applies site-wide, article
   content only — sidebar and related-article lists untouched).
   Trims the gap above a list and the space between bullets.
   Values are easy to nudge if you want them tighter or looser.
   ============================================================ */

/* space around the list itself */
#fullArticle ul,
#fullArticle ol {
margin-top: 0.5em;
margin-bottom: 1.5em;
}

/* space between bullets */
#fullArticle li {
margin-bottom: 0.25em;
}
#fullArticle li:last-child {
margin-bottom: 0;
}

/* trim the paragraph that sits directly above a list */
#fullArticle p:has(+ ul),
#fullArticle p:has(+ ol) {
margin-bottom: 0.5em;
}