/* 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: 6px;
color: #35284b;
font-size: 15px;
background: #C7A3E7;
padding: 12px 24px;
border: none;
text-decoration: none;
text-align: center;
white-space: normal;
max-width: 100%;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}

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

/* stacked button group (e.g. phase links).
   Wrap the buttons in <div class="btn-stack">. All buttons match the
   widest label, sit on one line each, and stack vertically. */
.btn-stack {
display: inline-flex;
flex-direction: column;
gap: 10px;
}
.btn-stack .download-btn {
white-space: nowrap;
}

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

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

/* ============================================================
   Callout boxes.  Use: <div class="tip"> with an <h4> title inside.
   The lightbulb icon is added automatically.
   To add another type later (e.g. class="note" / class="caution"),
   copy this whole block and change the class name, the background,
   the border color, the title color, and the icon.
   (The old id="quotebox" is aliased in below so existing boxes keep
   working; it can be dropped once articles are migrated to class="tip".)
   ============================================================ */
#fullArticle .tip,
#quotebox {
font-family: var(--system-ui);
margin: 1.5em 0;
padding: 20px 24px;
background: #e8dbf5;
border-left: 5px solid #78429A;
border-radius: 0 12px 12px 0;
}

/* title row, with the icon added automatically before it */
#fullArticle .tip h4,
#quotebox h4 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 500;
color: #35284b;
}
#fullArticle .tip h4::before,
#quotebox h4::before {
content: "";
flex: 0 0 auto;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2378429A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/><path d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/><path d='M9.7 17h4.6'/></svg>") no-repeat center / contain;
}

/* body text and lists inside the callout */
#fullArticle .tip p,
#quotebox p {
margin: 0 0 10px;
color: #291E3B;
}
#fullArticle .tip ul,
#quotebox ul {
margin: 0;
padding-left: 1.5em;
}
#fullArticle .tip li,
#quotebox li {
color: #291E3B;
}

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