@font-face {
  font-family: Avenir Next;
  src: url('../fonts/Avenir-Next-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Avenir Next;
  src: url('../fonts/Avenir-Next-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Avenir Next Demi;
  src: url('../fonts/Avenir-Next-Demi.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Avenir Next;
  src: url('../fonts/Avenir-Next-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Avenir Next;
  src: url('../fonts/Avenir-Next-Thin.woff2') format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  --color--light: #f5f5fa;
  --color--dark: #131131;
  --_sizes-collection---button-min-height: 48px;
  --_sizes-collection---redius-button: 8px;
  --color--dark-secondary: #55566f;
  --color--primary-purple: #706aff;
  --color--disabled: #9fa1b8;
  --color--white: white;
  --_sizes-collection---radius-bgl-card: 12px;
  --color--highlight: #e7e7ff;
  --color--devider: #d8d9e8;
  --color--gift-success: #18aa17;
  --color--accent-red: #ff5355;
  --color--alert: #f59e0b;
  --color--error: #ef4444;
  --color--info: #3b82f6;
  --_sizes-collection---button-min-width: 140px;
}

body {
  background-color: var(--color--light);
  color: var(--color--dark);
  font-family: Avenir Next, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.bgl-nav {
  z-index: 1;
  background-color: var(--color--dark);
  width: 260px;
  height: 100vh;
  color: var(--color--light);
  flex-flow: column;
  flex: none;
  padding: 20px 20px 30px;
  display: flex;
  position: fixed;
  inset: 0% auto 0% 0%;
}

.bgl-section-wrap {
  width: 100%;
  margin-left: 260px;
}

.bgl-nav-link {
  padding: 20px;
}

.bgl-nav-title {
  text-align: center;
  letter-spacing: 1px;
}

.bgl-nav-title.on-cover {
  letter-spacing: 5px;
  margin-top: 0;
  margin-left: 5px;
  font-size: 1.4rem;
  font-weight: 400;
}

.bgl-navlink-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  padding-top: 5vh;
  display: flex;
}

.bgl-navlink {
  min-height: var(--_sizes-collection---button-min-height);
  border-radius: var(--_sizes-collection---redius-button);
  background-color: var(--color--dark);
  color: var(--color--light);
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.bgl-navlink:hover {
  background-color: var(--color--dark-secondary);
}

.bgl-navlink.w--current {
  background-color: var(--color--primary-purple);
}

.bgl-nav-bottom {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--color--disabled);
  flex-flow: column;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-start;
  padding-left: 20px;
  padding-right: 20px;
  font-size: .9rem;
  display: flex;
}

.bgl-nav-bottom-logo {
  width: 40px;
  margin-bottom: 4px;
}

.bgl-section {
  flex: 1;
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
  overflow: auto;
}

.bgl-section.is-cover {
  background-color: var(--color--primary-purple);
  height: 100vh;
  color: var(--color--white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.bgl-container {
  width: 100%;
  min-width: 800px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.bgl-container.is-in-flex {
  padding-top: 0;
  padding-bottom: 0;
}

.bgl-section-headers {
  margin-bottom: 40px;
}

.bgl-section-header {
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 0;
  font-family: Avenir Next Demi, Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.4;
}

.bgl-section-subheader {
  max-width: 70ch;
  font-size: 1.1rem;
  line-height: 1.4;
}

.bgl-page {
  text-wrap: balance;
  display: flex;
}

.bgl-content-brand-overview {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.bgl-app-view-wrap {
  z-index: -1;
  flex: none;
  width: 290px;
  height: 600px;
  position: relative;
}

.bgl-app-view {
  aspect-ratio: 2 / 3;
  width: 400px;
  max-width: none;
  height: 600px;
  position: absolute;
  inset: 0% -10% 0% auto;
}

.bgl-content-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.bgl-content-group {
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 40px;
  display: flex;
}

.bgl-content-group.max-240 {
  max-width: 240px;
}

.bgl-content-group.is-full-width {
  width: 100%;
}

.bgl-h3 {
  width: 100%;
  color: var(--color--primary-purple);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: -10px;
  font-family: Avenir Next, Arial, sans-serif;
  font-size: 1.1rem;
}

.bgl-card {
  border-radius: var(--_sizes-collection---radius-bgl-card);
  background-color: var(--color--white);
  padding: 18px;
  box-shadow: 0 2px 2px #0000000f, 0 2px 10px #0000000f;
}

.bgl-card.is-highlight {
  background-color: var(--color--highlight);
  width: 100%;
  box-shadow: none;
}

.bgl-card.is-dark {
  background-color: var(--color--dark);
}

.bgl-card.is-purple {
  background-color: var(--color--primary-purple);
}

.bgl-card.is-logo {
  max-width: 240px;
}

.bgl-card.is-symbol {
  justify-content: center;
  align-items: center;
  width: 200px;
  display: flex;
}

.bgl-card.is-symbol-space {
  width: 160px;
}

.bgl-card.is-color-sample {
  width: 220px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.bgl-card.is-color-sample.is-gradient {
  width: 280px;
}

.bgl-card.is-font {
  min-width: 400px;
  max-width: 460px;
}

.bgl-card.is-type-exp {
  flex: 1;
  width: 230px;
}

.bgl-card.is-type-exp.is-purple {
  color: var(--color--white);
}

.bgl-card.is-typo-guidelines {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.bgl-card.layout-three-column-card {
  grid-row-gap: 0;
  grid-column-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.bgl-card.iconography-visual-card {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
}

.bgl-card.iconography-selected-card {
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
}

.bgl-card.iconography-treatment-card {
  box-sizing: border-box;
  padding: 28px;
}

.bgl-card.iconography-accessibility-card {
  box-sizing: border-box;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--color--highlight);
  align-items: center;
  padding: 28px;
  display: flex;
}

.bgl-card.iconography-size-columns-card {
  grid-template-rows: minmax(auto, 1fr);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding: 28px 0;
  display: grid;
  overflow: hidden;
}

.bgl-card.ui-components-fields-card {
  grid-column-gap: 32px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 26px;
  padding-right: 26px;
  display: grid;
}

.bgl-card.ui-components-spec-card {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 28px;
  display: grid;
}

.bgl-card.tone-voice-card {
  padding: 24px;
}

.bgl-card.tone-writing-card {
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 36%) minmax(0, 64%);
  padding: 24px;
  display: grid;
}

.bgl-card.tone-context-card {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 28px;
  display: grid;
}

.bgl-card.brand-resource-card {
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 26px 16px 16px;
  display: flex;
}

.bgl-card.bgl-box-flex-hor {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.bgl-box-flex-hor {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.bgl-box-flex-hor.is-fluid {
  grid-row-gap: 32px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.bgl-box-flex-hor.center-align {
  justify-content: flex-start;
  align-items: center;
}

.bgl-box-flex-hor.no-space {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.bgl-box-icon-large {
  flex: none;
  width: 60px;
}

.bgl-box-flex-ver {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.bgl-box-flex-ver.is-equal {
  flex: 1;
}

.bgl-box-flex-ver.is-incorrect-symbol {
  width: 200px;
}

.bgl-box-flex-ver.is-incorrect-logo {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 180px;
}

.bgl-box-flex-ver.is-left-aligned {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

.bgl-box-flex-ver.is-grow {
  flex: 1;
}

.bgl-box-flex-ver.extra-top-padding {
  padding-top: 10px;
}

.bgl-section-divider {
  background-color: var(--color--devider);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}

.bgl-section-divider.is-group-separator {
  margin-top: 10px;
  margin-bottom: 40px;
  position: relative;
}

.has-left-divider {
  box-shadow: -1px 0 0 0 var(--color--devider);
  margin-left: 20px;
  padding-left: 20px;
}

.bgl-box-info {
  margin-bottom: 0;
  padding-top: 10px;
  font-size: .9rem;
  line-height: 1.4;
}

.bgl-box-info.max-width-400 {
  max-width: 400px;
}

.bgl-box-info.is-160 {
  width: 160px;
}

.bgl-box-info.is-200 {
  width: 200px;
}

.bgl-box-info.is-220 {
  width: 220px;
}

.bgl-box-info.is-280 {
  width: 280px;
}

.bgl-box-info.is-380 {
  width: 380px;
}

.bgl-logo-sizing {
  width: 140px;
}

.sizing-line-wrap {
  border-right: 2px solid var(--color--primary-purple);
  border-left: 2px solid var(--color--primary-purple);
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 24px;
  display: flex;
}

.sizing-line-wrap.is-symbol {
  width: 80px;
}

.sizing-mid-line {
  background-color: var(--color--primary-purple);
  width: 100%;
  height: 2px;
}

.icon-bullet {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

.bgl-box-symbol {
  width: 80px;
}

.spacer {
  width: 40px;
  height: 40px;
}

.spacer.is-s {
  width: 20px;
  height: 20px;
}

.spacer.is-xs {
  width: 10px;
  height: 10px;
}

.bgl-symbol-sizing {
  width: 80px;
}

.color-swatch {
  letter-spacing: .5px;
  text-transform: uppercase;
  background-color: #e6e6e6;
  border-radius: 8px;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-end;
  height: 60px;
  margin-bottom: 12px;
  padding: 8px;
  font-size: .7rem;
  font-weight: 500;
  display: flex;
}

.color-swatch.is-purple {
  background-color: var(--color--primary-purple);
}

.color-swatch.is-green {
  background-color: var(--color--gift-success);
}

.color-swatch.is-red {
  background-color: var(--color--accent-red);
}

.color-swatch.is-gradient {
  background-image: linear-gradient(80deg, var(--color--primary-purple), var(--color--accent-red) 50%, var(--color--gift-success));
}

.color-swatch.is-light-bg {
  background-color: var(--color--light);
}

.color-swatch.is-dark-bg {
  background-color: var(--color--dark);
  color: var(--color--light);
}

.color-swatch.is-highlight {
  background-color: var(--color--highlight);
}

.color-swatch.is-divider {
  background-color: var(--color--devider);
}

.color-swatch.is-white {
  background-color: var(--color--white);
  box-shadow: inset 0 0 0 1px var(--color--devider);
}

.color-swatch.is-secondary {
  background-color: var(--color--dark-secondary);
}

.color-swatch.is-disabled {
  background-color: var(--color--disabled);
}

.color-swatch.is-alert {
  background-color: var(--color--alert);
}

.color-swatch.is-error {
  background-color: var(--color--error);
}

.color-swatch.is-info {
  background-color: var(--color--primary-purple);
}

.color-swatch-title {
  font-weight: 500;
  line-height: 1.6;
}

.color-swatch-icon {
  width: 34px;
  height: 40px;
  margin-top: 2px;
}

.color-swatch-icon.is-gift {
  width: 30px;
}

.color-swatch-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.inner-link {
  text-decoration: none;
}

.inner-link:hover {
  text-decoration: underline;
}

.txt-large {
  margin-bottom: 10px;
  font-size: 2.2rem;
}

.bgl-font-xl {
  color: var(--color--primary-purple);
  padding-right: 5px;
  font-size: 7rem;
  font-weight: 500;
  line-height: 1.1;
}

.paragraph {
  text-wrap: wrap;
}

.bgl-demo-font {
  letter-spacing: 2px;
  font-size: 1.2rem;
  line-height: 1.7;
}

.bgl-box-table-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-bottom: 1px solid var(--color--devider);
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.bgl-box-table-row.is-bold {
  font-weight: 700;
}

.bgl-box-table-row.is-demi {
  font-family: Avenir Next Demi, Arial, sans-serif;
}

.bgl-box-table-row.is-medium {
  font-weight: 500;
}

.bgl-box-table-row.is-header {
  color: var(--color--primary-purple);
  text-transform: uppercase;
  font-family: Avenir Next Demi, Arial, sans-serif;
  font-size: .9rem;
  font-weight: 500;
}

.bgl-box-table-row.is-last {
  border-bottom-style: none;
}

.bgl-box-table-cell {
  flex: 1;
}

.bgl-box-table-cell.is-last {
  flex: 0 auto;
  width: 60px;
}

.bgl-box-table-cell.is-last.is-xl {
  text-align: center;
  font-size: 2rem;
}

.bgl-box-table-cell.is-first {
  flex: 0 auto;
  width: 90px;
}

.bgl-box-table-cell.is-regular-weight {
  font-family: Avenir Next, Arial, sans-serif;
  font-weight: 400;
}

.bgl-box-table-cell.is-regular-weight.is-shrink {
  flex: 0 auto;
  width: 140px;
}

.bgl-box-table-cell.is-h1 {
  font-size: 3rem;
  line-height: 1.2;
}

.bgl-box-table-cell.is-h2 {
  font-size: 2rem;
  line-height: 1.2;
}

.bgl-box-table-cell.is-subheading {
  font-size: 1.2rem;
  line-height: 1.2;
}

.bgl-type-nav {
  border-bottom: 1px solid var(--color--devider);
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 24px;
  padding-bottom: 10px;
  display: flex;
}

.bgl-type-nav.in-dark {
  border-bottom-style: none;
  margin-bottom: 8px;
}

.bgl-type-nav-logo {
  width: 80px;
}

.bgl-type-nav-right {
  flex-flow: column;
  justify-content: space-around;
  width: 18px;
  height: 18px;
  display: flex;
}

.bgl-type-ham-line {
  background-color: var(--color--primary-purple);
  width: 100%;
  height: 3px;
}

.bgl-type-xl-txt {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.button {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  background-color: var(--color--primary-purple);
  min-height: 42px;
  color: var(--color--light);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1.1rem;
  font-weight: 500;
  display: flex;
}

.button.secondary {
  border: 1px solid var(--color--primary-purple);
  background-color: var(--color--white);
  color: var(--color--dark);
}

.button.incorrect {
  color: var(--color--info);
}

.bgl-type-l-txt {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Avenir Next Demi, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.button-link {
  color: var(--color--primary-purple);
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 500;
}

.flex-button {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  padding-top: 10px;
  display: flex;
}

.bgl-blue-sign {
  color: var(--color--primary-purple);
  font-family: Avenir Next Demi, Arial, sans-serif;
}

.bgl-typo-guideline-box {
  border-right: 1px solid var(--color--devider);
  padding-top: 10px;
  padding-bottom: 10px;
}

.bgl-typo-guideline-box.is-last {
  border-right-style: none;
}

.bgl-typo-guideline-box.is-last.layout-cell-spaced.layout-row-divider.layout-no-right-divider {
  box-sizing: border-box;
  border-bottom: 1px solid var(--color--devider);
  border-right-style: none;
  border-right-width: 0;
  padding: 28px;
}

.bgl-typo-guideline-box.layout-cell-spaced {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

.bgl-typo-guideline-box.layout-cell-spaced.layout-row-divider {
  box-sizing: border-box;
  border-bottom: 1px solid var(--color--devider);
}

.bgl-rich-txt {
  margin-top: 20px;
}

.bgl-rich-txt ul {
  padding-left: 20px;
}

.bgl-rich-txt li {
  margin-bottom: 6px;
}

.bgl-rich-txt.no-upper-space {
  margin-top: 0;
  padding-left: 20px;
}

.bgl-cover-logo {
  width: 300px;
}

.bgl-cover-button-wrap {
  justify-content: center;
  align-items: flex-start;
  height: 100px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.bgl-cover-button {
  background-color: var(--color--dark);
  width: 50px;
  height: 50px;
  color: var(--color--white);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.bgl-cover-button:hover {
  background-color: var(--color--dark-secondary);
}

.bgl-scroll-arrow {
  width: 40px;
  height: 40px;
}

.coming-soon-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.page-cover {
  z-index: 10;
  background-color: var(--color--light);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  inset: 0%;
}

.layout-panel-item {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  border-right: 1px solid var(--color--devider);
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px;
  display: flex;
}

.layout-panel-item.is-last.layout-no-right-divider {
  border-right-style: none;
  border-right-width: 0;
}

.layout-grid-image {
  object-fit: contain;
  width: 100%;
  max-width: 190px;
  height: 170px;
}

.layout-muted {
  color: var(--color--dark-secondary);
}

.layout-detail {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.layout-spacing-step {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 120px;
  display: flex;
}

.layout-spacing-swatch {
  background-color: var(--color--highlight);
  border-radius: 4px;
}

.layout-spacing-swatch.size-4 {
  width: 4px;
  height: 4px;
}

.layout-spacing-swatch.size-8 {
  width: 8px;
  height: 8px;
}

.layout-spacing-swatch.size-12 {
  width: 12px;
  height: 12px;
}

.layout-spacing-swatch.size-16 {
  width: 16px;
  height: 16px;
}

.layout-spacing-swatch.size-24 {
  width: 24px;
  height: 24px;
}

.layout-spacing-swatch.size-32 {
  width: 32px;
  height: 32px;
}

.layout-spacing-swatch.size-48 {
  width: 48px;
  height: 48px;
}

.layout-spacing-swatch.size-64 {
  width: 64px;
  height: 64px;
}

.layout-radius-sample {
  border: 2px solid var(--color--primary-purple);
  width: 56px;
  height: 56px;
}

.layout-radius-sample.radius-small {
  border-top-left-radius: var(--_sizes-collection---redius-button);
  border-top-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-left-radius: var(--_sizes-collection---redius-button);
}

.layout-radius-sample.radius-medium {
  border-top-left-radius: var(--_sizes-collection---radius-bgl-card);
  border-top-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-left-radius: var(--_sizes-collection---radius-bgl-card);
}

.layout-radius-sample.radius-large {
  border-radius: 16px;
}

.layout-radius-sample.radius-pill {
  border-radius: 999px;
  width: 86px;
  height: 44px;
}

.layout-shadow-copy {
  color: var(--color--dark-secondary);
  line-height: 1.35;
}

.layout-shadow-sample {
  background-color: var(--color--white);
  border-top-left-radius: var(--_sizes-collection---radius-bgl-card);
  border-top-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-left-radius: var(--_sizes-collection---radius-bgl-card);
  width: 72px;
  height: 72px;
}

.layout-shadow-sample.shadow-subtle {
  box-shadow: 0 2px 2px #1311310f, 0 4px 16px #1311310f;
}

.layout-shadow-sample.shadow-medium {
  box-shadow: 0 2px 4px #13113114, 0 4px 24px #13113114;
}

.layout-shadow-sample.shadow-strong {
  box-shadow: 0 2px 8px #1311311a, 0 4px 32px #1311311a;
}

.layout-h4 {
  color: var(--color--primary-purple);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 0;
  font-family: Avenir Next Demi, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.layout-h4.no-bottom-space {
  margin-bottom: 0;
}

.layout-cell-spaced {
  box-sizing: border-box;
}

.layout-row-divider {
  border-bottom: 1px solid var(--color--devider);
}

.layout-no-right-divider {
  border-right-style: none;
  border-right-width: 0;
}

.iconography-block {
  min-width: 0;
}

.iconography-style-image {
  width: 100%;
  max-width: 380px;
}

.iconography-selected-image {
  width: 100%;
  max-width: 400px;
}

.iconography-category-description {
  text-align: center;
  min-height: 54px;
  margin-top: 14px;
}

.iconography-category-image {
  object-fit: contain;
  width: 100%;
  height: 130px;
  margin: 20px 0;
  display: block;
}

.iconography-category-image.is-ui {
  max-width: 180px;
}

.iconography-category-image.is-feature {
  max-width: 230px;
}

.iconography-category-image.is-action {
  max-width: 250px;
}

.iconography-spec-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: left;
  flex-direction: column;
  width: 80%;
  display: flex;
}

.iconography-spec-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 80px 1fr;
  align-items: start;
  display: grid;
}

.iconography-spec-label {
  font-weight: 600;
}

.iconography-treatment-content {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 180px 1fr;
  align-items: center;
  margin-top: 20px;
  display: grid;
}

.iconography-treatment-images {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  display: flex;
}

.iconography-treatment-image {
  object-fit: contain;
  width: 82px;
  height: 82px;
}

.iconography-accessibility-icon {
  flex: none;
  width: 80px;
  height: 80px;
}

.iconography-accessibility-copy {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  display: flex;
}

.iconography-size-label-column {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--devider);
  text-align: center;
  grid-template-rows: 80px 50px 60px;
  grid-template-columns: 80px;
  align-items: center;
  padding: 0 4px;
  display: grid;
}

.iconography-size-column {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--devider);
  grid-template-rows: 80px 50px 60px;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0 10px;
  display: grid;
}

.iconography-size-column.is-last {
  border-right-style: none;
  border-right-width: 0;
}

.iconography-size-icon-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 110px;
  display: flex;
}

.iconography-home-icon {
  height: auto;
  display: block;
}

.iconography-home-icon.size-16 {
  width: 16px;
}

.iconography-home-icon.size-20 {
  width: 20px;
}

.iconography-home-icon.size-24 {
  width: 24px;
}

.iconography-home-icon.size-32 {
  width: 32px;
}

.iconography-size-value {
  text-align: center;
}

.ui-components-button-group {
  border-bottom: 1px solid var(--color--devider);
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding-left: 6px;
  padding-right: 6px;
}

.ui-components-button-group.is-last {
  border-bottom-style: none;
  margin-bottom: 0;
  padding-bottom: 15px;
}

.ui-components-three-state-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  display: grid;
}

.ui-components-state-item {
  text-align: center;
  min-width: 0;
}

.ui-components-state-item.is-last {
  border-right-style: none;
}

.ui-components-state-label {
  color: var(--color--dark);
  text-align: center;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
}

.ui-components-button-example {
  box-sizing: border-box;
  min-width: var(--_sizes-collection---button-min-width);
  text-align: center;
  min-height: var(--_sizes-collection---button-min-height);
  border-top-left-radius: var(--_sizes-collection---redius-button);
  border-top-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-left-radius: var(--_sizes-collection---redius-button);
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  font-weight: 500;
  display: flex;
}

.ui-components-button-example.primary-default {
  background-color: var(--color--primary-purple);
  color: var(--color--white);
}

.ui-components-button-example.primary-pressed {
  color: var(--color--white);
  background-color: #5952df;
}

.ui-components-button-example.primary-disabled {
  background-color: var(--color--highlight);
  color: var(--color--disabled);
}

.ui-components-button-example.secondary-default {
  border: 1px solid var(--color--primary-purple);
  color: var(--color--primary-purple);
}

.ui-components-button-example.secondary-pressed {
  border: 1px solid var(--color--primary-purple);
  background-color: var(--color--highlight);
  color: var(--color--primary-purple);
}

.ui-components-button-example.secondary-disabled {
  background-color: var(--color--highlight);
  color: var(--color--disabled);
}

.ui-components-text-button {
  min-height: 28px;
  color: var(--color--primary-purple);
  line-height: 28px;
  display: inline-block;
}

.ui-components-text-button.text-default {
  color: var(--color--info);
}

.ui-components-text-button.text-pressed {
  color: var(--color--primary-purple);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.ui-components-text-button.text-disabled {
  color: var(--color--disabled);
}

.ui-components-celebration-grid {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
  display: grid;
}

.ui-components-celebration-item {
  text-align: center;
  min-width: 0;
}

.ui-components-celebration-item.is-last {
  border-right-style: none;
}

.ui-components-celebration-image {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: block;
}

.ui-components-field-item {
  min-width: 0;
}

.ui-components-field-label {
  color: var(--color--dark);
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.3;
}

.ui-components-field-example {
  box-sizing: border-box;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color--devider);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--devider);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--devider);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color--devider);
  width: 100%;
  min-width: 240px;
  color: var(--color--dark);
  min-height: var(--_sizes-collection---button-min-height);
  border-top-left-radius: var(--_sizes-collection---redius-button);
  border-top-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-left-radius: var(--_sizes-collection---redius-button);
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  display: flex;
}

.ui-components-field-example.is-focus {
  border-color: var(--color--primary-purple);
}

.ui-components-field-example.is-error {
  border-color: var(--color--accent-red);
}

.ui-components-field-example.is-success {
  border-color: var(--color--gift-success);
  padding-right: 10px;
}

.ui-components-field-example.is-dropdown {
  border-color: var(--color--primary-purple);
  padding-right: 10px;
}

.ui-components-placeholder {
  color: var(--color--devider);
}

.ui-components-error-copy {
  color: var(--color--accent-red);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
}

.ui-components-success-icon {
  background-color: var(--color--gift-success);
  width: 24px;
  height: 24px;
  color: var(--color--white);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.ui-components-chevron {
  color: var(--color--primary-purple);
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 16px;
}

.ui-components-spec-column {
  min-width: 0;
  padding-right: 8px;
}

.ui-components-spec-column.is-last {
  padding-right: 0;
}

.ui-components-spec-list {
  color: var(--color--dark);
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
}

.tone-voice-item {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--devider);
  grid-template-rows: auto;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 16px;
  padding: 0 0 16px;
  display: grid;
}

.tone-voice-item.is-last {
  border-bottom-style: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tone-voice-copy {
  min-width: 0;
}

.tone-principles-column {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--devider);
  min-width: 0;
  padding-right: 28px;
}

.tone-examples-column {
  min-width: 0;
  padding-left: 28px;
}

.tone-principles-list {
  color: var(--color--dark);
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}

.tone-example-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: start;
  margin-bottom: 14px;
  display: grid;
}

.tone-example-row.is-last {
  margin-bottom: 0;
}

.tone-example-copy {
  min-width: 0;
  line-height: 1.4;
}

.tone-context-title {
  color: var(--color--dark);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.accessibility-example-label {
  color: var(--color--dark);
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
}

.accessibility-thin-copy {
  font-weight: 100;
}

.brand-resources-content {
  width: 100%;
}

.brand-resources-grid {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.brand-resource-column {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.brand-resource-column.is-last {
  border-right-style: none;
}

.brand-resource-image {
  width: 104px;
  height: 104px;
  margin-bottom: 28px;
  display: block;
}

.brand-resource-description {
  min-height: 72px;
  color: var(--color--dark);
  margin-bottom: 28px;
  line-height: 1.45;
}

.brand-resource-link {
  box-sizing: border-box;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color--primary-purple);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--primary-purple);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--primary-purple);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color--primary-purple);
  width: 100%;
  min-height: 48px;
  color: var(--color--primary-purple);
  text-align: center;
  border-top-left-radius: var(--_sizes-collection---redius-button);
  border-top-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-right-radius: var(--_sizes-collection---redius-button);
  border-bottom-left-radius: var(--_sizes-collection---redius-button);
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding: 0 18px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}

.brand-resources-footer {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: var(--color--highlight);
  border-top-left-radius: var(--_sizes-collection---radius-bgl-card);
  border-top-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-right-radius: var(--_sizes-collection---radius-bgl-card);
  border-bottom-left-radius: var(--_sizes-collection---radius-bgl-card);
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  align-items: center;
  margin-top: 40px;
  padding: 28px 32px;
  display: grid;
}

.brand-resources-thanks {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  display: grid;
}

.brand-resources-thanks-icon {
  width: 72px;
  height: 72px;
  display: block;
}

.brand-resources-questions {
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color--devider);
  min-width: 0;
  padding-left: 32px;
}

.brand-resources-email {
  color: var(--color--dark);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.brand-resource-link-label {
  text-align: center;
  width: 100%;
}

.accessibility-horizontal-title {
  color: var(--color--dark);
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.accessibility-horizontal-touch-image {
  object-fit: contain;
  width: 108px;
  height: 108px;
  display: block;
}

.accessibility-contrast-header {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  display: flex;
}

.accessibility-contrast-buttons {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  min-width: 0;
  margin-bottom: 20px;
  display: grid;
}

.accessibility-contrast-buttons.is-last {
  margin-bottom: 0;
}

.hor-flex-col-grow {
  border-right: 1px solid var(--color--devider);
  flex: 1;
  padding-left: 14px;
  padding-right: 14px;
}

.hor-flex-col-grow.is-last {
  border-right-style: none;
}

.icon-s {
  width: 24px;
  height: 24px;
}

.bgl-row {
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

@media screen and (max-width: 991px) {
  .bgl-section-wrap {
    display: none;
  }

  .page-cover {
    display: flex;
  }
}

#w-node-_0db0fd8c-7892-a9f0-5371-6464fd3822d3-2b34bb86, #w-node-_0db0fd8c-7892-a9f0-5371-6464fd3822ff-2b34bb86 {
  align-self: start;
}

#w-node-_0db0fd8c-7892-a9f0-5371-6464fd382313-2b34bb86 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_0db0fd8c-7892-a9f0-5371-6464fd382324-2b34bb86 {
  align-self: start;
}


@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/Avenir-Next-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/Avenir-Next-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Demi';
  src: url('../fonts/Avenir-Next-Demi.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/Avenir-Next-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/Avenir-Next-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}