/* BUILD: Xavier_Enterprise_apple_v143g35 | manifest 2.32.0 | 2026-09-17 */
@charset "UTF-8";
:root {
  --color-primary: rgba(25, 28, 32, 1);
  --color-primary-inverse: $color_primary_inverse;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --spacer: 1rem;
  --transition-translate-factor: 0.5;
  --transition-rotate-factor: -4deg;
  --transition-scale-factor: 0.05;
  --transition-skew-factor: -4deg;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
.nesty-input,
.hc-multiselect-toggle,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select,
.nesty-input,
.hc-multiselect-toggle {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@-ms-viewport {
  width: device-width;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-overflow-style: scrollbar;
  background-color: rgba(243, 244, 245, 1);
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: $color_text;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

html,
body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

[role="main"] {
  flex-grow: 1;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
.nesty-input,
.hc-multiselect-toggle,
summary,
textarea {
  touch-action: manipulation;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin: 1.5rem 0 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.375;
  color: $color_heading;
}

h1,
.h1 {
  font-size: 2.25rem;
  font-weight: 500;
}

h2,
.h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

h3,
.h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

h4,
.h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

h5,
.h5 {
  font-size: 1em;
  font-weight: 700;
}

h6,
.h6 {
  font-size: 0.875rem;
  font-weight: 700;
}

b,
strong {
  font-weight: 700;
}

em {
  padding: 0 0.25rem;
  background-color: #FAF089;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

dfn {
  font-style: italic;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

small,
.small {
  font-size: 0.875rem;
}

mark {
  padding: .2rem;
  color: $color_text;
  background-color: #FEFCBF;
}

blockquote {
  padding: 1.5em;
  margin: 0 0 1rem;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-color: $color_border;
}

summary {
  cursor: pointer;
  text-decoration: none;
}

pre,
code,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
}

code {
  padding: 0.25em;
  background-color: $color_gray_200;
  border-radius: 4px;
}

pre {
  padding: 1em;
  margin: 0 0 1rem;
  background-color: $color_gray_100;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

kbd {
  display: inline-block;
  padding: 0 0.25em;
  color: $color_text;
  background-color: #fff;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  text-align: center;
  user-select: none;
  border: 1px solid $color_border;
  border-radius: 4px;
  box-shadow: 0 1px 0 $color_border;
}

img {
  vertical-align: middle;
  border-style: none;
}

figure {
  display: inline-block;
  margin: 0 0 1rem;
  max-width: 100%;
}

figcaption {
  font-size: 90%;
  color: $color_gray_600;
}

svg:not(:root) {
  overflow: hidden;
}

a {
  color: $color_link;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: darken($color_link, 4%);
  text-decoration: underline;
}

a:active {
  color: darken($color_link, 8%);
}

a.is-disabled {
  color: #EDECE9;
  pointer-events: none;
  cursor: not-allowed;
}

fieldset:disabled a {
  pointer-events: none;
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  margin: 0 2px;
}

ol,
ul,
dl {
  margin: 0 0 1rem;
}

ol,
ul {
  padding: 0 0 0 1.5rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1rem;
  margin-left: 0;
}

input,
select,
.nesty-input,
.hc-multiselect-toggle,
textarea {
  line-height: inherit;
}

input::-webkit-file-upload-button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  font: inherit;
}

input[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand, .nesty-input::-ms-expand,
.hc-multiselect-toggle::-ms-expand {
  display: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type="date"],
[type="time"],
[type="datetime-local"],
[type="month"] {
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  appearance: listbox;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

button,
input {
  overflow: visible;
}

button,
select,
.nesty-input,
.hc-multiselect-toggle {
  text-transform: none;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

table {
  margin-bottom: 1rem;
  width: 100%;
  border-collapse: collapse;
}

thead {
  vertical-align: bottom;
}

th {
  text-align: inherit;
}

caption {
  text-align: left;
  caption-side: bottom;
}

.avatar {
  position: relative;
  display: inline-block;
  margin: 0 0.75rem 1rem 0;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
}

.avatar-img {
  border: 2px solid #fff;
  border-radius: 50%;
  max-width: 100%;
  height: 100%;
}

.avatar-sm {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
}

.avatar-lg {
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
}

.avatar-group {
  padding-left: 0;
  list-style: none;
}

.avatar-group .avatar:not(:last-child) {
  margin-right: -1rem;
}

.badge, .recent-activity-item-parent {
  padding: 0.25em 0.375em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: #1a1a1a;
  background-color: #EDECE9;
  transition: 0.15s ease-in-out;
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge:hover, a.recent-activity-item-parent:hover {
  color: #1a1a1a;
  background-color: #d6d4cd;
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge.is-focused, a.is-focused.recent-activity-item-parent {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(237, 242, 247, 0.25);
}

a.badge:focus, a.recent-activity-item-parent:focus, a.badge:hover, a.recent-activity-item-parent:hover {
  text-decoration: none;
}

.badge:empty, .recent-activity-item-parent:empty {
  display: none;
}

.badge, .recent-activity-item-parent {
  position: relative;
  top: -1px;
}

.button {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
}

.button:hover {
  text-decoration: none;
}

.button:disabled, .button.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

a.button.is-disabled,
fieldset:disabled a.button {
  pointer-events: none;
}

.button-link {
  color: $color_link;
  border-color: transparent;
  text-decoration: none;
}

.button-link:hover {
  color: darken($color_link, 4%);
  text-decoration: underline;
}

.button-link:focus {
  box-shadow: none;
}

.button-link:disabled, .button-link.is-disabled {
  color: #EDECE9;
  pointer-events: none;
}

.button-sm {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.button-lg {
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.not-a-button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
  user-select: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button-primary {
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-primary:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.button-primary:focus, .button-primary.is-focused {
  outline: 0;
}

.button-primary:disabled, .button-primary.is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-primary:not(:disabled):not(.is-disabled):active, .button-primary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-primary:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline:hover {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-outline:focus, .button-outline.is-focused {
  outline: 0;
}

.button-outline:disabled, .button-outline.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline:not(:disabled):not(.is-disabled):active, .button-outline:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline:not(:disabled):not(.is-disabled).is-active {
  color: #101215;
  border-color: #101215;
}

.button-outline-primary {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.button-outline-primary:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.button-outline-primary:focus, .button-outline-primary.is-focused {
  outline: 0;
}

.button-outline-primary:disabled, .button-outline-primary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-primary:not(:disabled):not(.is-disabled):active, .button-outline-primary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-primary:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.button-secondary {
  color: $color_secondary_inverse;
  border-color: $color_secondary;
  background-color: $color_secondary;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-secondary:hover {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 5%);
  background-color: darken($color_secondary, 4%);
}

.button-secondary:focus, .button-secondary.is-focused {
  outline: 0;
}

.button-secondary:disabled, .button-secondary.is-disabled {
  color: $color_secondary_inverse;
  background-color: $color_secondary;
  border-color: $color_secondary;
}

.button-secondary:not(:disabled):not(.is-disabled):active, .button-secondary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-secondary:not(:disabled):not(.is-disabled).is-active {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 10%);
  background-color: darken($color_secondary, 8%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline-secondary {
  color: $color_secondary;
  border-color: $color_secondary;
}

.button-outline-secondary:hover {
  color: $color_secondary_inverse;
  background-color: $color_secondary;
}

.button-outline-secondary:focus, .button-outline-secondary.is-focused {
  outline: 0;
}

.button-outline-secondary:disabled, .button-outline-secondary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-secondary:not(:disabled):not(.is-disabled):active, .button-outline-secondary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-secondary:not(:disabled):not(.is-disabled).is-active {
  color: $color_secondary_inverse;
  border-color: darken($color_secondary, 4%);
  background-color: darken($color_secondary, 4%);
}

.button-tertiary {
  color: $color_tertiary_inverse;
  border-color: $color_tertiary;
  background-color: $color_tertiary;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-tertiary:hover {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 5%);
  background-color: darken($color_tertiary, 4%);
}

.button-tertiary:focus, .button-tertiary.is-focused {
  outline: 0;
}

.button-tertiary:disabled, .button-tertiary.is-disabled {
  color: $color_tertiary_inverse;
  background-color: $color_tertiary;
  border-color: $color_tertiary;
}

.button-tertiary:not(:disabled):not(.is-disabled):active, .button-tertiary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-tertiary:not(:disabled):not(.is-disabled).is-active {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 10%);
  background-color: darken($color_tertiary, 8%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-outline-tertiary {
  color: $color_tertiary;
  border-color: $color_tertiary;
}

.button-outline-tertiary:hover {
  color: $color_tertiary_inverse;
  background-color: $color_tertiary;
}

.button-outline-tertiary:focus, .button-outline-tertiary.is-focused {
  outline: 0;
}

.button-outline-tertiary:disabled, .button-outline-tertiary.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.button-outline-tertiary:not(:disabled):not(.is-disabled):active, .button-outline-tertiary:not(:disabled):not(.is-disabled)[data-selected="true"], .button-outline-tertiary:not(:disabled):not(.is-disabled).is-active {
  color: $color_tertiary_inverse;
  border-color: darken($color_tertiary, 4%);
  background-color: darken($color_tertiary, 4%);
}

.button-translucent {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.button-translucent:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.125);
  background-color: rgba(255, 255, 255, 0.125);
}

.button-translucent:focus {
  outline: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 0.2rem $color_outline;
}

.button-translucent:not(:disabled):not(.is-disabled):active, .button-translucent:not(:disabled):not(.is-disabled)[data-selected="true"], .button-translucent:not(:disabled):not(.is-disabled).is-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.button-translucent:not(:disabled):not(.is-disabled):active:focus, .button-translucent:not(:disabled):not(.is-disabled)[data-selected="true"]:focus, .button-translucent:not(:disabled):not(.is-disabled).is-active:focus {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem $color_outline;
}

.button .badge, .button .recent-activity-item-parent {
  position: relative;
  top: -1px;
}

.button-group,
.button-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.button-group > .button,
.button-group-vertical > .button {
  position: relative;
  flex: 1 1 auto;
}

.button-group > .button:hover,
.button-group-vertical > .button:hover {
  z-index: 1;
}

.button-group > .button:focus, .button-group > .button:active, .button-group > .button.is-active,
.button-group-vertical > .button:focus,
.button-group-vertical > .button:active,
.button-group-vertical > .button.is-active {
  z-index: 1;
}

.button-group > .button:not(:first-child),
.button-group > .button-group:not(:first-child) {
  margin-left: -1px;
}

.button-group > .button:not(:last-child),
.button-group > .button-group:not(:last-child) > .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group > .button:not(:first-child),
.button-group > .button-group:not(:first-child) > .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group-sm > .button {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.button-group-lg > .button {
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.button-group-vertical {
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
}

.button-group-vertical > .button,
.button-group-vertical > .button-group {
  width: 100%;
}

.button-group-vertical > .button:not(:first-child),
.button-group-vertical > .button-group:not(:first-child) {
  margin-top: -1px;
}

.button-group-vertical > .button:not(:last-child),
.button-group-vertical > .button-group:not(:last-child) > .button {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group-vertical > .button:not(:first-child),
.button-group-vertical > .button-group:not(:first-child) > .button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-field > label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

.form-field > p {
  margin: 0.25rem 0 0;
  color: $color_gray_600;
  font-size: 0.875rem;
}

.form-field select, .form-field .nesty-input,
.form-field .hc-multiselect-toggle,
.form-field > input,
.form-field > textarea {
  padding: 0.5em 0.75em;
  color: inherit;
  border: 1px solid $color_border;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-field select:hover, .form-field .nesty-input:hover,
.form-field .hc-multiselect-toggle:hover,
.form-field > input:hover,
.form-field > textarea:hover {
  border-color: $color_gray_600;
}

.form-field select:focus, .form-field .nesty-input:focus,
.form-field .hc-multiselect-toggle:focus,
.form-field > input:focus,
.form-field > textarea:focus {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
}

.form-field select:disabled, .form-field .nesty-input:disabled,
.form-field .hc-multiselect-toggle:disabled, .form-field select.is-disabled, .form-field .is-disabled.nesty-input,
.form-field .is-disabled.hc-multiselect-toggle,
.form-field > input:disabled,
.form-field > input.is-disabled,
.form-field > textarea:disabled,
.form-field > textarea.is-disabled {
  border-color: $color_border;
  background-color: #ebebeb;
  cursor: not-allowed;
}

.form-field select, .form-field .nesty-input,
.form-field .hc-multiselect-toggle {
  padding-right: 2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath fill='%232D3748' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") no-repeat #fff;
  background-position: right 0.75em center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-field > input::-webkit-input-placeholder,
.form-field > textarea::-webkit-input-placeholder {
  color: $color_gray_600;
}

.form-field > input::-moz-placeholder,
.form-field > textarea::-moz-placeholder {
  color: $color_gray_600;
}

.form-field > input:-moz-placeholder,
.form-field > textarea:-moz-placeholder {
  color: $color_gray_600;
}

.form-field > input:-ms-input-placeholder,
.form-field > textarea:-ms-input-placeholder {
  color: $color_gray_600;
}

.form-field > textarea {
  min-height: 8em;
}

.form-field.required > label::after {
  margin-left: 2px;
  content: "*";
  color: #FC8181;
}

.form-field .optional {
  margin-left: 2px;
}

.search {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 1em;
  margin-right: 1em;
  bottom: -.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
}

.search .form-field {
  display: flex;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.search .form-field:hover {
  border-color: $color_gray_600;
}

.search .form-field:focus {
  border-color: rgba(25, 28, 32, 1);
  box-shadow: 0 0 0 0.2rem $color_outline;
}

.search .form-field.is-focused + .search-icon {
  color: rgba(25, 28, 32, 1);
}

.search [type="search"] {
  padding: 12px 16px;
  margin: 0 0.5rem;
  background: #ebebeb;
  border-radius: 100px;
  outline: none;
  border: 1px solid #ebebeb;
}

.search [type="search"]:hover {
  background: #FFF;
}

.search-sm [type="search"] {
  padding: 0.375em 0.675em;
}

.search-lg [type="search"] {
  padding: 0.675em 1em;
}

[dir="ltr"] .search:not(.search-right) .search-icon {
  left: 0;
}

[dir="rtl"] .search:not(.search-right) .search-icon {
  right: 0;
}

[dir="ltr"] .search:not(.search-right) [type="search"] {
  padding-left: 2.5em;
}

[dir="rtl"] .search:not(.search-right) [type="search"] {
  padding-right: 2.5em;
}

[dir="ltr"] .search-right .search-icon {
  right: 0;
}

[dir="rtl"] .search-right .search-icon {
  left: 0;
}

[dir="ltr"] .search-right [type="search"] {
  padding-right: 2.5em;
}

[dir="rtl"] .search-right [type="search"] {
  padding-left: 2.5em;
}

.search [type="submit"] {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex: 0;
  margin: 0 0.5rem;
}

.search [type="submit"]:hover {
  text-decoration: none;
}

.search [type="submit"]:disabled, .search [type="submit"].is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.search [type="submit"]:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.search [type="submit"]:focus, .search [type="submit"].is-focused {
  outline: 0;
}

.search [type="submit"]:disabled, .search [type="submit"].is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.search [type="submit"]:not(:disabled):not(.is-disabled):active, .search [type="submit"]:not(:disabled):not(.is-disabled)[data-selected="true"], .search [type="submit"]:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media (max-width: 991.98px) {
  .search [type="submit"] {
    display: flex;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' viewBox='0 0 12 12' width='16' height='16' fill='none' stroke='white' aria-hidden='true'%3E%3Ccircle cx='4.5' cy='4.5' r='4'%3E%3C/circle%3E%3Cpath stroke-linecap='round' d='M11 11L7.5 7.5'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
  }
}

.search-translucent .search-icon {
  color: #fff;
}

.search-translucent [type="search"] {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.1);
}

.search-translucent [type="search"]:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.25);
}

.search-translucent [type="search"]:focus {
  background-color: #fff;
}

.search-translucent [type="search"]:not(:focus) {
  color: #fff;
}

.search-translucent [type="search"]:not(:focus)::-webkit-input-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus)::-moz-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus):-moz-placeholder {
  color: $color_gray_200;
}

.search-translucent [type="search"]:not(:focus):-ms-input-placeholder {
  color: $color_gray_200;
}

.boolean input {
  padding: 0.5rem;
  margin-right: 0.5em;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.boolean input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.boolean input:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.boolean input:checked, .boolean input:indeterminate {
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.75em;
}

.boolean input:active {
  filter: brightness(90%);
}

.boolean input:focus {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
}

.nesty-input,
.hc-multiselect-toggle {
  height: auto;
}

.nesty-input:hover,
.hc-multiselect-toggle:hover {
  color: inherit;
  text-decoration: none;
}

.nesty-input::after,
.hc-multiselect-toggle::after {
  content: "";
}

.hc-multiselect-toggle li {
  padding: 4px 6px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.upload-dropzone {
  color: inherit;
  border: 1px solid $color_border;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.upload-dropzone span {
  color: inherit;
}

.upload-dropzone:hover {
  border-color: $color_gray_600;
}

.upload-dropzone[data-hc-focus="true"] {
  outline: 0;
  border-color: rgba(25, 28, 32, 1);
  box-shadow: 0 0 0 0.2rem $color_outline;
}

.svg-icon {
  box-sizing: content-box;
  height: 1em;
}

.svg-icon {
  position: relative;
  bottom: -.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.content img {
  max-width: 100%;
  height: auto;
}

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

.link-plain:hover {
  color: inherit;
  text-decoration: none;
}

.link-stretched::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0);
}

.link-anchor {
  opacity: 0;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

:hover > .link-anchor, .link-anchor:focus {
  opacity: 1;
}

.link-anchor::before {
  content: "#";
}

.link-anchor:hover, .link-anchor:focus, .link-anchor:active {
  text-decoration: none;
}

.link {
  color: currentColor;
}

.link::after {
  background-color: currentColor;
  opacity: 0.2;
}

.link:focus, .link:hover {
  color: $color_link;
}

.link:focus::after, .link:hover::after {
  background-color: $color_link;
  opacity: 1;
}

.link-article {
  color: $color_link;
}

.link-article::after {
  background-color: $color_link;
  opacity: 0.2;
}

.link-article:focus::after, .link-article:hover::after {
  opacity: 1;
}

.link-implied {
  text-decoration: none;
  color: currentColor;
}

.link-implied:hover {
  color: inherit;
  text-decoration: none;
}

.link-implied::after {
  background-color: currentColor;
  opacity: 0;
}

.link-implied:focus::after, .link-implied:hover::after {
  opacity: 0.2;
}

.link,
.link-article,
.link-implied {
  position: relative;
}

.link::after,
.link-article::after,
.link-implied::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.125em;
  content: "";
  height: .125em;
}

.link:focus, .link:hover,
.link-article:focus,
.link-article:hover,
.link-implied:focus,
.link-implied:hover {
  text-decoration: none;
}

.link:active::after,
.link-article:active::after,
.link-implied:active::after {
  opacity: 1;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-bordered > :not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.list-item {
  margin: 0.5rem 0;
}

.list-divider {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

.list-divider > * + * {
  padding-left: 0.5rem;
}

.list-divider > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "·";
}

.list-divider > * + *::before {
  color: $color_gray_600;
}

.list-divider > * + *[data-divider]::before {
  content: attr(data-divider);
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: $color_text;
  text-align: inherit;
}

.list-group-item-action:focus, .list-group-item-action:hover {
  z-index: 1;
  color: $color_text;
  text-decoration: none;
  background-color: $color_gray_100;
}

.list-group-item-action:active {
  color: $color_text;
  background-color: $color_gray_200;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5em 1em;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid $color_border;
}

.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.list-group-item:disabled, .list-group-item.is-disabled {
  color: $color_gray_600;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.is-active {
  z-index: 2;
  color: #fff;
  background-color: $color_link;
  border-color: $color_link;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
}

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
}

@media (min-width: 576px) {
  .sm\:list-group-horizontal {
    flex-direction: row;
  }
  .sm\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .sm\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .sm\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 768px) {
  .md\:list-group-horizontal {
    flex-direction: row;
  }
  .md\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .md\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .md\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .lg\:list-group-horizontal {
    flex-direction: row;
  }
  .lg\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .lg\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .lg\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:list-group-horizontal {
    flex-direction: row;
  }
  .xl\:list-group-horizontal .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .xl\:list-group-horizontal .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
  }
  .xl\:list-group-horizontal .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.table, .content table:not([class*="table"]) {
  color: $color_text;
  border-color: transparent;
}

.table th, .content table:not([class*="table"]) th,
.table td,
.content table:not([class*="table"]) td {
  padding: 0.75rem;
  vertical-align: top;
}

.table thead th, .content table:not([class*="table"]) thead th {
  font-size: 0.9375rem;
  font-weight: 500;
  vertical-align: bottom;
  border-bottom: 1px solid $color_border;
}

.table tbody, .content table:not([class*="table"]) tbody {
  font-size: 0.9375rem;
}

.table tr:not(:last-child), .content table:not([class*="table"]) tr:not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.table-sm th,
.table-sm td {
  padding: 0.375rem;
}

.table-flush th:first-child,
.table-flush td:first-child {
  padding-left: 0;
}

.table-flush th:last-child,
.table-flush td:last-child {
  padding-right: 0;
}

.table-bordered {
  border: 1px solid $color_border;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid $color_border;
}

.table-bordered th:first-child,
.table-bordered td:first-child {
  padding-left: 0.75rem;
}

.table-bordered th:last-child,
.table-bordered td:last-child {
  padding-right: 0.75rem;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-borderless tr:not(:last-child) {
  border-bottom: none;
}

.table-flush th:first-child,
.table-flush td:first-child {
  padding-left: 0;
}

.table-flush th:last-child,
.table-flush td:last-child {
  padding-right: 0;
}

.hr {
  margin: 0;
  border: 0;
  border-bottom: 1px solid $color_border;
  background: transparent;
}

.zd-comment {
  margin-bottom: 1rem;
}

.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 13px;
  padding: 13px 15px;
  transition: height .2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: .6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir="rtl"] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

:not(.container) .template-notice {
  padding: 0 2rem;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.layout {
  position: relative;
  background-color: #fff;
  z-index: 0;
}

.layout--boxed {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  overflow: clip;
}

.layout--boxed ~ .powered-by-zendesk {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0 2rem;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0 2rem;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    align-items: flex-end;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin-right: -1rem;
  margin-left: -1rem;
}

.row-flush {
  margin-right: 0;
  margin-left: 0;
}

.row-flush > [class*="col"] {
  padding-right: 0;
  padding-left: 0;
}

.row-sm {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.row-sm > [class*="col"] {
  padding-right: 16px;
  padding-left: 16px;
}

.row-lg {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.row-lg > [class*="col"] {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .sm\:col-1, .sm\:col-2, .sm\:col-3, .sm\:col-4, .sm\:col-5, .sm\:col-6, .sm\:col-7, .sm\:col-8, .sm\:col-9, .sm\:col-10, .sm\:col-11, .sm\:col-12, .sm\:col,
.sm\:col-auto, .md\:col-1, .md\:col-2, .md\:col-3, .md\:col-4, .md\:col-5, .md\:col-6, .md\:col-7, .md\:col-8, .md\:col-9, .md\:col-10, .md\:col-11, .md\:col-12, .md\:col,
.md\:col-auto, .lg\:col-1, .lg\:col-2, .lg\:col-3, .lg\:col-4, .lg\:col-5, .lg\:col-6, .lg\:col-7, .lg\:col-8, .lg\:col-9, .lg\:col-10, .lg\:col-11, .lg\:col-12, .lg\:col,
.lg\:col-auto, .xl\:col-1, .xl\:col-2, .xl\:col-3, .xl\:col-4, .xl\:col-5, .xl\:col-6, .xl\:col-7, .xl\:col-8, .xl\:col-9, .xl\:col-10, .xl\:col-11, .xl\:col-12, .xl\:col,
.xl\:col-auto, .recent-articles,
.related-articles {
  position: relative;
  padding-right: 1rem;
  padding-left: 1rem;
  width: 100%;
  min-height: 1px;
  min-width: 0;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 1 0 300px;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-order-1 {
  order: 1;
}

.col-order-2 {
  order: 2;
}

.col-order-3 {
  order: 3;
}

.col-order-4 {
  order: 4;
}

.col-order-5 {
  order: 5;
}

.col-order-6 {
  order: 6;
}

.col-order-7 {
  order: 7;
}

.col-order-8 {
  order: 8;
}

.col-order-9 {
  order: 9;
}

.col-order-10 {
  order: 10;
}

.col-order-11 {
  order: 11;
}

.col-order-12 {
  order: 12;
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 576px) {
  .sm\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .sm\:col-auto {
    flex: 1 0 300px;
  }
  .sm\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .sm\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .sm\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .sm\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .sm\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .sm\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .sm\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .sm\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .sm\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .sm\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .sm\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .sm\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sm\:col-order-1 {
    order: 1;
  }
  .sm\:col-order-2 {
    order: 2;
  }
  .sm\:col-order-3 {
    order: 3;
  }
  .sm\:col-order-4 {
    order: 4;
  }
  .sm\:col-order-5 {
    order: 5;
  }
  .sm\:col-order-6 {
    order: 6;
  }
  .sm\:col-order-7 {
    order: 7;
  }
  .sm\:col-order-8 {
    order: 8;
  }
  .sm\:col-order-9 {
    order: 9;
  }
  .sm\:col-order-10 {
    order: 10;
  }
  .sm\:col-order-11 {
    order: 11;
  }
  .sm\:col-order-12 {
    order: 12;
  }
  .sm\:col-offset-0 {
    margin-left: 0;
  }
  .sm\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .sm\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .sm\:col-offset-3 {
    margin-left: 25%;
  }
  .sm\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .sm\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .sm\:col-offset-6 {
    margin-left: 50%;
  }
  .sm\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .sm\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .sm\:col-offset-9 {
    margin-left: 75%;
  }
  .sm\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .sm\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .md\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .md\:col-auto {
    flex: 1 0 300px;
  }
  .md\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .md\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .md\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .md\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .md\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .md\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .md\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .md\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .md\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .md\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .md\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .md\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .md\:col-order-1 {
    order: 1;
  }
  .md\:col-order-2 {
    order: 2;
  }
  .md\:col-order-3 {
    order: 3;
  }
  .md\:col-order-4 {
    order: 4;
  }
  .md\:col-order-5 {
    order: 5;
  }
  .md\:col-order-6 {
    order: 6;
  }
  .md\:col-order-7 {
    order: 7;
  }
  .md\:col-order-8 {
    order: 8;
  }
  .md\:col-order-9 {
    order: 9;
  }
  .md\:col-order-10 {
    order: 10;
  }
  .md\:col-order-11 {
    order: 11;
  }
  .md\:col-order-12 {
    order: 12;
  }
  .md\:col-offset-0 {
    margin-left: 0;
  }
  .md\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .md\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .md\:col-offset-3 {
    margin-left: 25%;
  }
  .md\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .md\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .md\:col-offset-6 {
    margin-left: 50%;
  }
  .md\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .md\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .md\:col-offset-9 {
    margin-left: 75%;
  }
  .md\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .md\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 992px) {
  .lg\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .lg\:col-auto {
    flex: 1 0 300px;
  }
  .lg\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .lg\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .lg\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .lg\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .lg\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .lg\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .lg\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .lg\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .lg\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .lg\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .lg\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .lg\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .lg\:col-order-1 {
    order: 1;
  }
  .lg\:col-order-2 {
    order: 2;
  }
  .lg\:col-order-3 {
    order: 3;
  }
  .lg\:col-order-4 {
    order: 4;
  }
  .lg\:col-order-5 {
    order: 5;
  }
  .lg\:col-order-6 {
    order: 6;
  }
  .lg\:col-order-7 {
    order: 7;
  }
  .lg\:col-order-8 {
    order: 8;
  }
  .lg\:col-order-9 {
    order: 9;
  }
  .lg\:col-order-10 {
    order: 10;
  }
  .lg\:col-order-11 {
    order: 11;
  }
  .lg\:col-order-12 {
    order: 12;
  }
  .lg\:col-offset-0 {
    margin-left: 0;
  }
  .lg\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .lg\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .lg\:col-offset-3 {
    margin-left: 25%;
  }
  .lg\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .lg\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .lg\:col-offset-6 {
    margin-left: 50%;
  }
  .lg\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .lg\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .lg\:col-offset-9 {
    margin-left: 75%;
  }
  .lg\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .lg\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1200px) {
  .xl\:col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .xl\:col-auto {
    flex: 1 0 300px;
  }
  .xl\:col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .xl\:col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .xl\:col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .xl\:col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .xl\:col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .xl\:col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .xl\:col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .xl\:col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .xl\:col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .xl\:col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .xl\:col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .xl\:col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .xl\:col-order-1 {
    order: 1;
  }
  .xl\:col-order-2 {
    order: 2;
  }
  .xl\:col-order-3 {
    order: 3;
  }
  .xl\:col-order-4 {
    order: 4;
  }
  .xl\:col-order-5 {
    order: 5;
  }
  .xl\:col-order-6 {
    order: 6;
  }
  .xl\:col-order-7 {
    order: 7;
  }
  .xl\:col-order-8 {
    order: 8;
  }
  .xl\:col-order-9 {
    order: 9;
  }
  .xl\:col-order-10 {
    order: 10;
  }
  .xl\:col-order-11 {
    order: 11;
  }
  .xl\:col-order-12 {
    order: 12;
  }
  .xl\:col-offset-0 {
    margin-left: 0;
  }
  .xl\:col-offset-1 {
    margin-left: 8.3333333333%;
  }
  .xl\:col-offset-2 {
    margin-left: 16.6666666667%;
  }
  .xl\:col-offset-3 {
    margin-left: 25%;
  }
  .xl\:col-offset-4 {
    margin-left: 33.3333333333%;
  }
  .xl\:col-offset-5 {
    margin-left: 41.6666666667%;
  }
  .xl\:col-offset-6 {
    margin-left: 50%;
  }
  .xl\:col-offset-7 {
    margin-left: 58.3333333333%;
  }
  .xl\:col-offset-8 {
    margin-left: 66.6666666667%;
  }
  .xl\:col-offset-9 {
    margin-left: 75%;
  }
  .xl\:col-offset-10 {
    margin-left: 83.3333333333%;
  }
  .xl\:col-offset-11 {
    margin-left: 91.6666666667%;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: row;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 16px;
  background: #ebebeb;
  gap: 12px;
}

.card:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.card img {
  height: 48px !important;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
    gap: 25px;
  }
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem 1.5rem;
}

.cta {
  background-color: #EDF2F7;
  color: rgba(25, 28, 32, 1);
}

.cta h3 {
  color: rgba(25, 28, 32, 1);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
}

.hero h1,
.hero h2 {
  color: rgba(24, 24, 24, 1);
}

@keyframes skeleton {
  100% {
    left: 100%;
  }
}

.skeleton {
  position: relative;
  border-radius: 4px;
  height: 8rem;
  overflow: hidden;
  line-height: 0.6;
  background-color: #f9f9f9;
}

.skeleton::before {
  position: absolute;
  top: 0;
  width: 1000px;
  height: 100%;
  content: "";
  left: -1800px;
  animation: 1.5s ease-in-out 300ms infinite normal none running skeleton;
  background-image: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.skeleton::after {
  content: "";
  display: block;
}

.media {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.media-body {
  flex: 1;
  min-width: 0;
}

.svg-shape {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 4rem;
  fill: #fff;
}

.header {
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

.world-id-mode header.header {
  display: none;
}

.header .navbar-brand,
.header .navbar-toggle,
.header .nav-link {
  color: #fefefe;
}

.header .navbar-brand:focus, .header .navbar-brand:hover,
.header .navbar-toggle:focus,
.header .navbar-toggle:hover,
.header .nav-link:focus,
.header .nav-link:hover {
  color: #efefef;
}

.header .navbar-brand:active,
.header .navbar-toggle:active,
.header .nav-link:active {
  color: #dfdfdf;
}

.fixed-header {
  visibility: hidden;
  background-color: transparent;
  transition: background-color 0.15s ease-in-out;
}

.fixed-header .navbar-brand,
.fixed-header .navbar-toggle,
.fixed-header .nav-link {
  color: #fefefe;
}

.fixed-header .navbar-brand:focus, .fixed-header .navbar-brand:hover,
.fixed-header .navbar-toggle:focus,
.fixed-header .navbar-toggle:hover,
.fixed-header .nav-link:focus,
.fixed-header .nav-link:hover {
  color: #efefef;
}

.fixed-header .navbar-brand:active,
.fixed-header .navbar-toggle:active,
.fixed-header .nav-link:active {
  color: #dfdfdf;
}

.fixed-header:not(.visible) ~ main > .hero, .fixed-header.sticky-header ~ main > .hero {
  margin-top: -72px;
}

.text-h1 {
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 40.8px */
  letter-spacing: -0.34px;
}

.text-s2 {
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 20.4px */
}

.text-b4 {
  font-size: 13px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%; /* 16.9px */
}

.text-header .navbar-brand,
.text-header .navbar-toggle,
.text-header .nav-link {
  color: #fefefe;
}

.text-header .navbar-brand:focus, .text-header .navbar-brand:hover,
.text-header .navbar-toggle:focus,
.text-header .navbar-toggle:hover,
.text-header .nav-link:focus,
.text-header .nav-link:hover {
  color: #efefef;
}

.text-header .navbar-brand:active,
.text-header .navbar-toggle:active,
.text-header .nav-link:active {
  color: #dfdfdf;
}

#logo {
  height: 32px;
}

.footer {
  position: relative;
  background-color: rgba(255, 255, 255, 1);
}

.world-id-mode footer {
  display: none;
}

.footer .nav {
  gap: 24px;
}

.footer .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

.footer .nav-link {
  color: rgba(155, 163, 174, 1);
  padding: 0;
}

.footer .nav-link:hover {
  color: #8a93a0;
}

.footer .nav-link:active {
  color: #798493;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

/* Breadcrumb as eyebrow above the article title */
.article-breadcrumbs {
  margin-bottom: 0.5rem;
}
.article-breadcrumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #808080;
}
.article-breadcrumbs .breadcrumbs li {
  color: #808080;
}
.article-breadcrumbs .breadcrumbs li:last-child {
  color: #1a1a1a;
}

.breadcrumbs > * + * {
  padding-left: 0.5rem;
}

.breadcrumbs > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "/";
}

.breadcrumbs li {
  color: #1a1a1a;
}

.breadcrumbs li + li::before {
  color: #1a1a1a;
}

.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background-color: #fff;
  z-index: 99;
  padding: 0.75rem 0;
  margin: 0.25rem 0;
  border: 1px solid $color_border;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  min-width: 170px;
  font-size: 0.875rem;
}

.dropdown-menu-start {
  left: 0;
  right: auto;
  transform: translateX(0);
}

.dropdown-menu-end {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.dropdown-menu-top {
  top: auto;
  bottom: 100%;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    clear: both;
    font-weight: 500;
    color: #1a1a1a;
    text-align: inherit;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #2a2928;
  text-decoration: none;
  background-color: $color_gray_200;
}

.dropdown-item.is-active {
  color: #fff;
  text-decoration: none;
  background-color: $color_link;
}

.dropdown-item[aria-selected="true"] {
  cursor: default;
}

.dropdown-item[aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-item[aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.has-dropdown {
  position: relative;
}

.has-dropdown:focus > .dropdown-menu, .has-dropdown:hover > .dropdown-menu {
  display: block;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5em 1em;
}

.nav-link:focus, .nav-link:hover {
  text-decoration: none;
  cursor: pointer;
}

.nav-line .nav-link {
  position: relative;
}

.nav-line .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  border-bottom: 3px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: border-color 0.15s ease-in-out;
}

.nav-line .nav-link:hover::after {
  border-bottom-color: $color_border;
}

.nav-line .nav-link:active, .nav-line .nav-link.is-active::after {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.nav-tabs {
  position: relative;
  flex-direction: column;
  border: 1px solid $color_border;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-width: 1px 1px 0;
  margin-bottom: -1px;
}

.nav-tabs .nav-item {
  border-bottom: 1px solid $color_border;
}

@media (min-width: 576px) {
  .nav-tabs {
    flex-direction: row;
    border-width: 0 0 1px;
  }
  .nav-tabs .nav-item,
  .nav-tabs .nav-link {
    z-index: 1;
  }
  .nav-tabs .nav-item {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: none;
  }
  .nav-tabs .nav-link {
    margin-bottom: -1px;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    border-bottom-color: $color_border;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .nav-tabs .nav-link.is-active {
    background-color: #fff;
    border-color: $color_border;
    border-bottom-color: transparent;
  }
  .nav-tabs .dropdown-menu {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .nav-tabs .dropdown-menu .is-active {
    border: none;
    font-weight: 500;
  }
}

.nav-pills .nav-link.is-active {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 98;
}

.menu {
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 72px 0 1.5rem;
  background-color: rgba(255, 255, 255, 1);
}

.menu-links-center::before {
  content: "";
  display: flex;
  margin-right: auto;
}

.menu-standard {
  position: absolute;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.menu-slide-in {
  position: fixed;
  bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 20rem;
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .md\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .lg\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 1200px) {
  .xl\:menu-expanded {
    position: revert;
    top: auto;
    bottom: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    text-align: left;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-light .navbar-brand {
  color: #1a1a1a;
}

.navbar-light .navbar-toggle,
.navbar-light .nav-link {
  color: #1a1a1a;
}

.navbar-light .navbar-toggle:focus, .navbar-light .navbar-toggle:hover,
.navbar-light .nav-link:focus,
.navbar-light .nav-link:hover {
  color: #1a1a1a;
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-toggle,
.navbar-dark .nav-link {
  color: #ebebeb;
}

.navbar-dark .navbar-toggle:focus, .navbar-dark .navbar-toggle:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link:hover {
  color: #fff;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.navbar-tagline {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.navbar-toggle {
  position: relative;
  display: block;
  padding: 1rem 0.5rem;
  height: auto;
  border: none;
  background-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  cursor: pointer;
  order: 1;
  z-index: 100;
}

.navbar-toggle span {
  display: block;
  position: relative;
  pointer-events: none;
}

.navbar-toggle span, .navbar-toggle span:before, .navbar-toggle span:after {
  background-color: currentColor;
  height: 2px;
  width: 26px;
  outline: 1px solid transparent;
  transition: background-color 0.15s, transform 0.15s;
}

.navbar-toggle span:before, .navbar-toggle span:after {
  position: absolute;
  content: "";
  left: 0;
}

.navbar-toggle span:before {
  top: -7px;
}

.navbar-toggle span:after {
  top: 7px;
}

.navbar-toggle[aria-expanded="true"] {
  outline: none;
}

.navbar-toggle[aria-expanded="true"] span {
  background-color: transparent;
}

.navbar-toggle[aria-expanded="true"] span:before, .navbar-toggle[aria-expanded="true"] span:after {
  top: 0;
}

.navbar-toggle[aria-expanded="true"] span:before {
  transform: rotate(-45deg);
}

.navbar-toggle[aria-expanded="true"] span:after {
  transform: rotate(45deg);
}

.pagination {
  margin: 1rem 0;
  text-align: center;
}

.pagination-list {
  padding-left: 0;
}

.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}

.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  text-decoration: none;
}

.pagination-next-link:disabled, .pagination-next-link.is-disabled, .pagination-prev-link:disabled, .pagination-prev-link.is-disabled, .pagination-first-link:disabled, .pagination-first-link.is-disabled, .pagination-last-link:disabled, .pagination-last-link.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.pagination-next-link:focus, .pagination-next-link.is-focused, .pagination-prev-link:focus, .pagination-prev-link.is-focused, .pagination-first-link:focus, .pagination-first-link.is-focused, .pagination-last-link:focus, .pagination-last-link.is-focused {
  outline: 0;
}

.pagination-next-link:disabled, .pagination-next-link.is-disabled, .pagination-prev-link:disabled, .pagination-prev-link.is-disabled, .pagination-first-link:disabled, .pagination-first-link.is-disabled, .pagination-last-link:disabled, .pagination-last-link.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.pagination-next-link:not(:disabled):not(.is-disabled):active, .pagination-next-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-next-link:not(:disabled):not(.is-disabled).is-active, .pagination-prev-link:not(:disabled):not(.is-disabled):active, .pagination-prev-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-prev-link:not(:disabled):not(.is-disabled).is-active, .pagination-first-link:not(:disabled):not(.is-disabled):active, .pagination-first-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-first-link:not(:disabled):not(.is-disabled).is-active, .pagination-last-link:not(:disabled):not(.is-disabled):active, .pagination-last-link:not(:disabled):not(.is-disabled)[data-selected="true"], .pagination-last-link:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.pagination-first-text, .pagination-last-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

@media (max-width: 767.98px) {
  .collapsible-nav {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
    max-height: 3em;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease-in-out;
  }
  .collapsible-nav > * {
    line-height: 3em;
  }
  .collapsible-nav > [aria-selected="true"] {
    order: -1;
  }
  .collapsible-nav .nav-link {
    padding: 0;
    border: none;
  }
  .collapsible-nav .nav-link::after {
    display: none;
  }
  .collapsible-nav .nav-link.is-active {
    order: -1;
    color: inherit;
    background-color: transparent;
  }
  .collapsible-nav::after {
    position: absolute;
    right: 0;
    top: calc(3em / 2 - .5em);
    content: "";
    height: 1em;
    width: 1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
    pointer-events: none;
  }
  [dir="rtl"] .collapsible-nav::after {
    left: 0;
    right: auto;
  }
  .collapsible-nav.is-expanded {
    max-height: 100vh;
  }
  .collapsible-nav.is-expanded::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapsible-nav .dropdown-menu {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .collapse-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    margin: 0;
    font-size: 1em;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out;
  }
  .collapse-title::after {
    content: "";
    height: 1em;
    width: 1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapse-title.is-active::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
  }
  .collapse-title:focus, .collapse-title:hover {
    text-decoration: none;
    outline: none;
  }
}

.collapse:not(.is-visible) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}

.expand {
  display: flex !important;
  height: 100% !important;
  max-height: none !important;
  overflow: visible;
}

@media (min-width: 576px) {
  .sm\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 768px) {
  .md\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 992px) {
  .lg\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

@media (min-width: 1200px) {
  .xl\:expand {
    display: flex !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible;
  }
}

.tab-panel {
  padding: 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border: 1px solid $color_border;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.tab-panel:not(:first-of-type) {
  display: none;
}

.tab-panel :last-child {
  margin-bottom: 0;
}

.tab {
  display: none;
}

.tab.is-active {
  display: block;
}

.fade {
  transition: opacity 150ms ease;
}

.fade:not(.is-shown) {
  opacity: 0;
}

.scaled {
  transition: opacity 500ms ease, transform 500ms ease;
  transform: scale(1);
}

.scaled:not(.is-shown) {
  opacity: 0;
  transform: scale(1.1);
}

.toggle {
  padding-left: 1em;
  padding-right: 1em;
}

.toggle:not(:last-child) {
  border-bottom: 1px solid $color_border;
}

.toggle-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  margin: 0;
  font-size: 1em;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out;
}

.toggle-title::after {
  content: "";
  height: 1em;
  width: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232D3748' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
}

.toggle-title.is-active::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%232D3748' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'%3E%3C/path%3E%3C/svg%3E") no-repeat transparent center center;
}

.toggle-title:focus, .toggle-title:hover {
  text-decoration: none;
  outline: none;
}

.text-note {
  color: rgba(80, 109, 255, 1);
}

.text-warning {
  color: #ef526e;
}

.text-notification {
  color: #fff;
}

.text-inherit {
  color: inherit;
}

.text-base {
  color: $color_text;
}

.text-black {
  color: #000;
}

.text-white {
  color: #fff;
}

.text-gray-100 {
  color: $color_gray_100;
}

.text-gray-200 {
  color: $color_gray_200;
}

.text-gray-300 {
  color: #ebebeb;
}

.text-gray-400 {
  color: #EDECE9;
}

.text-gray-500 {
  color: #808080;
}

.text-gray-600 {
  color: $color_gray_600;
}

.text-gray-700 {
  color: #1a1a1a;
}

.text-gray-800 {
  color: #373635;
}

.text-gray-900 {
  color: #1a1a1a;
}

.text-red-500 {
  color: #EA392A;
}

.text-orange-500 {
  color: #FF6F0F;
}

.text-green-500 {
  color: #00AB48;
}

.text-primary {
  color: rgba(25, 28, 32, 1);
}

.text-secondary {
  color: $color_secondary;
}

.text-tertiary {
  color: $color_tertiary;
}

.text-primary-inverse {
  color: $color_primary_inverse;
}

.text-secondary-inverse {
  color: $color_secondary_inverse;
}

.text-tertiary-inverse {
  color: $color_tertiary_inverse;
}

.hover\:text-inherit:hover {
  color: inherit;
}

.hover\:text-base:hover {
  color: $color_text;
}

.hover\:text-black:hover {
  color: #000;
}

.hover\:text-white:hover {
  color: #fff;
}

.hover\:text-gray-100:hover {
  color: $color_gray_100;
}

.hover\:text-gray-200:hover {
  color: $color_gray_200;
}

.hover\:text-gray-300:hover {
  color: #ebebeb;
}

.hover\:text-gray-400:hover {
  color: #EDECE9;
}

.hover\:text-gray-500:hover {
  color: #808080;
}

.hover\:text-gray-600:hover {
  color: $color_gray_600;
}

.hover\:text-gray-700:hover {
  color: #1a1a1a;
}

.hover\:text-gray-800:hover {
  color: #373635;
}

.hover\:text-gray-900:hover {
  color: #1a1a1a;
}

.hover\:text-red-500:hover {
  color: #EA392A;
}

.hover\:text-orange-500:hover {
  color: #FF6F0F;
}

.hover\:text-green-500:hover {
  color: #00AB48;
}

.hover\:text-primary:hover {
  color: rgba(25, 28, 32, 1);
}

.hover\:text-secondary:hover {
  color: $color_secondary;
}

.hover\:text-tertiary:hover {
  color: $color_tertiary;
}

.hover\:text-primary-inverse:hover {
  color: $color_primary_inverse;
}

.hover\:text-secondary-inverse:hover {
  color: $color_secondary_inverse;
}

.hover\:text-tertiary-inverse:hover {
  color: $color_tertiary_inverse;
}

@media (min-width: 576px) {
  .sm\:text-inherit {
    color: inherit;
  }
  .sm\:text-base {
    color: $color_text;
  }
  .sm\:text-black {
    color: #000;
  }
  .sm\:text-white {
    color: #fff;
  }
  .sm\:text-gray-100 {
    color: $color_gray_100;
  }
  .sm\:text-gray-200 {
    color: $color_gray_200;
  }
  .sm\:text-gray-300 {
    color: #ebebeb;
  }
  .sm\:text-gray-400 {
    color: #EDECE9;
  }
  .sm\:text-gray-500 {
    color: #808080;
  }
  .sm\:text-gray-600 {
    color: $color_gray_600;
  }
  .sm\:text-gray-700 {
    color: #1a1a1a;
  }
  .sm\:text-gray-800 {
    color: #373635;
  }
  .sm\:text-gray-900 {
    color: #1a1a1a;
  }
  .sm\:text-red-500 {
    color: #EA392A;
  }
  .sm\:text-orange-500 {
    color: #FF6F0F;
  }
  .sm\:text-green-500 {
    color: #00AB48;
  }
  .sm\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .sm\:text-secondary {
    color: $color_secondary;
  }
  .sm\:text-tertiary {
    color: $color_tertiary;
  }
  .sm\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .sm\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .sm\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 768px) {
  .md\:text-inherit {
    color: inherit;
  }
  .md\:text-base {
    color: $color_text;
  }
  .md\:text-black {
    color: #000;
  }
  .md\:text-white {
    color: #fff;
  }
  .md\:text-gray-100 {
    color: $color_gray_100;
  }
  .md\:text-gray-200 {
    color: $color_gray_200;
  }
  .md\:text-gray-300 {
    color: #ebebeb;
  }
  .md\:text-gray-400 {
    color: #EDECE9;
  }
  .md\:text-gray-500 {
    color: #808080;
  }
  .md\:text-gray-600 {
    color: $color_gray_600;
  }
  .md\:text-gray-700 {
    color: #1a1a1a;
  }
  .md\:text-gray-800 {
    color: #373635;
  }
  .md\:text-gray-900 {
    color: #1a1a1a;
  }
  .md\:text-red-500 {
    color: #EA392A;
  }
  .md\:text-orange-500 {
    color: #FF6F0F;
  }
  .md\:text-green-500 {
    color: #00AB48;
  }
  .md\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .md\:text-secondary {
    color: $color_secondary;
  }
  .md\:text-tertiary {
    color: $color_tertiary;
  }
  .md\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .md\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .md\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 992px) {
  .lg\:text-inherit {
    color: inherit;
  }
  .lg\:text-base {
    color: $color_text;
  }
  .lg\:text-black {
    color: #000;
  }
  .lg\:text-white {
    color: #fff;
  }
  .lg\:text-gray-100 {
    color: $color_gray_100;
  }
  .lg\:text-gray-200 {
    color: $color_gray_200;
  }
  .lg\:text-gray-300 {
    color: #ebebeb;
  }
  .lg\:text-gray-400 {
    color: #EDECE9;
  }
  .lg\:text-gray-500 {
    color: #808080;
  }
  .lg\:text-gray-600 {
    color: $color_gray_600;
  }
  .lg\:text-gray-700 {
    color: #1a1a1a;
  }
  .lg\:text-gray-800 {
    color: #373635;
  }
  .lg\:text-gray-900 {
    color: #1a1a1a;
  }
  .lg\:text-red-500 {
    color: #EA392A;
  }
  .lg\:text-orange-500 {
    color: #FF6F0F;
  }
  .lg\:text-green-500 {
    color: #00AB48;
  }
  .lg\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .lg\:text-secondary {
    color: $color_secondary;
  }
  .lg\:text-tertiary {
    color: $color_tertiary;
  }
  .lg\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .lg\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .lg\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

@media (min-width: 1200px) {
  .xl\:text-inherit {
    color: inherit;
  }
  .xl\:text-base {
    color: $color_text;
  }
  .xl\:text-black {
    color: #000;
  }
  .xl\:text-white {
    color: #fff;
  }
  .xl\:text-gray-100 {
    color: $color_gray_100;
  }
  .xl\:text-gray-200 {
    color: $color_gray_200;
  }
  .xl\:text-gray-300 {
    color: #ebebeb;
  }
  .xl\:text-gray-400 {
    color: #EDECE9;
  }
  .xl\:text-gray-500 {
    color: #808080;
  }
  .xl\:text-gray-600 {
    color: $color_gray_600;
  }
  .xl\:text-gray-700 {
    color: #1a1a1a;
  }
  .xl\:text-gray-800 {
    color: #373635;
  }
  .xl\:text-gray-900 {
    color: #1a1a1a;
  }
  .xl\:text-red-500 {
    color: #EA392A;
  }
  .xl\:text-orange-500 {
    color: #FF6F0F;
  }
  .xl\:text-green-500 {
    color: #00AB48;
  }
  .xl\:text-primary {
    color: rgba(25, 28, 32, 1);
  }
  .xl\:text-secondary {
    color: $color_secondary;
  }
  .xl\:text-tertiary {
    color: $color_tertiary;
  }
  .xl\:text-primary-inverse {
    color: $color_primary_inverse;
  }
  .xl\:text-secondary-inverse {
    color: $color_secondary_inverse;
  }
  .xl\:text-tertiary-inverse {
    color: $color_tertiary_inverse;
  }
}

.font-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.font-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.font-code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wysiwyg-font-size-small {
  font-size: 0.875rem;
}

.wysiwyg-font-size-medium {
  font-size: 1em;
}

.wysiwyg-font-size-large {
  font-size: 1.125rem;
}

.wysiwyg-font-size-x-large {
  font-size: 1.25rem;
}

.font-size-xs {
  font-size: 0.75rem;
}

.font-size-sm {
  font-size: 0.875rem;
}

.font-size-md {
  font-size: 0.9375rem;
}

.font-size-base {
  font-size: 1rem;
}

.font-size-lg {
  font-size: 1.125rem;
}

.font-size-xl {
  font-size: 1.25rem;
}

.font-size-2xl {
  font-size: 1.5rem;
}

.font-size-3xl {
  font-size: 1.875rem;
}

.font-size-4xl {
  font-size: 2.25rem;
}

.font-size-5xl {
  font-size: 3rem;
}

.font-size-6xl {
  font-size: 4rem;
}

@media (min-width: 576px) {
  .sm\:font-size-xs {
    font-size: 0.75rem;
  }
  .sm\:font-size-sm {
    font-size: 0.875rem;
  }
  .sm\:font-size-md {
    font-size: 0.9375rem;
  }
  .sm\:font-size-base {
    font-size: 1rem;
  }
  .sm\:font-size-lg {
    font-size: 1.125rem;
  }
  .sm\:font-size-xl {
    font-size: 1.25rem;
  }
  .sm\:font-size-2xl {
    font-size: 1.5rem;
  }
  .sm\:font-size-3xl {
    font-size: 1.875rem;
  }
  .sm\:font-size-4xl {
    font-size: 2.25rem;
  }
  .sm\:font-size-5xl {
    font-size: 3rem;
  }
  .sm\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 768px) {
  .md\:font-size-xs {
    font-size: 0.75rem;
  }
  .md\:font-size-sm {
    font-size: 0.875rem;
  }
  .md\:font-size-md {
    font-size: 0.9375rem;
  }
  .md\:font-size-base {
    font-size: 1rem;
  }
  .md\:font-size-lg {
    font-size: 1.125rem;
  }
  .md\:font-size-xl {
    font-size: 1.25rem;
  }
  .md\:font-size-2xl {
    font-size: 1.5rem;
  }
  .md\:font-size-3xl {
    font-size: 1.875rem;
  }
  .md\:font-size-4xl {
    font-size: 2.25rem;
  }
  .md\:font-size-5xl {
    font-size: 3rem;
  }
  .md\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 992px) {
  .lg\:font-size-xs {
    font-size: 0.75rem;
  }
  .lg\:font-size-sm {
    font-size: 0.875rem;
  }
  .lg\:font-size-md {
    font-size: 0.9375rem;
  }
  .lg\:font-size-base {
    font-size: 1rem;
  }
  .lg\:font-size-lg {
    font-size: 1.125rem;
  }
  .lg\:font-size-xl {
    font-size: 1.25rem;
  }
  .lg\:font-size-2xl {
    font-size: 1.5rem;
  }
  .lg\:font-size-3xl {
    font-size: 1.875rem;
  }
  .lg\:font-size-4xl {
    font-size: 2.25rem;
  }
  .lg\:font-size-5xl {
    font-size: 3rem;
  }
  .lg\:font-size-6xl {
    font-size: 4rem;
  }
}

@media (min-width: 1200px) {
  .xl\:font-size-xs {
    font-size: 0.75rem;
  }
  .xl\:font-size-sm {
    font-size: 0.875rem;
  }
  .xl\:font-size-md {
    font-size: 0.9375rem;
  }
  .xl\:font-size-base {
    font-size: 1rem;
  }
  .xl\:font-size-lg {
    font-size: 1.125rem;
  }
  .xl\:font-size-xl {
    font-size: 1.25rem;
  }
  .xl\:font-size-2xl {
    font-size: 1.5rem;
  }
  .xl\:font-size-3xl {
    font-size: 1.875rem;
  }
  .xl\:font-size-4xl {
    font-size: 2.25rem;
  }
  .xl\:font-size-5xl {
    font-size: 3rem;
  }
  .xl\:font-size-6xl {
    font-size: 4rem;
  }
}

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

@media (min-width: 576px) {
  .sm\:normal {
    font-style: normal;
  }
  .sm\:italic {
    font-style: italic;
  }
}

@media (min-width: 768px) {
  .md\:normal {
    font-style: normal;
  }
  .md\:italic {
    font-style: italic;
  }
}

@media (min-width: 992px) {
  .lg\:normal {
    font-style: normal;
  }
  .lg\:italic {
    font-style: italic;
  }
}

@media (min-width: 1200px) {
  .xl\:normal {
    font-style: normal;
  }
  .xl\:italic {
    font-style: italic;
  }
}

.font-hairline {
  font-weight: 100;
}

.font-thin {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

@media (min-width: 576px) {
  .sm\:font-hairline {
    font-weight: 100;
  }
  .sm\:font-thin {
    font-weight: 200;
  }
  .sm\:font-light {
    font-weight: 300;
  }
  .sm\:font-normal {
    font-weight: 400;
  }
  .sm\:font-medium {
    font-weight: 500;
  }
  .sm\:font-semibold {
    font-weight: 600;
  }
  .sm\:font-bold {
    font-weight: 700;
  }
  .sm\:font-extrabold {
    font-weight: 800;
  }
  .sm\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 768px) {
  .md\:font-hairline {
    font-weight: 100;
  }
  .md\:font-thin {
    font-weight: 200;
  }
  .md\:font-light {
    font-weight: 300;
  }
  .md\:font-normal {
    font-weight: 400;
  }
  .md\:font-medium {
    font-weight: 500;
  }
  .md\:font-semibold {
    font-weight: 600;
  }
  .md\:font-bold {
    font-weight: 700;
  }
  .md\:font-extrabold {
    font-weight: 800;
  }
  .md\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 992px) {
  .lg\:font-hairline {
    font-weight: 100;
  }
  .lg\:font-thin {
    font-weight: 200;
  }
  .lg\:font-light {
    font-weight: 300;
  }
  .lg\:font-normal {
    font-weight: 400;
  }
  .lg\:font-medium {
    font-weight: 500;
  }
  .lg\:font-semibold {
    font-weight: 600;
  }
  .lg\:font-bold {
    font-weight: 700;
  }
  .lg\:font-extrabold {
    font-weight: 800;
  }
  .lg\:font-black {
    font-weight: 900;
  }
}

@media (min-width: 1200px) {
  .xl\:font-hairline {
    font-weight: 100;
  }
  .xl\:font-thin {
    font-weight: 200;
  }
  .xl\:font-light {
    font-weight: 300;
  }
  .xl\:font-normal {
    font-weight: 400;
  }
  .xl\:font-medium {
    font-weight: 500;
  }
  .xl\:font-semibold {
    font-weight: 600;
  }
  .xl\:font-bold {
    font-weight: 700;
  }
  .xl\:font-extrabold {
    font-weight: 800;
  }
  .xl\:font-black {
    font-weight: 900;
  }
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

@media (min-width: 576px) {
  .sm\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .sm\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .sm\:tracking-normal {
    letter-spacing: 0;
  }
  .sm\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .sm\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 768px) {
  .md\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .md\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .md\:tracking-normal {
    letter-spacing: 0;
  }
  .md\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .md\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 992px) {
  .lg\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .lg\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .lg\:tracking-normal {
    letter-spacing: 0;
  }
  .lg\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .lg\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

@media (min-width: 1200px) {
  .xl\:tracking-tighter {
    letter-spacing: -0.05em;
  }
  .xl\:tracking-tight {
    letter-spacing: -0.025em;
  }
  .xl\:tracking-normal {
    letter-spacing: 0;
  }
  .xl\:tracking-wide {
    letter-spacing: 0.025em;
  }
  .xl\:tracking-wider {
    letter-spacing: 0.05em;
  }
}

.line-height-1 {
  line-height: 1;
}

.line-height-tight {
  line-height: 1.25;
}

.line-height-snug {
  line-height: 1.375;
}

.line-height-normal {
  line-height: 1.5;
}

.line-height-relaxed {
  line-height: 1.625;
}

.line-height-wide {
  line-height: 2;
}

.list-none {
  list-style-type: none;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.list-square {
  list-style-type: square;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

@media (min-width: 576px) {
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-right {
    text-align: right;
  }
  .sm\:text-center {
    text-align: center;
  }
  .sm\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 768px) {
  .md\:text-left {
    text-align: left;
  }
  .md\:text-right {
    text-align: right;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 992px) {
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:text-center {
    text-align: center;
  }
  .lg\:text-justify {
    text-align: justify;
  }
}

@media (min-width: 1200px) {
  .xl\:text-left {
    text-align: left;
  }
  .xl\:text-right {
    text-align: right;
  }
  .xl\:text-center {
    text-align: center;
  }
  .xl\:text-justify {
    text-align: justify;
  }
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.hover\:line-through:hover {
  text-decoration: line-through;
}

.hover\:no-underline:hover {
  text-decoration: none;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

@media (min-width: 576px) {
  .sm\:lowercase {
    text-transform: lowercase;
  }
  .sm\:uppercase {
    text-transform: uppercase;
  }
  .sm\:capitalize {
    text-transform: capitalize;
  }
  .sm\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 768px) {
  .md\:lowercase {
    text-transform: lowercase;
  }
  .md\:uppercase {
    text-transform: uppercase;
  }
  .md\:capitalize {
    text-transform: capitalize;
  }
  .md\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 992px) {
  .lg\:lowercase {
    text-transform: lowercase;
  }
  .lg\:uppercase {
    text-transform: uppercase;
  }
  .lg\:capitalize {
    text-transform: capitalize;
  }
  .lg\:normal-case {
    text-transform: none;
  }
}

@media (min-width: 1200px) {
  .xl\:lowercase {
    text-transform: lowercase;
  }
  .xl\:uppercase {
    text-transform: uppercase;
  }
  .xl\:capitalize {
    text-transform: capitalize;
  }
  .xl\:normal-case {
    text-transform: none;
  }
}

.align-baseline {
  vertical-align: baseline;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.align-text-top {
  vertical-align: text-top;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

@media (min-width: 576px) {
  .sm\:align-baseline {
    vertical-align: baseline;
  }
  .sm\:align-top {
    vertical-align: top;
  }
  .sm\:align-middle {
    vertical-align: middle;
  }
  .sm\:align-bottom {
    vertical-align: bottom;
  }
  .sm\:align-text-top {
    vertical-align: text-top;
  }
  .sm\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 768px) {
  .md\:align-baseline {
    vertical-align: baseline;
  }
  .md\:align-top {
    vertical-align: top;
  }
  .md\:align-middle {
    vertical-align: middle;
  }
  .md\:align-bottom {
    vertical-align: bottom;
  }
  .md\:align-text-top {
    vertical-align: text-top;
  }
  .md\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 992px) {
  .lg\:align-baseline {
    vertical-align: baseline;
  }
  .lg\:align-top {
    vertical-align: top;
  }
  .lg\:align-middle {
    vertical-align: middle;
  }
  .lg\:align-bottom {
    vertical-align: bottom;
  }
  .lg\:align-text-top {
    vertical-align: text-top;
  }
  .lg\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

@media (min-width: 1200px) {
  .xl\:align-baseline {
    vertical-align: baseline;
  }
  .xl\:align-top {
    vertical-align: top;
  }
  .xl\:align-middle {
    vertical-align: middle;
  }
  .xl\:align-bottom {
    vertical-align: bottom;
  }
  .xl\:align-text-top {
    vertical-align: text-top;
  }
  .xl\:align-text-bottom {
    vertical-align: text-bottom;
  }
}

.white-space-normal {
  white-space: normal;
}

.white-space-no-wrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

.break-normal {
  word-break: normal;
}

.break-words {
  word-wrap: break-word;
}

.break-spaces {
  word-wrap: break-spaces;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.ratio {
  position: relative;
  height: 0;
}

.ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 96;
}

.ratio-1-1 {
  padding-bottom: 100%;
}

.ratio-16-9 {
  padding-bottom: 56.25%;
}

.ratio-4-3 {
  padding-bottom: 75%;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.table, .content table:not([class*="table"]) {
  display: table !important;
}

.table-header-group {
  display: table-header-group !important;
}

.table-row {
  display: table-row !important;
}

.table-cell {
  display: table-cell !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.hidden {
  display: none !important;
}

.empty\:hidden:empty {
  display: none;
}

@media (min-width: 576px) {
  .sm\:block {
    display: block !important;
  }
  .sm\:inline-block {
    display: inline-block !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:table {
    display: table !important;
  }
  .sm\:table-header-group {
    display: table-header-group !important;
  }
  .sm\:table-row {
    display: table-row !important;
  }
  .sm\:table-cell {
    display: table-cell !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:inline-flex {
    display: inline-flex !important;
  }
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block !important;
  }
  .md\:inline-block {
    display: inline-block !important;
  }
  .md\:inline {
    display: inline !important;
  }
  .md\:table {
    display: table !important;
  }
  .md\:table-header-group {
    display: table-header-group !important;
  }
  .md\:table-row {
    display: table-row !important;
  }
  .md\:table-cell {
    display: table-cell !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
  }
  .md\:hidden {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .lg\:block {
    display: block !important;
  }
  .lg\:inline-block {
    display: inline-block !important;
  }
  .lg\:inline {
    display: inline !important;
  }
  .lg\:table {
    display: table !important;
  }
  .lg\:table-header-group {
    display: table-header-group !important;
  }
  .lg\:table-row {
    display: table-row !important;
  }
  .lg\:table-cell {
    display: table-cell !important;
  }
  .lg\:flex {
    display: flex !important;
  }
  .lg\:inline-flex {
    display: inline-flex !important;
  }
  .lg\:hidden {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .xl\:block {
    display: block !important;
  }
  .xl\:inline-block {
    display: inline-block !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:table {
    display: table !important;
  }
  .xl\:table-header-group {
    display: table-header-group !important;
  }
  .xl\:table-row {
    display: table-row !important;
  }
  .xl\:table-cell {
    display: table-cell !important;
  }
  .xl\:flex {
    display: flex !important;
  }
  .xl\:inline-flex {
    display: inline-flex !important;
  }
  .xl\:hidden {
    display: none !important;
  }
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

@media (min-width: 576px) {
  .sm\:float-left {
    float: left;
  }
  .sm\:float-right {
    float: right;
  }
  .sm\:float-none {
    float: none;
  }
  .sm\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 768px) {
  .md\:float-left {
    float: left;
  }
  .md\:float-right {
    float: right;
  }
  .md\:float-none {
    float: none;
  }
  .md\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 992px) {
  .lg\:float-left {
    float: left;
  }
  .lg\:float-right {
    float: right;
  }
  .lg\:float-none {
    float: none;
  }
  .lg\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

@media (min-width: 1200px) {
  .xl\:float-left {
    float: left;
  }
  .xl\:float-right {
    float: right;
  }
  .xl\:float-none {
    float: none;
  }
  .xl\:clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

@media (min-width: 576px) {
  .sm\:overflow-auto {
    overflow: auto;
  }
  .sm\:overflow-hidden {
    overflow: hidden;
  }
  .sm\:overflow-visible {
    overflow: visible;
  }
  .sm\:overflow-scroll {
    overflow: scroll;
  }
  .sm\:overflow-x-auto {
    overflow-x: auto;
  }
  .sm\:overflow-y-auto {
    overflow-y: auto;
  }
  .sm\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .sm\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .sm\:overflow-x-visible {
    overflow-x: visible;
  }
  .sm\:overflow-y-visible {
    overflow-y: visible;
  }
  .sm\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .sm\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .sm\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .sm\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 768px) {
  .md\:overflow-auto {
    overflow: auto;
  }
  .md\:overflow-hidden {
    overflow: hidden;
  }
  .md\:overflow-visible {
    overflow: visible;
  }
  .md\:overflow-scroll {
    overflow: scroll;
  }
  .md\:overflow-x-auto {
    overflow-x: auto;
  }
  .md\:overflow-y-auto {
    overflow-y: auto;
  }
  .md\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .md\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .md\:overflow-x-visible {
    overflow-x: visible;
  }
  .md\:overflow-y-visible {
    overflow-y: visible;
  }
  .md\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .md\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .md\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 992px) {
  .lg\:overflow-auto {
    overflow: auto;
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  .lg\:overflow-visible {
    overflow: visible;
  }
  .lg\:overflow-scroll {
    overflow: scroll;
  }
  .lg\:overflow-x-auto {
    overflow-x: auto;
  }
  .lg\:overflow-y-auto {
    overflow-y: auto;
  }
  .lg\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .lg\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .lg\:overflow-x-visible {
    overflow-x: visible;
  }
  .lg\:overflow-y-visible {
    overflow-y: visible;
  }
  .lg\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .lg\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .lg\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .lg\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:overflow-auto {
    overflow: auto;
  }
  .xl\:overflow-hidden {
    overflow: hidden;
  }
  .xl\:overflow-visible {
    overflow: visible;
  }
  .xl\:overflow-scroll {
    overflow: scroll;
  }
  .xl\:overflow-x-auto {
    overflow-x: auto;
  }
  .xl\:overflow-y-auto {
    overflow-y: auto;
  }
  .xl\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .xl\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .xl\:overflow-x-visible {
    overflow-x: visible;
  }
  .xl\:overflow-y-visible {
    overflow-y: visible;
  }
  .xl\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .xl\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .xl\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .xl\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

@media (max-width: 575.98px) {
  .sm\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sm\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .md\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .md\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .lg\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .lg\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .xl\:scroll-x {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .xl\:scroll-x::-webkit-scrollbar {
    display: none;
  }
}

.scroll-x {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.initial {
  position: initial;
}

.absolute-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 100;
}

.absolute-bottom {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 96;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 96;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 97;
}

@media (min-width: 576px) {
  .sm\:static {
    position: static;
  }
  .sm\:relative {
    position: relative;
  }
  .sm\:absolute {
    position: absolute;
  }
  .sm\:fixed {
    position: fixed;
  }
  .sm\:sticky {
    position: sticky;
  }
  .sm\:initial {
    position: initial;
  }
  .sm\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .sm\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .sm\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .sm\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .sm\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 768px) {
  .md\:static {
    position: static;
  }
  .md\:relative {
    position: relative;
  }
  .md\:absolute {
    position: absolute;
  }
  .md\:fixed {
    position: fixed;
  }
  .md\:sticky {
    position: sticky;
  }
  .md\:initial {
    position: initial;
  }
  .md\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .md\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .md\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .md\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .md\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 992px) {
  .lg\:static {
    position: static;
  }
  .lg\:relative {
    position: relative;
  }
  .lg\:absolute {
    position: absolute;
  }
  .lg\:fixed {
    position: fixed;
  }
  .lg\:sticky {
    position: sticky;
  }
  .lg\:initial {
    position: initial;
  }
  .lg\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .lg\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .lg\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .lg\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .lg\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

@media (min-width: 1200px) {
  .xl\:static {
    position: static;
  }
  .xl\:relative {
    position: relative;
  }
  .xl\:absolute {
    position: absolute;
  }
  .xl\:fixed {
    position: fixed;
  }
  .xl\:sticky {
    position: sticky;
  }
  .xl\:initial {
    position: initial;
  }
  .xl\:absolute-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
  }
  .xl\:absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
  }
  .xl\:fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 96;
  }
  .xl\:fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
  }
  .xl\:sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 97;
  }
}

.top-0 {
  top: 0;
}

.top-100 {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.top-auto {
  top: auto;
}

.bottom-auto {
  bottom: auto;
}

.left-auto {
  left: auto;
}

.right-auto {
  right: auto;
}

@media (min-width: 576px) {
  .sm\:top-0 {
    top: 0;
  }
  .sm\:top-100 {
    top: 100%;
  }
  .sm\:bottom-0 {
    bottom: 0;
  }
  .sm\:left-0 {
    left: 0;
  }
  .sm\:right-0 {
    right: 0;
  }
  .sm\:top-auto {
    top: auto;
  }
  .sm\:bottom-auto {
    bottom: auto;
  }
  .sm\:left-auto {
    left: auto;
  }
  .sm\:right-auto {
    right: auto;
  }
}

@media (min-width: 768px) {
  .md\:top-0 {
    top: 0;
  }
  .md\:top-100 {
    top: 100%;
  }
  .md\:bottom-0 {
    bottom: 0;
  }
  .md\:left-0 {
    left: 0;
  }
  .md\:right-0 {
    right: 0;
  }
  .md\:top-auto {
    top: auto;
  }
  .md\:bottom-auto {
    bottom: auto;
  }
  .md\:left-auto {
    left: auto;
  }
  .md\:right-auto {
    right: auto;
  }
}

@media (min-width: 992px) {
  .lg\:top-0 {
    top: 0;
  }
  .lg\:top-100 {
    top: 100%;
  }
  .lg\:bottom-0 {
    bottom: 0;
  }
  .lg\:left-0 {
    left: 0;
  }
  .lg\:right-0 {
    right: 0;
  }
  .lg\:top-auto {
    top: auto;
  }
  .lg\:bottom-auto {
    bottom: auto;
  }
  .lg\:left-auto {
    left: auto;
  }
  .lg\:right-auto {
    right: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:top-0 {
    top: 0;
  }
  .xl\:top-100 {
    top: 100%;
  }
  .xl\:bottom-0 {
    bottom: 0;
  }
  .xl\:left-0 {
    left: 0;
  }
  .xl\:right-0 {
    right: 0;
  }
  .xl\:top-auto {
    top: auto;
  }
  .xl\:bottom-auto {
    bottom: auto;
  }
  .xl\:left-auto {
    left: auto;
  }
  .xl\:right-auto {
    right: auto;
  }
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

@media (min-width: 576px) {
  .sm\:visible {
    visibility: visible;
  }
  .sm\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .md\:visible {
    visibility: visible;
  }
  .md\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 992px) {
  .lg\:visible {
    visibility: visible;
  }
  .lg\:invisible {
    visibility: hidden;
  }
}

@media (min-width: 1200px) {
  .xl\:visible {
    visibility: visible;
  }
  .xl\:invisible {
    visibility: hidden;
  }
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.z-auto {
  z-index: auto;
}

.z-fixed {
  z-index: 96;
}

.z-sticky {
  z-index: 97;
}

.z-dropdown {
  z-index: 99;
}

.bg-fixed {
  background-attachment: fixed;
}

.bg-local {
  background-attachment: local;
}

.bg-scroll {
  background-attachment: scroll;
}

.bg-inherit {
  background-color: inherit;
}

.bg-transparent {
  background-color: transparent;
}

.bg-translucent {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-header-fixed {
  background-color: transparent;
}

.bg-header {
  background-color: rgba(255, 255, 255, 1);
}

.bg-note {
  background-color: rgba(80, 109, 255, 1);
}

.bg-warning {
  background-color: #ef526e;
}

.bg-notification {
  background-color: #ef526e;
}

.bg-custom-blocks {
  background-color: #fafafb;
}

.bg-content-blocks {
  background-color: rgba(255, 254, 254, 1);
}

.blur {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-gray-100 {
  background-color: $color_gray_100;
}

.bg-gray-200 {
  background-color: $color_gray_200;
}

.bg-gray-300 {
  background-color: #ebebeb;
}

.bg-gray-400 {
  background-color: #EDECE9;
}

.bg-gray-500 {
  background-color: #808080;
}

.bg-gray-600 {
  background-color: $color_gray_600;
}

.bg-gray-700 {
  background-color: #1a1a1a;
}

.bg-gray-800 {
  background-color: #373635;
}

.bg-gray-900 {
  background-color: #1a1a1a;
}

.bg-red-500 {
  background-color: #EA392A;
}

.bg-orange-500 {
  background-color: #FF6F0F;
}

.bg-green-500 {
  background-color: #00AB48;
}

.bg-primary {
  background-color: rgba(25, 28, 32, 1);
}

.bg-secondary {
  background-color: $color_secondary;
}

.bg-tertiary {
  background-color: $color_tertiary;
}

.hover\:bg-inherit:hover {
  background-color: inherit;
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-translucent:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hover\:bg-black:hover {
  background-color: #000;
}

.hover\:bg-white:hover {
  background-color: #fff;
}

.hover\:bg-gray-100:hover {
  background-color: $color_gray_100;
}

.hover\:bg-gray-200:hover {
  background-color: $color_gray_200;
}

.hover\:bg-gray-300:hover {
  background-color: #ebebeb;
}

.hover\:bg-gray-400:hover {
  background-color: #EDECE9;
}

.hover\:bg-gray-500:hover {
  background-color: #808080;
}

.hover\:bg-gray-600:hover {
  background-color: $color_gray_600;
}

.hover\:bg-gray-700:hover {
  background-color: #1a1a1a;
}

.hover\:bg-gray-800:hover {
  background-color: #373635;
}

.hover\:bg-gray-900:hover {
  background-color: #1a1a1a;
}

.hover\:bg-red-500:hover {
  background-color: #EA392A;
}

.hover\:bg-orange-500:hover {
  background-color: #FF6F0F;
}

.hover\:bg-green-500:hover {
  background-color: #00AB48;
}

.hover\:bg-primary:hover {
  background-color: rgba(25, 28, 32, 1);
}

.hover\:bg-secondary:hover {
  background-color: $color_secondary;
}

.hover\:bg-tertiary:hover {
  background-color: $color_tertiary;
}

@media (min-width: 576px) {
  .sm\:bg-inherit {
    background-color: inherit;
  }
  .sm\:bg-transparent {
    background-color: transparent;
  }
  .sm\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .sm\:bg-black {
    background-color: #000;
  }
  .sm\:bg-white {
    background-color: #fff;
  }
  .sm\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .sm\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .sm\:bg-gray-300 {
    background-color: #ebebeb;
  }
  .sm\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .sm\:bg-gray-500 {
    background-color: #808080;
  }
  .sm\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .sm\:bg-gray-700 {
    background-color: #1a1a1a;
  }
  .sm\:bg-gray-800 {
    background-color: #373635;
  }
  .sm\:bg-gray-900 {
    background-color: #1a1a1a;
  }
  .sm\:bg-red-500 {
    background-color: #EA392A;
  }
  .sm\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .sm\:bg-green-500 {
    background-color: #00AB48;
  }
  .sm\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .sm\:bg-secondary {
    background-color: $color_secondary;
  }
  .sm\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 768px) {
  .md\:bg-inherit {
    background-color: inherit;
  }
  .md\:bg-transparent {
    background-color: transparent;
  }
  .md\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .md\:bg-black {
    background-color: #000;
  }
  .md\:bg-white {
    background-color: #fff;
  }
  .md\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .md\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .md\:bg-gray-300 {
    background-color: #ebebeb;
  }
  .md\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .md\:bg-gray-500 {
    background-color: #808080;
  }
  .md\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .md\:bg-gray-700 {
    background-color: #1a1a1a;
  }
  .md\:bg-gray-800 {
    background-color: #373635;
  }
  .md\:bg-gray-900 {
    background-color: #1a1a1a;
  }
  .md\:bg-red-500 {
    background-color: #EA392A;
  }
  .md\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .md\:bg-green-500 {
    background-color: #00AB48;
  }
  .md\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .md\:bg-secondary {
    background-color: $color_secondary;
  }
  .md\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 992px) {
  .lg\:bg-inherit {
    background-color: inherit;
  }
  .lg\:bg-transparent {
    background-color: transparent;
  }
  .lg\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .lg\:bg-black {
    background-color: #000;
  }
  .lg\:bg-white {
    background-color: #fff;
  }
  .lg\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .lg\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .lg\:bg-gray-300 {
    background-color: #ebebeb;
  }
  .lg\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .lg\:bg-gray-500 {
    background-color: #808080;
  }
  .lg\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .lg\:bg-gray-700 {
    background-color: #1a1a1a;
  }
  .lg\:bg-gray-800 {
    background-color: #373635;
  }
  .lg\:bg-gray-900 {
    background-color: #1a1a1a;
  }
  .lg\:bg-red-500 {
    background-color: #EA392A;
  }
  .lg\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .lg\:bg-green-500 {
    background-color: #00AB48;
  }
  .lg\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .lg\:bg-secondary {
    background-color: $color_secondary;
  }
  .lg\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-inherit {
    background-color: inherit;
  }
  .xl\:bg-transparent {
    background-color: transparent;
  }
  .xl\:bg-translucent {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .xl\:bg-black {
    background-color: #000;
  }
  .xl\:bg-white {
    background-color: #fff;
  }
  .xl\:bg-gray-100 {
    background-color: $color_gray_100;
  }
  .xl\:bg-gray-200 {
    background-color: $color_gray_200;
  }
  .xl\:bg-gray-300 {
    background-color: #ebebeb;
  }
  .xl\:bg-gray-400 {
    background-color: #EDECE9;
  }
  .xl\:bg-gray-500 {
    background-color: #808080;
  }
  .xl\:bg-gray-600 {
    background-color: $color_gray_600;
  }
  .xl\:bg-gray-700 {
    background-color: #1a1a1a;
  }
  .xl\:bg-gray-800 {
    background-color: #373635;
  }
  .xl\:bg-gray-900 {
    background-color: #1a1a1a;
  }
  .xl\:bg-red-500 {
    background-color: #EA392A;
  }
  .xl\:bg-orange-500 {
    background-color: #FF6F0F;
  }
  .xl\:bg-green-500 {
    background-color: #00AB48;
  }
  .xl\:bg-primary {
    background-color: rgba(25, 28, 32, 1);
  }
  .xl\:bg-secondary {
    background-color: $color_secondary;
  }
  .xl\:bg-tertiary {
    background-color: $color_tertiary;
  }
}

.bg-bottom {
  background-position: bottom;
}

.bg-center {
  background-position: center;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

.bg-top {
  background-position: top;
}

.bg-left-bottom {
  background-position: left bottom;
}

.bg-left-top {
  background-position: left top;
}

.bg-right-bottom {
  background-position: right bottom;
}

.bg-right-top {
  background-position: right top;
}

@media (min-width: 576px) {
  .sm\:bg-bottom {
    background-position: bottom;
  }
  .sm\:bg-center {
    background-position: center;
  }
  .sm\:bg-left {
    background-position: left;
  }
  .sm\:bg-right {
    background-position: right;
  }
  .sm\:bg-top {
    background-position: top;
  }
  .sm\:bg-left-bottom {
    background-position: left bottom;
  }
  .sm\:bg-left-top {
    background-position: left top;
  }
  .sm\:bg-right-bottom {
    background-position: right bottom;
  }
  .sm\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 768px) {
  .md\:bg-bottom {
    background-position: bottom;
  }
  .md\:bg-center {
    background-position: center;
  }
  .md\:bg-left {
    background-position: left;
  }
  .md\:bg-right {
    background-position: right;
  }
  .md\:bg-top {
    background-position: top;
  }
  .md\:bg-left-bottom {
    background-position: left bottom;
  }
  .md\:bg-left-top {
    background-position: left top;
  }
  .md\:bg-right-bottom {
    background-position: right bottom;
  }
  .md\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 992px) {
  .lg\:bg-bottom {
    background-position: bottom;
  }
  .lg\:bg-center {
    background-position: center;
  }
  .lg\:bg-left {
    background-position: left;
  }
  .lg\:bg-right {
    background-position: right;
  }
  .lg\:bg-top {
    background-position: top;
  }
  .lg\:bg-left-bottom {
    background-position: left bottom;
  }
  .lg\:bg-left-top {
    background-position: left top;
  }
  .lg\:bg-right-bottom {
    background-position: right bottom;
  }
  .lg\:bg-right-top {
    background-position: right top;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-bottom {
    background-position: bottom;
  }
  .xl\:bg-center {
    background-position: center;
  }
  .xl\:bg-left {
    background-position: left;
  }
  .xl\:bg-right {
    background-position: right;
  }
  .xl\:bg-top {
    background-position: top;
  }
  .xl\:bg-left-bottom {
    background-position: left bottom;
  }
  .xl\:bg-left-top {
    background-position: left top;
  }
  .xl\:bg-right-bottom {
    background-position: right bottom;
  }
  .xl\:bg-right-top {
    background-position: right top;
  }
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.bg-repeat-y {
  background-repeat: repeat-y;
}

@media (min-width: 576px) {
  .sm\:bg-repeat {
    background-repeat: repeat;
  }
  .sm\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .sm\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .sm\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 768px) {
  .md\:bg-repeat {
    background-repeat: repeat;
  }
  .md\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .md\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .md\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 992px) {
  .lg\:bg-repeat {
    background-repeat: repeat;
  }
  .lg\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .lg\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .lg\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-repeat {
    background-repeat: repeat;
  }
  .xl\:bg-no-repeat {
    background-repeat: no-repeat;
  }
  .xl\:bg-repeat-x {
    background-repeat: repeat-x;
  }
  .xl\:bg-repeat-y {
    background-repeat: repeat-y;
  }
}

.bg-auto {
  background-size: auto;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

@media (min-width: 576px) {
  .sm\:bg-auto {
    background-size: auto;
  }
  .sm\:bg-cover {
    background-size: cover;
  }
  .sm\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 768px) {
  .md\:bg-auto {
    background-size: auto;
  }
  .md\:bg-cover {
    background-size: cover;
  }
  .md\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 992px) {
  .lg\:bg-auto {
    background-size: auto;
  }
  .lg\:bg-cover {
    background-size: cover;
  }
  .lg\:bg-contain {
    background-size: contain;
  }
}

@media (min-width: 1200px) {
  .xl\:bg-auto {
    background-size: auto;
  }
  .xl\:bg-cover {
    background-size: cover;
  }
  .xl\:bg-contain {
    background-size: contain;
  }
}

.border {
  border: 1px solid $color_border;
}

.border-top {
  border-top: 1px solid $color_border;
}

.border-right {
  border-right: 1px solid $color_border;
}

.border-bottom {
  border-bottom: 1px solid $color_border;
}

.border-left {
  border-left: 1px solid $color_border;
}

@media (min-width: 576px) {
  .sm\:border {
    border: 1px solid $color_border;
  }
  .sm\:border-top {
    border-top: 1px solid $color_border;
  }
  .sm\:border-right {
    border-right: 1px solid $color_border;
  }
  .sm\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .sm\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 768px) {
  .md\:border {
    border: 1px solid $color_border;
  }
  .md\:border-top {
    border-top: 1px solid $color_border;
  }
  .md\:border-right {
    border-right: 1px solid $color_border;
  }
  .md\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .md\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 992px) {
  .lg\:border {
    border: 1px solid $color_border;
  }
  .lg\:border-top {
    border-top: 1px solid $color_border;
  }
  .lg\:border-right {
    border-right: 1px solid $color_border;
  }
  .lg\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .lg\:border-left {
    border-left: 1px solid $color_border;
  }
}

@media (min-width: 1200px) {
  .xl\:border {
    border: 1px solid $color_border;
  }
  .xl\:border-top {
    border-top: 1px solid $color_border;
  }
  .xl\:border-right {
    border-right: 1px solid $color_border;
  }
  .xl\:border-bottom {
    border-bottom: 1px solid $color_border;
  }
  .xl\:border-left {
    border-left: 1px solid $color_border;
  }
}

.border-transparent {
  border-color: transparent;
}

.border-translucent {
  border-color: rgba(255, 255, 255, 0.1);
}

.border-current {
  border-color: currentColor;
}

.border-note {
  border-color: rgba(80, 109, 255, 1);
}

.border-warning {
  border-color: #ef526e;
}

.border-black {
  border-color: #000;
}

.border-top-black {
  border-top-color: #000;
}

.border-right-black {
  border-right-color: #000;
}

.border-bottom-black {
  border-bottom-color: #000;
}

.border-left-black {
  border-left-color: #000;
}

.border-white {
  border-color: #fff;
}

.border-top-white {
  border-top-color: #fff;
}

.border-right-white {
  border-right-color: #fff;
}

.border-bottom-white {
  border-bottom-color: #fff;
}

.border-left-white {
  border-left-color: #fff;
}

.border-gray-100 {
  border-color: $color_gray_100;
}

.border-top-gray-100 {
  border-top-color: $color_gray_100;
}

.border-right-gray-100 {
  border-right-color: $color_gray_100;
}

.border-bottom-gray-100 {
  border-bottom-color: $color_gray_100;
}

.border-left-gray-100 {
  border-left-color: $color_gray_100;
}

.border-gray-200 {
  border-color: $color_gray_200;
}

.border-top-gray-200 {
  border-top-color: $color_gray_200;
}

.border-right-gray-200 {
  border-right-color: $color_gray_200;
}

.border-bottom-gray-200 {
  border-bottom-color: $color_gray_200;
}

.border-left-gray-200 {
  border-left-color: $color_gray_200;
}

.border-gray-300 {
  border-color: #ebebeb;
}

.border-top-gray-300 {
  border-top-color: #ebebeb;
}

.border-right-gray-300 {
  border-right-color: #ebebeb;
}

.border-bottom-gray-300 {
  border-bottom-color: #ebebeb;
}

.border-left-gray-300 {
  border-left-color: #ebebeb;
}

.border-gray-400 {
  border-color: #EDECE9;
}

.border-top-gray-400 {
  border-top-color: #EDECE9;
}

.border-right-gray-400 {
  border-right-color: #EDECE9;
}

.border-bottom-gray-400 {
  border-bottom-color: #EDECE9;
}

.border-left-gray-400 {
  border-left-color: #EDECE9;
}

.border-gray-500 {
  border-color: #808080;
}

.border-top-gray-500 {
  border-top-color: #808080;
}

.border-right-gray-500 {
  border-right-color: #808080;
}

.border-bottom-gray-500 {
  border-bottom-color: #808080;
}

.border-left-gray-500 {
  border-left-color: #808080;
}

.border-gray-600 {
  border-color: $color_gray_600;
}

.border-top-gray-600 {
  border-top-color: $color_gray_600;
}

.border-right-gray-600 {
  border-right-color: $color_gray_600;
}

.border-bottom-gray-600 {
  border-bottom-color: $color_gray_600;
}

.border-left-gray-600 {
  border-left-color: $color_gray_600;
}

.border-gray-700 {
  border-color: #1a1a1a;
}

.border-top-gray-700 {
  border-top-color: #1a1a1a;
}

.border-right-gray-700 {
  border-right-color: #1a1a1a;
}

.border-bottom-gray-700 {
  border-bottom-color: #1a1a1a;
}

.border-left-gray-700 {
  border-left-color: #1a1a1a;
}

.border-gray-800 {
  border-color: #373635;
}

.border-top-gray-800 {
  border-top-color: #373635;
}

.border-right-gray-800 {
  border-right-color: #373635;
}

.border-bottom-gray-800 {
  border-bottom-color: #373635;
}

.border-left-gray-800 {
  border-left-color: #373635;
}

.border-gray-900 {
  border-color: #1a1a1a;
}

.border-top-gray-900 {
  border-top-color: #1a1a1a;
}

.border-right-gray-900 {
  border-right-color: #1a1a1a;
}

.border-bottom-gray-900 {
  border-bottom-color: #1a1a1a;
}

.border-left-gray-900 {
  border-left-color: #1a1a1a;
}

.border-red-500 {
  border-color: #EA392A;
}

.border-top-red-500 {
  border-top-color: #EA392A;
}

.border-right-red-500 {
  border-right-color: #EA392A;
}

.border-bottom-red-500 {
  border-bottom-color: #EA392A;
}

.border-left-red-500 {
  border-left-color: #EA392A;
}

.border-orange-500 {
  border-color: #FF6F0F;
}

.border-top-orange-500 {
  border-top-color: #FF6F0F;
}

.border-right-orange-500 {
  border-right-color: #FF6F0F;
}

.border-bottom-orange-500 {
  border-bottom-color: #FF6F0F;
}

.border-left-orange-500 {
  border-left-color: #FF6F0F;
}

.border-green-500 {
  border-color: #00AB48;
}

.border-top-green-500 {
  border-top-color: #00AB48;
}

.border-right-green-500 {
  border-right-color: #00AB48;
}

.border-bottom-green-500 {
  border-bottom-color: #00AB48;
}

.border-left-green-500 {
  border-left-color: #00AB48;
}

.border-primary {
  border-color: rgba(25, 28, 32, 1);
}

.border-top-primary {
  border-top-color: rgba(25, 28, 32, 1);
}

.border-right-primary {
  border-right-color: rgba(25, 28, 32, 1);
}

.border-bottom-primary {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.border-left-primary {
  border-left-color: rgba(25, 28, 32, 1);
}

.border-secondary {
  border-color: $color_secondary;
}

.border-top-secondary {
  border-top-color: $color_secondary;
}

.border-right-secondary {
  border-right-color: $color_secondary;
}

.border-bottom-secondary {
  border-bottom-color: $color_secondary;
}

.border-left-secondary {
  border-left-color: $color_secondary;
}

.border-tertiary {
  border-color: $color_tertiary;
}

.border-top-tertiary {
  border-top-color: $color_tertiary;
}

.border-right-tertiary {
  border-right-color: $color_tertiary;
}

.border-bottom-tertiary {
  border-bottom-color: $color_tertiary;
}

.border-left-tertiary {
  border-left-color: $color_tertiary;
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:border-translucent:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.hover\:border-current:hover {
  border-color: currentColor;
}

.hover\:border-black:hover {
  border-color: #000;
}

.hover\:border-top-black:hover {
  border-top-color: #000;
}

.hover\:border-right-black:hover {
  border-right-color: #000;
}

.hover\:border-bottom-black:hover {
  border-bottom-color: #000;
}

.hover\:border-left-black:hover {
  border-left-color: #000;
}

.hover\:border-white:hover {
  border-color: #fff;
}

.hover\:border-top-white:hover {
  border-top-color: #fff;
}

.hover\:border-right-white:hover {
  border-right-color: #fff;
}

.hover\:border-bottom-white:hover {
  border-bottom-color: #fff;
}

.hover\:border-left-white:hover {
  border-left-color: #fff;
}

.hover\:border-gray-100:hover {
  border-color: $color_gray_100;
}

.hover\:border-top-gray-100:hover {
  border-top-color: $color_gray_100;
}

.hover\:border-right-gray-100:hover {
  border-right-color: $color_gray_100;
}

.hover\:border-bottom-gray-100:hover {
  border-bottom-color: $color_gray_100;
}

.hover\:border-left-gray-100:hover {
  border-left-color: $color_gray_100;
}

.hover\:border-gray-200:hover {
  border-color: $color_gray_200;
}

.hover\:border-top-gray-200:hover {
  border-top-color: $color_gray_200;
}

.hover\:border-right-gray-200:hover {
  border-right-color: $color_gray_200;
}

.hover\:border-bottom-gray-200:hover {
  border-bottom-color: $color_gray_200;
}

.hover\:border-left-gray-200:hover {
  border-left-color: $color_gray_200;
}

.hover\:border-gray-300:hover {
  border-color: #ebebeb;
}

.hover\:border-top-gray-300:hover {
  border-top-color: #ebebeb;
}

.hover\:border-right-gray-300:hover {
  border-right-color: #ebebeb;
}

.hover\:border-bottom-gray-300:hover {
  border-bottom-color: #ebebeb;
}

.hover\:border-left-gray-300:hover {
  border-left-color: #ebebeb;
}

.hover\:border-gray-400:hover {
  border-color: #EDECE9;
}

.hover\:border-top-gray-400:hover {
  border-top-color: #EDECE9;
}

.hover\:border-right-gray-400:hover {
  border-right-color: #EDECE9;
}

.hover\:border-bottom-gray-400:hover {
  border-bottom-color: #EDECE9;
}

.hover\:border-left-gray-400:hover {
  border-left-color: #EDECE9;
}

.hover\:border-gray-500:hover {
  border-color: #808080;
}

.hover\:border-top-gray-500:hover {
  border-top-color: #808080;
}

.hover\:border-right-gray-500:hover {
  border-right-color: #808080;
}

.hover\:border-bottom-gray-500:hover {
  border-bottom-color: #808080;
}

.hover\:border-left-gray-500:hover {
  border-left-color: #808080;
}

.hover\:border-gray-600:hover {
  border-color: $color_gray_600;
}

.hover\:border-top-gray-600:hover {
  border-top-color: $color_gray_600;
}

.hover\:border-right-gray-600:hover {
  border-right-color: $color_gray_600;
}

.hover\:border-bottom-gray-600:hover {
  border-bottom-color: $color_gray_600;
}

.hover\:border-left-gray-600:hover {
  border-left-color: $color_gray_600;
}

.hover\:border-gray-700:hover {
  border-color: #1a1a1a;
}

.hover\:border-top-gray-700:hover {
  border-top-color: #1a1a1a;
}

.hover\:border-right-gray-700:hover {
  border-right-color: #1a1a1a;
}

.hover\:border-bottom-gray-700:hover {
  border-bottom-color: #1a1a1a;
}

.hover\:border-left-gray-700:hover {
  border-left-color: #1a1a1a;
}

.hover\:border-gray-800:hover {
  border-color: #373635;
}

.hover\:border-top-gray-800:hover {
  border-top-color: #373635;
}

.hover\:border-right-gray-800:hover {
  border-right-color: #373635;
}

.hover\:border-bottom-gray-800:hover {
  border-bottom-color: #373635;
}

.hover\:border-left-gray-800:hover {
  border-left-color: #373635;
}

.hover\:border-gray-900:hover {
  border-color: #1a1a1a;
}

.hover\:border-top-gray-900:hover {
  border-top-color: #1a1a1a;
}

.hover\:border-right-gray-900:hover {
  border-right-color: #1a1a1a;
}

.hover\:border-bottom-gray-900:hover {
  border-bottom-color: #1a1a1a;
}

.hover\:border-left-gray-900:hover {
  border-left-color: #1a1a1a;
}

.hover\:border-red-500:hover {
  border-color: #EA392A;
}

.hover\:border-top-red-500:hover {
  border-top-color: #EA392A;
}

.hover\:border-right-red-500:hover {
  border-right-color: #EA392A;
}

.hover\:border-bottom-red-500:hover {
  border-bottom-color: #EA392A;
}

.hover\:border-left-red-500:hover {
  border-left-color: #EA392A;
}

.hover\:border-orange-500:hover {
  border-color: #FF6F0F;
}

.hover\:border-top-orange-500:hover {
  border-top-color: #FF6F0F;
}

.hover\:border-right-orange-500:hover {
  border-right-color: #FF6F0F;
}

.hover\:border-bottom-orange-500:hover {
  border-bottom-color: #FF6F0F;
}

.hover\:border-left-orange-500:hover {
  border-left-color: #FF6F0F;
}

.hover\:border-green-500:hover {
  border-color: #00AB48;
}

.hover\:border-top-green-500:hover {
  border-top-color: #00AB48;
}

.hover\:border-right-green-500:hover {
  border-right-color: #00AB48;
}

.hover\:border-bottom-green-500:hover {
  border-bottom-color: #00AB48;
}

.hover\:border-left-green-500:hover {
  border-left-color: #00AB48;
}

.hover\:border-primary:hover {
  border-color: rgba(25, 28, 32, 1);
}

.hover\:border-top-primary:hover {
  border-top-color: rgba(25, 28, 32, 1);
}

.hover\:border-right-primary:hover {
  border-right-color: rgba(25, 28, 32, 1);
}

.hover\:border-bottom-primary:hover {
  border-bottom-color: rgba(25, 28, 32, 1);
}

.hover\:border-left-primary:hover {
  border-left-color: rgba(25, 28, 32, 1);
}

.hover\:border-secondary:hover {
  border-color: $color_secondary;
}

.hover\:border-top-secondary:hover {
  border-top-color: $color_secondary;
}

.hover\:border-right-secondary:hover {
  border-right-color: $color_secondary;
}

.hover\:border-bottom-secondary:hover {
  border-bottom-color: $color_secondary;
}

.hover\:border-left-secondary:hover {
  border-left-color: $color_secondary;
}

.hover\:border-tertiary:hover {
  border-color: $color_tertiary;
}

.hover\:border-top-tertiary:hover {
  border-top-color: $color_tertiary;
}

.hover\:border-right-tertiary:hover {
  border-right-color: $color_tertiary;
}

.hover\:border-bottom-tertiary:hover {
  border-bottom-color: $color_tertiary;
}

.hover\:border-left-tertiary:hover {
  border-left-color: $color_tertiary;
}

@media (min-width: 576px) {
  .sm\:border-transparent {
    border-color: transparent;
  }
  .sm\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .sm\:border-current {
    border-color: currentColor;
  }
  .sm\:border-black {
    border-color: #000;
  }
  .sm\:border-top-black {
    border-top-color: #000;
  }
  .sm\:border-right-black {
    border-right-color: #000;
  }
  .sm\:border-bottom-black {
    border-bottom-color: #000;
  }
  .sm\:border-left-black {
    border-left-color: #000;
  }
  .sm\:border-white {
    border-color: #fff;
  }
  .sm\:border-top-white {
    border-top-color: #fff;
  }
  .sm\:border-right-white {
    border-right-color: #fff;
  }
  .sm\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .sm\:border-left-white {
    border-left-color: #fff;
  }
  .sm\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .sm\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .sm\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .sm\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .sm\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .sm\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .sm\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .sm\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .sm\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .sm\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .sm\:border-gray-300 {
    border-color: #ebebeb;
  }
  .sm\:border-top-gray-300 {
    border-top-color: #ebebeb;
  }
  .sm\:border-right-gray-300 {
    border-right-color: #ebebeb;
  }
  .sm\:border-bottom-gray-300 {
    border-bottom-color: #ebebeb;
  }
  .sm\:border-left-gray-300 {
    border-left-color: #ebebeb;
  }
  .sm\:border-gray-400 {
    border-color: #EDECE9;
  }
  .sm\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .sm\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .sm\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .sm\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .sm\:border-gray-500 {
    border-color: #808080;
  }
  .sm\:border-top-gray-500 {
    border-top-color: #808080;
  }
  .sm\:border-right-gray-500 {
    border-right-color: #808080;
  }
  .sm\:border-bottom-gray-500 {
    border-bottom-color: #808080;
  }
  .sm\:border-left-gray-500 {
    border-left-color: #808080;
  }
  .sm\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .sm\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .sm\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .sm\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .sm\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .sm\:border-gray-700 {
    border-color: #1a1a1a;
  }
  .sm\:border-top-gray-700 {
    border-top-color: #1a1a1a;
  }
  .sm\:border-right-gray-700 {
    border-right-color: #1a1a1a;
  }
  .sm\:border-bottom-gray-700 {
    border-bottom-color: #1a1a1a;
  }
  .sm\:border-left-gray-700 {
    border-left-color: #1a1a1a;
  }
  .sm\:border-gray-800 {
    border-color: #373635;
  }
  .sm\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .sm\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .sm\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .sm\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .sm\:border-gray-900 {
    border-color: #1a1a1a;
  }
  .sm\:border-top-gray-900 {
    border-top-color: #1a1a1a;
  }
  .sm\:border-right-gray-900 {
    border-right-color: #1a1a1a;
  }
  .sm\:border-bottom-gray-900 {
    border-bottom-color: #1a1a1a;
  }
  .sm\:border-left-gray-900 {
    border-left-color: #1a1a1a;
  }
  .sm\:border-red-500 {
    border-color: #EA392A;
  }
  .sm\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .sm\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .sm\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .sm\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .sm\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .sm\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .sm\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .sm\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .sm\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .sm\:border-green-500 {
    border-color: #00AB48;
  }
  .sm\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .sm\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .sm\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .sm\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .sm\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .sm\:border-secondary {
    border-color: $color_secondary;
  }
  .sm\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .sm\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .sm\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .sm\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .sm\:border-tertiary {
    border-color: $color_tertiary;
  }
  .sm\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .sm\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .sm\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .sm\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 768px) {
  .md\:border-transparent {
    border-color: transparent;
  }
  .md\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .md\:border-current {
    border-color: currentColor;
  }
  .md\:border-black {
    border-color: #000;
  }
  .md\:border-top-black {
    border-top-color: #000;
  }
  .md\:border-right-black {
    border-right-color: #000;
  }
  .md\:border-bottom-black {
    border-bottom-color: #000;
  }
  .md\:border-left-black {
    border-left-color: #000;
  }
  .md\:border-white {
    border-color: #fff;
  }
  .md\:border-top-white {
    border-top-color: #fff;
  }
  .md\:border-right-white {
    border-right-color: #fff;
  }
  .md\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .md\:border-left-white {
    border-left-color: #fff;
  }
  .md\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .md\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .md\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .md\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .md\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .md\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .md\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .md\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .md\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .md\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .md\:border-gray-300 {
    border-color: #ebebeb;
  }
  .md\:border-top-gray-300 {
    border-top-color: #ebebeb;
  }
  .md\:border-right-gray-300 {
    border-right-color: #ebebeb;
  }
  .md\:border-bottom-gray-300 {
    border-bottom-color: #ebebeb;
  }
  .md\:border-left-gray-300 {
    border-left-color: #ebebeb;
  }
  .md\:border-gray-400 {
    border-color: #EDECE9;
  }
  .md\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .md\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .md\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .md\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .md\:border-gray-500 {
    border-color: #808080;
  }
  .md\:border-top-gray-500 {
    border-top-color: #808080;
  }
  .md\:border-right-gray-500 {
    border-right-color: #808080;
  }
  .md\:border-bottom-gray-500 {
    border-bottom-color: #808080;
  }
  .md\:border-left-gray-500 {
    border-left-color: #808080;
  }
  .md\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .md\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .md\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .md\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .md\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .md\:border-gray-700 {
    border-color: #1a1a1a;
  }
  .md\:border-top-gray-700 {
    border-top-color: #1a1a1a;
  }
  .md\:border-right-gray-700 {
    border-right-color: #1a1a1a;
  }
  .md\:border-bottom-gray-700 {
    border-bottom-color: #1a1a1a;
  }
  .md\:border-left-gray-700 {
    border-left-color: #1a1a1a;
  }
  .md\:border-gray-800 {
    border-color: #373635;
  }
  .md\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .md\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .md\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .md\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .md\:border-gray-900 {
    border-color: #1a1a1a;
  }
  .md\:border-top-gray-900 {
    border-top-color: #1a1a1a;
  }
  .md\:border-right-gray-900 {
    border-right-color: #1a1a1a;
  }
  .md\:border-bottom-gray-900 {
    border-bottom-color: #1a1a1a;
  }
  .md\:border-left-gray-900 {
    border-left-color: #1a1a1a;
  }
  .md\:border-red-500 {
    border-color: #EA392A;
  }
  .md\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .md\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .md\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .md\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .md\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .md\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .md\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .md\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .md\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .md\:border-green-500 {
    border-color: #00AB48;
  }
  .md\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .md\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .md\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .md\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .md\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .md\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .md\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .md\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .md\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .md\:border-secondary {
    border-color: $color_secondary;
  }
  .md\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .md\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .md\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .md\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .md\:border-tertiary {
    border-color: $color_tertiary;
  }
  .md\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .md\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .md\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .md\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 992px) {
  .lg\:border-transparent {
    border-color: transparent;
  }
  .lg\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .lg\:border-current {
    border-color: currentColor;
  }
  .lg\:border-black {
    border-color: #000;
  }
  .lg\:border-top-black {
    border-top-color: #000;
  }
  .lg\:border-right-black {
    border-right-color: #000;
  }
  .lg\:border-bottom-black {
    border-bottom-color: #000;
  }
  .lg\:border-left-black {
    border-left-color: #000;
  }
  .lg\:border-white {
    border-color: #fff;
  }
  .lg\:border-top-white {
    border-top-color: #fff;
  }
  .lg\:border-right-white {
    border-right-color: #fff;
  }
  .lg\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .lg\:border-left-white {
    border-left-color: #fff;
  }
  .lg\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .lg\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .lg\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .lg\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .lg\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .lg\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .lg\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .lg\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .lg\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .lg\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .lg\:border-gray-300 {
    border-color: #ebebeb;
  }
  .lg\:border-top-gray-300 {
    border-top-color: #ebebeb;
  }
  .lg\:border-right-gray-300 {
    border-right-color: #ebebeb;
  }
  .lg\:border-bottom-gray-300 {
    border-bottom-color: #ebebeb;
  }
  .lg\:border-left-gray-300 {
    border-left-color: #ebebeb;
  }
  .lg\:border-gray-400 {
    border-color: #EDECE9;
  }
  .lg\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .lg\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .lg\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .lg\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .lg\:border-gray-500 {
    border-color: #808080;
  }
  .lg\:border-top-gray-500 {
    border-top-color: #808080;
  }
  .lg\:border-right-gray-500 {
    border-right-color: #808080;
  }
  .lg\:border-bottom-gray-500 {
    border-bottom-color: #808080;
  }
  .lg\:border-left-gray-500 {
    border-left-color: #808080;
  }
  .lg\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .lg\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .lg\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .lg\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .lg\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .lg\:border-gray-700 {
    border-color: #1a1a1a;
  }
  .lg\:border-top-gray-700 {
    border-top-color: #1a1a1a;
  }
  .lg\:border-right-gray-700 {
    border-right-color: #1a1a1a;
  }
  .lg\:border-bottom-gray-700 {
    border-bottom-color: #1a1a1a;
  }
  .lg\:border-left-gray-700 {
    border-left-color: #1a1a1a;
  }
  .lg\:border-gray-800 {
    border-color: #373635;
  }
  .lg\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .lg\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .lg\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .lg\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .lg\:border-gray-900 {
    border-color: #1a1a1a;
  }
  .lg\:border-top-gray-900 {
    border-top-color: #1a1a1a;
  }
  .lg\:border-right-gray-900 {
    border-right-color: #1a1a1a;
  }
  .lg\:border-bottom-gray-900 {
    border-bottom-color: #1a1a1a;
  }
  .lg\:border-left-gray-900 {
    border-left-color: #1a1a1a;
  }
  .lg\:border-red-500 {
    border-color: #EA392A;
  }
  .lg\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .lg\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .lg\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .lg\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .lg\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .lg\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .lg\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .lg\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .lg\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .lg\:border-green-500 {
    border-color: #00AB48;
  }
  .lg\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .lg\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .lg\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .lg\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .lg\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .lg\:border-secondary {
    border-color: $color_secondary;
  }
  .lg\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .lg\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .lg\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .lg\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .lg\:border-tertiary {
    border-color: $color_tertiary;
  }
  .lg\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .lg\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .lg\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .lg\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

@media (min-width: 1200px) {
  .xl\:border-transparent {
    border-color: transparent;
  }
  .xl\:border-translucent {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .xl\:border-current {
    border-color: currentColor;
  }
  .xl\:border-black {
    border-color: #000;
  }
  .xl\:border-top-black {
    border-top-color: #000;
  }
  .xl\:border-right-black {
    border-right-color: #000;
  }
  .xl\:border-bottom-black {
    border-bottom-color: #000;
  }
  .xl\:border-left-black {
    border-left-color: #000;
  }
  .xl\:border-white {
    border-color: #fff;
  }
  .xl\:border-top-white {
    border-top-color: #fff;
  }
  .xl\:border-right-white {
    border-right-color: #fff;
  }
  .xl\:border-bottom-white {
    border-bottom-color: #fff;
  }
  .xl\:border-left-white {
    border-left-color: #fff;
  }
  .xl\:border-gray-100 {
    border-color: $color_gray_100;
  }
  .xl\:border-top-gray-100 {
    border-top-color: $color_gray_100;
  }
  .xl\:border-right-gray-100 {
    border-right-color: $color_gray_100;
  }
  .xl\:border-bottom-gray-100 {
    border-bottom-color: $color_gray_100;
  }
  .xl\:border-left-gray-100 {
    border-left-color: $color_gray_100;
  }
  .xl\:border-gray-200 {
    border-color: $color_gray_200;
  }
  .xl\:border-top-gray-200 {
    border-top-color: $color_gray_200;
  }
  .xl\:border-right-gray-200 {
    border-right-color: $color_gray_200;
  }
  .xl\:border-bottom-gray-200 {
    border-bottom-color: $color_gray_200;
  }
  .xl\:border-left-gray-200 {
    border-left-color: $color_gray_200;
  }
  .xl\:border-gray-300 {
    border-color: #ebebeb;
  }
  .xl\:border-top-gray-300 {
    border-top-color: #ebebeb;
  }
  .xl\:border-right-gray-300 {
    border-right-color: #ebebeb;
  }
  .xl\:border-bottom-gray-300 {
    border-bottom-color: #ebebeb;
  }
  .xl\:border-left-gray-300 {
    border-left-color: #ebebeb;
  }
  .xl\:border-gray-400 {
    border-color: #EDECE9;
  }
  .xl\:border-top-gray-400 {
    border-top-color: #EDECE9;
  }
  .xl\:border-right-gray-400 {
    border-right-color: #EDECE9;
  }
  .xl\:border-bottom-gray-400 {
    border-bottom-color: #EDECE9;
  }
  .xl\:border-left-gray-400 {
    border-left-color: #EDECE9;
  }
  .xl\:border-gray-500 {
    border-color: #808080;
  }
  .xl\:border-top-gray-500 {
    border-top-color: #808080;
  }
  .xl\:border-right-gray-500 {
    border-right-color: #808080;
  }
  .xl\:border-bottom-gray-500 {
    border-bottom-color: #808080;
  }
  .xl\:border-left-gray-500 {
    border-left-color: #808080;
  }
  .xl\:border-gray-600 {
    border-color: $color_gray_600;
  }
  .xl\:border-top-gray-600 {
    border-top-color: $color_gray_600;
  }
  .xl\:border-right-gray-600 {
    border-right-color: $color_gray_600;
  }
  .xl\:border-bottom-gray-600 {
    border-bottom-color: $color_gray_600;
  }
  .xl\:border-left-gray-600 {
    border-left-color: $color_gray_600;
  }
  .xl\:border-gray-700 {
    border-color: #1a1a1a;
  }
  .xl\:border-top-gray-700 {
    border-top-color: #1a1a1a;
  }
  .xl\:border-right-gray-700 {
    border-right-color: #1a1a1a;
  }
  .xl\:border-bottom-gray-700 {
    border-bottom-color: #1a1a1a;
  }
  .xl\:border-left-gray-700 {
    border-left-color: #1a1a1a;
  }
  .xl\:border-gray-800 {
    border-color: #373635;
  }
  .xl\:border-top-gray-800 {
    border-top-color: #373635;
  }
  .xl\:border-right-gray-800 {
    border-right-color: #373635;
  }
  .xl\:border-bottom-gray-800 {
    border-bottom-color: #373635;
  }
  .xl\:border-left-gray-800 {
    border-left-color: #373635;
  }
  .xl\:border-gray-900 {
    border-color: #1a1a1a;
  }
  .xl\:border-top-gray-900 {
    border-top-color: #1a1a1a;
  }
  .xl\:border-right-gray-900 {
    border-right-color: #1a1a1a;
  }
  .xl\:border-bottom-gray-900 {
    border-bottom-color: #1a1a1a;
  }
  .xl\:border-left-gray-900 {
    border-left-color: #1a1a1a;
  }
  .xl\:border-red-500 {
    border-color: #EA392A;
  }
  .xl\:border-top-red-500 {
    border-top-color: #EA392A;
  }
  .xl\:border-right-red-500 {
    border-right-color: #EA392A;
  }
  .xl\:border-bottom-red-500 {
    border-bottom-color: #EA392A;
  }
  .xl\:border-left-red-500 {
    border-left-color: #EA392A;
  }
  .xl\:border-orange-500 {
    border-color: #FF6F0F;
  }
  .xl\:border-top-orange-500 {
    border-top-color: #FF6F0F;
  }
  .xl\:border-right-orange-500 {
    border-right-color: #FF6F0F;
  }
  .xl\:border-bottom-orange-500 {
    border-bottom-color: #FF6F0F;
  }
  .xl\:border-left-orange-500 {
    border-left-color: #FF6F0F;
  }
  .xl\:border-green-500 {
    border-color: #00AB48;
  }
  .xl\:border-top-green-500 {
    border-top-color: #00AB48;
  }
  .xl\:border-right-green-500 {
    border-right-color: #00AB48;
  }
  .xl\:border-bottom-green-500 {
    border-bottom-color: #00AB48;
  }
  .xl\:border-left-green-500 {
    border-left-color: #00AB48;
  }
  .xl\:border-primary {
    border-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-top-primary {
    border-top-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-right-primary {
    border-right-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-bottom-primary {
    border-bottom-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-left-primary {
    border-left-color: rgba(25, 28, 32, 1);
  }
  .xl\:border-secondary {
    border-color: $color_secondary;
  }
  .xl\:border-top-secondary {
    border-top-color: $color_secondary;
  }
  .xl\:border-right-secondary {
    border-right-color: $color_secondary;
  }
  .xl\:border-bottom-secondary {
    border-bottom-color: $color_secondary;
  }
  .xl\:border-left-secondary {
    border-left-color: $color_secondary;
  }
  .xl\:border-tertiary {
    border-color: $color_tertiary;
  }
  .xl\:border-top-tertiary {
    border-top-color: $color_tertiary;
  }
  .xl\:border-right-tertiary {
    border-right-color: $color_tertiary;
  }
  .xl\:border-bottom-tertiary {
    border-bottom-color: $color_tertiary;
  }
  .xl\:border-left-tertiary {
    border-left-color: $color_tertiary;
  }
}

.border-radius {
  border-radius: 4px;
}

.border-radius-0 {
  border-radius: 0;
}

.border-radius-top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.border-radius-right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-radius-bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.border-radius-left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.rounded {
  border-radius: 2rem;
}

.circle {
  border-radius: 50%;
}

@media (min-width: 576px) {
  .sm\:border-radius {
    border-radius: 4px;
  }
  .sm\:border-radius-0 {
    border-radius: 0;
  }
  .sm\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .sm\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .sm\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .sm\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .sm\:rounded {
    border-radius: 2rem;
  }
  .sm\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 768px) {
  .md\:border-radius {
    border-radius: 4px;
  }
  .md\:border-radius-0 {
    border-radius: 0;
  }
  .md\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .md\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .md\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .md\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .md\:rounded {
    border-radius: 2rem;
  }
  .md\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 992px) {
  .lg\:border-radius {
    border-radius: 4px;
  }
  .lg\:border-radius-0 {
    border-radius: 0;
  }
  .lg\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .lg\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .lg\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .lg\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .lg\:rounded {
    border-radius: 2rem;
  }
  .lg\:circle {
    border-radius: 50%;
  }
}

@media (min-width: 1200px) {
  .xl\:border-radius {
    border-radius: 4px;
  }
  .xl\:border-radius-0 {
    border-radius: 0;
  }
  .xl\:border-radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .xl\:border-radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .xl\:border-radius-bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .xl\:border-radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .xl\:rounded {
    border-radius: 2rem;
  }
  .xl\:circle {
    border-radius: 50%;
  }
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}

.border-1 {
  border-width: 1px;
}

.border-top-1 {
  border-top-width: 1px;
}

.border-right-1 {
  border-right-width: 1px;
}

.border-bottom-1 {
  border-bottom-width: 1px;
}

.border-left-1 {
  border-left-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-top-2 {
  border-top-width: 2px;
}

.border-right-2 {
  border-right-width: 2px;
}

.border-bottom-2 {
  border-bottom-width: 2px;
}

.border-left-2 {
  border-left-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-top-3 {
  border-top-width: 3px;
}

.border-right-3 {
  border-right-width: 3px;
}

.border-bottom-3 {
  border-bottom-width: 3px;
}

.border-left-3 {
  border-left-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-top-4 {
  border-top-width: 4px;
}

.border-right-4 {
  border-right-width: 4px;
}

.border-bottom-4 {
  border-bottom-width: 4px;
}

.border-left-4 {
  border-left-width: 4px;
}

.border-0 {
  border-width: 0;
}

.border-top-0 {
  border-top-width: 0;
}

.border-right-0 {
  border-right-width: 0;
}

.border-bottom-0 {
  border-bottom-width: 0;
}

.border-left-0 {
  border-left-width: 0;
}

@media (min-width: 576px) {
  .sm\:border-1 {
    border-width: 1px;
  }
  .sm\:border-top-1 {
    border-top-width: 1px;
  }
  .sm\:border-right-1 {
    border-right-width: 1px;
  }
  .sm\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .sm\:border-left-1 {
    border-left-width: 1px;
  }
  .sm\:border-2 {
    border-width: 2px;
  }
  .sm\:border-top-2 {
    border-top-width: 2px;
  }
  .sm\:border-right-2 {
    border-right-width: 2px;
  }
  .sm\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .sm\:border-left-2 {
    border-left-width: 2px;
  }
  .sm\:border-3 {
    border-width: 3px;
  }
  .sm\:border-top-3 {
    border-top-width: 3px;
  }
  .sm\:border-right-3 {
    border-right-width: 3px;
  }
  .sm\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .sm\:border-left-3 {
    border-left-width: 3px;
  }
  .sm\:border-4 {
    border-width: 4px;
  }
  .sm\:border-top-4 {
    border-top-width: 4px;
  }
  .sm\:border-right-4 {
    border-right-width: 4px;
  }
  .sm\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .sm\:border-left-4 {
    border-left-width: 4px;
  }
  .sm\:border-0 {
    border-width: 0;
  }
  .sm\:border-top-0 {
    border-top-width: 0;
  }
  .sm\:border-right-0 {
    border-right-width: 0;
  }
  .sm\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .sm\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 768px) {
  .md\:border-1 {
    border-width: 1px;
  }
  .md\:border-top-1 {
    border-top-width: 1px;
  }
  .md\:border-right-1 {
    border-right-width: 1px;
  }
  .md\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .md\:border-left-1 {
    border-left-width: 1px;
  }
  .md\:border-2 {
    border-width: 2px;
  }
  .md\:border-top-2 {
    border-top-width: 2px;
  }
  .md\:border-right-2 {
    border-right-width: 2px;
  }
  .md\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .md\:border-left-2 {
    border-left-width: 2px;
  }
  .md\:border-3 {
    border-width: 3px;
  }
  .md\:border-top-3 {
    border-top-width: 3px;
  }
  .md\:border-right-3 {
    border-right-width: 3px;
  }
  .md\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .md\:border-left-3 {
    border-left-width: 3px;
  }
  .md\:border-4 {
    border-width: 4px;
  }
  .md\:border-top-4 {
    border-top-width: 4px;
  }
  .md\:border-right-4 {
    border-right-width: 4px;
  }
  .md\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .md\:border-left-4 {
    border-left-width: 4px;
  }
  .md\:border-0 {
    border-width: 0;
  }
  .md\:border-top-0 {
    border-top-width: 0;
  }
  .md\:border-right-0 {
    border-right-width: 0;
  }
  .md\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .md\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 992px) {
  .lg\:border-1 {
    border-width: 1px;
  }
  .lg\:border-top-1 {
    border-top-width: 1px;
  }
  .lg\:border-right-1 {
    border-right-width: 1px;
  }
  .lg\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .lg\:border-left-1 {
    border-left-width: 1px;
  }
  .lg\:border-2 {
    border-width: 2px;
  }
  .lg\:border-top-2 {
    border-top-width: 2px;
  }
  .lg\:border-right-2 {
    border-right-width: 2px;
  }
  .lg\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .lg\:border-left-2 {
    border-left-width: 2px;
  }
  .lg\:border-3 {
    border-width: 3px;
  }
  .lg\:border-top-3 {
    border-top-width: 3px;
  }
  .lg\:border-right-3 {
    border-right-width: 3px;
  }
  .lg\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .lg\:border-left-3 {
    border-left-width: 3px;
  }
  .lg\:border-4 {
    border-width: 4px;
  }
  .lg\:border-top-4 {
    border-top-width: 4px;
  }
  .lg\:border-right-4 {
    border-right-width: 4px;
  }
  .lg\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .lg\:border-left-4 {
    border-left-width: 4px;
  }
  .lg\:border-0 {
    border-width: 0;
  }
  .lg\:border-top-0 {
    border-top-width: 0;
  }
  .lg\:border-right-0 {
    border-right-width: 0;
  }
  .lg\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .lg\:border-left-0 {
    border-left-width: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:border-1 {
    border-width: 1px;
  }
  .xl\:border-top-1 {
    border-top-width: 1px;
  }
  .xl\:border-right-1 {
    border-right-width: 1px;
  }
  .xl\:border-bottom-1 {
    border-bottom-width: 1px;
  }
  .xl\:border-left-1 {
    border-left-width: 1px;
  }
  .xl\:border-2 {
    border-width: 2px;
  }
  .xl\:border-top-2 {
    border-top-width: 2px;
  }
  .xl\:border-right-2 {
    border-right-width: 2px;
  }
  .xl\:border-bottom-2 {
    border-bottom-width: 2px;
  }
  .xl\:border-left-2 {
    border-left-width: 2px;
  }
  .xl\:border-3 {
    border-width: 3px;
  }
  .xl\:border-top-3 {
    border-top-width: 3px;
  }
  .xl\:border-right-3 {
    border-right-width: 3px;
  }
  .xl\:border-bottom-3 {
    border-bottom-width: 3px;
  }
  .xl\:border-left-3 {
    border-left-width: 3px;
  }
  .xl\:border-4 {
    border-width: 4px;
  }
  .xl\:border-top-4 {
    border-top-width: 4px;
  }
  .xl\:border-right-4 {
    border-right-width: 4px;
  }
  .xl\:border-bottom-4 {
    border-bottom-width: 4px;
  }
  .xl\:border-left-4 {
    border-left-width: 4px;
  }
  .xl\:border-0 {
    border-width: 0;
  }
  .xl\:border-top-0 {
    border-top-width: 0;
  }
  .xl\:border-right-0 {
    border-right-width: 0;
  }
  .xl\:border-bottom-0 {
    border-bottom-width: 0;
  }
  .xl\:border-left-0 {
    border-left-width: 0;
  }
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

@media (min-width: 576px) {
  .sm\:align-content-start {
    align-content: flex-start;
  }
  .sm\:align-content-end {
    align-content: flex-end;
  }
  .sm\:align-content-center {
    align-content: center;
  }
  .sm\:align-content-between {
    align-content: space-between;
  }
  .sm\:align-content-around {
    align-content: space-around;
  }
  .sm\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-content-start {
    align-content: flex-start;
  }
  .md\:align-content-end {
    align-content: flex-end;
  }
  .md\:align-content-center {
    align-content: center;
  }
  .md\:align-content-between {
    align-content: space-between;
  }
  .md\:align-content-around {
    align-content: space-around;
  }
  .md\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-content-start {
    align-content: flex-start;
  }
  .lg\:align-content-end {
    align-content: flex-end;
  }
  .lg\:align-content-center {
    align-content: center;
  }
  .lg\:align-content-between {
    align-content: space-between;
  }
  .lg\:align-content-around {
    align-content: space-around;
  }
  .lg\:align-content-stretch {
    align-content: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-content-start {
    align-content: flex-start;
  }
  .xl\:align-content-end {
    align-content: flex-end;
  }
  .xl\:align-content-center {
    align-content: center;
  }
  .xl\:align-content-between {
    align-content: space-between;
  }
  .xl\:align-content-around {
    align-content: space-around;
  }
  .xl\:align-content-stretch {
    align-content: stretch;
  }
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

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

@media (min-width: 576px) {
  .sm\:align-items-start {
    align-items: flex-start;
  }
  .sm\:align-items-end {
    align-items: flex-end;
  }
  .sm\:align-items-center {
    align-items: center;
  }
  .sm\:align-items-baseline {
    align-items: baseline;
  }
  .sm\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-items-start {
    align-items: flex-start;
  }
  .md\:align-items-end {
    align-items: flex-end;
  }
  .md\:align-items-center {
    align-items: center;
  }
  .md\:align-items-baseline {
    align-items: baseline;
  }
  .md\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-items-start {
    align-items: flex-start;
  }
  .lg\:align-items-end {
    align-items: flex-end;
  }
  .lg\:align-items-center {
    align-items: center;
  }
  .lg\:align-items-baseline {
    align-items: baseline;
  }
  .lg\:align-items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-items-start {
    align-items: flex-start;
  }
  .xl\:align-items-end {
    align-items: flex-end;
  }
  .xl\:align-items-center {
    align-items: center;
  }
  .xl\:align-items-baseline {
    align-items: baseline;
  }
  .xl\:align-items-stretch {
    align-items: stretch;
  }
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

@media (min-width: 576px) {
  .sm\:align-self-auto {
    align-self: auto;
  }
  .sm\:align-self-start {
    align-self: flex-start;
  }
  .sm\:align-self-end {
    align-self: flex-end;
  }
  .sm\:align-self-center {
    align-self: center;
  }
  .sm\:align-self-baseline {
    align-self: baseline;
  }
  .sm\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 768px) {
  .md\:align-self-auto {
    align-self: auto;
  }
  .md\:align-self-start {
    align-self: flex-start;
  }
  .md\:align-self-end {
    align-self: flex-end;
  }
  .md\:align-self-center {
    align-self: center;
  }
  .md\:align-self-baseline {
    align-self: baseline;
  }
  .md\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 992px) {
  .lg\:align-self-auto {
    align-self: auto;
  }
  .lg\:align-self-start {
    align-self: flex-start;
  }
  .lg\:align-self-end {
    align-self: flex-end;
  }
  .lg\:align-self-center {
    align-self: center;
  }
  .lg\:align-self-baseline {
    align-self: baseline;
  }
  .lg\:align-self-stretch {
    align-self: stretch;
  }
}

@media (min-width: 1200px) {
  .xl\:align-self-auto {
    align-self: auto;
  }
  .xl\:align-self-start {
    align-self: flex-start;
  }
  .xl\:align-self-end {
    align-self: flex-end;
  }
  .xl\:align-self-center {
    align-self: center;
  }
  .xl\:align-self-baseline {
    align-self: baseline;
  }
  .xl\:align-self-stretch {
    align-self: stretch;
  }
}

.flex-initial {
  flex: initial;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .sm\:flex-initial {
    flex: initial;
  }
  .sm\:flex-1 {
    flex: 1;
  }
  .sm\:flex-auto {
    flex: auto;
  }
  .sm\:flex-none {
    flex: none;
  }
  .sm\:flex-fill {
    flex: 1 1 auto;
  }
  .sm\:flex-grow {
    flex-grow: 1;
  }
  .sm\:flex-grow-0 {
    flex-grow: 0;
  }
  .sm\:flex-shrink {
    flex-shrink: 1;
  }
  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .md\:flex-initial {
    flex: initial;
  }
  .md\:flex-1 {
    flex: 1;
  }
  .md\:flex-auto {
    flex: auto;
  }
  .md\:flex-none {
    flex: none;
  }
  .md\:flex-fill {
    flex: 1 1 auto;
  }
  .md\:flex-grow {
    flex-grow: 1;
  }
  .md\:flex-grow-0 {
    flex-grow: 0;
  }
  .md\:flex-shrink {
    flex-shrink: 1;
  }
  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 992px) {
  .lg\:flex-initial {
    flex: initial;
  }
  .lg\:flex-1 {
    flex: 1;
  }
  .lg\:flex-auto {
    flex: auto;
  }
  .lg\:flex-none {
    flex: none;
  }
  .lg\:flex-fill {
    flex: 1 1 auto;
  }
  .lg\:flex-grow {
    flex-grow: 1;
  }
  .lg\:flex-grow-0 {
    flex-grow: 0;
  }
  .lg\:flex-shrink {
    flex-shrink: 1;
  }
  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-initial {
    flex: initial;
  }
  .xl\:flex-1 {
    flex: 1;
  }
  .xl\:flex-auto {
    flex: auto;
  }
  .xl\:flex-none {
    flex: none;
  }
  .xl\:flex-fill {
    flex: 1 1 auto;
  }
  .xl\:flex-grow {
    flex-grow: 1;
  }
  .xl\:flex-grow-0 {
    flex-grow: 0;
  }
  .xl\:flex-shrink {
    flex-shrink: 1;
  }
  .xl\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

@media (min-width: 576px) {
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-column {
    flex-direction: column;
  }
  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .sm\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-column {
    flex-direction: column;
  }
  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .md\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 992px) {
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-column {
    flex-direction: column;
  }
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .lg\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-row {
    flex-direction: row;
  }
  .xl\:flex-column {
    flex-direction: column;
  }
  .xl\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .xl\:flex-column-reverse {
    flex-direction: column-reverse;
  }
}

.flex-first {
  order: -1;
}

.flex-last {
  order: 13;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

@media (min-width: 576px) {
  .sm\:flex-first {
    order: -1;
  }
  .sm\:flex-last {
    order: 13;
  }
  .sm\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 768px) {
  .md\:flex-first {
    order: -1;
  }
  .md\:flex-last {
    order: 13;
  }
  .md\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 992px) {
  .lg\:flex-first {
    order: -1;
  }
  .lg\:flex-last {
    order: 13;
  }
  .lg\:order-inherit {
    order: inherit;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-first {
    order: -1;
  }
  .xl\:flex-last {
    order: 13;
  }
  .xl\:order-inherit {
    order: inherit;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

@media (min-width: 576px) {
  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
  .sm\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .sm\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 768px) {
  .md\:flex-wrap {
    flex-wrap: wrap;
  }
  .md\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .md\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 992px) {
  .lg\:flex-wrap {
    flex-wrap: wrap;
  }
  .lg\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .lg\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 1200px) {
  .xl\:flex-wrap {
    flex-wrap: wrap;
  }
  .xl\:flex-no-wrap {
    flex-wrap: nowrap;
  }
  .xl\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

@media (min-width: 576px) {
  .sm\:justify-content-start {
    justify-content: flex-start;
  }
  .sm\:justify-content-end {
    justify-content: flex-end;
  }
  .sm\:justify-content-center {
    justify-content: center;
  }
  .sm\:justify-content-between {
    justify-content: space-between;
  }
  .sm\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 768px) {
  .md\:justify-content-start {
    justify-content: flex-start;
  }
  .md\:justify-content-end {
    justify-content: flex-end;
  }
  .md\:justify-content-center {
    justify-content: center;
  }
  .md\:justify-content-between {
    justify-content: space-between;
  }
  .md\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 992px) {
  .lg\:justify-content-start {
    justify-content: flex-start;
  }
  .lg\:justify-content-end {
    justify-content: flex-end;
  }
  .lg\:justify-content-center {
    justify-content: center;
  }
  .lg\:justify-content-between {
    justify-content: space-between;
  }
  .lg\:justify-content-around {
    justify-content: space-around;
  }
}

@media (min-width: 1200px) {
  .xl\:justify-content-start {
    justify-content: flex-start;
  }
  .xl\:justify-content-end {
    justify-content: flex-end;
  }
  .xl\:justify-content-center {
    justify-content: center;
  }
  .xl\:justify-content-between {
    justify-content: space-between;
  }
  .xl\:justify-content-around {
    justify-content: space-around;
  }
}

.-mt-1px {
  margin-top: -1px;
}

.-mb-1px {
  margin-bottom: -1px;
}

.m-0 {
  margin: 0;
}

.mt-0,
.my-0 {
  margin-top: 0;
}

.mr-0,
.mx-0 {
  margin-right: 0;
}

.mb-0,
.my-0 {
  margin-bottom: 0;
}

.ml-0,
.mx-0 {
  margin-left: 0;
}

.-m-0 {
  margin: 0;
}

.-mt-0,
.-my-0 {
  margin-top: 0;
}

.-mr-0,
.-mx-0 {
  margin-right: 0;
}

.-mb-0,
.-my-0 {
  margin-bottom: 0;
}

.-ml-0,
.-mx-0 {
  margin-left: 0;
}

.m-1 {
  margin: 0.25rem;
}

.mt-2px {
    margin-top: 2px;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem;
}

.-m-1 {
  margin: -0.25rem;
}

.-mt-1,
.-my-1 {
  margin-top: -0.25rem;
}

.-mr-1,
.-mx-1 {
  margin-right: -0.25rem;
}

.-mb-1,
.-my-1 {
  margin-bottom: -0.25rem;
}

.-ml-1,
.-mx-1 {
  margin-left: -0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem;
}

.-m-2 {
  margin: -0.5rem;
}

.-mt-2,
.-my-2 {
  margin-top: -0.5rem;
}

.-mr-2,
.-mx-2 {
  margin-right: -0.5rem;
}

.-mb-2,
.-my-2 {
  margin-bottom: -0.5rem;
}

.-ml-2,
.-mx-2 {
  margin-left: -0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.mt-3,
.my-3 {
  margin-top: 0.75rem;
}

.mr-3,
.mx-3 {
  margin-right: 0.75rem;
}

.mb-3,
.my-3 {
  margin-bottom: 0.75rem;
}

.ml-3,
.mx-3 {
  margin-left: 0.75rem;
}

.-m-3 {
  margin: -0.75rem;
}

.-mt-3,
.-my-3 {
  margin-top: -0.75rem;
}

.-mr-3,
.-mx-3 {
  margin-right: -0.75rem;
}

.-mb-3,
.-my-3 {
  margin-bottom: -0.75rem;
}

.-ml-3,
.-mx-3 {
  margin-left: -0.75rem;
}

.m-4 {
  margin: 1rem;
}

.mt-4,
.my-4 {
  margin-top: 1rem;
}

.mr-4,
.mx-4 {
  margin-right: 1rem;
}

.mb-4,
.my-4 {
  margin-bottom: 1rem;
}

.ml-4,
.mx-4 {
  margin-left: 1rem;
}

.-m-4 {
  margin: -1rem;
}

.-mt-4,
.-my-4 {
  margin-top: -1rem;
}

.-mr-4,
.-mx-4 {
  margin-right: -1rem;
}

.-mb-4,
.-my-4 {
  margin-bottom: -1rem;
}

.-ml-4,
.-mx-4 {
  margin-left: -1rem;
}

.m-5 {
  margin: 1.5rem;
}

.mt-5,
.my-5 {
  margin-top: 1.5rem;
}

.mr-5,
.mx-5 {
  margin-right: 1.5rem;
}

.mb-5,
.my-5 {
  margin-bottom: 1.5rem;
}

.ml-5,
.mx-5 {
  margin-left: 1.5rem;
}

.-m-5 {
  margin: -1.5rem;
}

.-mt-5,
.-my-5 {
  margin-top: -1.5rem;
}

.-mr-5,
.-mx-5 {
  margin-right: -1.5rem;
}

.-mb-5,
.-my-5 {
  margin-bottom: -1.5rem;
}

.-ml-5,
.-mx-5 {
  margin-left: -1.5rem;
}

.m-6 {
  margin: 2rem;
}

.mt-6,
.my-6 {
  margin-top: 2rem;
}

.mr-6,
.mx-6 {
  margin-right: 2rem;
}

.mb-6,
.my-6 {
  margin-bottom: 2rem;
}

.ml-6,
.mx-6 {
  margin-left: 2rem;
}

.-m-6 {
  margin: -2rem;
}

.-mt-6,
.-my-6 {
  margin-top: -2rem;
}

.-mr-6,
.-mx-6 {
  margin-right: -2rem;
}

.-mb-6,
.-my-6 {
  margin-bottom: -2rem;
}

.-ml-6,
.-mx-6 {
  margin-left: -2rem;
}

.m-7 {
  margin: 3rem;
}

.mt-7,
.my-7 {
  margin-top: 3rem;
}

.mr-7,
.mx-7 {
  margin-right: 3rem;
}

.mb-7,
.my-7 {
  margin-bottom: 3rem;
}

.ml-7,
.mx-7 {
  margin-left: 3rem;
}

.-m-7 {
  margin: -3rem;
}

.-mt-7,
.-my-7 {
  margin-top: -3rem;
}

.-mr-7,
.-mx-7 {
  margin-right: -3rem;
}

.-mb-7,
.-my-7 {
  margin-bottom: -3rem;
}

.-ml-7,
.-mx-7 {
  margin-left: -3rem;
}

.m-8 {
  margin: 4rem;
}

.mt-8,
.my-8 {
  margin-top: 4rem;
}

.mr-8,
.mx-8 {
  margin-right: 4rem;
}

.mb-8,
.my-8 {
  margin-bottom: 4rem;
}

.ml-8,
.mx-8 {
  margin-left: 4rem;
}

.-m-8 {
  margin: -4rem;
}

.-mt-8,
.-my-8 {
  margin-top: -4rem;
}

.-mr-8,
.-mx-8 {
  margin-right: -4rem;
}

.-mb-8,
.-my-8 {
  margin-bottom: -4rem;
}

.-ml-8,
.-mx-8 {
  margin-left: -4rem;
}

.m-9 {
  margin: 6rem;
}

.mt-9,
.my-9 {
  margin-top: 6rem;
}

.mr-9,
.mx-9 {
  margin-right: 6rem;
}

.mb-9,
.my-9 {
  margin-bottom: 6rem;
}

.ml-9,
.mx-9 {
  margin-left: 6rem;
}

.-m-9 {
  margin: -6rem;
}

.-mt-9,
.-my-9 {
  margin-top: -6rem;
}

.-mr-9,
.-mx-9 {
  margin-right: -6rem;
}

.-mb-9,
.-my-9 {
  margin-bottom: -6rem;
}

.-ml-9,
.-mx-9 {
  margin-left: -6rem;
}

.m-auto {
  margin: auto;
}

.mt-auto,
.my-auto {
  margin-top: auto;
}

.mr-auto,
.mx-auto {
  margin-right: auto;
}

.mb-auto,
.my-auto {
  margin-bottom: auto;
}

.ml-auto,
.mx-auto {
  margin-left: auto;
}

@media (min-width: 576px) {
  .sm\:m-0 {
    margin: 0;
  }
  .sm\:mt-0,
  .sm\:my-0 {
    margin-top: 0;
  }
  .sm\:mr-0,
  .sm\:mx-0 {
    margin-right: 0;
  }
  .sm\:mb-0,
  .sm\:my-0 {
    margin-bottom: 0;
  }
  .sm\:ml-0,
  .sm\:mx-0 {
    margin-left: 0;
  }
  .sm\:-m-0 {
    margin: 0;
  }
  .sm\:-mt-0,
  .sm\:-my-0 {
    margin-top: 0;
  }
  .sm\:-mr-0,
  .sm\:-mx-0 {
    margin-right: 0;
  }
  .sm\:-mb-0,
  .sm\:-my-0 {
    margin-bottom: 0;
  }
  .sm\:-ml-0,
  .sm\:-mx-0 {
    margin-left: 0;
  }
  .sm\:m-1 {
    margin: 0.25rem;
  }
  .sm\:mt-1,
  .sm\:my-1 {
    margin-top: 0.25rem;
  }
  .sm\:mr-1,
  .sm\:mx-1 {
    margin-right: 0.25rem;
  }
  .sm\:mb-1,
  .sm\:my-1 {
    margin-bottom: 0.25rem;
  }
  .sm\:ml-1,
  .sm\:mx-1 {
    margin-left: 0.25rem;
  }
  .sm\:-m-1 {
    margin: -0.25rem;
  }
  .sm\:-mt-1,
  .sm\:-my-1 {
    margin-top: -0.25rem;
  }
  .sm\:-mr-1,
  .sm\:-mx-1 {
    margin-right: -0.25rem;
  }
  .sm\:-mb-1,
  .sm\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .sm\:-ml-1,
  .sm\:-mx-1 {
    margin-left: -0.25rem;
  }
  .sm\:m-2 {
    margin: 0.5rem;
  }
  .sm\:mt-2,
  .sm\:my-2 {
    margin-top: 0.5rem;
  }
  .sm\:mr-2,
  .sm\:mx-2 {
    margin-right: 0.5rem;
  }
  .sm\:mb-2,
  .sm\:my-2 {
    margin-bottom: 0.5rem;
  }
  .sm\:ml-2,
  .sm\:mx-2 {
    margin-left: 0.5rem;
  }
  .sm\:-m-2 {
    margin: -0.5rem;
  }
  .sm\:-mt-2,
  .sm\:-my-2 {
    margin-top: -0.5rem;
  }
  .sm\:-mr-2,
  .sm\:-mx-2 {
    margin-right: -0.5rem;
  }
  .sm\:-mb-2,
  .sm\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .sm\:-ml-2,
  .sm\:-mx-2 {
    margin-left: -0.5rem;
  }
  .sm\:m-3 {
    margin: 0.75rem;
  }
  .sm\:mt-3,
  .sm\:my-3 {
    margin-top: 0.75rem;
  }
  .sm\:mr-3,
  .sm\:mx-3 {
    margin-right: 0.75rem;
  }
  .sm\:mb-3,
  .sm\:my-3 {
    margin-bottom: 0.75rem;
  }
  .sm\:ml-3,
  .sm\:mx-3 {
    margin-left: 0.75rem;
  }
  .sm\:-m-3 {
    margin: -0.75rem;
  }
  .sm\:-mt-3,
  .sm\:-my-3 {
    margin-top: -0.75rem;
  }
  .sm\:-mr-3,
  .sm\:-mx-3 {
    margin-right: -0.75rem;
  }
  .sm\:-mb-3,
  .sm\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .sm\:-ml-3,
  .sm\:-mx-3 {
    margin-left: -0.75rem;
  }
  .sm\:m-4 {
    margin: 1rem;
  }
  .sm\:mt-4,
  .sm\:my-4 {
    margin-top: 1rem;
  }
  .sm\:mr-4,
  .sm\:mx-4 {
    margin-right: 1rem;
  }
  .sm\:mb-4,
  .sm\:my-4 {
    margin-bottom: 1rem;
  }
  .sm\:ml-4,
  .sm\:mx-4 {
    margin-left: 1rem;
  }
  .sm\:-m-4 {
    margin: -1rem;
  }
  .sm\:-mt-4,
  .sm\:-my-4 {
    margin-top: -1rem;
  }
  .sm\:-mr-4,
  .sm\:-mx-4 {
    margin-right: -1rem;
  }
  .sm\:-mb-4,
  .sm\:-my-4 {
    margin-bottom: -1rem;
  }
  .sm\:-ml-4,
  .sm\:-mx-4 {
    margin-left: -1rem;
  }
  .sm\:m-5 {
    margin: 1.5rem;
  }
  .sm\:mt-5,
  .sm\:my-5 {
    margin-top: 1.5rem;
  }
  .sm\:mr-5,
  .sm\:mx-5 {
    margin-right: 1.5rem;
  }
  .sm\:mb-5,
  .sm\:my-5 {
    margin-bottom: 1.5rem;
  }
  .sm\:ml-5,
  .sm\:mx-5 {
    margin-left: 1.5rem;
  }
  .sm\:-m-5 {
    margin: -1.5rem;
  }
  .sm\:-mt-5,
  .sm\:-my-5 {
    margin-top: -1.5rem;
  }
  .sm\:-mr-5,
  .sm\:-mx-5 {
    margin-right: -1.5rem;
  }
  .sm\:-mb-5,
  .sm\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .sm\:-ml-5,
  .sm\:-mx-5 {
    margin-left: -1.5rem;
  }
  .sm\:m-6 {
    margin: 2rem;
  }
  .sm\:mt-6,
  .sm\:my-6 {
    margin-top: 2rem;
  }
  .sm\:mr-6,
  .sm\:mx-6 {
    margin-right: 2rem;
  }
  .sm\:mb-6,
  .sm\:my-6 {
    margin-bottom: 2rem;
  }
  .sm\:ml-6,
  .sm\:mx-6 {
    margin-left: 2rem;
  }
  .sm\:-m-6 {
    margin: -2rem;
  }
  .sm\:-mt-6,
  .sm\:-my-6 {
    margin-top: -2rem;
  }
  .sm\:-mr-6,
  .sm\:-mx-6 {
    margin-right: -2rem;
  }
  .sm\:-mb-6,
  .sm\:-my-6 {
    margin-bottom: -2rem;
  }
  .sm\:-ml-6,
  .sm\:-mx-6 {
    margin-left: -2rem;
  }
  .sm\:m-7 {
    margin: 3rem;
  }
  .sm\:mt-7,
  .sm\:my-7 {
    margin-top: 3rem;
  }
  .sm\:mr-7,
  .sm\:mx-7 {
    margin-right: 3rem;
  }
  .sm\:mb-7,
  .sm\:my-7 {
    margin-bottom: 3rem;
  }
  .sm\:ml-7,
  .sm\:mx-7 {
    margin-left: 3rem;
  }
  .sm\:-m-7 {
    margin: -3rem;
  }
  .sm\:-mt-7,
  .sm\:-my-7 {
    margin-top: -3rem;
  }
  .sm\:-mr-7,
  .sm\:-mx-7 {
    margin-right: -3rem;
  }
  .sm\:-mb-7,
  .sm\:-my-7 {
    margin-bottom: -3rem;
  }
  .sm\:-ml-7,
  .sm\:-mx-7 {
    margin-left: -3rem;
  }
  .sm\:m-8 {
    margin: 4rem;
  }
  .sm\:mt-8,
  .sm\:my-8 {
    margin-top: 4rem;
  }
  .sm\:mr-8,
  .sm\:mx-8 {
    margin-right: 4rem;
  }
  .sm\:mb-8,
  .sm\:my-8 {
    margin-bottom: 4rem;
  }
  .sm\:ml-8,
  .sm\:mx-8 {
    margin-left: 4rem;
  }
  .sm\:-m-8 {
    margin: -4rem;
  }
  .sm\:-mt-8,
  .sm\:-my-8 {
    margin-top: -4rem;
  }
  .sm\:-mr-8,
  .sm\:-mx-8 {
    margin-right: -4rem;
  }
  .sm\:-mb-8,
  .sm\:-my-8 {
    margin-bottom: -4rem;
  }
  .sm\:-ml-8,
  .sm\:-mx-8 {
    margin-left: -4rem;
  }
  .sm\:m-9 {
    margin: 6rem;
  }
  .sm\:mt-9,
  .sm\:my-9 {
    margin-top: 6rem;
  }
  .sm\:mr-9,
  .sm\:mx-9 {
    margin-right: 6rem;
  }
  .sm\:mb-9,
  .sm\:my-9 {
    margin-bottom: 6rem;
  }
  .sm\:ml-9,
  .sm\:mx-9 {
    margin-left: 6rem;
  }
  .sm\:-m-9 {
    margin: -6rem;
  }
  .sm\:-mt-9,
  .sm\:-my-9 {
    margin-top: -6rem;
  }
  .sm\:-mr-9,
  .sm\:-mx-9 {
    margin-right: -6rem;
  }
  .sm\:-mb-9,
  .sm\:-my-9 {
    margin-bottom: -6rem;
  }
  .sm\:-ml-9,
  .sm\:-mx-9 {
    margin-left: -6rem;
  }
  .sm\:m-auto {
    margin: auto;
  }
  .sm\:mt-auto,
  .sm\:my-auto {
    margin-top: auto;
  }
  .sm\:mr-auto,
  .sm\:mx-auto {
    margin-right: auto;
  }
  .sm\:mb-auto,
  .sm\:my-auto {
    margin-bottom: auto;
  }
  .sm\:ml-auto,
  .sm\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .md\:m-0 {
    margin: 0;
  }
  .md\:mt-0,
  .md\:my-0 {
    margin-top: 0;
  }
  .md\:mr-0,
  .md\:mx-0 {
    margin-right: 0;
  }
  .md\:mb-0,
  .md\:my-0 {
    margin-bottom: 0;
  }
  .md\:ml-0,
  .md\:mx-0 {
    margin-left: 0;
  }
  .md\:-m-0 {
    margin: 0;
  }
  .md\:-mt-0,
  .md\:-my-0 {
    margin-top: 0;
  }
  .md\:-mr-0,
  .md\:-mx-0 {
    margin-right: 0;
  }
  .md\:-mb-0,
  .md\:-my-0 {
    margin-bottom: 0;
  }
  .md\:-ml-0,
  .md\:-mx-0 {
    margin-left: 0;
  }
  .md\:m-1 {
    margin: 0.25rem;
  }
  .md\:mt-1,
  .md\:my-1 {
    margin-top: 0.25rem;
  }
  .md\:mr-1,
  .md\:mx-1 {
    margin-right: 0.25rem;
  }
  .md\:mb-1,
  .md\:my-1 {
    margin-bottom: 0.25rem;
  }
  .md\:ml-1,
  .md\:mx-1 {
    margin-left: 0.25rem;
  }
  .md\:-m-1 {
    margin: -0.25rem;
  }
  .md\:-mt-1,
  .md\:-my-1 {
    margin-top: -0.25rem;
  }
  .md\:-mr-1,
  .md\:-mx-1 {
    margin-right: -0.25rem;
  }
  .md\:-mb-1,
  .md\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .md\:-ml-1,
  .md\:-mx-1 {
    margin-left: -0.25rem;
  }
  .md\:m-2 {
    margin: 0.5rem;
  }
  .md\:mt-2,
  .md\:my-2 {
    margin-top: 0.5rem;
  }
  .md\:mr-2,
  .md\:mx-2 {
    margin-right: 0.5rem;
  }
  .md\:mb-2,
  .md\:my-2 {
    margin-bottom: 0.5rem;
  }
  .md\:ml-2,
  .md\:mx-2 {
    margin-left: 0.5rem;
  }
  .md\:-m-2 {
    margin: -0.5rem;
  }
  .md\:-mt-2,
  .md\:-my-2 {
    margin-top: -0.5rem;
  }
  .md\:-mr-2,
  .md\:-mx-2 {
    margin-right: -0.5rem;
  }
  .md\:-mb-2,
  .md\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .md\:-ml-2,
  .md\:-mx-2 {
    margin-left: -0.5rem;
  }
  .md\:m-3 {
    margin: 0.75rem;
  }
  .md\:mt-3,
  .md\:my-3 {
    margin-top: 0.75rem;
  }
  .md\:mr-3,
  .md\:mx-3 {
    margin-right: 0.75rem;
  }
  .md\:mb-3,
  .md\:my-3 {
    margin-bottom: 0.75rem;
  }
  .md\:ml-3,
  .md\:mx-3 {
    margin-left: 0.75rem;
  }
  .md\:-m-3 {
    margin: -0.75rem;
  }
  .md\:-mt-3,
  .md\:-my-3 {
    margin-top: -0.75rem;
  }
  .md\:-mr-3,
  .md\:-mx-3 {
    margin-right: -0.75rem;
  }
  .md\:-mb-3,
  .md\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .md\:-ml-3,
  .md\:-mx-3 {
    margin-left: -0.75rem;
  }
  .md\:m-4 {
    margin: 1rem;
  }
  .md\:mt-4,
  .md\:my-4 {
    margin-top: 1rem;
  }
  .md\:mr-4,
  .md\:mx-4 {
    margin-right: 1rem;
  }
  .md\:mb-4,
  .md\:my-4 {
    margin-bottom: 1rem;
  }
  .md\:ml-4,
  .md\:mx-4 {
    margin-left: 1rem;
  }
  .md\:-m-4 {
    margin: -1rem;
  }
  .md\:-mt-4,
  .md\:-my-4 {
    margin-top: -1rem;
  }
  .md\:-mr-4,
  .md\:-mx-4 {
    margin-right: -1rem;
  }
  .md\:-mb-4,
  .md\:-my-4 {
    margin-bottom: -1rem;
  }
  .md\:-ml-4,
  .md\:-mx-4 {
    margin-left: -1rem;
  }
  .md\:m-5 {
    margin: 1.5rem;
  }
  .md\:mt-5,
  .md\:my-5 {
    margin-top: 1.5rem;
  }
  .md\:mr-5,
  .md\:mx-5 {
    margin-right: 1.5rem;
  }
  .md\:mb-5,
  .md\:my-5 {
    margin-bottom: 1.5rem;
  }
  .md\:ml-5,
  .md\:mx-5 {
    margin-left: 1.5rem;
  }
  .md\:-m-5 {
    margin: -1.5rem;
  }
  .md\:-mt-5,
  .md\:-my-5 {
    margin-top: -1.5rem;
  }
  .md\:-mr-5,
  .md\:-mx-5 {
    margin-right: -1.5rem;
  }
  .md\:-mb-5,
  .md\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .md\:-ml-5,
  .md\:-mx-5 {
    margin-left: -1.5rem;
  }
  .md\:m-6 {
    margin: 2rem;
  }
  .md\:mt-6,
  .md\:my-6 {
    margin-top: 2rem;
  }
  .md\:mr-6,
  .md\:mx-6 {
    margin-right: 2rem;
  }
  .md\:mb-6,
  .md\:my-6 {
    margin-bottom: 2rem;
  }
  .md\:ml-6,
  .md\:mx-6 {
    margin-left: 2rem;
  }
  .md\:-m-6 {
    margin: -2rem;
  }
  .md\:-mt-6,
  .md\:-my-6 {
    margin-top: -2rem;
  }
  .md\:-mr-6,
  .md\:-mx-6 {
    margin-right: -2rem;
  }
  .md\:-mb-6,
  .md\:-my-6 {
    margin-bottom: -2rem;
  }
  .md\:-ml-6,
  .md\:-mx-6 {
    margin-left: -2rem;
  }
  .md\:m-7 {
    margin: 3rem;
  }
  .md\:mt-7,
  .md\:my-7 {
    margin-top: 3rem;
  }
  .md\:mr-7,
  .md\:mx-7 {
    margin-right: 3rem;
  }
  .md\:mb-7,
  .md\:my-7 {
    margin-bottom: 3rem;
  }
  .md\:ml-7,
  .md\:mx-7 {
    margin-left: 3rem;
  }
  .md\:-m-7 {
    margin: -3rem;
  }
  .md\:-mt-7,
  .md\:-my-7 {
    margin-top: -3rem;
  }
  .md\:-mr-7,
  .md\:-mx-7 {
    margin-right: -3rem;
  }
  .md\:-mb-7,
  .md\:-my-7 {
    margin-bottom: -3rem;
  }
  .md\:-ml-7,
  .md\:-mx-7 {
    margin-left: -3rem;
  }
  .md\:m-8 {
    margin: 4rem;
  }
  .md\:mt-8,
  .md\:my-8 {
    margin-top: 4rem;
  }
  .md\:mr-8,
  .md\:mx-8 {
    margin-right: 4rem;
  }
  .md\:mb-8,
  .md\:my-8 {
    margin-bottom: 4rem;
  }
  .md\:ml-8,
  .md\:mx-8 {
    margin-left: 4rem;
  }
  .md\:-m-8 {
    margin: -4rem;
  }
  .md\:-mt-8,
  .md\:-my-8 {
    margin-top: -4rem;
  }
  .md\:-mr-8,
  .md\:-mx-8 {
    margin-right: -4rem;
  }
  .md\:-mb-8,
  .md\:-my-8 {
    margin-bottom: -4rem;
  }
  .md\:-ml-8,
  .md\:-mx-8 {
    margin-left: -4rem;
  }
  .md\:m-9 {
    margin: 6rem;
  }
  .md\:mt-9,
  .md\:my-9 {
    margin-top: 6rem;
  }
  .md\:mr-9,
  .md\:mx-9 {
    margin-right: 6rem;
  }
  .md\:mb-9,
  .md\:my-9 {
    margin-bottom: 6rem;
  }
  .md\:ml-9,
  .md\:mx-9 {
    margin-left: 6rem;
  }
  .md\:-m-9 {
    margin: -6rem;
  }
  .md\:-mt-9,
  .md\:-my-9 {
    margin-top: -6rem;
  }
  .md\:-mr-9,
  .md\:-mx-9 {
    margin-right: -6rem;
  }
  .md\:-mb-9,
  .md\:-my-9 {
    margin-bottom: -6rem;
  }
  .md\:-ml-9,
  .md\:-mx-9 {
    margin-left: -6rem;
  }
  .md\:m-auto {
    margin: auto;
  }
  .md\:mt-auto,
  .md\:my-auto {
    margin-top: auto;
  }
  .md\:mr-auto,
  .md\:mx-auto {
    margin-right: auto;
  }
  .md\:mb-auto,
  .md\:my-auto {
    margin-bottom: auto;
  }
  .md\:ml-auto,
  .md\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .lg\:m-0 {
    margin: 0;
  }
  .lg\:mt-0,
  .lg\:my-0 {
    margin-top: 0;
  }
  .lg\:mr-0,
  .lg\:mx-0 {
    margin-right: 0;
  }
  .lg\:mb-0,
  .lg\:my-0 {
    margin-bottom: 0;
  }
  .lg\:ml-0,
  .lg\:mx-0 {
    margin-left: 0;
  }
  .lg\:-m-0 {
    margin: 0;
  }
  .lg\:-mt-0,
  .lg\:-my-0 {
    margin-top: 0;
  }
  .lg\:-mr-0,
  .lg\:-mx-0 {
    margin-right: 0;
  }
  .lg\:-mb-0,
  .lg\:-my-0 {
    margin-bottom: 0;
  }
  .lg\:-ml-0,
  .lg\:-mx-0 {
    margin-left: 0;
  }
  .lg\:m-1 {
    margin: 0.25rem;
  }
  .lg\:mt-1,
  .lg\:my-1 {
    margin-top: 0.25rem;
  }
  .lg\:mr-1,
  .lg\:mx-1 {
    margin-right: 0.25rem;
  }
  .lg\:mb-1,
  .lg\:my-1 {
    margin-bottom: 0.25rem;
  }
  .lg\:ml-1,
  .lg\:mx-1 {
    margin-left: 0.25rem;
  }
  .lg\:-m-1 {
    margin: -0.25rem;
  }
  .lg\:-mt-1,
  .lg\:-my-1 {
    margin-top: -0.25rem;
  }
  .lg\:-mr-1,
  .lg\:-mx-1 {
    margin-right: -0.25rem;
  }
  .lg\:-mb-1,
  .lg\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .lg\:-ml-1,
  .lg\:-mx-1 {
    margin-left: -0.25rem;
  }
  .lg\:m-2 {
    margin: 0.5rem;
  }
  .lg\:mt-2,
  .lg\:my-2 {
    margin-top: 0.5rem;
  }
  .lg\:mr-2,
  .lg\:mx-2 {
    margin-right: 0.5rem;
  }
  .lg\:mb-2,
  .lg\:my-2 {
    margin-bottom: 0.5rem;
  }
  .lg\:ml-2,
  .lg\:mx-2 {
    margin-left: 0.5rem;
  }
  .lg\:-m-2 {
    margin: -0.5rem;
  }
  .lg\:-mt-2,
  .lg\:-my-2 {
    margin-top: -0.5rem;
  }
  .lg\:-mr-2,
  .lg\:-mx-2 {
    margin-right: -0.5rem;
  }
  .lg\:-mb-2,
  .lg\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .lg\:-ml-2,
  .lg\:-mx-2 {
    margin-left: -0.5rem;
  }
  .lg\:m-3 {
    margin: 0.75rem;
  }
  .lg\:mt-3,
  .lg\:my-3 {
    margin-top: 0.75rem;
  }
  .lg\:mr-3,
  .lg\:mx-3 {
    margin-right: 0.75rem;
  }
  .lg\:mb-3,
  .lg\:my-3 {
    margin-bottom: 0.75rem;
  }
  .lg\:ml-3,
  .lg\:mx-3 {
    margin-left: 0.75rem;
  }
  .lg\:-m-3 {
    margin: -0.75rem;
  }
  .lg\:-mt-3,
  .lg\:-my-3 {
    margin-top: -0.75rem;
  }
  .lg\:-mr-3,
  .lg\:-mx-3 {
    margin-right: -0.75rem;
  }
  .lg\:-mb-3,
  .lg\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .lg\:-ml-3,
  .lg\:-mx-3 {
    margin-left: -0.75rem;
  }
  .lg\:m-4 {
    margin: 1rem;
  }
  .lg\:mt-4,
  .lg\:my-4 {
    margin-top: 1rem;
  }
  .lg\:mr-4,
  .lg\:mx-4 {
    margin-right: 1rem;
  }
  .lg\:mb-4,
  .lg\:my-4 {
    margin-bottom: 1rem;
  }
  .lg\:ml-4,
  .lg\:mx-4 {
    margin-left: 1rem;
  }
  .lg\:-m-4 {
    margin: -1rem;
  }
  .lg\:-mt-4,
  .lg\:-my-4 {
    margin-top: -1rem;
  }
  .lg\:-mr-4,
  .lg\:-mx-4 {
    margin-right: -1rem;
  }
  .lg\:-mb-4,
  .lg\:-my-4 {
    margin-bottom: -1rem;
  }
  .lg\:-ml-4,
  .lg\:-mx-4 {
    margin-left: -1rem;
  }
  .lg\:m-5 {
    margin: 1.5rem;
  }
  .lg\:mt-5,
  .lg\:my-5 {
    margin-top: 1.5rem;
  }
  .lg\:mr-5,
  .lg\:mx-5 {
    margin-right: 1.5rem;
  }
  .lg\:mb-5,
  .lg\:my-5 {
    margin-bottom: 1.5rem;
  }
  .lg\:ml-5,
  .lg\:mx-5 {
    margin-left: 1.5rem;
  }
  .lg\:-m-5 {
    margin: -1.5rem;
  }
  .lg\:-mt-5,
  .lg\:-my-5 {
    margin-top: -1.5rem;
  }
  .lg\:-mr-5,
  .lg\:-mx-5 {
    margin-right: -1.5rem;
  }
  .lg\:-mb-5,
  .lg\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .lg\:-ml-5,
  .lg\:-mx-5 {
    margin-left: -1.5rem;
  }
  .lg\:m-6 {
    margin: 2rem;
  }
  .lg\:mt-6,
  .lg\:my-6 {
    margin-top: 2rem;
  }
  .lg\:mr-6,
  .lg\:mx-6 {
    margin-right: 2rem;
  }
  .lg\:mb-6,
  .lg\:my-6 {
    margin-bottom: 2rem;
  }
  .lg\:ml-6,
  .lg\:mx-6 {
    margin-left: 2rem;
  }
  .lg\:-m-6 {
    margin: -2rem;
  }
  .lg\:-mt-6,
  .lg\:-my-6 {
    margin-top: -2rem;
  }
  .lg\:-mr-6,
  .lg\:-mx-6 {
    margin-right: -2rem;
  }
  .lg\:-mb-6,
  .lg\:-my-6 {
    margin-bottom: -2rem;
  }
  .lg\:-ml-6,
  .lg\:-mx-6 {
    margin-left: -2rem;
  }
  .lg\:m-7 {
    margin: 3rem;
  }
  .lg\:mt-7,
  .lg\:my-7 {
    margin-top: 3rem;
  }
  .lg\:mr-7,
  .lg\:mx-7 {
    margin-right: 3rem;
  }
  .lg\:mb-7,
  .lg\:my-7 {
    margin-bottom: 3rem;
  }
  .lg\:ml-7,
  .lg\:mx-7 {
    margin-left: 3rem;
  }
  .lg\:-m-7 {
    margin: -3rem;
  }
  .lg\:-mt-7,
  .lg\:-my-7 {
    margin-top: -3rem;
  }
  .lg\:-mr-7,
  .lg\:-mx-7 {
    margin-right: -3rem;
  }
  .lg\:-mb-7,
  .lg\:-my-7 {
    margin-bottom: -3rem;
  }
  .lg\:-ml-7,
  .lg\:-mx-7 {
    margin-left: -3rem;
  }
  .lg\:m-8 {
    margin: 4rem;
  }
  .lg\:mt-8,
  .lg\:my-8 {
    margin-top: 4rem;
  }
  .lg\:mr-8,
  .lg\:mx-8 {
    margin-right: 4rem;
  }
  .lg\:mb-8,
  .lg\:my-8 {
    margin-bottom: 4rem;
  }
  .lg\:ml-8,
  .lg\:mx-8 {
    margin-left: 4rem;
  }
  .lg\:-m-8 {
    margin: -4rem;
  }
  .lg\:-mt-8,
  .lg\:-my-8 {
    margin-top: -4rem;
  }
  .lg\:-mr-8,
  .lg\:-mx-8 {
    margin-right: -4rem;
  }
  .lg\:-mb-8,
  .lg\:-my-8 {
    margin-bottom: -4rem;
  }
  .lg\:-ml-8,
  .lg\:-mx-8 {
    margin-left: -4rem;
  }
  .lg\:m-9 {
    margin: 6rem;
  }
  .lg\:mt-9,
  .lg\:my-9 {
    margin-top: 6rem;
  }
  .lg\:mr-9,
  .lg\:mx-9 {
    margin-right: 6rem;
  }
  .lg\:mb-9,
  .lg\:my-9 {
    margin-bottom: 6rem;
  }
  .lg\:ml-9,
  .lg\:mx-9 {
    margin-left: 6rem;
  }
  .lg\:-m-9 {
    margin: -6rem;
  }
  .lg\:-mt-9,
  .lg\:-my-9 {
    margin-top: -6rem;
  }
  .lg\:-mr-9,
  .lg\:-mx-9 {
    margin-right: -6rem;
  }
  .lg\:-mb-9,
  .lg\:-my-9 {
    margin-bottom: -6rem;
  }
  .lg\:-ml-9,
  .lg\:-mx-9 {
    margin-left: -6rem;
  }
  .lg\:m-auto {
    margin: auto;
  }
  .lg\:mt-auto,
  .lg\:my-auto {
    margin-top: auto;
  }
  .lg\:mr-auto,
  .lg\:mx-auto {
    margin-right: auto;
  }
  .lg\:mb-auto,
  .lg\:my-auto {
    margin-bottom: auto;
  }
  .lg\:ml-auto,
  .lg\:mx-auto {
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .xl\:m-0 {
    margin: 0;
  }
  .xl\:mt-0,
  .xl\:my-0 {
    margin-top: 0;
  }
  .xl\:mr-0,
  .xl\:mx-0 {
    margin-right: 0;
  }
  .xl\:mb-0,
  .xl\:my-0 {
    margin-bottom: 0;
  }
  .xl\:ml-0,
  .xl\:mx-0 {
    margin-left: 0;
  }
  .xl\:-m-0 {
    margin: 0;
  }
  .xl\:-mt-0,
  .xl\:-my-0 {
    margin-top: 0;
  }
  .xl\:-mr-0,
  .xl\:-mx-0 {
    margin-right: 0;
  }
  .xl\:-mb-0,
  .xl\:-my-0 {
    margin-bottom: 0;
  }
  .xl\:-ml-0,
  .xl\:-mx-0 {
    margin-left: 0;
  }
  .xl\:m-1 {
    margin: 0.25rem;
  }
  .xl\:mt-1,
  .xl\:my-1 {
    margin-top: 0.25rem;
  }
  .xl\:mr-1,
  .xl\:mx-1 {
    margin-right: 0.25rem;
  }
  .xl\:mb-1,
  .xl\:my-1 {
    margin-bottom: 0.25rem;
  }
  .xl\:ml-1,
  .xl\:mx-1 {
    margin-left: 0.25rem;
  }
  .xl\:-m-1 {
    margin: -0.25rem;
  }
  .xl\:-mt-1,
  .xl\:-my-1 {
    margin-top: -0.25rem;
  }
  .xl\:-mr-1,
  .xl\:-mx-1 {
    margin-right: -0.25rem;
  }
  .xl\:-mb-1,
  .xl\:-my-1 {
    margin-bottom: -0.25rem;
  }
  .xl\:-ml-1,
  .xl\:-mx-1 {
    margin-left: -0.25rem;
  }
  .xl\:m-2 {
    margin: 0.5rem;
  }
  .xl\:mt-2,
  .xl\:my-2 {
    margin-top: 0.5rem;
  }
  .xl\:mr-2,
  .xl\:mx-2 {
    margin-right: 0.5rem;
  }
  .xl\:mb-2,
  .xl\:my-2 {
    margin-bottom: 0.5rem;
  }
  .xl\:ml-2,
  .xl\:mx-2 {
    margin-left: 0.5rem;
  }
  .xl\:-m-2 {
    margin: -0.5rem;
  }
  .xl\:-mt-2,
  .xl\:-my-2 {
    margin-top: -0.5rem;
  }
  .xl\:-mr-2,
  .xl\:-mx-2 {
    margin-right: -0.5rem;
  }
  .xl\:-mb-2,
  .xl\:-my-2 {
    margin-bottom: -0.5rem;
  }
  .xl\:-ml-2,
  .xl\:-mx-2 {
    margin-left: -0.5rem;
  }
  .xl\:m-3 {
    margin: 0.75rem;
  }
  .xl\:mt-3,
  .xl\:my-3 {
    margin-top: 0.75rem;
  }
  .xl\:mr-3,
  .xl\:mx-3 {
    margin-right: 0.75rem;
  }
  .xl\:mb-3,
  .xl\:my-3 {
    margin-bottom: 0.75rem;
  }
  .xl\:ml-3,
  .xl\:mx-3 {
    margin-left: 0.75rem;
  }
  .xl\:-m-3 {
    margin: -0.75rem;
  }
  .xl\:-mt-3,
  .xl\:-my-3 {
    margin-top: -0.75rem;
  }
  .xl\:-mr-3,
  .xl\:-mx-3 {
    margin-right: -0.75rem;
  }
  .xl\:-mb-3,
  .xl\:-my-3 {
    margin-bottom: -0.75rem;
  }
  .xl\:-ml-3,
  .xl\:-mx-3 {
    margin-left: -0.75rem;
  }
  .xl\:m-4 {
    margin: 1rem;
  }
  .xl\:mt-4,
  .xl\:my-4 {
    margin-top: 1rem;
  }
  .xl\:mr-4,
  .xl\:mx-4 {
    margin-right: 1rem;
  }
  .xl\:mb-4,
  .xl\:my-4 {
    margin-bottom: 1rem;
  }
  .xl\:ml-4,
  .xl\:mx-4 {
    margin-left: 1rem;
  }
  .xl\:-m-4 {
    margin: -1rem;
  }
  .xl\:-mt-4,
  .xl\:-my-4 {
    margin-top: -1rem;
  }
  .xl\:-mr-4,
  .xl\:-mx-4 {
    margin-right: -1rem;
  }
  .xl\:-mb-4,
  .xl\:-my-4 {
    margin-bottom: -1rem;
  }
  .xl\:-ml-4,
  .xl\:-mx-4 {
    margin-left: -1rem;
  }
  .xl\:m-5 {
    margin: 1.5rem;
  }
  .xl\:mt-5,
  .xl\:my-5 {
    margin-top: 1.5rem;
  }
  .xl\:mr-5,
  .xl\:mx-5 {
    margin-right: 1.5rem;
  }
  .xl\:mb-5,
  .xl\:my-5 {
    margin-bottom: 1.5rem;
  }
  .xl\:ml-5,
  .xl\:mx-5 {
    margin-left: 1.5rem;
  }
  .xl\:-m-5 {
    margin: -1.5rem;
  }
  .xl\:-mt-5,
  .xl\:-my-5 {
    margin-top: -1.5rem;
  }
  .xl\:-mr-5,
  .xl\:-mx-5 {
    margin-right: -1.5rem;
  }
  .xl\:-mb-5,
  .xl\:-my-5 {
    margin-bottom: -1.5rem;
  }
  .xl\:-ml-5,
  .xl\:-mx-5 {
    margin-left: -1.5rem;
  }
  .xl\:m-6 {
    margin: 2rem;
  }
  .xl\:mt-6,
  .xl\:my-6 {
    margin-top: 2rem;
  }
  .xl\:mr-6,
  .xl\:mx-6 {
    margin-right: 2rem;
  }
  .xl\:mb-6,
  .xl\:my-6 {
    margin-bottom: 2rem;
  }
  .xl\:ml-6,
  .xl\:mx-6 {
    margin-left: 2rem;
  }
  .xl\:-m-6 {
    margin: -2rem;
  }
  .xl\:-mt-6,
  .xl\:-my-6 {
    margin-top: -2rem;
  }
  .xl\:-mr-6,
  .xl\:-mx-6 {
    margin-right: -2rem;
  }
  .xl\:-mb-6,
  .xl\:-my-6 {
    margin-bottom: -2rem;
  }
  .xl\:-ml-6,
  .xl\:-mx-6 {
    margin-left: -2rem;
  }
  .xl\:m-7 {
    margin: 3rem;
  }
  .xl\:mt-7,
  .xl\:my-7 {
    margin-top: 3rem;
  }
  .xl\:mr-7,
  .xl\:mx-7 {
    margin-right: 3rem;
  }
  .xl\:mb-7,
  .xl\:my-7 {
    margin-bottom: 3rem;
  }
  .xl\:ml-7,
  .xl\:mx-7 {
    margin-left: 3rem;
  }
  .xl\:-m-7 {
    margin: -3rem;
  }
  .xl\:-mt-7,
  .xl\:-my-7 {
    margin-top: -3rem;
  }
  .xl\:-mr-7,
  .xl\:-mx-7 {
    margin-right: -3rem;
  }
  .xl\:-mb-7,
  .xl\:-my-7 {
    margin-bottom: -3rem;
  }
  .xl\:-ml-7,
  .xl\:-mx-7 {
    margin-left: -3rem;
  }
  .xl\:m-8 {
    margin: 4rem;
  }
  .xl\:mt-8,
  .xl\:my-8 {
    margin-top: 4rem;
  }
  .xl\:mr-8,
  .xl\:mx-8 {
    margin-right: 4rem;
  }
  .xl\:mb-8,
  .xl\:my-8 {
    margin-bottom: 4rem;
  }
  .xl\:ml-8,
  .xl\:mx-8 {
    margin-left: 4rem;
  }
  .xl\:-m-8 {
    margin: -4rem;
  }
  .xl\:-mt-8,
  .xl\:-my-8 {
    margin-top: -4rem;
  }
  .xl\:-mr-8,
  .xl\:-mx-8 {
    margin-right: -4rem;
  }
  .xl\:-mb-8,
  .xl\:-my-8 {
    margin-bottom: -4rem;
  }
  .xl\:-ml-8,
  .xl\:-mx-8 {
    margin-left: -4rem;
  }
  .xl\:m-9 {
    margin: 6rem;
  }
  .xl\:mt-9,
  .xl\:my-9 {
    margin-top: 6rem;
  }
  .xl\:mr-9,
  .xl\:mx-9 {
    margin-right: 6rem;
  }
  .xl\:mb-9,
  .xl\:my-9 {
    margin-bottom: 6rem;
  }
  .xl\:ml-9,
  .xl\:mx-9 {
    margin-left: 6rem;
  }
  .xl\:-m-9 {
    margin: -6rem;
  }
  .xl\:-mt-9,
  .xl\:-my-9 {
    margin-top: -6rem;
  }
  .xl\:-mr-9,
  .xl\:-mx-9 {
    margin-right: -6rem;
  }
  .xl\:-mb-9,
  .xl\:-my-9 {
    margin-bottom: -6rem;
  }
  .xl\:-ml-9,
  .xl\:-mx-9 {
    margin-left: -6rem;
  }
  .xl\:m-auto {
    margin: auto;
  }
  .xl\:mt-auto,
  .xl\:my-auto {
    margin-top: auto;
  }
  .xl\:mr-auto,
  .xl\:mx-auto {
    margin-right: auto;
  }
  .xl\:mb-auto,
  .xl\:my-auto {
    margin-bottom: auto;
  }
  .xl\:ml-auto,
  .xl\:mx-auto {
    margin-left: auto;
  }
}

.p-0 {
  padding: 0;
}

.pt-0,
.py-0 {
  padding-top: 0;
}

.pr-0,
.px-0 {
  padding-right: 0;
}

.pb-0,
.py-0 {
  padding-bottom: 0;
}

.pl-0,
.px-0 {
  padding-left: 0;
}

.p-1 {
  padding: 0.25rem;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.pt-3,
.py-3 {
  padding-top: 0.75rem;
}

.pr-3,
.px-3 {
  padding-right: 0.75rem;
}

.pb-3,
.py-3 {
  padding-bottom: 0.75rem;
}

.pl-3,
.px-3 {
  padding-left: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.pt-4,
.py-4 {
  padding-top: 1rem;
}

.pr-4,
.px-4 {
  padding-right: 1rem;
}

.pb-4,
.py-4 {
  padding-bottom: 1rem;
}

.pl-4,
.px-4 {
  padding-left: 1rem;
}

.p-5 {
  padding: 1.5rem;
}

.pt-5,
.py-5 {
  padding-top: 1.5rem;
}

.pr-5,
.px-5 {
  padding-right: 1.5rem;
}

.pb-5,
.py-5 {
  padding-bottom: 1.5rem;
}

.pl-5,
.px-5 {
  padding-left: 1.5rem;
}

.p-6 {
  padding: 2rem;
}

.pt-6,
.py-6 {
  padding-top: 2rem;
}

.pr-6,
.px-6 {
  padding-right: 2rem;
}

.pb-6,
.py-6 {
  padding-bottom: 2rem;
}

.pl-6,
.px-6 {
  padding-left: 2rem;
}

.p-7 {
  padding: 3rem;
}

.pt-7,
.py-7 {
  padding-top: 3rem;
}

.pr-7,
.px-7 {
  padding-right: 3rem;
}

.pb-7,
.py-7 {
  padding-bottom: 3rem;
}

.pl-7,
.px-7 {
  padding-left: 3rem;
}

.p-8 {
  padding: 4rem;
}

.pt-8,
.py-8 {
  padding-top: 4rem;
}

.pr-8,
.px-8 {
  padding-right: 4rem;
}

.pb-8,
.py-8 {
  padding-bottom: 4rem;
}

.pl-8,
.px-8 {
  padding-left: 4rem;
}

.p-9 {
  padding: 6rem;
}

.pt-9,
.py-9 {
  padding-top: 6rem;
}

.pr-9,
.px-9 {
  padding-right: 6rem;
}

.pb-9,
.py-9 {
  padding-bottom: 6rem;
}

.pl-9,
.px-9 {
  padding-left: 6rem;
}

@media (min-width: 576px) {
  .sm\:p-0 {
    padding: 0;
  }
  .sm\:pt-0,
  .sm\:py-0 {
    padding-top: 0;
  }
  .sm\:pr-0,
  .sm\:px-0 {
    padding-right: 0;
  }
  .sm\:pb-0,
  .sm\:py-0 {
    padding-bottom: 0;
  }
  .sm\:pl-0,
  .sm\:px-0 {
    padding-left: 0;
  }
  .sm\:p-1 {
    padding: 0.25rem;
  }
  .sm\:pt-1,
  .sm\:py-1 {
    padding-top: 0.25rem;
  }
  .sm\:pr-1,
  .sm\:px-1 {
    padding-right: 0.25rem;
  }
  .sm\:pb-1,
  .sm\:py-1 {
    padding-bottom: 0.25rem;
  }
  .sm\:pl-1,
  .sm\:px-1 {
    padding-left: 0.25rem;
  }
  .sm\:p-2 {
    padding: 0.5rem;
  }
  .sm\:pt-2,
  .sm\:py-2 {
    padding-top: 0.5rem;
  }
  .sm\:pr-2,
  .sm\:px-2 {
    padding-right: 0.5rem;
  }
  .sm\:pb-2,
  .sm\:py-2 {
    padding-bottom: 0.5rem;
  }
  .sm\:pl-2,
  .sm\:px-2 {
    padding-left: 0.5rem;
  }
  .sm\:p-3 {
    padding: 0.75rem;
  }
  .sm\:pt-3,
  .sm\:py-3 {
    padding-top: 0.75rem;
  }
  .sm\:pr-3,
  .sm\:px-3 {
    padding-right: 0.75rem;
  }
  .sm\:pb-3,
  .sm\:py-3 {
    padding-bottom: 0.75rem;
  }
  .sm\:pl-3,
  .sm\:px-3 {
    padding-left: 0.75rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:pt-4,
  .sm\:py-4 {
    padding-top: 1rem;
  }
  .sm\:pr-4,
  .sm\:px-4 {
    padding-right: 1rem;
  }
  .sm\:pb-4,
  .sm\:py-4 {
    padding-bottom: 1rem;
  }
  .sm\:pl-4,
  .sm\:px-4 {
    padding-left: 1rem;
  }
  .sm\:p-5 {
    padding: 1.5rem;
  }
  .sm\:pt-5,
  .sm\:py-5 {
    padding-top: 1.5rem;
  }
  .sm\:pr-5,
  .sm\:px-5 {
    padding-right: 1.5rem;
  }
  .sm\:pb-5,
  .sm\:py-5 {
    padding-bottom: 1.5rem;
  }
  .sm\:pl-5,
  .sm\:px-5 {
    padding-left: 1.5rem;
  }
  .sm\:p-6 {
    padding: 2rem;
  }
  .sm\:pt-6,
  .sm\:py-6 {
    padding-top: 2rem;
  }
  .sm\:pr-6,
  .sm\:px-6 {
    padding-right: 2rem;
  }
  .sm\:pb-6,
  .sm\:py-6 {
    padding-bottom: 2rem;
  }
  .sm\:pl-6,
  .sm\:px-6 {
    padding-left: 2rem;
  }
  .sm\:p-7 {
    padding: 3rem;
  }
  .sm\:pt-7,
  .sm\:py-7 {
    padding-top: 3rem;
  }
  .sm\:pr-7,
  .sm\:px-7 {
    padding-right: 3rem;
  }
  .sm\:pb-7,
  .sm\:py-7 {
    padding-bottom: 3rem;
  }
  .sm\:pl-7,
  .sm\:px-7 {
    padding-left: 3rem;
  }
  .sm\:p-8 {
    padding: 4rem;
  }
  .sm\:pt-8,
  .sm\:py-8 {
    padding-top: 4rem;
  }
  .sm\:pr-8,
  .sm\:px-8 {
    padding-right: 4rem;
  }
  .sm\:pb-8,
  .sm\:py-8 {
    padding-bottom: 4rem;
  }
  .sm\:pl-8,
  .sm\:px-8 {
    padding-left: 4rem;
  }
  .sm\:p-9 {
    padding: 6rem;
  }
  .sm\:pt-9,
  .sm\:py-9 {
    padding-top: 6rem;
  }
  .sm\:pr-9,
  .sm\:px-9 {
    padding-right: 6rem;
  }
  .sm\:pb-9,
  .sm\:py-9 {
    padding-bottom: 6rem;
  }
  .sm\:pl-9,
  .sm\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 768px) {
  .md\:p-0 {
    padding: 0;
  }
  .md\:pt-0,
  .md\:py-0 {
    padding-top: 0;
  }
  .md\:pr-0,
  .md\:px-0 {
    padding-right: 0;
  }
  .md\:pb-0,
  .md\:py-0 {
    padding-bottom: 0;
  }
  .md\:pl-0,
  .md\:px-0 {
    padding-left: 0;
  }
  .md\:p-1 {
    padding: 0.25rem;
  }
  .md\:pt-1,
  .md\:py-1 {
    padding-top: 0.25rem;
  }
  .md\:pr-1,
  .md\:px-1 {
    padding-right: 0.25rem;
  }
  .md\:pb-1,
  .md\:py-1 {
    padding-bottom: 0.25rem;
  }
  .md\:pl-1,
  .md\:px-1 {
    padding-left: 0.25rem;
  }
  .md\:p-2 {
    padding: 0.5rem;
  }
  .md\:pt-2,
  .md\:py-2 {
    padding-top: 0.5rem;
  }
  .md\:pr-2,
  .md\:px-2 {
    padding-right: 0.5rem;
  }
  .md\:pb-2,
  .md\:py-2 {
    padding-bottom: 0.5rem;
  }
  .md\:pl-2,
  .md\:px-2 {
    padding-left: 0.5rem;
  }
  .md\:p-3 {
    padding: 0.75rem;
  }
  .md\:pt-3,
  .md\:py-3 {
    padding-top: 0.75rem;
  }
  .md\:pr-3,
  .md\:px-3 {
    padding-right: 0.75rem;
  }
  .md\:pb-3,
  .md\:py-3 {
    padding-bottom: 0.75rem;
  }
  .md\:pl-3,
  .md\:px-3 {
    padding-left: 0.75rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:pt-4,
  .md\:py-4 {
    padding-top: 1rem;
  }
  .md\:pr-4,
  .md\:px-4 {
    padding-right: 1rem;
  }
  .md\:pb-4,
  .md\:py-4 {
    padding-bottom: 1rem;
  }
  .md\:pl-4,
  .md\:px-4 {
    padding-left: 1rem;
  }
  .md\:p-5 {
    padding: 1.5rem;
  }
  .md\:pt-5,
  .md\:py-5 {
    padding-top: 1.5rem;
  }
  .md\:pr-5,
  .md\:px-5 {
    padding-right: 1.5rem;
  }
  .md\:pb-5,
  .md\:py-5 {
    padding-bottom: 1.5rem;
  }
  .md\:pl-5,
  .md\:px-5 {
    padding-left: 1.5rem;
  }
  .md\:p-6 {
    padding: 2rem;
  }
  .md\:pt-6,
  .md\:py-6 {
    padding-top: 2rem;
  }
  .md\:pr-6,
  .md\:px-6 {
    padding-right: 2rem;
  }
  .md\:pb-6,
  .md\:py-6 {
    padding-bottom: 2rem;
  }
  .md\:pl-6,
  .md\:px-6 {
    padding-left: 2rem;
  }
  .md\:p-7 {
    padding: 3rem;
  }
  .md\:pt-7,
  .md\:py-7 {
    padding-top: 3rem;
  }
  .md\:pr-7,
  .md\:px-7 {
    padding-right: 3rem;
  }
  .md\:pb-7,
  .md\:py-7 {
    padding-bottom: 3rem;
  }
  .md\:pl-7,
  .md\:px-7 {
    padding-left: 3rem;
  }
  .md\:p-8 {
    padding: 4rem;
  }
  .md\:pt-8,
  .md\:py-8 {
    padding-top: 4rem;
  }
  .md\:pr-8,
  .md\:px-8 {
    padding-right: 4rem;
  }
  .md\:pb-8,
  .md\:py-8 {
    padding-bottom: 4rem;
  }
  .md\:pl-8,
  .md\:px-8 {
    padding-left: 4rem;
  }
  .md\:p-9 {
    padding: 6rem;
  }
  .md\:pt-9,
  .md\:py-9 {
    padding-top: 6rem;
  }
  .md\:pr-9,
  .md\:px-9 {
    padding-right: 6rem;
  }
  .md\:pb-9,
  .md\:py-9 {
    padding-bottom: 6rem;
  }
  .md\:pl-9,
  .md\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 992px) {
  .lg\:p-0 {
    padding: 0;
  }
  .lg\:pt-0,
  .lg\:py-0 {
    padding-top: 0;
  }
  .lg\:pr-0,
  .lg\:px-0 {
    padding-right: 0;
  }
  .lg\:pb-0,
  .lg\:py-0 {
    padding-bottom: 0;
  }
  .lg\:pl-0,
  .lg\:px-0 {
    padding-left: 0;
  }
  .lg\:p-1 {
    padding: 0.25rem;
  }
  .lg\:pt-1,
  .lg\:py-1 {
    padding-top: 0.25rem;
  }
  .lg\:pr-1,
  .lg\:px-1 {
    padding-right: 0.25rem;
  }
  .lg\:pb-1,
  .lg\:py-1 {
    padding-bottom: 0.25rem;
  }
  .lg\:pl-1,
  .lg\:px-1 {
    padding-left: 0.25rem;
  }
  .lg\:p-2 {
    padding: 0.5rem;
  }
  .lg\:pt-2,
  .lg\:py-2 {
    padding-top: 0.5rem;
  }
  .lg\:pr-2,
  .lg\:px-2 {
    padding-right: 0.5rem;
  }
  .lg\:pb-2,
  .lg\:py-2 {
    padding-bottom: 0.5rem;
  }
  .lg\:pl-2,
  .lg\:px-2 {
    padding-left: 0.5rem;
  }
  .lg\:p-3 {
    padding: 0.75rem;
  }
  .lg\:pt-3,
  .lg\:py-3 {
    padding-top: 0.75rem;
  }
  .lg\:pr-3,
  .lg\:px-3 {
    padding-right: 0.75rem;
  }
  .lg\:pb-3,
  .lg\:py-3 {
    padding-bottom: 0.75rem;
  }
  .lg\:pl-3,
  .lg\:px-3 {
    padding-left: 0.75rem;
  }
  .lg\:p-4 {
    padding: 1rem;
  }
  .lg\:pt-4,
  .lg\:py-4 {
    padding-top: 1rem;
  }
  .lg\:pr-4,
  .lg\:px-4 {
    padding-right: 1rem;
  }
  .lg\:pb-4,
  .lg\:py-4 {
    padding-bottom: 1rem;
  }
  .lg\:pl-4,
  .lg\:px-4 {
    padding-left: 1rem;
  }
  .lg\:p-5 {
    padding: 1.5rem;
  }
  .lg\:pt-5,
  .lg\:py-5 {
    padding-top: 1.5rem;
  }
  .lg\:pr-5,
  .lg\:px-5 {
    padding-right: 1.5rem;
  }
  .lg\:pb-5,
  .lg\:py-5 {
    padding-bottom: 1.5rem;
  }
  .lg\:pl-5,
  .lg\:px-5 {
    padding-left: 1.5rem;
  }
  .lg\:p-6 {
    padding: 2rem;
  }
  .lg\:pt-6,
  .lg\:py-6 {
    padding-top: 2rem;
  }
  .lg\:pr-6,
  .lg\:px-6 {
    padding-right: 2rem;
  }
  .lg\:pb-6,
  .lg\:py-6 {
    padding-bottom: 2rem;
  }
  .lg\:pl-6,
  .lg\:px-6 {
    padding-left: 2rem;
  }
  .lg\:p-7 {
    padding: 3rem;
  }
  .lg\:pt-7,
  .lg\:py-7 {
    padding-top: 3rem;
  }
  .lg\:pr-7,
  .lg\:px-7 {
    padding-right: 3rem;
  }
  .lg\:pb-7,
  .lg\:py-7 {
    padding-bottom: 3rem;
  }
  .lg\:pl-7,
  .lg\:px-7 {
    padding-left: 3rem;
  }
  .lg\:p-8 {
    padding: 4rem;
  }
  .lg\:pt-8,
  .lg\:py-8 {
    padding-top: 4rem;
  }
  .lg\:pr-8,
  .lg\:px-8 {
    padding-right: 4rem;
  }
  .lg\:pb-8,
  .lg\:py-8 {
    padding-bottom: 4rem;
  }
  .lg\:pl-8,
  .lg\:px-8 {
    padding-left: 4rem;
  }
  .lg\:p-9 {
    padding: 6rem;
  }
  .lg\:pt-9,
  .lg\:py-9 {
    padding-top: 6rem;
  }
  .lg\:pr-9,
  .lg\:px-9 {
    padding-right: 6rem;
  }
  .lg\:pb-9,
  .lg\:py-9 {
    padding-bottom: 6rem;
  }
  .lg\:pl-9,
  .lg\:px-9 {
    padding-left: 6rem;
  }
}

@media (min-width: 1200px) {
  .xl\:p-0 {
    padding: 0;
  }
  .xl\:pt-0,
  .xl\:py-0 {
    padding-top: 0;
  }
  .xl\:pr-0,
  .xl\:px-0 {
    padding-right: 0;
  }
  .xl\:pb-0,
  .xl\:py-0 {
    padding-bottom: 0;
  }
  .xl\:pl-0,
  .xl\:px-0 {
    padding-left: 0;
  }
  .xl\:p-1 {
    padding: 0.25rem;
  }
  .xl\:pt-1,
  .xl\:py-1 {
    padding-top: 0.25rem;
  }
  .xl\:pr-1,
  .xl\:px-1 {
    padding-right: 0.25rem;
  }
  .xl\:pb-1,
  .xl\:py-1 {
    padding-bottom: 0.25rem;
  }
  .xl\:pl-1,
  .xl\:px-1 {
    padding-left: 0.25rem;
  }
  .xl\:p-2 {
    padding: 0.5rem;
  }
  .xl\:pt-2,
  .xl\:py-2 {
    padding-top: 0.5rem;
  }
  .xl\:pr-2,
  .xl\:px-2 {
    padding-right: 0.5rem;
  }
  .xl\:pb-2,
  .xl\:py-2 {
    padding-bottom: 0.5rem;
  }
  .xl\:pl-2,
  .xl\:px-2 {
    padding-left: 0.5rem;
  }
  .xl\:p-3 {
    padding: 0.75rem;
  }
  .xl\:pt-3,
  .xl\:py-3 {
    padding-top: 0.75rem;
  }
  .xl\:pr-3,
  .xl\:px-3 {
    padding-right: 0.75rem;
  }
  .xl\:pb-3,
  .xl\:py-3 {
    padding-bottom: 0.75rem;
  }
  .xl\:pl-3,
  .xl\:px-3 {
    padding-left: 0.75rem;
  }
  .xl\:p-4 {
    padding: 1rem;
  }
  .xl\:pt-4,
  .xl\:py-4 {
    padding-top: 1rem;
  }
  .xl\:pr-4,
  .xl\:px-4 {
    padding-right: 1rem;
  }
  .xl\:pb-4,
  .xl\:py-4 {
    padding-bottom: 1rem;
  }
  .xl\:pl-4,
  .xl\:px-4 {
    padding-left: 1rem;
  }
  .xl\:p-5 {
    padding: 1.5rem;
  }
  .xl\:pt-5,
  .xl\:py-5 {
    padding-top: 1.5rem;
  }
  .xl\:pr-5,
  .xl\:px-5 {
    padding-right: 1.5rem;
  }
  .xl\:pb-5,
  .xl\:py-5 {
    padding-bottom: 1.5rem;
  }
  .xl\:pl-5,
  .xl\:px-5 {
    padding-left: 1.5rem;
  }
  .xl\:p-6 {
    padding: 2rem;
  }
  .xl\:pt-6,
  .xl\:py-6 {
    padding-top: 2rem;
  }
  .xl\:pr-6,
  .xl\:px-6 {
    padding-right: 2rem;
  }
  .xl\:pb-6,
  .xl\:py-6 {
    padding-bottom: 2rem;
  }
  .xl\:pl-6,
  .xl\:px-6 {
    padding-left: 2rem;
  }
  .xl\:p-7 {
    padding: 3rem;
  }
  .xl\:pt-7,
  .xl\:py-7 {
    padding-top: 3rem;
  }
  .xl\:pr-7,
  .xl\:px-7 {
    padding-right: 3rem;
  }
  .xl\:pb-7,
  .xl\:py-7 {
    padding-bottom: 3rem;
  }
  .xl\:pl-7,
  .xl\:px-7 {
    padding-left: 3rem;
  }
  .xl\:p-8 {
    padding: 4rem;
  }
  .xl\:pt-8,
  .xl\:py-8 {
    padding-top: 4rem;
  }
  .xl\:pr-8,
  .xl\:px-8 {
    padding-right: 4rem;
  }
  .xl\:pb-8,
  .xl\:py-8 {
    padding-bottom: 4rem;
  }
  .xl\:pl-8,
  .xl\:px-8 {
    padding-left: 4rem;
  }
  .xl\:p-9 {
    padding: 6rem;
  }
  .xl\:pt-9,
  .xl\:py-9 {
    padding-top: 6rem;
  }
  .xl\:pr-9,
  .xl\:px-9 {
    padding-right: 6rem;
  }
  .xl\:pb-9,
  .xl\:py-9 {
    padding-bottom: 6rem;
  }
  .xl\:pl-9,
  .xl\:px-9 {
    padding-left: 6rem;
  }
}

.h-0 {
  height: 0;
}

.h-1 {
  height: 0.25rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.5rem;
}

.h-6 {
  height: 2rem;
}

.h-7 {
  height: 3rem;
}

.h-8 {
  height: 4rem;
}

.h-9 {
  height: 6rem;
}

.h-px {
  height: 1px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

@media (min-width: 576px) {
  .sm\:h-0 {
    height: 0;
  }
  .sm\:h-1 {
    height: 0.25rem;
  }
  .sm\:h-2 {
    height: 0.5rem;
  }
  .sm\:h-3 {
    height: 0.75rem;
  }
  .sm\:h-4 {
    height: 1rem;
  }
  .sm\:h-5 {
    height: 1.5rem;
  }
  .sm\:h-6 {
    height: 2rem;
  }
  .sm\:h-7 {
    height: 3rem;
  }
  .sm\:h-8 {
    height: 4rem;
  }
  .sm\:h-9 {
    height: 6rem;
  }
  .sm\:h-px {
    height: 1px;
  }
  .sm\:h-auto {
    height: auto;
  }
  .sm\:h-full {
    height: 100%;
  }
  .sm\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 768px) {
  .md\:h-0 {
    height: 0;
  }
  .md\:h-1 {
    height: 0.25rem;
  }
  .md\:h-2 {
    height: 0.5rem;
  }
  .md\:h-3 {
    height: 0.75rem;
  }
  .md\:h-4 {
    height: 1rem;
  }
  .md\:h-5 {
    height: 1.5rem;
  }
  .md\:h-6 {
    height: 2rem;
  }
  .md\:h-7 {
    height: 3rem;
  }
  .md\:h-8 {
    height: 4rem;
  }
  .md\:h-9 {
    height: 6rem;
  }
  .md\:h-px {
    height: 1px;
  }
  .md\:h-auto {
    height: auto;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 992px) {
  .lg\:h-0 {
    height: 0;
  }
  .lg\:h-1 {
    height: 0.25rem;
  }
  .lg\:h-2 {
    height: 0.5rem;
  }
  .lg\:h-3 {
    height: 0.75rem;
  }
  .lg\:h-4 {
    height: 1rem;
  }
  .lg\:h-5 {
    height: 1.5rem;
  }
  .lg\:h-6 {
    height: 2rem;
  }
  .lg\:h-7 {
    height: 3rem;
  }
  .lg\:h-8 {
    height: 4rem;
  }
  .lg\:h-9 {
    height: 6rem;
  }
  .lg\:h-px {
    height: 1px;
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:h-full {
    height: 100%;
  }
  .lg\:h-screen {
    height: 100vh;
  }
}

@media (min-width: 1200px) {
  .xl\:h-0 {
    height: 0;
  }
  .xl\:h-1 {
    height: 0.25rem;
  }
  .xl\:h-2 {
    height: 0.5rem;
  }
  .xl\:h-3 {
    height: 0.75rem;
  }
  .xl\:h-4 {
    height: 1rem;
  }
  .xl\:h-5 {
    height: 1.5rem;
  }
  .xl\:h-6 {
    height: 2rem;
  }
  .xl\:h-7 {
    height: 3rem;
  }
  .xl\:h-8 {
    height: 4rem;
  }
  .xl\:h-9 {
    height: 6rem;
  }
  .xl\:h-px {
    height: 1px;
  }
  .xl\:h-auto {
    height: auto;
  }
  .xl\:h-full {
    height: 100%;
  }
  .xl\:h-screen {
    height: 100vh;
  }
}

.max-h-0 {
  max-height: 0;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0;
}

.w-1 {
  width: 0.25rem;
}

.w-2 {
  width: 0.5rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.5rem;
}

.w-6 {
  width: 2rem;
}

.w-7 {
  width: 3rem;
}

.w-8 {
  width: 4rem;
}

.w-9 {
  width: 6rem;
}

.w-px {
  width: 1px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

@media (min-width: 576px) {
  .sm\:w-0 {
    width: 0;
  }
  .sm\:w-1 {
    width: 0.25rem;
  }
  .sm\:w-2 {
    width: 0.5rem;
  }
  .sm\:w-3 {
    width: 0.75rem;
  }
  .sm\:w-4 {
    width: 1rem;
  }
  .sm\:w-5 {
    width: 1.5rem;
  }
  .sm\:w-6 {
    width: 2rem;
  }
  .sm\:w-7 {
    width: 3rem;
  }
  .sm\:w-8 {
    width: 4rem;
  }
  .sm\:w-9 {
    width: 6rem;
  }
  .sm\:w-px {
    width: 1px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 768px) {
  .md\:w-0 {
    width: 0;
  }
  .md\:w-1 {
    width: 0.25rem;
  }
  .md\:w-2 {
    width: 0.5rem;
  }
  .md\:w-3 {
    width: 0.75rem;
  }
  .md\:w-4 {
    width: 1rem;
  }
  .md\:w-5 {
    width: 1.5rem;
  }
  .md\:w-6 {
    width: 2rem;
  }
  .md\:w-7 {
    width: 3rem;
  }
  .md\:w-8 {
    width: 4rem;
  }
  .md\:w-9 {
    width: 6rem;
  }
  .md\:w-px {
    width: 1px;
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:w-full {
    width: 100%;
  }
  .md\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 992px) {
  .lg\:w-0 {
    width: 0;
  }
  .lg\:w-1 {
    width: 0.25rem;
  }
  .lg\:w-2 {
    width: 0.5rem;
  }
  .lg\:w-3 {
    width: 0.75rem;
  }
  .lg\:w-4 {
    width: 1rem;
  }
  .lg\:w-5 {
    width: 1.5rem;
  }
  .lg\:w-6 {
    width: 2rem;
  }
  .lg\:w-7 {
    width: 3rem;
  }
  .lg\:w-8 {
    width: 4rem;
  }
  .lg\:w-9 {
    width: 6rem;
  }
  .lg\:w-px {
    width: 1px;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:w-screen {
    width: 100vw;
  }
}

@media (min-width: 1200px) {
  .xl\:w-0 {
    width: 0;
  }
  .xl\:w-1 {
    width: 0.25rem;
  }
  .xl\:w-2 {
    width: 0.5rem;
  }
  .xl\:w-3 {
    width: 0.75rem;
  }
  .xl\:w-4 {
    width: 1rem;
  }
  .xl\:w-5 {
    width: 1.5rem;
  }
  .xl\:w-6 {
    width: 2rem;
  }
  .xl\:w-7 {
    width: 3rem;
  }
  .xl\:w-8 {
    width: 4rem;
  }
  .xl\:w-9 {
    width: 6rem;
  }
  .xl\:w-px {
    width: 1px;
  }
  .xl\:w-auto {
    width: auto;
  }
  .xl\:w-full {
    width: 100%;
  }
  .xl\:w-screen {
    width: 100vw;
  }
}

.max-w-9 {
  max-width: 6rem;
}

.max-w-10 {
  max-width: 8rem;
}

.max-w-11 {
  max-width: 12rem;
}

.max-w-12 {
  max-width: 16rem;
}

.max-w-13 {
  max-width: 20rem;
}

.max-w-sm {
  max-width: 576px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 992px;
}

.max-w-xl {
  max-width: 1200px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen {
  max-width: 100vw;
}

.max-w-none {
  max-width: none;
}

@media (min-width: 576px) {
  .sm\:max-w-9 {
    max-width: 6rem;
  }
  .sm\:max-w-10 {
    max-width: 8rem;
  }
  .sm\:max-w-11 {
    max-width: 12rem;
  }
  .sm\:max-w-12 {
    max-width: 16rem;
  }
  .sm\:max-w-13 {
    max-width: 20rem;
  }
  .sm\:max-w-sm {
    max-width: 576px;
  }
  .sm\:max-w-md {
    max-width: 768px;
  }
  .sm\:max-w-lg {
    max-width: 992px;
  }
  .sm\:max-w-xl {
    max-width: 1200px;
  }
  .sm\:max-w-full {
    max-width: 100%;
  }
  .sm\:max-w-screen {
    max-width: 100vw;
  }
  .sm\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .md\:max-w-9 {
    max-width: 6rem;
  }
  .md\:max-w-10 {
    max-width: 8rem;
  }
  .md\:max-w-11 {
    max-width: 12rem;
  }
  .md\:max-w-12 {
    max-width: 16rem;
  }
  .md\:max-w-13 {
    max-width: 20rem;
  }
  .md\:max-w-sm {
    max-width: 576px;
  }
  .md\:max-w-md {
    max-width: 768px;
  }
  .md\:max-w-lg {
    max-width: 992px;
  }
  .md\:max-w-xl {
    max-width: 1200px;
  }
  .md\:max-w-full {
    max-width: 100%;
  }
  .md\:max-w-screen {
    max-width: 100vw;
  }
  .md\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 992px) {
  .lg\:max-w-9 {
    max-width: 6rem;
  }
  .lg\:max-w-10 {
    max-width: 8rem;
  }
  .lg\:max-w-11 {
    max-width: 12rem;
  }
  .lg\:max-w-12 {
    max-width: 16rem;
  }
  .lg\:max-w-13 {
    max-width: 20rem;
  }
  .lg\:max-w-sm {
    max-width: 576px;
  }
  .lg\:max-w-md {
    max-width: 768px;
  }
  .lg\:max-w-lg {
    max-width: 992px;
  }
  .lg\:max-w-xl {
    max-width: 1200px;
  }
  .lg\:max-w-full {
    max-width: 100%;
  }
  .lg\:max-w-screen {
    max-width: 100vw;
  }
  .lg\:max-w-none {
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .xl\:max-w-9 {
    max-width: 6rem;
  }
  .xl\:max-w-10 {
    max-width: 8rem;
  }
  .xl\:max-w-11 {
    max-width: 12rem;
  }
  .xl\:max-w-12 {
    max-width: 16rem;
  }
  .xl\:max-w-13 {
    max-width: 20rem;
  }
  .xl\:max-w-sm {
    max-width: 576px;
  }
  .xl\:max-w-md {
    max-width: 768px;
  }
  .xl\:max-w-lg {
    max-width: 992px;
  }
  .xl\:max-w-xl {
    max-width: 1200px;
  }
  .xl\:max-w-full {
    max-width: 100%;
  }
  .xl\:max-w-screen {
    max-width: 100vw;
  }
  .xl\:max-w-none {
    max-width: none;
  }
}

.min-w-0 {
  min-width: 0;
}

.min-w-50 {
  min-width: 50%;
}

.min-w-dropdown {
  min-width: 170px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-screen {
  min-width: 100vw;
}

@media (min-width: 576px) {
  .sm\:min-w-0 {
    min-width: 0;
  }
  .sm\:min-w-50 {
    min-width: 50%;
  }
  .sm\:min-w-dropdown {
    min-width: 170px;
  }
  .sm\:min-w-full {
    min-width: 100%;
  }
  .sm\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 768px) {
  .md\:min-w-0 {
    min-width: 0;
  }
  .md\:min-w-50 {
    min-width: 50%;
  }
  .md\:min-w-dropdown {
    min-width: 170px;
  }
  .md\:min-w-full {
    min-width: 100%;
  }
  .md\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 992px) {
  .lg\:min-w-0 {
    min-width: 0;
  }
  .lg\:min-w-50 {
    min-width: 50%;
  }
  .lg\:min-w-dropdown {
    min-width: 170px;
  }
  .lg\:min-w-full {
    min-width: 100%;
  }
  .lg\:min-w-screen {
    min-width: 100vw;
  }
}

@media (min-width: 1200px) {
  .xl\:min-w-0 {
    min-width: 0;
  }
  .xl\:min-w-50 {
    min-width: 50%;
  }
  .xl\:min-w-dropdown {
    min-width: 170px;
  }
  .xl\:min-w-full {
    min-width: 100%;
  }
  .xl\:min-w-screen {
    min-width: 100vw;
  }
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.shadow-sm {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-md {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.shadow-outline {
  box-shadow: 0 0 0 2px $color_outline;
}

.shadow-solid {
  box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
}

.shadow-none {
  box-shadow: none;
}

.shadow-bottom {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.hover\:shadow:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.hover\:shadow-xs:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.hover\:shadow-sm:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-md:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:shadow-inner:hover {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.hover\:shadow-outline:hover {
  box-shadow: 0 0 0 2px $color_outline;
}

.hover\:shadow-solid:hover {
  box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
}

.hover\:shadow-none:hover {
  box-shadow: none;
}

@media (min-width: 576px) {
  .sm\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .sm\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .sm\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .sm\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .sm\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .sm\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .sm\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .sm\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .md\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .md\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .md\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .md\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .md\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .md\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .md\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .md\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .lg\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .lg\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .lg\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .lg\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .lg\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .lg\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .lg\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .lg\:shadow-none {
    box-shadow: none;
  }
}

@media (min-width: 1200px) {
  .xl\:shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  .xl\:shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .xl\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .xl\:shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .xl\:shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }
  .xl\:shadow-outline {
    box-shadow: 0 0 0 2px $color_outline;
  }
  .xl\:shadow-solid {
    box-shadow: 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.5);
  }
  .xl\:shadow-none {
    box-shadow: none;
  }
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.appearance-none {
  appearance: none;
}

.cursor-pointer {
  cursor: pointer;
}

.outline-none {
  outline: none;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  width: auto;
  height: auto;
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-x-full {
  transform: translateX(-100%);
}

.transition-slow {
  transition: 0.5s;
}

.transition {
  transition: 0.3s;
}

.transition-fast {
  transition: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-duration: 0s;
}

.transition-slow {
  transition-duration: 0.5s;
}

.transition-medium {
  transition-duration: 0.3s;
}

.transition-fast {
  transition-duration: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

.badge-white {
  color: #1a1a1a;
  background-color: #fff;
}

a.badge-white:focus, a.badge-white:hover {
  color: #1a1a1a;
  background-color: #e6e6e6;
}

a.badge-white:focus, a.badge-white.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.badge-new {
  color: #fff;
  background-color: #FFAE00;
}

a.badge-new:focus, a.badge-new:hover {
  color: #fff;
  background-color: #cc8b00;
}

a.badge-new:focus, a.badge-new.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(214, 158, 46, 0.25);
}

.badge-open {
  color: #fff;
  background-color: #EA392A;
}

a.badge-open:focus, a.badge-open:hover {
  color: #fff;
  background-color: #cd2314;
}

a.badge-open:focus, a.badge-open.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(229, 62, 62, 0.25);
}

.badge-hold {
  color: #fff;
  background-color: #1a1a1a;
}

a.badge-hold:focus, a.badge-hold:hover {
  color: #fff;
  background-color: #010101;
}

a.badge-hold:focus, a.badge-hold.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(26, 32, 44, 0.25);
}

.badge-solved {
  color: #fff;
  background-color: #808080;
}

a.badge-solved:focus, a.badge-solved:hover {
  color: #fff;
  background-color: #676767;
}

a.badge-solved:focus, a.badge-solved.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(113, 128, 150, 0.25);
}

.badge-answered,
.badge-answered,
.badge-completed,
.badge-planned {
  color: #fff;
  background-color: #1a1a1a;
}

a.badge-answered:focus, a.badge-answered:hover, .badge-answered:focus, .badge-answered:hover, .badge-completed:focus, .badge-completed:hover, .badge-planned:focus, .badge-planned:hover {
  color: #fff;
  background-color: #010101;
}

a.badge-answered:focus, a.badge-answered.is-focused, .badge-answered:focus, .badge-answered.is-focused, .badge-completed:focus, .badge-completed.is-focused, .badge-planned:focus, .badge-planned.is-focused {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}

.actions-user button,
.subscribe-article button,
.subscribe-section button,
.subscribe-topic button,
.subscribe-organization button,
.subscribe-link button,
.subscribe-user button {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
}

.actions-user button:hover,
.subscribe-article button:hover,
.subscribe-section button:hover,
.subscribe-topic button:hover,
.subscribe-organization button:hover,
.subscribe-link button:hover,
.subscribe-user button:hover {
  text-decoration: none;
}

.actions-user button:disabled, .actions-user button.is-disabled,
.subscribe-article button:disabled,
.subscribe-article button.is-disabled,
.subscribe-section button:disabled,
.subscribe-section button.is-disabled,
.subscribe-topic button:disabled,
.subscribe-topic button.is-disabled,
.subscribe-organization button:disabled,
.subscribe-organization button.is-disabled,
.subscribe-link button:disabled,
.subscribe-link button.is-disabled,
.subscribe-user button:disabled,
.subscribe-user button.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.subscribe-article button,
.subscribe-section button,
.subscribe-topic button,
.subscribe-organization button {
  color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.subscribe-article button:hover,
.subscribe-section button:hover,
.subscribe-topic button:hover,
.subscribe-organization button:hover {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
}

.subscribe-article button:focus, .subscribe-article button.is-focused,
.subscribe-section button:focus,
.subscribe-section button.is-focused,
.subscribe-topic button:focus,
.subscribe-topic button.is-focused,
.subscribe-organization button:focus,
.subscribe-organization button.is-focused {
  outline: 0;
}

.subscribe-article button:disabled, .subscribe-article button.is-disabled,
.subscribe-section button:disabled,
.subscribe-section button.is-disabled,
.subscribe-topic button:disabled,
.subscribe-topic button.is-disabled,
.subscribe-organization button:disabled,
.subscribe-organization button.is-disabled {
  color: $color_text;
  border-color: $color_border;
}

.subscribe-article button:not(:disabled):not(.is-disabled):active, .subscribe-article button:not(:disabled):not(.is-disabled)[data-selected="true"], .subscribe-article button:not(:disabled):not(.is-disabled).is-active,
.subscribe-section button:not(:disabled):not(.is-disabled):active,
.subscribe-section button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-section button:not(:disabled):not(.is-disabled).is-active,
.subscribe-topic button:not(:disabled):not(.is-disabled):active,
.subscribe-topic button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-topic button:not(:disabled):not(.is-disabled).is-active,
.subscribe-organization button:not(:disabled):not(.is-disabled):active,
.subscribe-organization button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-organization button:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #101215;
  background-color: #101215;
}

.subscribe-article,
.subscribe-section,
.subscribe-topic {
  align-self: center;
  white-space: nowrap;
}

.subscribe-article button,
.subscribe-section button,
.subscribe-topic button {
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
}

.actions-user button,
.subscribe-link button,
.subscribe-user button {
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0.25em 0.75em;
  font-size: 0.875rem;
  width: 100%;
}

.actions-user button:hover,
.subscribe-link button:hover,
.subscribe-user button:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.actions-user button:focus, .actions-user button.is-focused,
.subscribe-link button:focus,
.subscribe-link button.is-focused,
.subscribe-user button:focus,
.subscribe-user button.is-focused {
  outline: 0;
}

.actions-user button:disabled, .actions-user button.is-disabled,
.subscribe-link button:disabled,
.subscribe-link button.is-disabled,
.subscribe-user button:disabled,
.subscribe-user button.is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.actions-user button:not(:disabled):not(.is-disabled):active, .actions-user button:not(:disabled):not(.is-disabled)[data-selected="true"], .actions-user button:not(:disabled):not(.is-disabled).is-active,
.subscribe-link button:not(:disabled):not(.is-disabled):active,
.subscribe-link button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-link button:not(:disabled):not(.is-disabled).is-active,
.subscribe-user button:not(:disabled):not(.is-disabled):active,
.subscribe-user button:not(:disabled):not(.is-disabled)[data-selected="true"],
.subscribe-user button:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media (min-width: 768px) {
  .actions-user button,
  .subscribe-link button,
  .subscribe-user button {
    width: auto;
  }
}

.actions-user {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.actions-user > button {
  position: relative;
}

.actions-user > button:hover {
  z-index: 1;
}

.actions-user > button:focus, .actions-user > button:active, .actions-user > button.is-active {
  z-index: 1;
}

.actions-user > button:not(:first-child) {
  margin-left: -1px;
}

.actions-user > button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.actions-user > button:last-child {
  width: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.actions-comment button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
  user-select: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5rem;
  margin-right: -.5rem;
}

.form input[type="submit"] {
  display: inline-block;
  padding: 0.5em 1.25em;
  line-height: 1.5;
  color: $color_text;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid $color_border;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.15s ease-in-out;
  color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
  background-color: rgba(25, 28, 32, 1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5em 1.5em;
  font-size: 1.125rem;
}

.form input[type="submit"]:hover {
  text-decoration: none;
}

.form input[type="submit"]:disabled, .form input[type="submit"].is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

.form input[type="submit"]:hover {
  color: $color_primary_inverse;
  border-color: #0e0f12;
  background-color: #101215;
}

.form input[type="submit"]:focus, .form input[type="submit"].is-focused {
  outline: 0;
}

.form input[type="submit"]:disabled, .form input[type="submit"].is-disabled {
  color: $color_primary_inverse;
  background-color: rgba(25, 28, 32, 1);
  border-color: rgba(25, 28, 32, 1);
}

.form input[type="submit"]:not(:disabled):not(.is-disabled):active, .form input[type="submit"]:not(:disabled):not(.is-disabled)[data-selected="true"], .form input[type="submit"]:not(:disabled):not(.is-disabled).is-active {
  color: $color_primary_inverse;
  border-color: #030303;
  background-color: #070809;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.icon-circle {
  display: inline-flex;
  padding: 1em;
  background-color: $color_gray_100;
  border-radius: 50%;
}

.icon-circle [class*="icon-"]::before,
.icon-circle .svg-icon {
  bottom: auto;
}

a:hover .icon-circle {
  color: rgba(25, 28, 32, 1);
  text-decoration: none;
  background-color: $color_primary_inverse;
  border-color: rgba(25, 28, 32, 1);
}

.img-left {
  float: left;
  text-align: left;
  margin-right: 1rem;
}

.img-right {
  float: right;
  text-align: right;
  margin-left: 1rem;
}

.img-thumbnail {
  padding: 1rem;
  border: 1px solid $color_border;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .img-left {
    margin-left: -1rem;
  }
  .img-right {
    margin-right: -1rem;
  }
}

.share {
  padding-left: 0;
  list-style: none;
}

.share svg {
  width: 1em;
  height: 1em;
}

.share li {
  display: inline-block;
  margin-right: .5rem;
}

.share a {
  color: inherit;
}

.share-facebook:focus, .share-facebook:hover {
  color: #3b5998;
}

.share-twitter:focus, .share-twitter:hover {
  color: #00aced;
}

.share-linkedin:focus, .share-linkedin:hover {
  color: #007bb6;
}

.list-check,
.list-number {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.list-check > li,
.list-number > li {
  position: relative;
  padding-left: 2.75em;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.list-check > li::before,
.list-number > li::before {
  position: absolute;
  left: .5em;
  display: inline-block;
  width: 1.725em;
  height: 1.725em;
  line-height: 1.725em;
  text-align: center;
  font-size: .875em;
  font-weight: 500;
  border-radius: 50%;
}

.list-check > li::before {
  content: "✓";
  background-color: #ebebeb;
}

.list-number {
  counter-reset: list;
}

.list-number > li {
  counter-increment: list;
}

.list-number > li::before {
  content: counter(list);
  background-color: #ebebeb;
}

@media (min-width: 768px) {
  .recent-articles,
  .related-articles {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}

.recent-articles h2,
.related-articles h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
}

.recent-articles ul,
.related-articles ul {
  padding-left: 0;
  list-style: none;
}

.recent-articles a,
.related-articles a {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.suggestion-list label {
  display: block;
  padding-bottom: .5rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid $color_border;
}

.suggestion-list ul {
  padding-left: 0;
  list-style: none;
  font-size: 0.9375rem;
  padding-bottom: 1rem;
}

.suggestion-list a {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  .meta-block::before {
    display: none;
  }
}

.recent-activity-list {
  display: grid;
  margin-top: 1rem;
  margin-bottom: 0;
  list-style: none;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .recent-activity-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .recent-activity-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.recent-activity-header {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.recent-activity-item {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid $color_border;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  background-color: #fff;
}

.recent-activity-item-link {
  display: block;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.recent-activity-item-meta {
  font-size: 0.9375rem;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1rem;
}

.recent-activity-item-meta > * + * {
  padding-left: 0.5rem;
}

.recent-activity-item-meta > * + *::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "·";
}

.recent-activity-item-meta > * + *::before {
  color: $color_gray_600;
}

.recent-activity-accessibility-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.recent-activity-comment-icon::after {
  content: attr(data-comment-count);
  margin-left: 0.25rem;
}

.recent-activity-controls a {
  display: block;
  margin-top: 1rem;
}

.sidebar {
  position: relative;
}

.sidebar::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  content: "";
  background-color: inherit;
}

.requests-sort-symbol {
  position: absolute;
  left: calc(100% + .25em);
  bottom: 0;
  font-size: .625em;
}

.content table:not([class*="table"]) {
  max-height: 20rem;
  overflow-y: scroll;
  border: none;
}

.note,
.warning {
  position: relative;
  z-index: 1;
  margin: 2rem 0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.note::after,
.warning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.05;
  width: 100%;
  height: 100%;
}

.note,
.warning {
  padding: 1.5rem;
  overflow: hidden;
}

.note::before,
.warning::before {
  display: block;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.note {
  border-left: 4px solid rgba(80, 109, 255, 1);
}

.note::before {
  content: "Note";
  color: rgba(80, 109, 255, 1);
}

.note::before:empty {
  display: none;
}

.note::after {
  background-color: rgba(80, 109, 255, 1);
}

.warning {
  border-left: 4px solid #ef526e;
}

.warning::before {
  content: "Warning";
  color: #ef526e;
}

.warning::after {
  background-color: #ef526e;
}

.form .note {
  padding: 1rem;
  border: 1px solid rgba(80, 109, 255, 1);
}

.form .note::before {
  display: none;
}

.pull-left,
.pull-right {
  font-weight: bold;
}

.content em {
  color: inherit;
  background-color: transparent;
  padding: 0;
}

.content img,
.content iframe {
  max-width: 100%;
}

@media (min-width: 992px) {
  .pull-left {
    float: left;
    margin-left: -1rem;
    margin-right: 1.5rem;
    text-align: left;
  }
  .pull-right {
    float: right;
    margin-left: 1.5rem;
    margin-right: -1rem;
    text-align: right;
  }
  .pull-left,
  .pull-right {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 20rem;
  }
}

.bg-community {
  background-image: url($community_background_image);
}

.bg-home {
  background-image: url($homepage_background_image);
}

.bg-hero {
  background: -webkit-linear-gradient(rgba(24, 24, 24, 1), rgba(72, 89, 118, .96));
  background: linear-gradient(rgba(24, 24, 24, 1), rgba(72, 89, 118, .96));
}

.group:hover .group-hover\:text-white {
  color: #fff;
}

.group:hover .group-hover\:text-primary {
  color: rgba(25, 28, 32, 1);
}

.group:hover .group-hover\:text-primary-inverse {
  color: $color_primary_inverse;
}

[class*="columns-"] {
  column-gap: 1.5rem;
}

[class*="columns-"] > * {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.columns-auto {
  column-count: auto;
  column-width: 20em;
}

@media (min-width: 768px) {
  .columns-2 {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .columns-3 {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .columns-3 {
    column-count: 3;
  }
}

@media (min-width: 768px) {
  .columns-4 {
    column-count: 2;
  }
}

@media (min-width: 1200px) {
  .columns-4 {
    column-count: 4;
  }
}

[class*="grid-"] {
  display: grid;
  gap: 1.5rem;
}

.grid-auto {
  grid-auto-rows: minmax(20em, auto);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 576px) {
  .sm\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .sm\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sm\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .md\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) {
  .lg\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .lg\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .xl\:grid-auto {
    grid-auto-rows: minmax(20em, auto);
  }
  .xl\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xl\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xl\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

[x-cloak] {
  display: none !important;
}

@media (max-width: 991.98px) {
  body:not(.world-id-mode) .header .search,
  .home-page .header .search,
.home-page .header .search-toggle,
.community-topic-list-page .header .search,
.community-topic-list-page .header .search-toggle,
.community-post-list-page .header .search,
.community-post-list-page .header .search-toggle {
  display: none !important;
	}
}

/* body.world-id-mode .hero-heading.desktop {
    display: none !important;
}

body:not(.world-id-mode) .hero-heading.world-app {
    display: none !important;
}*/

body.world-id-mode .header .search { 
  display: none !important;
}

@media (min-width: 992px) {
  body:not(.world-id-mode) main .search { 
  	display: none !important;
  }
}

.home-page .footer {
  margin-top: 0;
}

.avatar-img {
  background-color: #828d9d;
}

.layout--boxed {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}



/* =========================================
   CUSTOM CSS
   ========================================= */

/* Empty logo hook for future use */
#logo {
}

/* Home page vertical centering on tablet+ */
@media (min-width: 768px) {
  .home-page main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.world-id-mode main {
  margin-top: 0;
}

.menu-links-right .min-w-dropdown {
  bottom: inherit !important;
  max-height: 236px;
  overflow-y: auto;
}

.bg-home {
  background: white;
}

.home-page .footer {
  margin-top: 0;
}

.bg-content-blocks {
  padding-bottom: 80px;
}

.hero .relative.container.z-30.py-6 {
  margin-top: 0 !important;
}

#popular-keywords {
  color: #808080;
}

#popular-keywords .align-items-center.m-1 a {
  padding: 8px 16px;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  transition: 0.3s;
}

#popular-keywords .align-items-center.m-1 a:hover {
  text-transform: none;
  text-decoration: none;
  box-shadow: rgba(100, 100, 111, 0.1) 0 3px 16px 0;
}

#popular-keywords .align-items-center.m-1 span {
  display: none;
}

.subscribe-user {
  display: none;
}

/* =========================================
   SEARCH VISIBILITY RULES
   ========================================= */
@media (max-width: 991.98px) {
  body:not(.world-id-mode) .header .search,
  .home-page .header .search,
  .home-page .header .search-toggle,
  .community-topic-list-page .header .search,
  .community-topic-list-page .header .search-toggle,
  .community-post-list-page .header .search,
  .community-post-list-page .header .search-toggle {
    display: none !important;
  }
}

body.world-id-mode .header .search {
  display: none !important;
}

@media (min-width: 992px) {
  body:not(.world-id-mode) main .search {
    display: none !important;
  }
}

/* =========================================
   MOBILE MENU ADJUSTMENTS
   ========================================= */
@media (max-width: 991.98px) {
  .menu-standard {
    display: flex !important;
    flex-direction: row;
    position: relative;
    top: 8px;
    text-align: right;
    background: transparent !important;
    padding-top: 0;
    box-shadow: none;
  }

  .menu-standard .user-menu {
    display: none;
  }

  footer .nav {
    justify-content: center;
  }

  .navbar-toggle {
    display: none;
  }
}

/* =========================================
   MW NOTIFICATION BANNER
   ========================================= */
.ns-box {
  position: relative;
  background: rgba(192, 57, 43, 0.85);
  padding: 10px 20px 20px 20px;
  line-height: 1.4;
  z-index: 1000;
  pointer-events: none;
  color: rgba(250, 251, 255, 0.95);
  font-size: 85%;
  border-bottom: 1px solid #DDD;
}

.ns-box.ns-show,
.ns-box.ns-visible {
  pointer-events: auto;
}

.ns-box a {
  color: inherit;
  opacity: 0.7;
  font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
  opacity: 1;
}

.ns-box p {
  margin: 0;
}

.ns-close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  top: 4px;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
  outline: none;
}

.ns-close::before,
.ns-close::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  top: 50%;
  left: 50%;
  background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
  background: #fff;
}

.ns-close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.ns-close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ns-box-inner i {
  color: #fff;
  font-size: 3.8em;
}

.megaphone:before {
  content: '\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
}

.ns-box.ns-bar {
  top: 0;
  left: 0;
  width: 100%;
}

.ns-bar .ns-close {
  background: transparent;
  margin-top: 15px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
  background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.ns-effect-slidetop {
  box-shadow: inset 5.4em 0 rgba(0, 0, 0, 0.1);
}

.ns-effect-slidetop .icon {
  position: absolute;
  display: block;
  font-size: 109%;
  top: 50%;
  left: 1em;
  -webkit-transform: translate3d(0, -20%, 0);
  transform: translate3d(0, -20%, 0);
}

.ns-effect-slidetop p {
  padding: 0 3.2em;
  font-size: 1.2em;
  display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
  width: 2px;
  background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
  background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animScaleUp;
  animation-name: animScaleUp;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animFade;
  animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); }
  100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); }
}

@keyframes animScaleUp {
  0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); transform: translate3d(0, -50%, 0) scale3d(0, 0, 1); }
  100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); transform: translate3d(0, -50%, 0) scale3d(1, 1, 1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
  -webkit-animation-name: animSlideTop;
  animation-name: animSlideTop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
  0% { -webkit-transform: translate3d(0, -100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes animSlideTop {
  0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* =========================================
   VIDEO EMBEDS
   ========================================= */
.video-container {
  max-width: 400px;
  margin: 0 auto;
}

.video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Accordion video only */
.js-toggles .video-container--accordion {
  position: relative;
  width: min(100%, 620px) !important;
  margin: 24px auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

.js-toggles .video-container--accordion iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* =========================================
   ZENDESK AUTOCOMPLETE
   ========================================= */
zd-autocomplete-header {
  display: none !important;
}

zd-autocomplete {
  border-radius: 12px;
  border: 1px solid #ebebeb;
  background: #FFF;
}

zd-autocomplete-multibrand {
  border-bottom: 1px solid #ebebeb;
}

zd-autocomplete-breadcrumbs-multibrand {
  display: none !important;
}

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
  color: #1a1a1a;
  font-size: 13px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%;
}

/* =========================================
   HEADER LAYOUT (STICKY)
   ========================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 999;
  background: #ffffff;
}

/* Keep main content below fixed header */
main {
  margin-top: 88px;
  background: #ebebeb;
}

/* Gradient fade under header */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 100%;
  height: 40px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

/* Brand-specific header color override */
.header .navbar-brand,
.header .navbar-toggle,
.header .nav-link,
.fixed-header .nav-link {
  color: #808080 !important;
}

.header .navbar-brand:hover,
.header .navbar-toggle:hover,
.header .nav-link:hover,
.fixed-header .nav-link:hover {
  color: #24374e !important;
}

/* =========================================
   HEADER ACTIONS
   ========================================= */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  position: relative;
}

/* Remove spacing when CTA is hidden in app */
.header-actions.cta-hidden-in-app {
  gap: 0 !important;
}

/* =========================================
   HEADER CTA
   ========================================= */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  background: #1a1a1a;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.header-cta:hover {
  background: #2a2a2a;
}

.header-cta:active {
  transform: translateY(1px);
}

.header-cta:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.15);
}

/* =========================================
   LANGUAGE SWITCHER
   ========================================= */
.language-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ebebeb;
  border-radius: 9999px;
  background: #FFF;
  white-space: nowrap;
  cursor: pointer;
}

.language-button[aria-expanded="true"] {
  background: #ebebeb;
}

/* Flag in button */
.language-button .locale-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 14px;
  margin-right: 0;
  border-radius: 2px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Shared locale flag fallback */
.locale-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 18px;
  margin-right: 5px;
  border-radius: 2px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.language-dropdown .dropdown-item span.js-locale-flag {
  margin-right: 10px;
}

/* Dropdown */
.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  transform: none;
  margin-top: 6px;
  min-width: 220px;
  max-width: 90vw;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  animation: languageDropdownFadeIn 0.2s ease-out;
}

.language-dropdown-content {
  max-height: 236px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
}

.language-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  overflow: visible;
  transition: background-color 0.2s ease;
}

.language-dropdown .dropdown-item:hover {
  background-color: #f3f4f6;
}

.language-dropdown .locale-flag {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

/* Scrollbar */
.language-dropdown-content::-webkit-scrollbar {
  width: 4px;
}

.language-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.language-dropdown-content::-webkit-scrollbar-thumb {
  background-color: #ebebeb;
  border-radius: 2px;
}

.language-dropdown-content::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db;
}

@keyframes languageDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   DESKTOP HEADER CONTROL NORMALIZATION
   ========================================= */
@media (min-width: 1024px) {
  .header .search {
    min-width: 380px;
    height: 40px;
    box-sizing: border-box;
  }

  .header .search [type="search"] {
    height: 40px;
    box-sizing: border-box;
    border-radius: 9999px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2.5em;
    padding-right: 16px;
    line-height: 40px;
  }

  .header .language-button,
  .header .header-cta {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
  }

  .header .language-button {
    padding: 0 14px;
  }

  .header .header-cta {
    padding: 0 16px;
  }
}

/* =========================================
   MOBILE HEADER OPTIMIZATION
   ========================================= */
@media (max-width: 480px) {
  .header-actions {
    gap: 6px;
  }

  .language-button span:not(.locale-flag) {
    display: none !important;
  }

  .language-button {
    padding: 6px 8px;
  }

  .header-cta {
    font-size: 13px;
    padding: 0 10px;
    height: 34px;
  }

  .language-dropdown {
    right: 0;
    left: auto;
    transform: none;
    min-width: 180px;
  }
}

@media (max-width: 360px) {
  .header-cta {
    font-size: 12px;
    padding: 0 8px;
  }

  .language-button {
    padding: 4px 6px;
  }

  .language-dropdown {
    min-width: 160px;
  }
}

/* =========================================
   IN-APP WEBVIEW HIDING
   ========================================= */
.in-app-webview .header-cta,
html.in-app-webview .header-cta,
body.in-app-webview .header-cta {
  display: none !important;
}

/* v112g35 — Hide all mailto: links inside the World App webview.
   mailto: URLs don't work in webviews (no system email client linked
   to the webview's URL handler), so tapping them silently fails.
   Attribute selector catches ANY mailto link — the footer social-row
   email icon, any in-article mailto, future mailto links — without
   needing per-element class hooks. In-app users should route to
   support via the in-app chat instead. Browser users still see them. */
html.in-app-webview a[href^="mailto:"],
body.in-app-webview a[href^="mailto:"] {
  display: none !important;
}

/* v111g35 — Higher-specificity in-app hide for .header-cta. The original
   rule above (specificity 0,2,0) was losing to the ≤768px icon-mode rule
   later in this file (specificity 0,3,1 — `header.header .header-actions
   .header-cta`), so inside the World ID webview the CTA still rendered
   as the 36px dark circle with the arrow icon. This rule lifts the in-app
   hide to specificity 0,4,2 so it wins on every viewport size, including
   the always-mobile in-app webview. */
html.in-app-webview header.header .header-actions .header-cta,
html.in-app-webview header.header .header-cta,
body.in-app-webview header.header .header-actions .header-cta,
body.in-app-webview header.header .header-cta {
  display: none !important;
}

.in-app-webview .article-bottom-cta,
html.in-app-webview .article-bottom-cta,
body.in-app-webview .article-bottom-cta,
.in-app-webview .article-bottom-divider,
html.in-app-webview .article-bottom-divider,
body.in-app-webview .article-bottom-divider {
  display: none !important;
}

/* =========================================
   ARTICLE BOTTOM CTA
   ========================================= */
.article-bottom-divider {
  border: 0;
  border-top: 1px solid #d9dee7;
  margin: 36px 0;
}

.article-bottom-cta {
  padding: 12px 0 8px;
}

.article-bottom-cta__inner {
  max-width: 420px;
}

.article-bottom-cta__title {
  margin: 0 0 28px;
  color: #2d2d2d;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.article-bottom-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 9999px;
  background: #2d2b2b;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.2px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.article-bottom-cta__button:hover {
  background: #1a1a1a;
  color: #ffffff !important;
  text-decoration: none !important;
}

.article-bottom-cta__button:active {
  transform: translateY(1px);
}

.article-bottom-cta__button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 43, 43, 0.12);
}

@media (max-width: 991.98px) {
  .article-bottom-divider {
    margin: 32px 0;
  }

  .article-bottom-cta__inner {
    max-width: 360px;
  }

  .article-bottom-cta__title {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1.1px;
    margin-bottom: 24px;
  }

  .article-bottom-cta__button {
    min-height: 50px;
    padding: 0 22px;
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  .article-bottom-divider {
    margin: 28px 0;
  }

  .article-bottom-cta {
    padding: 8px 0 4px;
  }

  .article-bottom-cta__inner {
    max-width: 100%;
  }

  .article-bottom-cta__title {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
  }

  .article-bottom-cta__button {
    min-height: 46px;
    padding: 0 20px;
    font-size: 15px;
  }
}

/* =========================================
   SIDEBAR ABOVE HEADER FADE
   ========================================= */
.article-page aside .sticky-top {
  position: sticky;
  top: 88px;
  z-index: 2;
  background: transparent !important;
}

.article-page aside .sticky-top > div,
.article-page aside .sticky-top .bg-gray-200 {
  position: relative;
  z-index: 2;
}

/* =========================================
   SMALL ARTICLE TWEAKS
   ========================================= */
.article-section-nav a:hover {
  text-decoration: underline;
}


/* =========================================
   FORCE INTER FONT ON ARTICLE CONTENT
   Overrides inline font-family styles
   that get pasted in from external sources
   (Word, Google Docs, etc.)
   ========================================= */
.content,
.content *:not(code):not(pre):not(kbd):not(samp):not(tt) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* =========================================
   WORLDPROMVP CUSTOM FONT
   ========================================= */

/* 1. Register the font with the browser.
      World brand sanctions only Regular (400) and Medium (500),
      so we clamp the variable font's range to that window.
      font-synthesis: none prevents the browser from faking
      a bold or italic when one isn't supplied. */
@font-face {
  font-family: 'WorldProMVP';
  src: url(/hc/theming_assets/01KQV1AZWFJ88XPCZYZ6AXCJ7R) format('truetype-variations');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

/* 2. Apply WorldProMVP globally (body inherits to most elements).
      v89: simplified to match the World App HC font stack exactly.
      Previously this stack interleaved Noto Sans / Noto Sans JP / HK
      / Arabic / Bengali / Hebrew between Inter and the OS stack to
      try to keep non-Latin scripts on brand-approved web fonts. That
      well-intentioned choice caused Noto Sans JP to render JP
      punctuation (、 。) centered-in-cell — see ZD Slack
      #cx-localization 2026-05-19 (Zrinka Bađun). Forcing OpenType
      `palt` in v88 only half-fixed it; the glyph shapes still didn't
      match the working World App HC. v89 drops the Noto preferences
      entirely so the OS native JP font (Hiragino on macOS, Yu Gothic
      on Windows) renders Japanese — identical approach to the
      User/World App HC, which Localization has confirmed renders
      correctly. */
body {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* 3. Apply WorldProMVP to all headings (overrides theme's heading font setting) */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* 4. Override any inline font-family inside article body content
      (catches pasted Verdana/Arial styles, leaves code blocks alone) */
.content,
.content *:not(code):not(pre):not(kbd):not(samp):not(tt) {
  font-family: 'WorldProMVP', 'Inter',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* v88's :lang(ja|ko|zh) palt rule was removed in v89.
   Reason: it only mattered when Noto Sans JP was in the font stack
   (Noto centers full-width punctuation by default and needs `palt` to
   correct it). With OS fonts (Hiragino, Yu Gothic) the punctuation
   already sits at the bottom-right by default and palt becomes a no-op
   that would only add maintenance noise. */

/* =========================================
   v90: SCOPED CHINESE WEB FONT (:lang(zh))
   =========================================
   Chinese is the exception to v89's "let the OS render non-Latin" rule.
   On macOS, PingFang TC centers full-width punctuation (、 。 ，) in-cell
   *and* doesn't expose the OpenType `palt` feature — so there's no
   CSS-only way to nudge the OS font into producing bottom-right
   punctuation for Traditional Chinese. The fix is to opt into a
   web font (Noto Sans SC/TC/HK) that *does* expose `palt`, and enable
   the feature only for Chinese-tagged content.

   Scope: all zh-* variants (Simplified, Traditional, Hong Kong, etc.)
   because Localization owns the regional content and any Chinese page
   should render consistently. Other scripts (JP, KO, AR, BN, HE) keep
   v89's OS-fallback behavior — those OS fonts handle punctuation fine.

   Trade-off: Chinese readers now download Noto Sans (subset to just
   their script via Google Fonts `unicode-range`), but get correct
   horizontal-flow punctuation across macOS, Windows, and Linux instead
   of the OS-dependent flaw inherited from PingFang TC.

   Reported by Federico after v89 deployed (2026-05-19). The World App
   HC also has this PingFang issue but Localization hasn't flagged it
   there yet. ========================================= */
:lang(zh),
[lang="zh"], [lang^="zh-"] {
  font-family: 'WorldProMVP', 'Inter',
    'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK',
    -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-feature-settings: "palt" 1;
}



/* ============================================================
   World ID Help Center — Custom Style Additions
   Append this entire block to the bottom of style.css.
   Delete any previous incremental additions from this project
   (eyebrow rules, sticky bar rules, header fixes, etc.) and
   replace with this consolidated version.

   Note: One non-additive change is required in the base theme:
   on line ~3085, remove the `visibility: hidden;` declaration
   from the `.breadcrumbs` rule (so breadcrumbs render).
   ============================================================ */


/* ============================================================
   1. ARTICLE BREADCRUMB — EYEBROW ABOVE TITLE
   ============================================================ */
.article-breadcrumbs {
  margin-bottom: 0.5rem;
}
.article-breadcrumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #808080;
}
.article-breadcrumbs .breadcrumbs li {
  color: #808080;
}
.article-breadcrumbs .breadcrumbs li:last-child {
  color: #1a1a1a;
}


/* ============================================================
   2. SKIP "WORLD ID HELP CENTER" ROOT IN ARTICLE BREADCRUMBS
   Hides the first item so breadcrumbs start with the category.
   Also removes the orphaned "/" separator and resets the
   leftover left-padding so the breadcrumb left-aligns cleanly.
   Scoped to article eyebrow + sticky bar only.
   ============================================================ */
.article-breadcrumbs .breadcrumbs > li:first-child,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child {
  display: none;
}
.article-breadcrumbs .breadcrumbs > li:first-child + li::before,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child + li::before {
  display: none;
}
.article-breadcrumbs .breadcrumbs > li:first-child + li,
.article-sticky-bar__crumbs .breadcrumbs > li:first-child + li {
  padding-left: 0;
}


/* ============================================================
   3. ARTICLE STICKY BAR — APPEARS ON SCROLL PAST ARTICLE HEADER
   Light theme to match the main header. Smooth 320ms fade-in.
   ============================================================ */
.article-sticky-bar {
  position: fixed;
  top: var(--main-header-height, 64px); /* sits below the main header */
  left: 0;
  right: 0;
  z-index: 10; /* low enough that header dropdowns (z=1000+) always win */
  background: #ebebeb; /* soft blue-tinted accent — clearly a header zone,
                           distinct from main header (pure white) AND from
                           article body content beneath */
  color: #1a1a1a;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  border-top: none; /* no top edge — clean transition from main header */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* only the bottom edge */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* subtle lift over article */
}

.article-sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.article-sticky-bar__inner {
  /* v100: now also has .container class on the same element, which
     supplies max-width 1140px and horizontal padding. Vertical padding
     + min-height stay here; display switches from flex to block so the
     inner .row controls horizontal layout. The hidden logo is a sibling
     of the row but remains display:none so it doesn't affect layout. */
  padding: 5px 0; /* vertical only; .container supplies horizontal */
  min-height: 44px;
}

/* Hide the duplicate logo — the main header already shows it */
.article-sticky-bar__logo {
  display: none !important;
}

.article-sticky-bar__logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.article-sticky-bar__context {
  flex: 1;
  min-width: 0;
}

.article-sticky-bar__crumbs {
  margin-bottom: 0;
}

.article-sticky-bar__crumbs .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.6875rem;
  color: #808080;
}

.article-sticky-bar__crumbs .breadcrumbs li {
  color: #808080;
}

.article-sticky-bar__crumbs .breadcrumbs li:last-child {
  color: #1a1a1a;
}

/* v100g15: Zendesk's `{{breadcrumbs}}` helper always appends the current
   article title as the last item. Because the sticky bar already renders
   the title on its own line below the breadcrumb, that trailing crumb
   produces a visible duplicate ("Glossary of Terms" + "Glossary of Terms"
   stacked). Hide the last <li> so the breadcrumb stops at the parent
   section ("Exploring World / General Resources"). The dedicated title
   row below retains its 2-line clamp for long titles. */
.article-sticky-bar__crumbs .breadcrumbs > li:last-child {
  display: none;
}

/* v100g15: When glossary-page.js initializes successfully, it adds
   `is-glossary-page` to <html>. The TOC trigger button only exists on
   article_page.hbs (the default-template fallback path). On the canonical
   glossary article the browse bar IS the TOC, so hide just the TOC
   chevron button — the static title row stays visible as the article
   label. The static fallback exists on BOTH templates, so we never
   hide it. */
html.is-glossary-page .article-sticky-bar__title-row {
  display: none !important;
}

/* v102g17 — Eyebrow title was rendering blank on the glossary article.
   Cause: script.js's TOC code counts the H2 letter dividers (inserted
   by glossary-page.js) as TOC content, so it does `fallback.hidden =
   true` expecting to reveal the trigger button. The previous rule
   hides the trigger on glossary pages, leaving NOTHING visible in the
   title row. Fix: on glossary pages, force the static fallback to stay
   visible regardless of the `hidden` attribute script.js sets.
   Specificity (0,0,3,1) beats the `[hidden]` rule a few lines down
   (0,0,2,0), and the !important is required because [hidden]'s UA
   `display: none` is set with high precedence. */
html.is-glossary-page .article-sticky-bar__title--static,
html.is-glossary-page .article-sticky-bar__title--static[hidden] {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-sticky-bar__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-sticky-bar__search {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.article-sticky-bar__search:hover,
.article-sticky-bar__search:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.4);
  outline: none;
}

.article-sticky-bar__search svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

/* Gradient fade below the bar was removed — it was visually
   washing out the breadcrumb area. The bar's bottom hairline
   border + subtle shadow provides enough visual separation
   without a gradient strip. */

/* Mobile: keep breadcrumb visible — make it compact, not hidden.
   Single line, ellipsis if it overflows. */
@media (max-width: 480px) {
  .article-sticky-bar__inner {
    padding: 4px 2rem; /* match theme's .container horizontal padding */
    gap: 8px;
    min-height: 40px;
  }
  .article-sticky-bar__logo img {
    width: 26px;
    height: 26px;
  }
  .article-sticky-bar__crumbs {
    display: block;
  }
  .article-sticky-bar__crumbs .breadcrumbs {
    display: block;
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-wrap: nowrap;
  }
  .article-sticky-bar__crumbs .breadcrumbs li {
    display: inline;
  }
  .article-sticky-bar__title {
    font-size: 0.8125rem;
    line-height: 1.2;
  }
  .article-sticky-bar__search {
    width: 28px;
    height: 28px;
  }
  .article-sticky-bar__search svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-sticky-bar {
    transition: opacity 120ms linear;
  }
  .article-sticky-bar.is-visible {
    transform: none;
  }
}


/* ============================================================
   4. MAIN HEADER STAYS VISIBLE — sticky bar sits below it.
   The main header keeps its own sticky behavior from the theme.

   CRITICAL: The theme has a 40px white-to-transparent gradient
   ::after pseudo-element below the main header (style.css
   line 16006). That gradient was washing out the sticky bar's
   breadcrumb. Override it to none.

   Also remove main header's box-shadow and border-bottom to
   prevent visible seams above the breadcrumb.
   ============================================================ */
.header::after {
  display: none !important;
}

body.article-sticky-bar-active .header.shadow,
body.article-sticky-bar-active header.header,
body.article-sticky-bar-active .header.border-bottom {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* SEAMLESS MERGE: When sticky bar is visible, the main header's
   bottom edge gradients from white to the sticky bar's blue tint,
   so the two bars visually merge into one continuous header
   surface with no hard color edge between them. */
body.article-sticky-bar-active .header {
  background: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #FFFFFF 65%,
    #ebebeb 100%
  ) !important;
}


/* ============================================================
   4b. COMPACT MAIN HEADER
   Override the theme's 72px so the main header is
   tighter top-to-bottom. Reduces total sticky chrome height.
   Navbar items stay vertically centered automatically.
   ============================================================ */
.header {
  height: auto !important;
  min-height: 56px;
}
.header .navbar {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 56px;
}
@media (min-width: 1024px) {
  .header,
  .header .navbar {
    min-height: 60px;
  }
}

/* ============================================================
   4c. HEADER STACKING — the theme's custom .header rule sets
   z-index: 999 (line 15990 in style.css). Our sticky bar's
   z-index: 10 sits comfortably below that, so dropdowns
   emanating from inside the header (language picker, user
   menu) naturally paint above it.
   ============================================================ */
/* No overflow clipping anywhere in the header chain — otherwise
   absolutely-positioned dropdowns get cut off at the parent edge. */
.header,
.header .navbar,
.header .nav,
.header .nav.menu,
.header .header-actions,
.header .language-button,
.header .user-menu {
  overflow: visible !important;
}

/* Dropdowns: belt-and-suspenders high z-index in case any future
   rule tries to clip them. */
.header .language-dropdown,
.header [x-ref="menu"],
.header .z-dropdown,
.language-dropdown {
  z-index: 99999 !important;
}

/* Hide the sticky bar's search icon on viewports where the main
   header already shows a full, persistent search input — avoids
   duplication. Threshold matches the desktop normalization rule
   that makes the main search a prominent 380px-wide pill. */
@media (min-width: 1024px) {
  .article-sticky-bar__search {
    display: none;
  }
}


/* ============================================================
   5. DESKTOP HEADER LAYOUT — KEEP ITEMS INLINE (NO WRAP)
   Override theme default flex-wrap: wrap so the user menu
   stays on the same row as search / language / CTA.
   Search shrinks gracefully when other items need space.
   ============================================================ */
@media (min-width: 768px) {
  .header .navbar,
  .header .navbar .nav.menu {
    flex-wrap: nowrap !important;
  }
  .header .navbar .search {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
  }
  .header .navbar .user-menu {
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .header .navbar .header-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}


/* ============================================================
   6. DESKTOP HEADER NORMALIZATION (>= 1024px)
   - ALL header items uniform 40px height
   - Search bar flex-grows aggressively to fill available width
   - .nav.menu inside .navbar also grows so its children can grow
   - header-actions ml-auto is overridden so search wins the space
   ============================================================ */
@media (min-width: 1024px) {
  .header .navbar {
    align-items: center;
    gap: 12px;
  }

  /* The nav menu must grow inside navbar so its children can */
  .header .nav.menu {
    flex: 1 1 auto !important;
    align-items: center;
    gap: 12px;
    width: auto;
  }

  /* Logo wrapper: fixed height, no shrink */
  .header .navbar-brand {
    height: 40px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header .navbar-brand img {
    height: 32px;
    width: auto;
  }

  /* Search: greedy fill (flex-basis 0 so it ignores natural width
     and just grows to absorb all available space) */
  .header .search {
    flex: 1 1 0 !important;
    min-width: 200px;
    max-width: none !important;
    width: auto;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
  }
  .header .search [type="search"] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-radius: 9999px;
    padding: 0 16px 0 2.5em;
    line-height: 40px;
  }

  /* Header-actions: ml-auto removed so search can absorb the space.
     The wrapper just stays at its natural width on the right. */
  .header .header-actions {
    margin-left: 0 !important;
    flex-shrink: 0;
    gap: 8px;
  }

  /* Language picker + CTA: 40px tall, no shrink */
  .header .language-button,
  .header .header-cta {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
  }
  .header .language-button {
    padding: 0 14px;
  }
  .header .header-cta {
    padding: 0 16px;
  }

  /* User menu: 40px tall avatar wrapper, no shrink */
  .header .user-menu {
    flex-shrink: 0;
  }
  .header .user-menu .nav-link {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }
  .header .user-menu .avatar-img {
    width: 28px;
    height: 28px;
  }
}


/* ============================================================
   7. MOBILE HEADER OPTIMIZATION (<= 480px)
   Compact the language picker and CTA so they fit comfortably
   on phones. Hamburger menu stays as the mobile pattern.
   ============================================================ */
@media (max-width: 480px) {
  .header-actions {
    gap: 6px;
  }
  .language-button span:not(.locale-flag) {
    display: none !important;
  }
  .language-button {
    padding: 6px 8px;
  }
  .header-cta {
    font-size: 13px;
    padding: 0 10px;
    height: 34px;
  }
  .language-dropdown {
    right: 0;
    left: auto;
    transform: none;
    min-width: 180px;
  }
}


/* ============================================================
   8. TIGHTER PHONES (<= 360px)
   Even more compact CTA and language picker.
   ============================================================ */
@media (max-width: 360px) {
  .header-cta {
    font-size: 12px;
    padding: 0 8px;
  }
  .language-button {
    padding: 4px 6px;
  }
  .language-dropdown {
    min-width: 160px;
  }
}

/* ============================================================
   APPLE-INSPIRED HOME PAGE
   Tokens: spacing scale (8, 16, 24, 32, 48, 64, 96), white + 
   pale gray surfaces, World-dark #1a1a1a accent, blue #1a1a1a
   for eyebrows, generous typography, subtle hover lifts.
   ============================================================ */

/* Hero */
.apl-hero {
  background: #ffffff;
  padding: 64px 24px 48px;
  text-align: center;
}
.apl-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.apl-hero-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0 0 28px;
}
.apl-hero-title-muted {
  color: #808080;
}
.apl-hero-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.apl-hero-search input,
.apl-hero-search .apl-search-input input,
.apl-hero-search .apl-search-input [type="search"] {
  height: 48px !important;
  background: #f7f7f7 !important;
  border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  padding: 0 20px 0 48px !important;
  font-size: 16px !important;
  color: #1a1a1a !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.apl-hero-search input:focus,
.apl-hero-search [type="search"]:focus {
  border-color: rgba(0, 0, 0, 0.2) !important;
  background: #ffffff !important;
  outline: none !important;
}
.apl-hero-search .search-icon,
.apl-hero-search svg.search-icon {
  position: absolute;
  left: 20px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  /* v56: reset the base .search-icon margin (0 1em) that was
     bleeding through and pushing the icon ~16px to the right,
     making the placeholder text crowd against it. */
  margin: 0 !important;
  color: #808080;
  pointer-events: none;
}
.apl-hero-hint {
  font-size: 15px;
  color: #808080;
  margin: 16px auto 0;
  max-width: 480px;
}

/* Section container */
.apl-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
.apl-section-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin: 0 0 24px;
}

/* Topic cards */
.apl-cats {
  background: #f7f7f7;
  padding: 48px 0 64px;
}
.apl-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.apl-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.apl-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: #1a1a1a;
}
.apl-card-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.apl-card-icon > svg {
  width: 100%;
  height: 100%;
}
.apl-card-title {
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.apl-card-desc {
  font-size: 15px;
  color: #808080;
  margin: 0;
  line-height: 1.5;
}

/* Featured articles */
.apl-featured {
  background: #ffffff;
  padding: 48px 0 64px;
}
.apl-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.apl-feat {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-feat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.apl-feat-eyebrow {
  font-size: 12px;
  color: #1a1a1a;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.apl-feat-title {
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.apl-feat-desc {
  font-size: 15px;
  color: #808080;
  margin: 0 0 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apl-feat-meta {
  font-size: 12px;
  color: #808080;
  margin: auto 0 0;
  padding-top: 4px;
}

/* ============================================================
   FEATURED BENTO GRID (v64)
   3-column bento with three layout presets:
     - classic     : uniform 3x2, all cards same size (6 slots)
     - editorial   : 2x1 wide top + 1x2 right pillar + 4 standard (7 slots, default)
     - hero-pillar : 1x3 left pillar + 6 standard (7 slots)

   Slot sizing is driven by [data-slot-index="N"] selectors per preset.
   This means the SAME Handlebars markup powers all three presets — only
   CSS responds to settings.featured_layout. Switching presets in admin
   does not require any article re-curation.

   Each card carries .apl-article-card--bento. Standard 1x1 slots hide
   the description; wide and pillar slots show it. Card sizes are tagged
   by data-card-size which script.js infers from preset + slot index.
   ============================================================ */

/* Override the legacy 2-col grid for any preset variant */
.apl-feat-grid--classic,
.apl-feat-grid--editorial,
.apl-feat-grid--hero-pillar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}

/* Bento card base — slots default to "standard" 1x1.
   Card layout: full-bleed banner on top, content padded below. */
.apl-article-card--bento {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}
.apl-article-card--bento > .apl-feat-eyebrow,
.apl-article-card--bento > .apl-feat-title,
.apl-article-card--bento > .apl-feat-desc,
.apl-article-card--bento > .apl-feat-meta {
  margin-left: 18px;
  margin-right: 18px;
}
.apl-article-card--bento > .apl-feat-eyebrow {
  margin-top: 14px;
}
.apl-article-card--bento > .apl-feat-meta {
  margin-bottom: 16px;
}

/* Hero banner zone (image or section-icon fallback tile) */
.apl-feat-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #F1EFE8;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.apl-feat-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.apl-feat-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apl-feat-banner-fallback > img,
.apl-feat-banner-fallback > svg {
  width: 38%;
  max-width: 64px;
  height: auto;
  opacity: 0.92;
}

/* Accent tile colors — cycle by slot index modulo 3 (cyan / dark / stone).
   Applied only when banner is in fallback state (no card-only image). */
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner {
  background: linear-gradient(135deg, #00B5C4 0%, #007A85 100%);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="0"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="3"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="6"] .apl-feat-banner-fallback img {
  filter: brightness(0) invert(1);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="1"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="4"] .apl-feat-banner {
  background: #1A1A1A;
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="1"] .apl-feat-banner-fallback img,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="4"] .apl-feat-banner-fallback img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(90%) saturate(2500%) hue-rotate(155deg) brightness(95%) contrast(101%);
}
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="2"] .apl-feat-banner,
.apl-article-card--bento[data-banner-style="fallback"][data-slot-index="5"] .apl-feat-banner {
  background: #F1EFE8;
}
/* stone tile keeps icon dark — no filter needed */

/* Default: bento cards are standard 1x1 → hide description */
.apl-article-card--bento .apl-feat-desc {
  display: none;
}
/* Wide and pillar slots reveal the description */
.apl-article-card--bento[data-card-size="wide"] .apl-feat-desc,
.apl-article-card--bento[data-card-size="pillar-2"] .apl-feat-desc,
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tall pillars get more room — banner becomes taller and description shows 3 lines */
.apl-article-card--bento[data-card-size="pillar-2"],
.apl-article-card--bento[data-card-size="pillar-3"] {
  display: flex;
  flex-direction: column;
}
.apl-article-card--bento[data-card-size="pillar-2"] .apl-feat-banner,
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-banner {
  aspect-ratio: auto;
  flex: 1 1 55%;
  min-height: 160px;
}
.apl-article-card--bento[data-card-size="pillar-3"] .apl-feat-desc {
  -webkit-line-clamp: 3;
}

/* Wide 2x1 banner — image stretches wider */
.apl-article-card--bento[data-card-size="wide"] .apl-feat-banner {
  aspect-ratio: 32 / 9;
}

/* === CLASSIC PRESET — all 6 slots standard 1x1.
   No size overrides; everything inherits the default. */

/* === EDITORIAL PRESET ===
   Slot 0 = wide 2x1 banner (top)
   Slot 1 = right pillar 1x2
   Slot 2-5 = standard 1x1
   Slot 6 = standard 1x1 (optional overflow row) */
.apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="0"] {
  grid-column: span 2;
  grid-row: span 1;
}
.apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="1"] {
  grid-column: span 1;
  grid-row: span 2;
}

/* === HERO PILLAR PRESET ===
   Slot 0 = tall left pillar 1x3
   Slot 1-6 = standard 1x1 (filling the right two columns) */
.apl-feat-grid--hero-pillar .apl-article-card--bento[data-slot-index="0"] {
  grid-column: span 1;
  grid-row: span 3;
}

/* Responsive breakpoints — preserve anchors, collapse standards */
@media (max-width: 1023px) {
  .apl-feat-grid--classic,
  .apl-feat-grid--editorial,
  .apl-feat-grid--hero-pillar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Wide/pillar slots span full 2-col width on tablet */
  .apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-feat-grid--editorial .apl-article-card--bento[data-slot-index="1"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-feat-grid--hero-pillar .apl-article-card--bento[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .apl-feat-grid--classic,
  .apl-feat-grid--editorial,
  .apl-feat-grid--hero-pillar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-feat-grid--classic .apl-article-card--bento,
  .apl-feat-grid--editorial .apl-article-card--bento,
  .apl-feat-grid--hero-pillar .apl-article-card--bento {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* ============================================================
   INNER-PAGE BENTO (category + section pages, v70)
   When settings.category_layout / settings.section_layout is NOT "none",
   the .apl-article-list gets data-layout="<preset>" and articles get
   data-slot-index="<n>". Per-slot CSS rules below shape each card by
   position. When data-layout="none" (default), these rules don't match
   and the existing 2-col grid + author-marker shapes apply unchanged.

   Slot map mirrors the home-page bento:
     editorial   : slot 0 = 2x1 wide, slot 1 = 1x2 pillar, rest = 1x1
     hero-pillar : slot 0 = 1x3 pillar, rest = 1x1
     classic     : every slot = 1x1 (uniform 3x2 grid)
   Articles beyond the preset's "anchor" slots flow naturally as 1x1
   standard cards thanks to grid auto-flow.
   ============================================================ */

.apl-article-list[data-layout="classic"],
.apl-article-list[data-layout="editorial"],
.apl-article-list[data-layout="hero-pillar"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}

/* Editorial preset on inner pages */
.apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="0"] {
  grid-column: span 2;
}
.apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="1"] {
  grid-column: span 1;
  grid-row: span 2;
}

/* Hero pillar preset on inner pages */
.apl-article-list[data-layout="hero-pillar"] .apl-article-card[data-slot-index="0"] {
  grid-column: span 1;
  grid-row: span 3;
}

/* Tablet collapse — wide and pillar anchors become full-width */
@media (max-width: 1023px) {
  .apl-article-list[data-layout="classic"],
  .apl-article-list[data-layout="editorial"],
  .apl-article-list[data-layout="hero-pillar"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="0"],
  .apl-article-list[data-layout="editorial"] .apl-article-card[data-slot-index="1"] {
    grid-column: span 2;
    grid-row: span 1;
  }
  .apl-article-list[data-layout="hero-pillar"] .apl-article-card[data-slot-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* Narrow-phone collapse — single column, all cards span 1 */
@media (max-width: 480px) {
  .apl-article-list[data-layout="classic"],
  .apl-article-list[data-layout="editorial"],
  .apl-article-list[data-layout="hero-pillar"] {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-article-list[data-layout] .apl-article-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* === Empty description hide (v73) ===
   Cards no longer render an auto-excerpt — description is empty by
   default and populated only when the article has <p class="card-summary">
   in its body. This rule hides empty desc elements so cards stay clean
   when no summary is provided. script.js also sets inline display:none
   after parsing, but :empty here prevents any flash of empty space
   between template render and JS hydration. */
.apl-feat-desc:empty,
.apl-article-card-desc:empty {
  display: none !important;
}

/* ============================================================
   ALERT BANNER (v76) — home page only, above the main header
   Lives at the top of header.hbs (before the <header> element).
   When script.js injects content, the banner pins to top: 0 with
   position: sticky so it stays visible during scroll. The main
   header sits below it and stacks via top: var(--alert-height).

   Inner content is wrapped in a .container element so the horizontal
   margins (logo / search / CTA edges) line up with the main header.
   Background spans full viewport width; content is constrained.

   Two label variants share layout and only diverge on color:
     .apl-alert--alert  → red,  for outages / incidents
     .apl-alert--info   → cyan, for announcements / scheduled events

   Highest severity wins (script.js): if any `alert` articles are
   active, only those render. Otherwise `info` articles render.
   Non-dismissible on desktop; dismissible on mobile (≤640px).
   ============================================================ */

.apl-alert-banner {
  /* Empty by default — zero layout impact until JS populates. */
}
.apl-alert-banner[data-active="1"] {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* v77: must sit above Zenplates' .sticky-top (z-index: 97) so the
     alert stays visible above the header when both are pinned. */
  z-index: 100;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}
.apl-alert-banner[data-severity="alert"] { background: #FBEEEC; }
.apl-alert-banner[data-severity="info"] { background: #E6F7F9; }

/* When the alert is active, push the sticky-header offset down to make
   room. JS sets --apl-alert-height on <html> after measuring AND also
   applies inline style.top to header.header directly (see script.js
   measureAndPublishHeight) — these CSS rules are defense-in-depth so
   the offset works even if the inline style is somehow cleared. */
html[data-has-alert="1"] header.header,
html[data-has-alert="1"] header.header.sticky-header,
html[data-has-alert="1"] header.header.sticky-top,
html[data-has-alert="1"] header.header.fixed-header,
html[data-has-alert="1"] .sticky-header,
html[data-has-alert="1"] .sticky-top,
html[data-has-alert="1"] .fixed-header {
  top: var(--apl-alert-height, 0px) !important;
}

.apl-alert {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: flex-start;
  position: relative;
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* v79: consistent height across carousel. JS measures the tallest
     alert in the active set and writes that pixel value to
     --apl-alert-min-height on the .apl-alert-banner wrapper. Every
     alert in the carousel then has at least that height, so cycling
     doesn't jump the page. */
  min-height: var(--apl-alert-min-height, auto);
  box-sizing: border-box;
  /* v81: slide-in + fade transition. The .apl-alert--entering class
     (set briefly by script.js when a new slot is rendered) shifts the
     new alert 40px to the right and hides it; removing the class
     triggers a transition back to translateX(0) opacity 1. */
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms ease-out;
}
.apl-alert.apl-alert--entering {
  transform: translateX(40px);
  opacity: 0;
}
.apl-alert__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.apl-alert__content {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.apl-alert__row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
  gap: 14px;
}
.apl-alert__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.apl-alert__timestamp {
  font-size: 10.5px;
  opacity: 0.65;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* v81: counter sits at the right end of the footer row, on the same
   horizontal line as the CTA pill and the dots. The footer's flex
   layout pushes it to the far right via margin-left: auto. */
.apl-alert__counter {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.apl-alert__desc {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 4px;
}
/* v81: footer row that consolidates CTA + dots + counter on a single
   line at the bottom of each alert. CTA is a tinted-background pill;
   dots are absolutely centered between CTA and counter; counter sits
   right-aligned at the end of the row. */
.apl-alert__footer {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 8px;
  gap: 12px;
}
.apl-alert__cta {
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  /* v81: pill shape, severity-tinted background. */
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05); /* overridden by severity rules below */
  transition: background 180ms ease, transform 180ms ease;
}
.apl-alert__cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.apl-alert__cta svg,
.apl-alert__cta i {
  font-size: 11px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-alert__cta:hover svg,
.apl-alert__cta:hover i { transform: translateX(2px); }

/* Dismiss button — hidden on desktop, visible on mobile (rules below). */
.apl-alert__dismiss {
  display: none;
}

/* Severity coloring — applies to inner text (background is on the
   sticky banner wrapper above). CTA pill gets a tinted background
   from the same severity color family.
   v82: primary colors are admin-overridable via theme settings.
   JS writes --apl-alert-color-critical / --apl-alert-color-info to
   the banner element after reading from window.Theme.settings.
   The CSS fallback values preserve the original v76+ palette. */
.apl-alert--alert { color: #501313; }
.apl-alert--alert .apl-alert__icon { color: var(--apl-alert-color-critical, #A32D2D); }
.apl-alert--alert .apl-alert__desc { color: #791F1F; }
.apl-alert--alert .apl-alert__cta {
  color: var(--apl-alert-color-critical, #A32D2D);
  background: var(--apl-alert-cta-bg-critical, rgba(163, 45, 45, 0.12));
}
.apl-alert--alert .apl-alert__cta:hover {
  background: var(--apl-alert-cta-bg-critical-hover, rgba(163, 45, 45, 0.18));
}
.apl-alert--alert .apl-alert__timestamp { color: rgba(80,19,19,0.65); }

.apl-alert--info { color: #003D45; }
.apl-alert--info .apl-alert__icon { color: var(--apl-alert-color-info, #00B5C4); }
.apl-alert--info .apl-alert__desc { color: #007A85; }
.apl-alert--info .apl-alert__cta {
  color: var(--apl-alert-color-info, #007A85);
  background: var(--apl-alert-cta-bg-info, rgba(0, 181, 196, 0.15));
}
.apl-alert--info .apl-alert__cta:hover {
  background: var(--apl-alert-cta-bg-info-hover, rgba(0, 181, 196, 0.22));
}
.apl-alert--info .apl-alert__timestamp { color: rgba(0,61,69,0.65); }

/* Carousel dots row — v81: dots are now INSIDE the alert's footer row.
   Absolutely centered between the CTA (left) and counter (right). */
.apl-alert-dots {
  display: flex;
  gap: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.apl-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 180ms, width 180ms;
  padding: 0;
  border: none;
}
.apl-alert-dot.is-active { width: 20px; border-radius: 3px; }
.apl-alert-banner[data-severity="alert"] .apl-alert-dot.is-active { background: var(--apl-alert-color-critical, #A32D2D); }
.apl-alert-banner[data-severity="info"] .apl-alert-dot.is-active { background: var(--apl-alert-color-info, #00B5C4); }
.apl-alert-dot:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* === Mobile (≤640px) — tighter layout + visible dismiss === */
@media (max-width: 640px) {
  .apl-alert {
    padding: 8px 0 9px;
    gap: 9px;
  }
  .apl-alert__icon { font-size: 15px; }
  .apl-alert__row1 {
    margin-bottom: 1px;
    gap: 8px;
  }
  .apl-alert__title {
    font-size: 11.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .apl-alert__timestamp { font-size: 9.5px; }
  .apl-alert__desc {
    font-size: 10.5px;
    line-height: 1.4;
    margin: 1px 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .apl-alert__cta { font-size: 10.5px; }
  .apl-alert__content { padding-right: 24px; }
  .apl-alert__dismiss {
    display: flex;
    position: absolute;
    right: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
  }
  .apl-alert__dismiss svg { width: 12px; height: 12px; }
  .apl-alert--alert .apl-alert__dismiss { color: #A32D2D; }
  .apl-alert--info .apl-alert__dismiss { color: #007A85; }
  .apl-alert__dismiss:hover,
  .apl-alert__dismiss:focus { opacity: 1; }

  /* v81: counter is now part of the footer row (flex layout) — just
     resize the font for mobile, no positioning override needed. */
  .apl-alert__counter {
    font-size: 9.5px;
  }
  /* v81: mobile CTA pill — tighter padding and smaller font. */
  .apl-alert__cta {
    padding: 4px 10px;
    font-size: 10.5px;
    gap: 4px;
  }
  .apl-alert__footer {
    margin-top: 6px;
    gap: 8px;
  }
  .apl-alert-dots {
    /* On mobile, smaller dots so the centered cluster fits between
       the CTA pill and the counter. */
    gap: 5px;
  }
  .apl-alert-dot {
    width: 5px;
    height: 5px;
  }
  .apl-alert-dot.is-active {
    width: 16px;
  }
}

/* Still need help */
.apl-support {
  background: #f7f7f7;
  padding: 56px 0;
  text-align: center;
}
.apl-support-inner {
  max-width: 560px;
}
.apl-support-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.apl-support-desc {
  font-size: 15px;
  color: #808080;
  margin: 0 0 24px;
}
.apl-support-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.apl-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.apl-support-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.apl-support-btn.primary {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}
.apl-support-btn.primary:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

/* In-app webview: hide elements that would loop or external-open */
body.in-app-webview .apl-support-btn:not(.primary) {
  display: none !important;
}

/* iOS / Android platform hooks (use these to customize CTA per platform) */
/* Example: body[data-platform="ios"] .header-cta { ...App Store badge... } */
/* Example: body[data-platform="android"] .header-cta { ...Play Store badge... } */

/* Mobile: cards stack 2-up, then 1-up */
@media (max-width: 768px) {
  .apl-hero {
    padding: 40px 20px 32px;
  }
  .apl-hero-title {
    font-size: 40px;
  }
  .apl-cat-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Featured grid stays 2-col on tablet — collapse to 1-col below */
  .apl-feat {
    padding: 18px 20px;
  }
  .apl-feat-title {
    font-size: 18px;
  }
  .apl-section-title {
    font-size: 26px;
  }
  .apl-cats,
  .apl-featured {
    padding: 32px 0 40px;
  }
  .apl-support {
    padding: 40px 0;
  }
}
@media (max-width: 480px) {
  .apl-cat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-feat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apl-card {
    padding: 18px 16px;
  }
}


/* ============================================================
   APPLE-INSPIRED INNER PAGES
   Compact page hero + article card list + support strip.
   Used by category_page.hbs and section_page.hbs.
   ============================================================ */

/* Compact page hero (replaces the big decorative hero on inner pages) */
.apl-page-hero {
  background: #ffffff;
  padding: 32px 0 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-page-hero header {
  margin: 0;
}
.apl-page-hero .article-breadcrumbs {
  margin-bottom: 8px;
}
.apl-page-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  margin: 0 0 6px;
  line-height: 1.15;
}
.apl-page-desc {
  font-size: 16px;
  color: #808080;
  margin: 0;
  line-height: 1.5;
  max-width: 680px;
}
.apl-subscribe {
  margin-top: 14px;
}

/* Content area with section blocks + article cards */
.apl-content {
  background: #f7f7f7;
  padding: 32px 0 64px;
}
.apl-section-block {
  margin-bottom: 32px;
}
.apl-section-block:last-child {
  margin-bottom: 0;
}
.apl-section-name {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.apl-section-name a {
  color: inherit;
  text-decoration: none;
}
.apl-section-name a:hover {
  color: #1a1a1a;
  text-decoration: none;
}

/* Article cards */
.apl-article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .apl-article-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
.apl-article-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}
.apl-article-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apl-article-card-desc {
  font-size: 13px;
  color: #808080;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apl-article-card-meta {
  font-size: 11.5px;
  color: #808080;
  margin: 4px 0 0;
}
.apl-article-lock {
  fill: currentColor;
  color: #808080;
  flex-shrink: 0;
}

/* "Show all articles" link card */
.apl-article-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.apl-article-card-more:hover {
  color: #1a1a1a;
  text-decoration: none;
}
.apl-article-card-more svg {
  transition: transform 200ms ease;
}
.apl-article-card-more:hover svg {
  transform: translateX(2px);
}

/* Empty state */
.apl-empty {
  font-size: 14px;
  color: #808080;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
  border: 0.5px dashed rgba(0, 0, 0, 0.1);
}
.apl-empty a {
  color: #1a1a1a;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .apl-page-hero {
    padding: 24px 0 18px;
  }
  .apl-page-title {
    font-size: 24px;
  }
  .apl-page-desc {
    font-size: 14px;
  }
  .apl-content {
    padding: 24px 0 40px;
  }
  .apl-section-name {
    font-size: 17px;
  }
}


/* ============================================================
   SEARCH HIGHLIGHTING
   Wraps matching query terms in <mark class="search-hl"> via
   script.js. Uses the same blue accent we use elsewhere.
   ============================================================ */
/* v110: match the snippet <em> treatment so result-card titles and
   bodies share one visual language for query matches. Previously
   (v58) title marks were font-weight 500 against a bold (600)
   title, which read as the OPPOSITE of highlighted — matched words
   looked LESS emphasized than the surrounding title. Now: same
   bold cyan as snippet em. The stopword filter in script.js
   (around line 549) prevents marks from being wrapped around
   noise words in the first place, so this style only ever lands
   on content words. */
mark.search-hl {
  background: transparent;
  color: #1a1a1a;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
}

/* Article support strip variant (lighter top spacing since it
   follows article content directly, not a separate page section) */
.apl-support--article {
  margin-top: 32px;
  border-radius: 16px;
}


/* ============================================================
   SEARCH RESULTS EMPTY STATE
   Shown when no results match the query.
   ============================================================ */
.apl-noresults {
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border-radius: 16px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  margin: 24px 0;
}
.apl-noresults svg {
  color: #808080;
  margin-bottom: 16px;
}
.apl-noresults-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.apl-noresults-desc {
  font-size: 14px;
  color: #808080;
  margin: 0 0 24px;
}
.apl-noresults-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ============================================================
   ARTICLE CARD READING TIME
   Lays out "X min read · Updated Y" cleanly in the meta line.
   ============================================================ */
.apl-article-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.apl-card-rt:empty {
  display: none;
}
.apl-card-meta-sep:empty {
  display: none;
}
.apl-card-rt {
  font-weight: 500;
  color: #808080;
}

/* Home featured card meta — separator hidden, just shows reading time */
.apl-feat .apl-card-meta-sep {
  display: none;
}


/* ============================================================
   ARTICLE VOTING — Apple-inspired
   "Was this article helpful?" card + Yes/No pill buttons +
   structured follow-up shown when user votes No.
   ============================================================ */
.apl-vote {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 28px 24px;
  margin: 32px 0;
  text-align: center;
}
.apl-vote-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.apl-vote-buttons {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 12px;
}
.apl-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 10px 22px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.apl-vote-btn:hover {
  transform: translateY(-1px);
  background: #ebebeb;
  border-color: rgba(0, 0, 0, 0.25);
}
.apl-vote-btn.is-active {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}
.apl-vote-btn.is-active:hover {
  background: #1a1a1a;
}
.apl-vote-label {
  display: block;
  font-size: 12.5px;
  color: #808080;
  margin: 0;
}

/* Structured follow-up shown after "No" */
.apl-vote-followup {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.apl-vote-followup-title {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.apl-vote-reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.apl-vote-reason {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: #1a1a1a;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.apl-vote-reason:hover {
  background: #ebebeb;
  border-color: rgba(0, 0, 0, 0.2);
}
.apl-vote-reason.is-selected {
  background: #ebebeb;
  border-color: #1a1a1a;
  color: #1a1a1a;
  font-weight: 500;
}
.apl-vote-followup-cta {
  font-size: 13px;
  color: #808080;
  margin: 0;
}
.apl-vote-contact-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #1a1a1a;
  cursor: pointer;
  font-weight: 500;
}
.apl-vote-contact-link:hover {
  text-decoration: underline;
}


/* ============================================================
   ARTICLE BODY TYPOGRAPHY — Apple-inspired scale
   Tightens heading sizes, line-height, paragraph spacing in
   article content. Applies only inside [itemprop="articleBody"]
   so it doesn't affect navigation chrome.
   ============================================================ */
[itemprop="articleBody"] {
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
}
[itemprop="articleBody"] p {
  margin: 0 0 16px;
}
[itemprop="articleBody"] h1 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 32px 0 12px;
}
[itemprop="articleBody"] h2 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 28px 0 10px;
}
[itemprop="articleBody"] h3 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 24px 0 8px;
}
[itemprop="articleBody"] h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 20px 0 8px;
}
[itemprop="articleBody"] ul,
[itemprop="articleBody"] ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
[itemprop="articleBody"] li {
  margin: 0 0 6px;
  line-height: 1.55;
}
[itemprop="articleBody"] a {
  color: #1a1a1a;
}
[itemprop="articleBody"] a:hover {
  color: #1a1a1a;
}
[itemprop="articleBody"] blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  background: #f7f7f7;
  border-left: 3px solid #1a1a1a;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #808080;
}
[itemprop="articleBody"] code {
  background: #f7f7f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #1a1a1a;
}
[itemprop="articleBody"] pre {
  background: #f7f7f7;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}
[itemprop="articleBody"] pre code {
  background: transparent;
  padding: 0;
}
[itemprop="articleBody"] hr {
  border: none;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  margin: 32px 0;
}
[itemprop="articleBody"] img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}


/* ============================================================
   ARTICLE META (reading time + updated date)
   Stand-alone, always visible regardless of article_metadata setting.
   ============================================================ */
.apl-article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  font-size: 13px;
  color: #808080;
}
.apl-article-meta li {
  margin: 0;
}
.apl-article-meta .apl-article-reading-time {
  font-weight: 500;
  color: #808080;
}


/* ============================================================
   PHASE COHESIVE — neutralize old gray strips on internal pages
   The remaining theme templates (requests, profile, subscriptions,
   etc.) render their breadcrumbs inside <div class="bg-gray-100">
   strips. Restyle them to match the design system (light background,
   no heavy weight, tighter spacing) without rewriting each template.
   ============================================================ */
.bg-gray-100 {
  background: #f7f7f7 !important;
}

/* Specifically tighten and clean the breadcrumb strips that sit
   between hero/header and page-container on internal pages */
.bg-gray-100.pt-4,
.bg-gray-100.pt-5,
.bg-gray-100.pt-5.pb-1 {
  padding: 12px 0 !important;
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.bg-gray-100 .breadcrumbs {
  margin-bottom: 0;
  font-size: 0.8125rem;
}
.bg-gray-100 .breadcrumbs li {
  color: #808080;
}
.bg-gray-100 .breadcrumbs li:last-child {
  color: #1a1a1a;
}
/* Skip "World ID Help Center" root on these strips too */
.bg-gray-100 .breadcrumbs > li:first-child {
  display: none;
}
.bg-gray-100 .breadcrumbs > li:first-child + li::before {
  display: none;
}
.bg-gray-100 .breadcrumbs > li:first-child + li {
  padding-left: 0;
}


/* ============================================================
   PHASE COHESIVE — footer compaction
   Tighten the existing 1066-line footer template without
   rewriting its conditional logic. Reduces visual weight to
   match the Apple-minimal language.
   ============================================================ */
.footer {
  background: #ffffff !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: 32px !important;
  padding-bottom: 24px !important;
  margin-top: 48px !important;
}
.footer .svg-shape {
  display: none !important;
}
.footer .nav-link,
.footer .footer-link {
  font-size: 13px !important;
  color: #808080 !important;
  padding: 4px 12px !important;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.footer .nav-link:hover,
.footer .footer-link:hover {
  color: #1a1a1a !important;
}
.footer h2,
.footer h3,
.footer .footer-heading {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em;
  margin-bottom: 12px !important;
}
.footer p,
.footer .text-base {
  font-size: 12px !important;
  color: #808080 !important;
}
/* Powered-by-zendesk row */
.powered-by-zendesk {
  font-size: 11px !important;
  color: #808080 !important;
  padding: 12px 0 !important;
  background: #ffffff !important;
  border-top: 0.5px solid rgba(0, 0, 0, 0.05) !important;
}


/* ============================================================
   PHASE COHESIVE — internal page chrome
   Apply container padding and consistent spacing for pages that
   still use the original page-container structure (requests,
   profile, subscriptions, contributions, new_request).
   ============================================================ */
.requests-page .page-container,
.user-profile-page .page-container,
.subscriptions-page .page-container,
.contributions-page .page-container,
.request-page .page-container,
.new-request-page .page-container {
  max-width: 980px;
  padding-top: 24px;
}
.requests-page h1,
.user-profile-page h1,
.subscriptions-page h1,
.contributions-page h1,
.request-page h1,
.new-request-page h1,
.new-community-post-page h1 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 16px 0 8px;
}
.requests-page h2,
.user-profile-page h2,
.subscriptions-page h2,
.contributions-page h2 {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.005em;
}


/* ============================================================
   REMOVE REDUNDANT BREADCRUMB EYEBROW ON CATEGORY/SECTION PAGES
   On category pages, after hiding the "World ID Help Center"
   root, the only remaining breadcrumb item is the category
   itself — which exactly duplicates the <h1>. Hide entirely.
   On section pages, hide just the last item (the section name,
   which duplicates the <h1>), leaving the category as parent
   context above the title.
   ============================================================ */

/* Category pages — hide the whole eyebrow */
html.category-page .article-breadcrumbs {
  display: none;
}

/* Section pages — hide just the last item (section name = h1) */
html.section-page .article-breadcrumbs .breadcrumbs > li:last-child {
  display: none;
}


/* ============================================================
   FEATURED ARTICLE CARD (promoted in section)
   When an article inside a section's article list is marked
   "Promoted" in Zendesk admin, it gets .apl-article-card--featured
   class. Spans both columns of the 2-col grid, with a Featured
   badge and slightly more prominent styling.
   ============================================================ */
.apl-article-card--featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ffffff 0%, #ebebeb 100%);
  border-color: rgba(0, 102, 204, 0.18);
  padding: 22px 26px;
}
.apl-article-card--featured .apl-article-card-title {
  font-size: 17px;
  letter-spacing: -0.005em;
}
.apl-article-card--featured .apl-article-card-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
}
.apl-article-card-badge {
  display: inline-block;
  font-size: 10px;
  color: #1a1a1a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  padding: 3px 9px;
  background: #ffffff;
  border-radius: 9999px;
  border: 0.5px solid rgba(0, 102, 204, 0.25);
  width: fit-content;
}

/* Section name on category page — no link, just a heading */
.apl-section-name {
  color: #1a1a1a;
}

/* Mobile: featured cards still span the only column (1fr) */
@media (max-width: 480px) {
  .apl-article-card--featured {
    grid-column: 1 / -1;
    padding: 18px 18px;
  }
}


/* ============================================================
   ARTICLE CARD ICON
   Section-based inline SVG icon at top-left of each card.
   Injected by script.js based on the section name (keyword
   match). Falls back to generic article icon.
   ============================================================ */
.apl-article-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0 12px;
  color: #1a1a1a;
  background: #f7f7f7;
  border-radius: 8px;
  flex-shrink: 0;
}
.apl-article-card-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Featured card variant — slightly larger icon, tinted background */
.apl-article-card--featured .apl-article-card-icon {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 102, 204, 0.18);
}
.apl-article-card--featured .apl-article-card-icon svg {
  width: 20px;
  height: 20px;
  color: #1a1a1a;
}

/* Home page featured card — icon at top */
.apl-feat .apl-article-card-icon {
  margin-bottom: 14px;
}

/* Mobile — slightly smaller icon */
@media (max-width: 480px) {
  .apl-article-card-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
  }
  .apl-article-card-icon svg {
    width: 16px;
    height: 16px;
  }
}


/* ============================================================
   V3 — CATEGORY PAGE REDESIGN
   Section emblems + three card shapes (standard / wide featured /
   pillar tall) + optional banner images on featured/pillar cards.
   Per-card icons are retired; only section emblems carry icon
   weight now. Appended last so it overrides earlier rules.
   ============================================================ */

/* --- Section block: bigger heading, generous gap, thin rule --- */
.apl-section-block {
  margin: 0 0 96px;
  padding: 0 0 96px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.apl-section-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Section heading row: emblem + h2 side by side */
.apl-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.apl-section-emblem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ebebeb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1a1a1a;
}
.apl-section-emblem svg {
  width: 32px;
  height: 32px;
  display: block;
}
/* Override earlier .apl-section-name rules */
.apl-section-block > .apl-section-header > .apl-section-name,
.apl-section-block > .apl-section-name {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.2;
}

/* --- Article list grid: 2 cols, supports row/col spans --- */
.apl-article-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 16px;
}
@media (min-width: 768px) {
  .apl-article-list {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 16px;
  }
}

/* --- Standard card (1x1) — text-only, no per-card icon --- */
.apl-article-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}

/* Retire the per-card icon — emblem-only now */
.apl-article-card-icon { display: none !important; }

/* Title — Apple-ish weight 500 + tighter tracking */
.apl-article-card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Description — 3-line clamp (no mid-word "...") */
.apl-article-card-desc {
  font-size: 13px;
  color: #808080;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Banner (top strip of featured / pillar cards) --- */
.apl-card-banner {
  width: calc(100% + 40px);
  margin: -20px -20px 14px;
  background: linear-gradient(135deg, #1a1a1a 0%, #1F3A5F 60%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.apl-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.08) 0, transparent 50%);
  pointer-events: none;
}
.apl-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* === Banner fallback target (v69) ===
   When script.js can't find a card-only image in the body, it injects the
   section's icon (or a generic 2x2 SVG) into [data-fallback-target] and
   tags the card with data-banner-style="fallback". Default state: hidden
   (zero size, no impact). Active state: visible, centered icon. */
.apl-card-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.apl-card-banner-fallback > img,
.apl-card-banner-fallback > svg {
  width: 38%;
  max-width: 56px;
  height: auto;
  opacity: 0.92;
}

/* Fallback active state — featured/pillar cards on category/section pages
   only. Home bento cards have their own slot-index cycling palette
   (see "FEATURED BENTO GRID" block above). For inner pages we use a single
   cyan accent so cards across a section read as a set. */
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner {
  background: linear-gradient(135deg, #00B5C4 0%, #007A85 100%);
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner::after,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner::after {
  /* suppress the radial overlay when we're showing an icon — keeps the
     cyan accent flat and the icon high-contrast */
  display: none;
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner-fallback > img,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner-fallback > img {
  /* invert so dark/grayscale section SVGs read as white on the cyan tile */
  filter: brightness(0) invert(1);
}
.apl-article-card--featured[data-banner-style="fallback"] .apl-card-banner-fallback > svg,
.apl-article-card--pillar[data-banner-style="fallback"] .apl-card-banner-fallback > svg {
  color: #ffffff;
}

/* --- Featured wide card (2x1) — spans both columns --- */
.apl-article-card--featured {
  grid-column: span 2;
  background: #ffffff;
  border-color: rgba(0, 102, 204, 0.15);
  padding: 20px;
}
.apl-article-card--featured .apl-card-banner {
  height: 140px;
}
.apl-article-card--featured .apl-article-card-title {
  font-size: 18px;
}
.apl-article-card--featured .apl-article-card-desc {
  font-size: 13.5px;
  -webkit-line-clamp: 2;
}

/* --- Pillar card (1x2) — spans both rows on the left --- */
.apl-article-card--pillar {
  grid-row: span 2;
  background: #ffffff;
  border-color: rgba(0, 102, 204, 0.15);
}
.apl-article-card--pillar .apl-card-banner {
  height: 220px;
}
.apl-article-card--pillar .apl-article-card-title {
  font-size: 19px;
  line-height: 1.25;
}
.apl-article-card--pillar .apl-article-card-desc {
  font-size: 13.5px;
  -webkit-line-clamp: 5;
}

/* Featured eyebrow — keep but lighter than the previous pill badge */
.apl-article-card--featured .apl-article-card-badge,
.apl-article-card--pillar .apl-article-card-badge {
  display: inline-block;
  font-size: 10.5px;
  color: #1a1a1a;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  padding: 0;
  background: transparent;
  border: none;
  width: auto;
}

/* --- Author-controlled card image (Mode B) ---
   Authors add class="card-only" to a body image; it's hidden
   from the article body but extracted by script.js as the card
   hero banner. */
.article-body img.card-only,
.article-content img.card-only,
.apl-article-body img.card-only {
  display: none !important;
}

/* --- Author-controlled card summary ---
   Authors add <p class="card-summary">...</p> at the top of an
   article body. script.js uses that as the card description.
   We hide it from the article body itself so it doesn't read as
   a redundant lead paragraph. */
.article-body p.card-summary,
.article-content p.card-summary,
.apl-article-body p.card-summary,
.article-body .card-summary,
.article-content .card-summary,
.apl-article-body .card-summary {
  display: none !important;
}

/* --- Author-controlled pillar marker ---
   Authors add <span class="card-pillar" hidden></span> anywhere
   in the article body. script.js uses it to upgrade promoted
   cards to the tall pillar shape. Hide from body display in case
   author forgets the hidden attribute. */
.article-body .card-pillar,
.article-content .card-pillar,
.apl-article-body .card-pillar,
.article-body [data-card-shape],
.article-content [data-card-shape],
.apl-article-body [data-card-shape] {
  display: none !important;
}

/* --- Sticky bar dedup (category pages only) ---
   On category pages the breadcrumb leaf == the page title, so
   the sticky bar showed the same name twice. Hide the
   breadcrumb crumbs there; the title carries the context. */
html.category-page .article-sticky-bar__crumbs {
  display: none;
}

/* --- Mobile collapse: all cards become 1×1 stacked --- */
@media (max-width: 768px) {
  .apl-section-block {
    margin-bottom: 56px;
    padding-bottom: 56px;
  }
  .apl-section-block > .apl-section-header > .apl-section-name,
  .apl-section-block > .apl-section-name {
    font-size: 22px;
  }
  .apl-section-emblem {
    width: 44px;
    height: 44px;
  }
  .apl-section-emblem svg {
    width: 24px;
    height: 24px;
  }
  .apl-article-card--featured,
  .apl-article-card--pillar {
    grid-column: span 1;
    grid-row: span 1;
  }
  .apl-article-card--featured .apl-card-banner,
  .apl-article-card--pillar .apl-card-banner {
    height: 140px;
  }
  .apl-article-card--pillar .apl-article-card-desc {
    -webkit-line-clamp: 3;
  }
}


/* v20 reveal-on-scroll-up + mobile search FAB — removed v41 cleanup
   (header reveal superseded in v30 by `html.is-scrolling-down header.header
   { transform: none !important }`; FAB retired in v30, see global
   `.mobile-search-fab, #apl-mobile-search-fab { display: none !important }`) */


/* ============================================================
   V22 — POLISH PASS
   1. Tighter section spacing (56px, no hairline rule)
   2. Featured card: banner on the left, text on the right
      (vertical split instead of horizontal)
   3. Sleeker main header (60px tall vs 88px)
   4. Bolder headings throughout (weight 600 instead of 500)
   ============================================================ */

/* --- 1. Section spacing — whitespace only, no rule --- */
.apl-section-block {
  margin: 0 0 56px !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.apl-section-block:last-child {
  margin-bottom: 0 !important;
}

/* --- 2. Card body wrapper holds padding now (was on the card) --- */
/* v98: bumped padding 20->24 + gap 6->8 for breathing room on category/section
   cards. Compact (text-only) override below was also relaxed -- it used to
   force padding-top:0 which made non-promoted cards' titles hug the top edge. */
.apl-article-card {
  padding: 0;
}
.apl-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0; /* prevent flex item overflow */
}

/* Wide featured card — banner LEFT, text RIGHT (vertical split) */
.apl-article-card--featured {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}
.apl-article-card--featured .apl-card-banner {
  width: 38%;
  flex-shrink: 0;
  min-height: 200px;
  height: auto;
  margin: 0;
}
.apl-article-card--featured .apl-card-body {
  padding: 24px 28px; /* v98: aligned w/ 24px base rhythm */
  justify-content: center;
}

/* Pillar card — keep banner on top, text below (works for tall cards) */
.apl-article-card--pillar {
  flex-direction: column;
  padding: 0;
}
.apl-article-card--pillar .apl-card-banner {
  width: 100%;
  margin: 0;
}
.apl-article-card--pillar .apl-card-body {
  padding: 24px; /* v98: matched base */
}

/* Mobile: featured card collapses to banner-on-top (1 column) */
@media (max-width: 768px) {
  .apl-article-card--featured {
    flex-direction: column;
  }
  .apl-article-card--featured .apl-card-banner {
    width: 100%;
    height: 140px;
    min-height: 0;
  }
  .apl-article-card--featured .apl-card-body {
    padding: 20px 24px; /* v98: scaled to match new 24px desktop rhythm */
  }
  .apl-section-block {
    margin-bottom: 40px !important;
  }
}

/* --- 3. Sleeker main header — reduce 88px to 60px --- */
header.header {
  height: 60px !important;
}
main {
  margin-top: 60px !important;
}
/* Re-tighten internal navbar vertical alignment */
header.header .navbar {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}

/* --- 4. Headings use Medium (brand-sanctioned max weight) --- */
.apl-hero-title,
.apl-hero-title-muted,
.apl-section-title,
.apl-section-name,
.apl-page-title,
.apl-article-card-title,
.apl-feat-title,
.apl-card-title,
.apl-support-title {
  font-weight: 500 !important;
}
.apl-article-card--featured .apl-article-card-title,
.apl-article-card--pillar .apl-article-card-title {
  font-weight: 500 !important;
}
/* Article body headings */
.article-body h1, .article-content h1, .apl-article-body h1,
.article-body h2, .article-content h2, .apl-article-body h2,
.article-body h3, .article-content h3, .apl-article-body h3 {
  font-weight: 500 !important;
}


/* ============================================================
   V23 — IMAGE RATIO / POSITION + REMOVE FEATURED LABEL
   Author markers (in article body):
     <span class="card-image" data-ratio="..." data-position="..." hidden></span>
   data-ratio: third | half | full   (default: half)
   data-position: left | right       (ignored for ratio=full)
   ============================================================ */

/* --- Remove the visible "Featured" label across all cards ---
   The non-standard size now carries the meaning of "featured". */
.apl-article-card-badge {
  display: none !important;
}

/* --- Hide the marker element itself from article body view --- */
.article-body .card-image,
.article-content .card-image,
.apl-article-body .card-image {
  display: none !important;
}

/* --- Default featured card: image LEFT, half width (was 38%) --- */
.apl-article-card--featured .apl-card-banner {
  width: 50%;
}

/* --- Ratio: 1/3 (third) --- */
.apl-article-card--featured[data-image-ratio="third"] .apl-card-banner {
  width: 33.333%;
}

/* --- Ratio: 1/2 (half) — explicit (default) --- */
.apl-article-card--featured[data-image-ratio="half"] .apl-card-banner {
  width: 50%;
}

/* --- Position: right — banner moves to the right side --- */
.apl-article-card--featured[data-image-position="right"] {
  flex-direction: row-reverse;
}

/* --- Ratio: full — image fills the card, text overlays at bottom
       with a dark gradient for legibility --- */
.apl-article-card--featured[data-image-ratio="full"] {
  position: relative;
  flex-direction: column;
  min-height: 260px;
  justify-content: flex-end;
  color: #ffffff;
  overflow: hidden;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
/* Dark gradient overlay — bottom-heavy so text reads on top */
.apl-article-card--featured[data-image-ratio="full"] .apl-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  color: #ffffff;
  justify-content: flex-end;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-title {
  color: #ffffff;
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-desc {
  color: rgba(255, 255, 255, 0.88);
}
.apl-article-card--featured[data-image-ratio="full"] .apl-card-body .apl-article-card-meta {
  color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   V24 — SEARCH RESULTS PAGE
   Filter pills at top + special AI Answer card + single-column
   result cards with section path eyebrow and always-visible
   snippet.
   ============================================================ */

/* --- Filter pill rows --- */
.apl-search-filters-section {
  background: #ffffff;
  padding: 0 0 8px;
}
.apl-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.apl-pill-row:last-child {
  margin-bottom: 0;
}
.apl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #f7f7f7;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 200ms ease,
              color 200ms ease,
              border-color 200ms ease,
              transform 160ms ease;
  white-space: nowrap;
}
.apl-pill:hover {
  background: #ebebeb;
  color: #1a1a1a;
  border-color: rgba(0, 102, 204, 0.18);
  text-decoration: none;
}
.apl-pill:active {
  transform: scale(0.97);
}
.apl-pill--active {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}
.apl-pill--active:hover {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}
.apl-pill-name {
  line-height: 1;
}
.apl-pill-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9999px;
  font-weight: 500;
  background: #ffffff;
  color: #808080;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
}
.apl-pill--active .apl-pill-count {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}

/* --- AI Answer card --- */
.apl-ai-answer-section {
  background: #ffffff;
  padding: 0 0 8px;
}
.apl-ai-answer {
  background: linear-gradient(180deg, #F4F8FD 0%, #ebebeb 100%);
  border: 0.5px solid rgba(0, 102, 204, 0.15);
  border-radius: 16px;
  padding: 22px 26px;
  margin: 16px 0 0;
}
.apl-ai-answer__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
.apl-ai-answer__label svg {
  flex-shrink: 0;
}
.apl-ai-answer__body {
  font-size: 14.5px;
  color: #1a1a1a;
  line-height: 1.6;
}
.apl-ai-answer__body p {
  margin: 0 0 12px;
}
.apl-ai-answer__body p:last-child {
  margin-bottom: 0;
}
.apl-ai-answer__body a {
  color: #1a1a1a;
  text-decoration: none;
}
.apl-ai-answer__body a:hover {
  text-decoration: underline;
}
.apl-ai-answer__body ul,
.apl-ai-answer__body ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.apl-ai-answer__body li {
  margin: 0 0 4px;
}

/* --- Results section + result cards --- */
.apl-results-section {
  background: #f7f7f7;
  padding: 24px 0 56px;
  min-height: 200px;
}
.apl-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apl-result-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}
.apl-result-eyebrow {
  font-size: 11.5px;
  color: #808080;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.apl-result-sep {
  color: #ebebeb;
}
.apl-result-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apl-result-external {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #808080;
}
.apl-result-snippet {
  font-size: 13.5px;
  color: #808080;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Zendesk auto-wraps matched query terms in <em> inside the
   result snippet. v108: dropped the boxy gray-blue pills — every
   matched word (including stopwords like "a", "an", "to", "me")
   got its own pill, which clustered visually and made result
   lists hard to scan. New look: no background, no padding, just
   bold + brand cyan. Stopword <em>s are unwrapped by a small JS
   loop in templates/search_results.hbs so only content words
   keep the accent. Broader .apl-result-card em selector also
   covers any title <em> Zendesk might emit in future. */
.apl-result-card em,
.apl-result-snippet em {
  background: transparent;
  color: #1a1a1a;
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-weight: 600;
}
.apl-result-meta {
  font-size: 11.5px;
  color: #808080;
  margin: 0;
}

/* --- Pagination --- */
.apl-search-pagination {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}
.apl-search-pagination .pagination {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.apl-search-pagination .pagination .page-item .page-link,
.apl-search-pagination .pagination a,
.apl-search-pagination .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  transition: background 160ms ease, color 160ms ease;
}
.apl-search-pagination .pagination a:hover {
  background: #ebebeb;
  color: #1a1a1a;
  text-decoration: none;
}
.apl-search-pagination .pagination .is-active a,
.apl-search-pagination .pagination .current a,
.apl-search-pagination .pagination .active a {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

/* --- Mobile: pill row scrolls horizontally --- */
@media (max-width: 768px) {
  .apl-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-right: -16px;
    padding-right: 16px;
  }
  .apl-pill-row::-webkit-scrollbar {
    display: none;
  }
  .apl-pill {
    flex-shrink: 0;
  }
  .apl-ai-answer {
    padding: 16px 18px;
    margin-top: 12px;
  }
  .apl-result-card {
    padding: 16px 18px;
  }
  .apl-result-title {
    font-size: 16px;
  }
}


/* ============================================================
   V25 — SEARCH RESULTS POLISH
   1. Remove visible seam lines between page sections
   2. Unify white→gray transition (single soft step instead of
      multiple visible boundaries)
   3. Smooth pill click feedback + page-load fade-in
   ============================================================ */

/* --- 1+2. Cohesive backgrounds on the search results page --- */
/* The page hero stays white. Filter row, AI answer, and results
   all share the same soft gray so they read as one section.
   The only color transition is hero → "rest of page". */
html.search-results-page .apl-page-hero {
  border-bottom: none !important;
}
html.search-results-page .apl-search-filters-section,
html.search-results-page .apl-ai-answer-section,
html.search-results-page .apl-results-section {
  background: #f7f7f7;
}
html.search-results-page .apl-search-filters-section {
  padding: 24px 0 4px;
}
html.search-results-page .apl-ai-answer-section {
  padding: 12px 0 0;
}
html.search-results-page .apl-results-section {
  padding: 16px 0 56px;
}

/* Pills now sit on gray background — switch their fill to white
   so they read clearly. Active stays dark navy. */
html.search-results-page .apl-pill {
  background: #ffffff;
}
html.search-results-page .apl-pill:hover {
  background: #ebebeb;
}
html.search-results-page .apl-pill--active {
  background: #1a1a1a;
}
html.search-results-page .apl-pill--active:hover {
  background: #1a1a1a;
}

/* --- 3. Smooth page-load fade-in (results, filters, hero) --- */
@keyframes apl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.search-results-page .apl-page-hero > *,
html.search-results-page .apl-search-filters-section > *,
html.search-results-page .apl-ai-answer-section > *,
html.search-results-page .apl-result-list,
html.search-results-page .apl-search-pagination,
html.search-results-page .apl-noresults {
  animation: apl-fade-up 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html.search-results-page .apl-search-filters-section > * { animation-delay: 60ms; }
html.search-results-page .apl-ai-answer-section > *     { animation-delay: 120ms; }
html.search-results-page .apl-result-list,
html.search-results-page .apl-noresults                  { animation-delay: 160ms; }
html.search-results-page .apl-search-pagination          { animation-delay: 220ms; }

/* Respect reduced-motion preference — skip the fade for users
   who want minimal animation. */
@media (prefers-reduced-motion: reduce) {
  html.search-results-page .apl-page-hero > *,
  html.search-results-page .apl-search-filters-section > *,
  html.search-results-page .apl-ai-answer-section > *,
  html.search-results-page .apl-result-list,
  html.search-results-page .apl-search-pagination,
  html.search-results-page .apl-noresults {
    animation: none !important;
  }
}

/* Pill click feedback — JS adds .is-clicked while navigation starts */
.apl-pill.is-clicked {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #1a1a1a !important;
}
.apl-pill.is-clicked .apl-pill-count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: transparent !important;
}


/* ============================================================
   V26 — FIXES
   1. Restore padding on home page featured cards (.apl-feat).
      v22 zeroed out .apl-article-card padding to support the
      banner-on-side layout, but home featured cards share that
      class without the inner .apl-card-body wrapper, so their
      content was hugging the card edge (eyebrow text clipped).
   2. Sticky search filters — filter pill row stays pinned just
      below the main header while scrolling the results list.
   ============================================================ */

/* --- 1. Home page featured cards keep their padding ---
   Bento cards (v64) opt out — they have a full-bleed banner on top
   and apply their own inner padding to the text content only. --- */
.apl-feat.apl-article-card:not(.apl-article-card--bento),
.apl-feat-grid .apl-article-card:not(.apl-article-card--bento) {
  padding: 20px 22px;
}
@media (max-width: 768px) {
  .apl-feat.apl-article-card:not(.apl-article-card--bento),
  .apl-feat-grid .apl-article-card:not(.apl-article-card--bento) {
    padding: 16px 18px;
  }
}

/* --- 2. Sticky search filters on the results page ---
   Filters pin just below the main header (60px). Background
   matches the page so result cards scroll cleanly underneath. */
html.search-results-page .apl-search-filters-section {
  position: sticky;
  top: var(--main-header-height, 60px);
  z-index: 50;
  /* Slight shadow appears when stuck, via the page below scrolling away */
  box-shadow: 0 4px 12px -10px rgba(0, 0, 0, 0.12);
  /* Background already #f7f7f7 from v25 — keep solid so cards don't show through */
  background: #f7f7f7;
  padding-top: 16px;
  padding-bottom: 12px;
}


/* ============================================================
   V27 — MULTI-FIX BUNDLE
   1. Hide all .apl-support sections (Still need help? CTA)
      across every page — removing for now, will re-add later.
   2. Force featured cards to single column on mobile regardless
      of whether data-image-ratio is set. Earlier v22 mobile rule
      was being overridden by v23's default 50% width.
   3. Remove the visible line under the main header at rest —
      .header.border-bottom utility class was drawing a hairline.
   4. Search again card styles (used at the bottom of article
      pages now that the library nav is gone).
   ============================================================ */

/* --- 1. Hide support strip globally (page-level CTA removed for now) --- */
.apl-support {
  display: none !important;
}

/* --- 2. Mobile featured cards always collapse to single column,
       regardless of data-image-ratio. Full-image keeps its full-bleed
       treatment (already handled by its own rules). --- */
@media (max-width: 768px) {
  .apl-article-card--featured:not([data-image-ratio="full"]) {
    flex-direction: column !important;
  }
  .apl-article-card--featured:not([data-image-ratio="full"]) .apl-card-banner {
    width: 100% !important;
    height: 160px !important;
    min-height: 0 !important;
  }
  .apl-article-card--featured:not([data-image-ratio="full"]) .apl-card-body {
    padding: 18px 20px !important;
  }
}

/* --- 3. Main header: no visible border-bottom at rest --- */
header.header,
header.header.border-bottom {
  border-bottom: none !important;
}
/* Theme adds a gradient fade after the header; ensure it stays disabled */
.header::after {
  display: none !important;
}

/* --- 4. Search again card — removed v41 cleanup
       (replaced by `.apl-related` in v28-v29) --- */

/* --- 4b. Home topic card icons: force size on injected SVGs ---
       The keyword-matched icon SVG is generated at 32px (for section
       emblems). Inside .apl-card-icon (24px container), we scale
       it down via CSS so the home topic cards look proportionate. */
.apl-card-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

/* --- 5. Hide the legacy article library-style navigation
       (Previous/Next + Articles in section + recent articles).
       Related articles are now re-presented in the new
       .apl-related card below the article — see section 6.
       --- */
#article-section-nav,
.article-section-nav,
.article-relative-navigation,
#section-articles-sidebar,
.section-articles-sidebar {
  display: none !important;
}
/* The related/recent articles footer on article page is the
   <footer class="row my-6"> that contains {{related_articles}}
   and {{recent_articles}}. Target via the article body context. */
.article-body > footer.row,
article > footer.row {
  display: none !important;
}

/* --- 6. Related articles card (replaces the old Search again card).
       Renders Zendesk's {{related_articles}} output as our cards. --- */
.apl-related {
  background: #f7f7f7;
  padding: 48px 0;
  margin-top: 32px;
}
.apl-related-inner {
  max-width: 720px;
  margin: 0 auto;
}
.apl-related-title {
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
  text-align: center;
}
/* Hide Zendesk's default "Related articles" header — we use our own h2.
   Catch every form the helper might render it as. */
.apl-related .related-articles > h3,
.apl-related .related-articles--header,
.apl-related [data-element="related-articles"] > h3,
.apl-related h3 {
  display: none !important;
}

/* --- V29: Single container card holding 2-3 article rows --- */
/* The <ul> becomes the card. Each <li> is a row with a separator. */
.apl-related .related-articles ul,
.apl-related .article-list,
.apl-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.apl-related li,
.apl-related .article-list-item {
  margin: 0;
  padding: 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related li:first-child,
.apl-related .article-list-item:first-child {
  border-top: none;
}
/* Cap the list at 3 visible articles */
.apl-related li:nth-child(n+4),
.apl-related .article-list-item:nth-child(n+4) {
  display: none !important;
}
.apl-related li a,
.apl-related .article-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 20px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  transition: background 200ms ease, color 200ms ease;
}
/* Right-side chevron indicates "go to article" */
.apl-related li a::after,
.apl-related .article-list-item a::after {
  content: "›";
  color: #ebebeb;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease, color 200ms ease;
}
.apl-related li a:hover,
.apl-related .article-list-item a:hover {
  background: #f7f7f7;
  color: #1a1a1a;
  text-decoration: none;
}
.apl-related li a:hover::after,
.apl-related .article-list-item a:hover::after {
  color: #1a1a1a;
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .apl-related {
    padding: 36px 0;
  }
  .apl-related-title {
    font-size: 19px;
  }
  .apl-related li a,
  .apl-related .article-list-item a {
    padding: 14px 16px;
    font-size: 14px;
  }
  .apl-related li a::after,
  .apl-related .article-list-item a::after {
    font-size: 18px;
  }
}


/* ============================================================
   V30 — UNIFIED SEARCH OVERLAY
   1. Slim mobile main header to 48px, always visible (drops v20
      reveal-on-scroll-up behavior)
   2. Hide mobile FAB (single search affordance now)
   3. Eyebrow header padding bump (more relaxed)
   4. Suggestions dropdown overlay below the search input
      (no backdrop — page stays fully visible)
   ============================================================ */

/* --- 1. Mobile main header slimmed to 48px + always visible --- */
@media (max-width: 768px) {
  header.header {
    height: 48px !important;
  }
  main {
    margin-top: 48px !important;
  }
  header.header .navbar {
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* Disable the v20 reveal-on-scroll-up — header is always visible now */
html.is-scrolling-down header.header {
  transform: none !important;
}

/* --- 2. Mobile FAB retired (single header search affordance) --- */
.mobile-search-fab,
#apl-mobile-search-fab {
  display: none !important;
}

/* --- 3. Eyebrow header padding bump — more relaxed, more visible --- */
.article-sticky-bar__inner {
  padding: 10px 2rem !important;
  min-height: 54px !important;
}
@media (max-width: 768px) {
  .article-sticky-bar__inner {
    padding: 9px 16px !important;
    min-height: 48px !important;
  }
}

/* --- 4. Suggestions dropdown --- */
.apl-search-dropdown {
  position: fixed;
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 24px 56px -12px rgba(0, 0, 0, 0.22),
    0 6px 16px -6px rgba(0, 0, 0, 0.08);
  z-index: 1500;
  max-height: 460px;
  overflow-y: auto;
  max-width: 480px;
}
.apl-search-dropdown[hidden] {
  display: none !important;
}
@media (max-width: 768px) {
  .apl-search-dropdown {
    max-width: none;
    padding: 6px;
    border-radius: 14px;
  }
}
.apl-search-dropdown__label {
  font-size: 10px;
  color: #808080;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px 6px;
}
.apl-search-dropdown__list {
  display: flex;
  flex-direction: column;
}
.apl-search-dropdown__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 13px;
  line-height: 1.4;
  transition: background 160ms ease;
}
.apl-search-dropdown__row:hover,
.apl-search-dropdown__row:focus,
.apl-search-dropdown__row[aria-current="true"] {
  background: #f7f7f7;
  outline: none;
}
.apl-search-dropdown__row svg {
  color: #808080;
  flex-shrink: 0;
}
.apl-search-dropdown__row-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.apl-search-dropdown__row--article {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.apl-search-dropdown__path {
  font-size: 10.5px;
  color: #808080;
  letter-spacing: 0.04em;
}
.apl-search-dropdown__title {
  font-size: 13.5px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.35;
  width: 100%;
}
/* v58: subtler highlight in the live-search dropdown — Medium
   weight, no pill background or color shift. Matches the search
   results page treatment for consistency. */
.apl-search-hl {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-weight: 500;
}
.apl-search-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  margin: 6px -8px -8px;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 160ms ease;
}
.apl-search-dropdown__footer:hover {
  background: #f7f7f7;
}
.apl-search-dropdown__footer svg {
  flex-shrink: 0;
}
.apl-search-dropdown__empty {
  font-size: 13px;
  color: #6E6E73;
  padding: 22px 16px;
  text-align: center;
}
.apl-search-dropdown__loading {
  font-size: 12.5px;
  color: #808080;
  padding: 16px 14px;
  text-align: center;
}

/* When overlay is open, hint that the input is active */
html.apl-search-open header.header input[type="search"] {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}


/* ============================================================
   V31 — FIX: search input visible in mobile main header
   ============================================================
   Zendesk Xavier's mobile menu hides search behind the hamburger.
   Search lives inside `<div class="nav menu" x-show="isOpen">`,
   which Alpine.js collapses on mobile until the toggle is tapped.
   We override that — force the menu visible on mobile, but show
   only the search inside it (hide other menu items + the toggle
   button). Effectively pulls the search out without a template
   edit. Also tightens eyebrow alignment to match the navbar
   content edge.
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Force the navbar mobile menu to act as a flex row that
        holds the search input always visible.
        Alpine sets `display: none` inline when collapsed — our
        `!important` rules win. */
  header.header .nav.menu,
  header.header [class*="menu-"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 8px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }

  /* 2. Inside the menu, hide only items that aren't the search,
        the header-actions (language + CTA), or the user-menu.
        Custom links, category dropdowns, etc. stay hidden — but
        the actions and user avatar render alongside the search. */
  header.header .nav.menu > *:not(.search):not([class*="search"]):not(.header-actions):not(.user-menu) {
    display: none !important;
  }

  /* 3. The hamburger toggle is no longer needed. */
  header.header .navbar-toggle {
    display: none !important;
  }

  /* 3b. Header-actions and user-menu — keep visible, compact sizing */
  header.header .nav.menu > .header-actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    gap: 4px;
  }
  header.header .nav.menu > .user-menu {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
  }
  /* Tighten the CTA button and language dropdown for narrow space */
  header.header .header-actions .header-cta,
  header.header .header-cta {
    padding: 0 10px !important;
    font-size: 11px !important;
    height: 32px !important;
    white-space: nowrap;
  }
  header.header .header-actions .relative {
    margin: 0 !important;
  }
  /* User-menu compact (just avatar, no name on mobile) */
  header.header .user-menu .user-menu-name,
  header.header .user-menu span:not(.sr-only):not(.avatar) {
    display: none !important;
  }
}

/* ============================================================
   V36 — FOOLPROOF ADAPTIVE MAIN HEADER
   Logo + search + language + CTA always render. As the viewport
   tightens, elements compact (text → icons) rather than being
   hidden. The avatar is the only element that drops at very
   narrow widths to free space.
   ============================================================ */

/* At medium-narrow widths (≤480px), the CTA becomes a circular
   icon button (right-arrow) instead of disappearing.
   Specificity matched to v34's `.header-actions .header-cta` so this
   wins the cascade (later rule, equal specificity). */
@media (max-width: 480px) {
  header.header .header-actions .header-cta,
  header.header .header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-size: 0 !important;        /* hide the text */
    line-height: 0 !important;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  /* Inline arrow glyph via inline SVG data-URI */
  header.header .header-actions .header-cta::before,
  header.header .header-cta::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Avatar dropped at this width to keep room for the four primaries */
  header.header .user-menu {
    display: none !important;
  }
  /* Language picker compact (flag + chevron only — already collapsing
     because text overflows). Constrain width so it doesn't push other
     items. */
  header.header .header-actions .relative {
    max-width: 64px !important;
  }
}

/* At 360px and below, keep all four primaries visible. Just tighten
   the gaps. Nothing else is hidden. */
@media (max-width: 360px) {
  header.header .navbar {
    gap: 6px !important;
  }
  header.header .header-actions {
    margin-left: 4px !important;
  }
}


/* ============================================================
   V36 — EYEBROW CONTENT OVERFLOW HANDLING
   The breadcrumb + title in the sticky eyebrow truncate cleanly
   when they don't fit, instead of wrapping or overflowing
   awkwardly behind the main header.
   ============================================================ */

.article-sticky-bar__context {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.article-sticky-bar__crumbs,
.article-sticky-bar__title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.article-sticky-bar__crumbs .breadcrumbs,
.article-sticky-bar__crumbs ol.breadcrumbs,
.article-sticky-bar__crumbs ul.breadcrumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.article-sticky-bar__crumbs .breadcrumbs li {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  min-width: 0;
  max-width: 200px;
}


/* ============================================================
   V38 — REMOVE USER/PROFILE SECTION GLOBALLY
   Per Federico: the user avatar / sign-in menu in the main
   header isn't needed right now. Hide it across all widths.
   Easy to bring back later by removing this rule.
   ============================================================ */
header.header .user-menu,
header.header .nav.menu > .user-menu {
  display: none !important;
}


/* ============================================================
   V39 — FOOLPROOF RESPONSIVE NAVBAR
   Single consistent flex skeleton applied at every width:
     - Logo (left): flex 0 0 auto. Fixed natural size. Never moves.
     - Menu (middle wrapper): flex 1 1 0, min-width 0. Holds the
       search + right group. Expands and contracts with viewport.
     - Search (inside menu): flex 1 1 0, min-width 0. ABSORBS all
       width changes. Other elements never have to move to make
       room — only search does.
     - Header-actions (right): flex 0 0 auto. Fixed natural size.
       Stays anchored to the right edge.
   And to eliminate the jarring 768→769 transition (right group
   was jumping from 104px compact to 468px full-text), the compact
   icon-mode now applies all the way up to ≤768px. Above 768px,
   full-text appears with plenty of room.
   ============================================================ */

/* Navbar layout — applies at all widths */
header.header .navbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px;
}

/* Logo: anchored left, never grows or shrinks */
header.header .navbar-brand,
header.header .navbar-brand.mr-auto {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-width: auto !important;
}

/* Menu container: takes all space between logo and right group */
header.header .nav.menu {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 0 !important;
}

/* Search: the elastic element that ABSORBS all viewport changes */
header.header .nav.menu .search,
header.header .navbar .search,
header.header div.search {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* The Zendesk theme's `form-field` class adds its own pill styling
   (background, border, border-radius, padding) to the <form>. That
   stacks visually on top of the input's pill. Strip the form back to
   a transparent invisible wrapper so only the input renders as the
   pill. */
header.header .search > form,
header.header .search form.form-field {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
header.header .search input[type="search"] {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Right group: fixed natural size, anchored right */
header.header .header-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
}

/* === Compact icon mode for the right group at ≤768px ===
   Was at ≤480px in v36/v37; extended here so the desktop→tablet
   transition is no longer a 360px jump. Above 768px the full
   label "Explore World ID App" appears; at 768 and below it's
   the circular icon. Language picker becomes flag+chevron only. */
@media (max-width: 768px) {
  header.header .header-actions .header-cta,
  header.header .header-cta {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }
  header.header .header-actions .header-cta::before,
  header.header .header-cta::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Language picker: cap the BUTTON at flag + chevron only, but let
     the dropdown menu escape the wrapper so it's not clipped on
     tap. (overflow: hidden was the v49 mobile bug — the dropdown
     opened but was invisible because the wrapper clipped it.) */
  header.header .header-actions .relative {
    max-width: 64px !important;
    overflow: visible !important;
  }
  /* Constrain only the button's visual width, not the dropdown. */
  header.header .header-actions .relative .language-button {
    max-width: 64px;
    overflow: hidden;
  }
}

  /* 4. Backdrop element from slide-in nav style — kill it on mobile
        since the menu is always inline now. */
  header.header .backdrop,
  header.header + .backdrop {
    display: none !important;
  }

  /* 5. Style the search input so it sits properly inside the slim
        48px navbar. */
  header.header .nav.menu .search {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
  }
  /* v57: Form acts as a transparent passthrough — full width of the
     search wrap, no padding of its own, no styling. The previous v56
     rule applied input-padding to the form too, which pushed the
     visible input 56px right and stranded the icon outside the pill. */
  header.header .nav.menu .search .form-field {
    width: 100% !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* The visible input is the styled pill — fills the form, gets the
     padding for the icon-left zone, and matches the language/CTA
     pill height (40px) exactly. */
  header.header .nav.menu .search input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    border-radius: 9999px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    background: #f7f7f7 !important;
    padding: 0 16px 0 48px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  header.header .nav.menu .search .search-icon {
    position: absolute;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: #808080;
    pointer-events: none;
  }

  /* 6. Eyebrow alignment — match the navbar's horizontal padding
        exactly. Probed live: navbar uses padding-left: 32px on
        mobile (and 32px on desktop within max-width 1140), so
        eyebrow inner uses 32px too. Content edges line up. */
  .article-sticky-bar__inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }


/* ============================================================
   V32 — STRONGER MOBILE SEARCH OVERRIDE
   v31 forced .nav.menu to display:flex but the .search element
   inside it still had display:none from a Zendesk theme rule.
   The browser was layering: menu visible → search hidden. Now
   we explicitly force display:flex on every level (menu, search,
   form, input) AND remove navbar flex-wrap so it stays one row.
   ============================================================ */

@media (max-width: 768px) {
  /* Force navbar to a single row (was wrapping when content didn't fit) */
  header.header .navbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    min-height: 48px !important;
  }

  /* Logo: don't shrink, no extra margins */
  header.header .navbar-brand,
  header.header .navbar-brand.mr-auto {
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: 32px;
  }
  header.header .navbar-brand img {
    max-height: 26px;
    width: auto;
  }
  /* Hide the navbar tagline text ("World ID Help Center") on mobile —
     it eats horizontal space the search needs */
  header.header .navbar-tagline,
  header.header .navbar-brand .navbar-tagline,
  header.header .navbar-brand span:not(.sr-only) {
    display: none !important;
  }

  /* THE CRITICAL FIX: force .search display:flex.
     Some theme rule has it at display:none on mobile; this beats
     it with high-specificity + !important. Note: NO opacity rule
     here — that's owned by v33's hero-visible cross-fade. */
  header.header div.search,
  header.header .nav.menu .search,
  header.header .navbar .search,
  header.header [class~="search"]:not(.search-icon):not(.search-toggle):not(.search-hl) {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* Form (Zendesk renders <form class="form-field">) */
  header.header .search > form,
  header.header .search form.form-field,
  header.header .search > .form-field {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    visibility: visible !important;
    margin: 0 !important;
  }

  /* Input — actually visible pill. Opacity owned by v33's
     hero-visible cross-fade, not forced here. */
  header.header .search input[type="search"],
  header.header .search input {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 34px !important;
    border-radius: 9999px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    background: #f7f7f7 !important;
    padding: 0 14px 0 34px !important;
    font-size: 13px !important;
    color: #1a1a1a !important;
    margin: 0 !important;
  }

  /* Search icon (magnifier) on the left */
  header.header .search .search-icon {
    position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px !important;
    height: 12px !important;
    color: #808080 !important;
    pointer-events: none;
    z-index: 1;
  }

  /* Submit button (if Zendesk renders one) — hide on mobile, icon-only */
  header.header .search button[type="submit"] {
    display: none !important;
  }
}


/* ============================================================
   V33 — DUPLICATE SEARCH BAR SUPPRESSION
   1. Article page: Zendesk's default `.hero` element renders
      "World ID Help Center" + a search bar above the article
      body. We have our own page header (sticky eyebrow + article
      header inside the article tag). Hide the Zendesk `.hero`
      entirely on article pages.
   2. Home page: when the big centered hero search (`.apl-hero`)
      is in view, the main header search hides. When user scrolls
      past it, main header search fades in. Never two search
      bars at the same time.
   ============================================================ */

/* --- 1. Hide Zendesk's default .hero on article pages --- */
html.article-page .hero {
  display: none !important;
}

/* --- 2. Hide main header search when home hero is visible ---
   JS adds .apl-hero-visible to <html> via IntersectionObserver. */
html.apl-hero-visible header.header .search,
html.apl-hero-visible header.header input[type="search"] {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html header.header .search,
html header.header input[type="search"] {
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   V35 — UNIVERSAL CARD HEIGHT + NO-CUTOFF RULE
   Across every card group (category article lists, home topic
   cards, home featured articles), establish two principles:
     1. Description / body text NEVER truncates. No more mid-word
        ellipsis. Cards grow vertically to accommodate the full
        text.
     2. Within a group/row, cards equalize height to the tallest
        sibling. Meta (reading time + updated date) sits flush
        with the bottom of the card so cards in the same row read
        as a unit.
   ============================================================ */

/* --- 1. Disable line-clamp truncation on card descriptions --- */
.apl-article-card-desc,
.apl-feat-desc,
.apl-card-desc,
.apl-result-snippet {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* --- 2. Equal-height cards within a row via CSS Grid stretch --- */
.apl-article-list,
.apl-feat-grid,
.apl-cat-grid {
  align-items: stretch !important;
}

/* Cards fill their grid cell vertically */
.apl-article-card,
.apl-feat,
.apl-card,
.apl-result-card {
  height: 100% !important;
}

/* Internal body fills the card, allowing meta to sit at the bottom */
.apl-article-card .apl-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Featured + topic cards on the home page don't use .apl-card-body,
   so apply the same flex behavior directly */
.apl-feat,
.apl-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Pin meta to the bottom of any card */
.apl-article-card-meta,
.apl-feat-meta,
.apl-result-meta {
  margin-top: auto !important;
}


/* --- Mobile: all featured cards collapse to top-banner + text --- */
@media (max-width: 768px) {
  .apl-article-card--featured[data-image-ratio="third"],
  .apl-article-card--featured[data-image-ratio="half"] {
    flex-direction: column !important;
  }
  .apl-article-card--featured[data-image-ratio="third"] .apl-card-banner,
  .apl-article-card--featured[data-image-ratio="half"] .apl-card-banner {
    width: 100%;
    height: 140px;
    min-height: 0;
  }
  /* Full keeps its full-bleed treatment on mobile too */
  .apl-article-card--featured[data-image-ratio="full"] {
    min-height: 220px;
  }
  .apl-article-card--featured[data-image-ratio="full"] .apl-card-body {
    padding: 24px 28px; /* v98: aligned w/ new desktop featured rhythm */
  }
}



/* ============================================================
   v49/v50 — MOBILE NAVBAR RESTRUCTURE
   Desktop is unchanged. On phones (<=768px), the navbar collapses
   to a clean inline row: Logo + Search + Language + CTA.
   ============================================================ */
@media (max-width: 768px) {
  /* Consistent horizontal padding so navbar contents don't touch
     the screen edges. Overrides Bootstrap's .container default. */
  .header > .navbar,
  .header > .navbar.container,
  .header .navbar.container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide the "World ID Help Center" tagline — saves horizontal space */
  .header .navbar-tagline {
    display: none !important;
  }

  /* Hide the hamburger menu toggle — search and actions are inline now */
  .header .navbar-toggle {
    display: none !important;
  }

  /* Force the collapsible nav menu to always render as a flex row on mobile.
     Override Alpine.js x-show which would normally hide it when isOpen=false. */
  .header .nav.menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    height: auto !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  /* Hide optional header links (Back to website / Community / Submit a request)
     on mobile — they crowd the row. Users can reach those pages via the CTA
     or the footer. */
  .header .nav.menu .nav-link.header-link {
    display: none !important;
  }

  /* Hide category dropdown on mobile too */
  .header .nav.menu .category-dropdown {
    display: none !important;
  }

  /* Search bar fills the available middle space */
  .header .nav.menu .search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0 4px;
  }

  /* Header actions wrapper: keep language + CTA on the right, compact */
  .header .header-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  /* Compact language button: show flag only, hide locale label text */
  .header .language-button {
    padding: 0 10px;
    min-width: 0;
  }
  .header .language-button .locale-label {
    display: none;
  }
  .header .language-button .svg-icon {
    margin-left: 4px;
  }

  /* Compact CTA on mobile */
  .header .header-cta {
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* User menu (if signed in) — keep compact */
  .header .user-menu {
    flex-shrink: 0;
  }
}

/* Even tighter on very small screens (<=480px) */
@media (max-width: 480px) {
  .header .navbar {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header .nav.menu .search {
    margin: 0 2px;
  }
  .header .language-button {
    padding: 0 8px;
  }
  /* Make the locale flag slightly smaller so it sits comfortably next to CTA */
  .header .language-button .locale-flag {
    width: 18px;
    height: 13px;
  }
}


/* ============================================================
   v51 — NAVBAR VISUAL HARMONY
   Normalize font sizes, icon scale, and vertical centering
   across every navbar element. Applies at all breakpoints —
   mobile-specific overrides live in the earlier v49/v50 block.
   ============================================================ */

/* Make sure every direct child of the navbar centers on the same
   baseline. The navbar is the .navbar element inside .header. */
.header .navbar {
  align-items: center;
}

/* Search input: match the rest of the controls at 15px so the
   placeholder reads at the same size as the language and CTA labels. */
.header .search [type="search"] {
  font-size: 15px;
  line-height: 1.4;
}

/* v52/v54 — Header search input: 40px tall, explicit padding so the
   magnifier icon and placeholder text don't collide. The icon sits
   in a 48px-wide left padding zone; text starts at 48px so there's
   a clear 10px gap after the 18px icon (which lives at margin-left 16). */
.header .search [type="search"],
.header .search input[type="search"] {
  height: 40px !important;
  padding: 0 16px 0 48px !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

/* Header search magnifier — 18px (proportional to 15px text per brand
   rule of font × 1.2 for emphasis icons). Anchored to the input's true
   vertical center. margin-left: 16 places it centered in the 48px left
   padding zone so it has ~15px of breathing room before the placeholder. */
.header .search-icon {
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 16px !important;
  margin-right: 0 !important;
}

/* v54 — Suggestions dropdown should match the input width on desktop,
   not be clamped to 480px (which made the hero search dropdown look
   narrower than its search bar). Cap only at very wide breakpoints
   so the dropdown doesn't span the entire screen on huge monitors. */
.apl-search-dropdown {
  max-width: none !important;
}
@media (min-width: 1400px) {
  .apl-search-dropdown {
    max-width: 720px !important;
  }
}

/* Language button label and CTA — normalize to 15px to match
   the search field, removing the 17px/13px/15px size mishmash
   that was making the navbar feel inconsistent. */
.header .language-button,
.header .language-button .locale-label,
.header .header-cta {
  font-size: 15px;
  line-height: 1;
}

/* Locale dropdown items inside the menu — match the trigger size */
.header .language-dropdown .dropdown-item {
  font-size: 15px;
}

/* Mobile-specific: bump the v49 compact CTA back up to 15px
   to match the rest, since the rest of the navbar is now 15px too. */
@media (max-width: 768px) {
  .header .header-cta {
    font-size: 15px;
  }
  /* Tagline is hidden on mobile so no override needed */
}


/* ============================================================
   v55 — ARTICLE PAGE: relocate "Looking for something else?"
   Desktop (>=992px): sidebar position (replaces the In-This-Article
   TOC slot in the right aside). Mobile (<992px): bottom of article.
   ============================================================ */

/* Hide the original TOC sidebar element on desktop — the related-
   articles sidebar takes its slot. */
@media (min-width: 992px) {
  aside [data-element="table-of-contents"][data-template="sidebar-table-of-contents"] {
    display: none !important;
  }
}

/* On desktop, hide the bottom (full-width) version of the
   related-articles section since the sidebar version takes over. */
@media (min-width: 992px) {
  #apl-related-section {
    display: none !important;
  }
}

/* On mobile, hide the sidebar variant — the bottom version is
   visible there. */
@media (max-width: 991px) {
  .apl-related--sidebar {
    display: none !important;
  }
}

/* v61: Sidebar related-articles card — no border (per request), sits
   cleanly inside the aside. Heading uses brand accent color. */
.apl-related--sidebar {
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 20px;
}
/* v62: scoped overrides for the sidebar/bottom related-articles cards.
   The v28-v29 baseline rules (line ~19104+) put a border on the inner
   <ul>, hid all <h3>s inside .apl-related, and styled the rows with
   chevrons. We KEEP the chevrons/rows (they look good) but:
   - drop the UL border (border on the card is unwanted)
   - un-hide the helper's heading and tint it with brand accent
   These selectors are 0,2,1+ specificity (2 classes + tag), beating
   the baseline's 0,1,1 — and use !important to top the older !important. */

/* Drop the inner UL border for our scoped variants */
.apl-related--sidebar ul,
.apl-related--sidebar .related-articles ul,
.apl-related--sidebar .article-list,
.apl-related--bottom ul,
.apl-related--bottom .related-articles ul,
.apl-related--bottom .article-list {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Un-hide and re-style the helper's heading (the v28-v29 rule
   force-hides all h3 inside .apl-related). Brand accent #1a1a1a. */
.apl-related--sidebar h1,
.apl-related--sidebar h2,
.apl-related--sidebar h3,
.apl-related--sidebar h4,
.apl-related--sidebar h5,
.apl-related--sidebar h6,
.apl-related--sidebar .related-articles > h1,
.apl-related--sidebar .related-articles > h2,
.apl-related--sidebar .related-articles > h3,
.apl-related--sidebar .related-articles > h4,
.apl-related--bottom h1,
.apl-related--bottom h2,
.apl-related--bottom h3,
.apl-related--bottom h4,
.apl-related--bottom h5,
.apl-related--bottom h6,
.apl-related--bottom .related-articles > h1,
.apl-related--bottom .related-articles > h2,
.apl-related--bottom .related-articles > h3,
.apl-related--bottom .related-articles > h4 {
  display: block !important;
  font-family: 'WorldProMVP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
}

/* Bottom variant heading slightly larger for the wider card */
.apl-related--bottom h1,
.apl-related--bottom h2,
.apl-related--bottom h3,
.apl-related--bottom h4,
.apl-related--bottom .related-articles > h2,
.apl-related--bottom .related-articles > h3,
.apl-related--bottom .related-articles > h4 {
  font-size: 20px !important;
  margin: 0 0 14px !important;
}

/* The helper renders a <ul>; reset list styling and lay out vertically. */
.apl-related-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.apl-related-list ul li {
  margin: 0;
}

/* Sidebar variant — compact vertical list with hairline dividers. */
.apl-related--sidebar .apl-related-list ul a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related--sidebar .apl-related-list ul a:hover {
  color: #1a1a1a;
}
.apl-related--sidebar .apl-related-list ul li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}
.apl-related--sidebar .apl-related-list ul li:first-child a {
  padding-top: 0;
}

/* Bottom (mobile) variant — responsive grid for wide phones/tablets. */
.apl-related--bottom .apl-related-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.apl-related--bottom .apl-related-list ul a {
  display: block;
  padding: 14px 18px;
  font-size: 15px;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.apl-related--bottom .apl-related-list ul a:hover {
  color: #1a1a1a;
  background: #f7f7f7;
}

/* ================================================================
   v92 — Translation-safe card variants
   Powered by data-card-* attributes that script.js applies from the
   article's Zendesk labels (data-labels). See script.js STEP 1.
   ================================================================ */

/* --- Size variants (Tier A labels) -------------------------- */

/* card-pillar: tall pillar slot. Reuses the existing --pillar class
   styling but applies via attribute selector so it works on home bento
   cards too (which don't use the legacy class system). */
.apl-article-card[data-card-pillar="1"] {
  grid-row: span 2;
}
.apl-article-card[data-card-pillar="1"] .apl-card-banner,
.apl-article-card[data-card-pillar="1"] .apl-feat-banner {
  aspect-ratio: 3 / 4;
}

/* card-wide: span 2 columns for a banner look. */
.apl-article-card[data-card-wide="1"] {
  grid-column: span 2;
}
.apl-article-card[data-card-wide="1"] .apl-card-banner,
.apl-article-card[data-card-wide="1"] .apl-feat-banner {
  aspect-ratio: 21 / 9;
}

/* card-compact: text-only dense card. Hides the banner slot, tightens
   padding, removes large title scale. Applied automatically by
   script.js STEP 4 when a promoted card has no image OR when an
   article is non-promoted (data-promoted="0"). */
.apl-article-card[data-card-compact="1"] .apl-card-banner,
.apl-article-card[data-card-compact="1"] .apl-feat-banner {
  display: none;
}
/* v98: removed the `padding-top: 0` override that used to fire here. It was
   written for the case where a banner sat above the body, but compact cards
   hide the banner entirely -- the rule made titles hug the top edge of the
   card. Compact cards now inherit the full 24px top padding from .apl-card-body. */
.apl-article-card[data-card-compact="1"] {
  /* Slightly tighter overall to make the dense card feel intentional */
  min-height: auto;
}

/* --- Badge slot (Tier B labels) ----------------------------- */

.apl-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #FFFFFF;
  background: #1a1a1a;
  pointer-events: none;
}
/* Make sure cards establish a positioning context for the absolute badge */
.apl-article-card {
  position: relative;
}
/* Hide the badge until script.js reveals it (defensive: HTML also sets hidden) */
.apl-card-badge[hidden] {
  display: none !important;
}

/* Color variants by badge kind */
.apl-card-badge[data-badge-kind="new"] {
  background: #00B5C4; /* World cyan — fresh content */
  color: #1a1a1a;
}
.apl-card-badge[data-badge-kind="updated"] {
  background: #1a1a1a; /* World black — refined content */
  color: #FFFFFF;
}
.apl-card-badge[data-badge-kind="popular"] {
  background: #F4B860; /* World sand — editorial pick */
  color: #1a1a1a;
}

/* --- Video overlay ------------------------------------------ */

.apl-card-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 17, 21, 0.7);
  color: #FFFFFF;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.apl-card-video-overlay[hidden] {
  display: none !important;
}
/* Video overlay is only meaningful when there's a banner image to overlay.
   On compact cards, hide it. */
.apl-article-card[data-card-compact="1"] .apl-card-video-overlay {
  display: none !important;
}

/* --- Mobile tweaks ------------------------------------------ */

@media (max-width: 720px) {
  .apl-card-badge {
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
  .apl-card-video-overlay {
    width: 44px;
    height: 44px;
  }
}




/* ============================================================================
 * Glossary highlighter — v72_glossaryv1
 * ----------------------------------------------------------------------------
 * Styles for terms wrapped by assets/glossary.js inside .article-content.
 * Brand: dotted underline using info-blue #1a1a1a; tooltip uses World
 * neutral surface (#f7f7f7) with #ebebeb border and #1a1a1a body text.
 * Mobile: tap toggles via the .is-open class set by glossary.js.
 * ============================================================================ */

.hc-glossary-term {
  position: relative;
  display: inline;
  cursor: help;
  /* Dotted underline = signature glossary affordance. Sits 2px below the
     baseline so it never collides with descenders. */
  border-bottom: 1.5px dotted #1a1a1a;
  padding-bottom: 1px;
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: color 120ms ease, border-bottom-color 120ms ease, background-color 120ms ease;
}

.hc-glossary-term:hover,
.hc-glossary-term:focus,
.hc-glossary-term.is-open {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
  border-bottom-style: solid;
  background-color: rgba(0, 124, 251, 0.06);
  border-radius: 2px;
}

.hc-glossary-term:focus-visible {
  /* Keyboard focus ring — matches the World focus outline used elsewhere in the theme. */
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Tooltip popover ----------------------------------------------------- */

.hc-glossary-tooltip {
  /* Hidden by default; revealed on hover/focus/is-open */
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 100;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  min-width: 220px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px 13px;

  background-color: #f7f7f7;
  color: #1a1a1a;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(45, 44, 44, 0.16), 0 2px 6px rgba(45, 44, 44, 0.08);

  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  cursor: auto;

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms; /* delay visibility off-switch until fade finishes */
}

.hc-glossary-term:hover > .hc-glossary-tooltip,
.hc-glossary-term:focus > .hc-glossary-tooltip,
.hc-glossary-term:focus-within > .hc-glossary-tooltip,
.hc-glossary-term.is-open > .hc-glossary-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Tooltip arrow */
.hc-glossary-tooltip::before,
.hc-glossary-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.hc-glossary-tooltip::before {
  /* Border layer */
  border-top: 7px solid #ebebeb;
}
.hc-glossary-tooltip::after {
  /* Fill layer, 1px above border for a clean seam */
  border-top: 7px solid #f7f7f7;
  margin-top: -1px;
}

/* Tooltip content */
.hc-glossary-tooltip__heading {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: 0;
}
.hc-glossary-tooltip__body {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #808080;
  line-height: 1.45;
}

/* ---- Responsive: flip tooltip below the term when there's no room above. ---
   Pure CSS can't detect available space, so on narrow viewports we just
   stack the tooltip below the line to avoid clipping at the top. */
@media (max-width: 640px) {
  .hc-glossary-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    min-width: 200px;
    font-size: 13px;
    padding: 10px 12px 11px;
  }
  .hc-glossary-term:hover > .hc-glossary-tooltip,
  .hc-glossary-term:focus > .hc-glossary-tooltip,
  .hc-glossary-term:focus-within > .hc-glossary-tooltip,
  .hc-glossary-term.is-open > .hc-glossary-tooltip {
    transform: translateX(-50%) translateY(0);
  }
  .hc-glossary-tooltip::before,
  .hc-glossary-tooltip::after {
    top: auto;
    bottom: 100%;
  }
  .hc-glossary-tooltip::before {
    border-top: none;
    border-bottom: 7px solid #ebebeb;
  }
  .hc-glossary-tooltip::after {
    border-top: none;
    border-bottom: 7px solid #f7f7f7;
    margin-top: 0;
    margin-bottom: -1px;
  }
}

/* ---- Print: drop the highlight altogether so printed articles stay clean. - */
@media print {
  .hc-glossary-term {
    border-bottom: none;
    color: inherit;
    background: none;
  }
  .hc-glossary-tooltip { display: none !important; }
}

/* ---- Reduced motion: kill the slide transition. -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hc-glossary-term,
  .hc-glossary-tooltip {
    transition: none;
  }
}


/* ============================================================================
 * Glossary v3 — anchor wrapper + tooltip CTA
 * ----------------------------------------------------------------------------
 * In v72_glossaryv3, the wrapper element is an <a> instead of a <span>, so
 * clicks navigate to the anchor on the canonical glossary article. These
 * overrides keep the anchor from picking up the default link color/underline
 * and style the new "View in glossary →" CTA inside the tooltip.
 * ============================================================================ */

a.hc-glossary-term,
a.hc-glossary-term:link,
a.hc-glossary-term:visited {
  color: inherit;
  text-decoration: none;
  /* The dotted underline is the only signal — kill the browser default. */
}

a.hc-glossary-term:hover {
  text-decoration: none;
}

/* The CTA "View in glossary →" inside the tooltip */
.hc-glossary-tooltip__cta {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ebebeb;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ============================================================================
 * v98_glossaryv5 — TOOLTIP POSITIONING SAFETY OVERRIDE
 * ----------------------------------------------------------------------------
 * Higher-specificity rule that re-asserts position:relative on the wrapper
 * regardless of how the bare .hc-glossary-term rule above gets parsed by
 * Zendesk's CSS pipeline. Without this, an upstream CSS imbalance in
 * Xavier's main build was causing Chrome to drop the bare rule's
 * declarations during error-recovery, and the tooltip then positioned
 * itself relative to <article class="col"> instead of the wrapper.
 * ============================================================================ */
.article-content a.hc-glossary-term,
.article-content span.hc-glossary-term {
  position: relative;
  display: inline;
}


/* ============================================================================
 * v98_glossaryv6 — Viewport-aware tooltip edge clamping
 * ----------------------------------------------------------------------------
 * When a term sits near the viewport edge, the centered tooltip would clip
 * off-screen. glossary.js measures the overflow and writes a per-term CSS
 * variable `--hc-tooltip-x-offset` (in pixels) that shifts the tooltip body
 * onscreen. The arrow shifts by the SAME amount in the OPPOSITE direction so
 * it keeps pointing at the term, not at the shifted tooltip center.
 * ============================================================================ */

/* Default state — tooltip centered on the term (offset 0).
   These rules layer over the existing translateX(-50%) defaults from the
   glossaryv1 block above, adding the dynamic horizontal offset. */
.hc-glossary-tooltip {
  transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(4px);
}

.hc-glossary-term:hover > .hc-glossary-tooltip,
.hc-glossary-term:focus > .hc-glossary-tooltip,
.hc-glossary-term:focus-within > .hc-glossary-tooltip,
.hc-glossary-term.is-open > .hc-glossary-tooltip {
  transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(0);
}

/* Arrow keeps pointing at the term — inverse offset. */
.hc-glossary-tooltip::before,
.hc-glossary-tooltip::after {
  transform: translateX(calc(-50% - var(--hc-tooltip-x-offset, 0px)));
}

/* Mobile media-query overrides — same pattern, just with the small-screen
   transform values from the glossaryv1 mobile block. */
@media (max-width: 640px) {
  .hc-glossary-tooltip {
    transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(-4px);
  }
  .hc-glossary-term:hover > .hc-glossary-tooltip,
  .hc-glossary-term:focus > .hc-glossary-tooltip,
  .hc-glossary-term:focus-within > .hc-glossary-tooltip,
  .hc-glossary-term.is-open > .hc-glossary-tooltip {
    transform: translateX(calc(-50% + var(--hc-tooltip-x-offset, 0px))) translateY(0);
  }
}


/* ============================================================
   v99: STICKY RIGHT SIDEBAR + ANCHOR SCROLL OFFSET
   ============================================================
   Fixes two visual bugs on article pages where the fixed
   eyebrow chrome (main header + .article-sticky-bar) was
   overlapping content beneath it:

   1. Related articles sidebar scrolled away with the body
      instead of remaining visible. The existing `.sticky-top`
      class on the wrapper is conditional on Alpine's
      tableOfContents state, so articles without H2s never
      got sticky behavior at all.

   2. Clicking an in-page anchor (e.g., a glossary term link
      jumping to #pearl-orb) landed the target heading behind
      the eyebrow header rather than below it.

   Sticky chrome height (desktop, v102g16 update):
     ~60px main header + up to ~80px .article-sticky-bar
     (single-line ≈ 44px, 2-line title ≈ 80px) + ~16px breathing
     room = 156px worst-case offset. We use 156px so the sidebar
     never sits behind the eyebrow when the article title wraps.

   Mobile (<768px):
     ~56px main header + ~68px .article-sticky-bar (2-line on
     mobile too) + ~12px breathing = 136px offset.
   ============================================================ */

/* ---- 1. Right-hand sidebar: always sticky on article pages
         (unconditional — does not depend on TOC presence). The
         :has() selector lets us target the wrapper without
         editing the template.

         v100 FIX: the previous align-self: flex-start collapsed
         the aside to its content height, which left the inner
         sticky div no track to ride. Removed — the aside now
         stretches to full grid/flex row height (matching the
         article body column), giving the sticky card a long
         track to stick along.

         v102g16 FIX: top bumped from 120 → 156px to clear the
         2-line title case. Single-line titles get a slightly
         larger gap, which is the right trade-off — long titles
         are the failure mode (related-articles got clipped),
         short titles just gain a bit of breathing room. ---- */
@media (min-width: 768px) {
  html.article-page aside:has(.apl-related--sidebar) > div {
    position: -webkit-sticky;
    position: sticky;
    top: 156px;
    z-index: 2;
    /* if the sidebar's content is taller than the visible
       space below the eyebrow, scroll internally rather than
       overflow the viewport */
    max-height: calc(100vh - 176px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* v103g18 → v104g19 → v104g20 — Glossary template no longer has an
     aside; this override only fires on the article_page.hbs fallback
     path. Offset bumped to 60px to match the browse bar so both
     columns dock at the same y, AND so neither one is clipped by the
     eyebrow's rendered height (which can exceed its `min-height: 44px`
     by a few pixels due to baseline rounding). */
  html.is-glossary-page aside:has(.apl-related--sidebar) > div {
    top: calc(var(--main-header-height, 64px) + 60px);
    max-height: calc(100vh - var(--main-header-height, 64px) - 80px);
  }
}

/* v104g24 — Anchor landing for glossary article. The chrome stack is:
     ~64px main header + 60px eyebrow + ~60px browse bar + 24px fade
     = ~208px. We use 216px to give a small cushion below the fade.
     `!important` is required because the regular `html.article-page`
     rule (156px, defined a few lines below) has equal specificity and
     comes later in source order, so it would win without !important.
     The `.hc-glossary-section` rule further down (90px) is similarly
     overridden via the catch-all clause below. */
html.is-glossary-page .article-content :is(h1, h2, h3, h4, h5, h6),
html.is-glossary-page .article-content [id] {
  /* v104g25 — Bumped 216 → 260. Live measurement showed browse-bar
     bottom at ~224 and fade ending at ~248; the prior 216 put the
     target heading ABOVE the bar's bottom edge (partially hidden
     behind the card). 260 gives a 12px cushion below the fade. */
  scroll-margin-top: 260px !important;
}

@media (max-width: 767px) {
  html.is-glossary-page .article-content :is(h1, h2, h3, h4, h5, h6),
  html.is-glossary-page .article-content [id] {
    scroll-margin-top: 232px !important;
  }
}

/* ---- 2. Anchor scroll offset: clicked targets land BELOW
         the eyebrow chrome, not behind it. Covers headings
         and any [id] inside the article body (e.g., glossary
         term anchors, footnote refs). Bumped in v102g16 to
         match the new sidebar top (worst-case 2-line title). ---- */
html.article-page .article-content :is(h1, h2, h3, h4, h5, h6),
html.article-page .article-content [id] {
  scroll-margin-top: 156px;
}

@media (max-width: 767px) {
  html.article-page .article-content :is(h1, h2, h3, h4, h5, h6),
  html.article-page .article-content [id] {
    scroll-margin-top: 136px;
  }
}


/* ============================================================
   v100: TOC OVERLAY IN EYEBROW HEADER
   ============================================================
   The eyebrow's title row becomes an interactive button when
   the article has ≥2 H2s. Clicking expands a TOC panel that
   slides down from the bottom edge of the eyebrow. The panel
   is column-aligned with the article body below (Variant A):
   right edge = article body column right edge on desktop;
   full-width on mobile.
   ============================================================ */

/* The article-body column inside the eyebrow — stacks
   breadcrumb above title vertically and centers them in the
   eyebrow's vertical space. */
html.article-page .article-sticky-bar__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ---- Interactive trigger (replaces title row when JS confirms
        the article has ≥2 H2 headings worth indexing). ---- */
.article-sticky-bar__title-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 2px 6px 2px 4px;
  margin-left: -4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.article-sticky-bar__title-row .article-sticky-bar__title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.article-sticky-bar__title-row:hover {
  background-color: rgba(255, 255, 255, 0.65);
}

.article-sticky-bar__title-row:focus-visible {
  outline: 2px solid #185FA5;
  outline-offset: 1px;
  background-color: rgba(255, 255, 255, 0.65);
}

.article-sticky-bar__title-row:hover .article-sticky-bar__title,
.article-sticky-bar__title-row:focus-visible .article-sticky-bar__title {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}

/* Static fallback title — shown by default; JS hides it when
   it reveals the interactive trigger. Same typography so no
   visible shift on JS upgrade. */
.article-sticky-bar__title--static {
  margin: 0;
  padding: 2px 0;
}

/* v102g16 — Honor the [hidden] HTML attribute that script.js sets
   when it reveals the interactive TOC trigger. The base rule on
   `.article-sticky-bar__title` (line ~16691) sets `display: -webkit-box`
   on the same element, which silently overrides the implicit
   `display: none` of [hidden]. Without this override the static
   fallback never disappears and the article title visibly renders
   twice (the user-facing bug in v101g15). The !important is
   intentional because it must outrank multiple sources of `display`
   on the same element (base rule, mobile media query). */
.article-sticky-bar__title--static[hidden],
.article-sticky-bar__title-row[hidden] {
  display: none !important;
}

/* Chevron — rotates 180° when panel is open. */
.apl-toc-chev {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #808080;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms ease;
}

.article-sticky-bar__title-row[aria-expanded="true"] .apl-toc-chev {
  transform: rotate(180deg);
  color: #1a1a1a;
}

/* ---- TOC overlay panel ---- */

/* Wrapper positions the panel below the eyebrow. .article-sticky-bar
   is position:fixed, so absolute positioning is relative to it. The
   wrapper itself doesn't catch clicks — only the visible panel does. */
.apl-toc-panel-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 11;
  pointer-events: none;
}

.apl-toc-panel-wrapper[hidden] {
  display: none;
}

/* The visible panel sits inside col-8 (article-body-aligned). Its
   right edge therefore matches the article body column right edge. */
.apl-toc-panel {
  pointer-events: auto;
  background: #FFFFFF;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.apl-toc-list {
  list-style: none;
  margin: 0;
  padding: 8px 18px 12px;
}

.apl-toc-list li {
  padding: 7px 0;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
  color: #1a1a1a;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}

.apl-toc-list li:last-child {
  border-bottom: none;
}

.apl-toc-list li.apl-toc-list__h3 {
  padding-left: 22px;
  font-size: 0.75rem; /* 12px */
  color: #808080;
}

.apl-toc-list a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.apl-toc-list li:hover,
.apl-toc-list a:hover,
.apl-toc-list a:focus-visible {
  color: #185FA5;
  outline: none;
}

.apl-toc-list a:hover,
.apl-toc-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}

/* ---- Backdrop ---- */
.apl-toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  z-index: 9; /* below .article-sticky-bar (z=10) and panel (z=11) */
  cursor: pointer;
}

.apl-toc-backdrop[hidden] {
  display: none;
}

/* ---- Mobile (<768px): edge-to-edge panel, 2-line title wrap. ---- */
@media (max-width: 767px) {
  /* Allow eyebrow to grow vertically if title wraps to 2 lines. */
  .article-sticky-bar__inner {
    min-height: 40px;
  }
  .article-sticky-bar__main {
    min-height: 32px;
  }

  /* Title wraps to 2 lines max on mobile (instead of single-line clamp). */
  .article-sticky-bar__title-row .article-sticky-bar__title,
  .article-sticky-bar__title--static {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  /* On mobile there's no right sidebar; the panel should fill the
     full content width. The col is already col (full width) at this
     breakpoint, so just adjust radius for a cleaner edge feel. */
  .apl-toc-panel {
    border-radius: 0 0 6px 6px;
    max-height: 60vh;
  }

  .apl-toc-list {
    padding: 6px 14px 10px;
  }

  .apl-toc-list li {
    padding: 8px 0;
  }
}



/* ============================================================================
 * v98_glossaryv12 — Full-width layout for the custom glossary template
 * ----------------------------------------------------------------------------
 * Applied only to the canonical glossary article (which uses templates/
 * article_pages/glossary.hbs and gets the `.article-glossary` class on
 * <html>). The custom template drops the sidebar; this CSS gives the
 * article column full container width and tightens reference-document spacing.
 * ============================================================================ */

.hc-glossary-page > .apl-glossary-article {
  /* Full container width: no row/col flex constraints, no sidebar. */
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.article-glossary .apl-glossary-article > header h1 {
  /* Slightly tighter title leading for a reference-doc feel */
  line-height: 1.15;
}

.article-glossary .apl-article-meta {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  gap: 8px;
  color: #808080;
  font-size: 14px;
}

/* On a glossary article, hide the article-bottom-cta / vote / related-articles
   even if some other partial accidentally renders them. Belt-and-suspenders.
   v104g19 — `.apl-related` returned to this list. The glossary template
   reverted to a full-width layout (no right sidebar) so the sticky search
   card can span the full article column. Federico's call. */
.article-glossary .apl-vote,
.article-glossary .article-bottom-cta,
.article-glossary .apl-related,
.article-glossary .article-bottom-divider,
.article-glossary #article-section-nav,
.article-glossary [id^="comments"],
.article-glossary [data-element="navigation"],
.article-glossary [data-template="call-to-action"] {
  display: none !important;
}

/* The bottom-of-article related-articles section (.apl-related--bottom)
   stays hidden on the glossary — only the sidebar one comes back. The
   bottom section would visually compete with the A-Z browse experience
   and is redundant when the sidebar already shows related articles. */
.article-glossary .apl-related--bottom {
  display: none !important;
}

/* v104g21 — Hide related-articles + bottom CTAs whenever we're on the
   canonical glossary article, regardless of which template renders it.
   The `is-glossary-page` class is added by glossary-page.js once it
   confirms the current article ID matches window.HC_GLOSSARY_ARTICLE_ID,
   so this rule fires on BOTH the custom `glossary.hbs` template AND
   the default `article_page.hbs` fallback path (where the .article-
   glossary class is NOT present, which is why the rule block above
   missed it). Federico's call to keep the glossary article free of
   the related-articles sidebar so the full-width search card can
   span the whole article column. */
html.is-glossary-page .apl-related,
html.is-glossary-page .apl-related--sidebar,
html.is-glossary-page .apl-related--bottom,
html.is-glossary-page #apl-related-sidebar-section,
html.is-glossary-page #apl-related-section,
html.is-glossary-page aside:has(.apl-related--sidebar) {
  display: none !important;
}

/* v104g21 — When the aside is hidden, the article column on
   article_page.hbs (which uses `col md:col-8` grid classes) still
   reserves 8/12 of the row width, leaving an empty 4/12 strip on
   the right. Expand the article column to fill the full row so the
   search card and term list breathe across the whole content area.
   Scoped to glossary so non-glossary articles keep their col-8 + col-4
   layout. */
@media (min-width: 768px) {
  html.is-glossary-page .article-page main .row > article,
  html.is-glossary-page .article-page main .row > .col,
  html.is-glossary-page main .row > article.md\:col-8,
  html.is-glossary-page main .row > .col.md\:col-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ============================================================================
 * v98_glossaryv13 — RESTORE: Glossary Page browse UI (originally v11)
 * ----------------------------------------------------------------------------
 * This block was lost between v11 and v12 builds — the live theme shipped
 * without it, causing the browse bar to render with browser-default styling
 * (massive unstyled SVG search icon, plain letter buttons, no sticky behavior).
 *
 * Restored 2026-05-20. Styles the sticky search + A-Z letter nav and the
 * letter-divider sections injected by assets/glossary-page.js on the canonical
 * "Glossary of Terms" article.
 * ============================================================================ */

/* ---- Sticky browse bar --------------------------------------------------- */

.hc-glossary-browse {
  position: sticky;
  /* v104g20 — Bumped from 44 → 60px. The eyebrow's content (breadcrumb
     + title) plus padding can render slightly taller than its declared
     `min-height: 44px` on some browsers/devices because of baseline
     rounding and font ascent. With top:108 the card's top edge was
     getting clipped behind the eyebrow on the live preview. The extra
     16px of clearance gives the card breathing room while still
     keeping it close enough to the eyebrow that document content
     can't fit between them visibly. */
  top: calc(var(--main-header-height, 64px) + 60px);
  /* Below the main header (z=100+) and the article eyebrow (z=10
     fixed). The browse bar is in flow above content at that level. */
  z-index: 9;
  /* v104g20 — Frosted-glass card. Opacity raised from 88 → 94% and
     backdrop-filter blur from 10 → 16px because v104g19 still let
     some text bleed through the card under fast scrolling. The new
     values are opaque enough that body text reads as a uniform soft
     wash even when scrolling quickly, while still keeping enough
     translucency for the effect to feel glassy rather than solid.
     Saturation kick stays so colours behind the card don't go dull. */
  margin: 0 0 32px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-radius: 14px;
  border: 0.5px solid rgba(231, 229, 226, 0.7);
  box-shadow:
    0 8px 28px rgba(45, 44, 44, 0.08),
    0 2px 8px rgba(45, 44, 44, 0.04);
}

/* v104g19 — Bottom fade strip. Sits directly below the card and
   creates a soft gradient from the page background colour to fully
   transparent. As the user scrolls and article text re-emerges
   below the card, it eases in instead of hard-cutting at the card's
   bottom border. `pointer-events: none` keeps clicks pass-through
   so links underneath remain interactive on their way up. */
.hc-glossary-browse::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(
    to bottom,
    #ebebeb 0%,
    rgba(243, 242, 240, 0.7) 50%,
    rgba(243, 242, 240, 0) 100%
  );
  pointer-events: none;
}

.hc-glossary-browse__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Search input -------------------------------------------------------- */

.hc-glossary-browse__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 360px;
}

.hc-glossary-browse__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #808080;
  pointer-events: none;
  flex-shrink: 0;
}

.hc-glossary-browse__search-input {
  width: 100%;
  height: 36px;
  padding: 0 14px 0 36px;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1a1a;
  /* v102g17 — Soft pill treatment. The browse bar is now itself a
     white card, so the input needs a contrasting tint and pill
     radius so it doesn't blend into the card surface. */
  background: #ebebeb;
  border: 1px solid transparent;
  border-radius: 18px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.hc-glossary-browse__search-input::placeholder {
  color: #808080;
  opacity: 0.8;
}

.hc-glossary-browse__search-input:focus {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0, 124, 251, 0.18);
}

.hc-glossary-browse__search-input::-webkit-search-cancel-button,
.hc-glossary-browse__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ---- A-Z letter nav ------------------------------------------------------ */

.hc-glossary-browse__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.hc-glossary-browse__letter {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
  outline: none;
}

.hc-glossary-browse__letter:hover {
  background: #EDECE9;
}

.hc-glossary-browse__letter:focus-visible {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(0, 124, 251, 0.25);
}

.hc-glossary-browse__letter.is-active {
  background: #1a1a1a;
  color: #FFFFFF;
}

.hc-glossary-browse__letter.is-disabled,
.hc-glossary-browse__letter:disabled {
  color: #C8C5BF;
  cursor: not-allowed;
  pointer-events: none;
}

.hc-glossary-browse__letter.is-filtered-out {
  opacity: 0.35;
}

/* ---- Letter divider sections (h2 inserted by glossary-page.js) ----------- */

.article-content h2.hc-glossary-section {
  margin-top: 40px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-size: 32px;
  font-weight: 500;
  color: #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  /* v104g24 — Was 90px; that was sized for the chrome stack before the
     v104g19 search card existed. Bumped to 216 so deep-links to letter
     dividers (e.g., /articles/<id>#letter-b) land below the fade just
     like term anchors. The catch-all is-glossary-page rule near the top
     of style.css now uses the same value with !important, so this is
     mostly belt-and-suspenders. */
  /* v104g25 — Synced to the 260px catch-all rule near the top of
     style.css (deep-links to letter dividers land below the fade). */
  scroll-margin-top: 260px;
}

.article-content h2.hc-glossary-section:focus {
  outline: none;
}

/* v102g17 — Stronger visual hierarchy between term and definition.
   Previously term (h3) and its paragraph both read at near-identical
   weight, so the eye had to work to parse where each entry started.
   These rules ONLY apply on the canonical glossary article (scoped
   via `html.is-glossary-page`), so non-glossary articles with h3+p
   patterns are unaffected. */
html.is-glossary-page .article-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
  margin-top: 18px;
  margin-bottom: 2px;
}

/* Definition = the paragraph IMMEDIATELY following each term. The
   adjacent-sibling selector keeps unrelated paragraphs (rare) at
   normal styling. */
html.is-glossary-page .article-content h3 + p {
  font-size: 13px;
  color: #808080; /* matches --color-text-secondary visually */
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0;
}

/* Cross-link colour inside definitions stays on-brand. */
html.is-glossary-page .article-content h3 + p a {
  color: #185FA5;
}

/* ---- Hidden states (search filtering) ------------------------------------ */

.article-content h3.is-hidden,
.article-content p.is-hidden,
.article-content h2.hc-glossary-section.is-hidden {
  display: none !important;
}

/* ---- "No results" banner ------------------------------------------------- */

.hc-glossary-noresults {
  padding: 18px 20px;
  margin: 0 0 24px;
  background: #f7f7f7;
  border: 1px dashed #ebebeb;
  border-radius: 8px;
  color: #808080;
  font-size: 15px;
}

.hc-glossary-noresults strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* ---- Mobile / narrow viewport -------------------------------------------- */

@media (max-width: 640px) {
  .hc-glossary-browse {
    margin-left: -12px;
    margin-right: -12px;
    padding: 12px;
  }
  .hc-glossary-browse__inner {
    gap: 10px;
  }
  .hc-glossary-browse__search {
    flex-basis: 100%;
    max-width: 100%;
  }
  .hc-glossary-browse__letters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 2px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  .hc-glossary-browse__letters::-webkit-scrollbar {
    display: none;
  }
  .hc-glossary-browse__letter {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .article-content h2.hc-glossary-section {
    margin-top: 32px;
    font-size: 28px;
    /* v104g25 — Synced to the 232px mobile catch-all rule. */
    scroll-margin-top: 232px;
  }
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hc-glossary-browse__letter,
  .hc-glossary-browse__search-input {
    transition: none;
  }
}

/* ---- Print: hide the browse UI; print the terms as a plain list --------- */

@media print {
  .hc-glossary-browse,
  .hc-glossary-noresults { display: none !important; }
  .article-content h2.hc-glossary-section {
    border-bottom: 1px solid #000;
    font-size: 22px;
  }
}

/* =========================================================================
   NEW REQUEST PAGE — World brand restyle
   Added in v107g32 alongside the new_request_page.hbs template.
   Scoped under html.new-request-page so it does not affect other pages
   (e.g. the comment form on request_page.hbs or any other form-field usage).
   Palette sampled from world.org/brand (cyan primary, neutral grays).
   ========================================================================= */

html.new-request-page #page-container h1 {
  color: #1a1a1a;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Field wrapper spacing */
html.new-request-page .form-field {
  margin-bottom: 1.5rem;
}

/* Labels — primary text color, slightly heavier than body */
html.new-request-page .form-field > label {
  display: block;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

/* Helper / description text under fields */
html.new-request-page .form-field > p {
  margin: 0.5rem 0 0;
  color: #808080;
  font-size: 0.875rem;
}

/* Inputs, selects, textareas — rounded, World-brand bordered */
html.new-request-page .form-field input[type="text"],
html.new-request-page .form-field input[type="email"],
html.new-request-page .form-field input[type="url"],
html.new-request-page .form-field input[type="tel"],
html.new-request-page .form-field input[type="number"],
html.new-request-page .form-field input[type="password"],
html.new-request-page .form-field input[type="search"],
html.new-request-page .form-field select,
html.new-request-page .form-field textarea,
html.new-request-page .form-field .nesty-input,
html.new-request-page .form-field .hc-multiselect-toggle {
  width: 100%;
  padding: 0.75rem 1rem;
  color: #1a1a1a;
  background-color: #FFFFFF;
  border: 1.5px solid #ebebeb;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

html.new-request-page .form-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* Hover */
html.new-request-page .form-field input:hover,
html.new-request-page .form-field select:hover,
html.new-request-page .form-field textarea:hover,
html.new-request-page .form-field .nesty-input:hover {
  border-color: #808080;
}

/* Focus — World cyan ring */
html.new-request-page .form-field input:focus,
html.new-request-page .form-field select:focus,
html.new-request-page .form-field textarea:focus,
html.new-request-page .form-field .nesty-input:focus {
  outline: 0;
  border-color: #3FDBED;
  box-shadow: 0 0 0 3px rgba(63, 219, 237, 0.25);
}

/* Placeholder color */
html.new-request-page .form-field input::placeholder,
html.new-request-page .form-field textarea::placeholder {
  color: #808080;
  opacity: 0.7;
}

/* Disabled state */
html.new-request-page .form-field input:disabled,
html.new-request-page .form-field select:disabled,
html.new-request-page .form-field textarea:disabled {
  background-color: #ebebeb;
  border-color: #ebebeb;
  color: #808080;
  cursor: not-allowed;
}

/* Select dropdown — re-add caret (since appearance:none stripped native) */
html.new-request-page .form-field select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath fill='%232D2C2C' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
}

/* WYSIWYG (rich text) container — match input borders */
html.new-request-page .form-field .editor,
html.new-request-page .form-field .ck-editor__main,
html.new-request-page .form-field .ck.ck-editor__main > .ck-editor__editable {
  border-radius: 12px !important;
  border: 1.5px solid #ebebeb !important;
  min-height: 140px;
}

/* Submit button — pill, dark, matches "Explore World ID App" header CTA */
html.new-request-page .request-form input[type="submit"],
html.new-request-page .request-form button[type="submit"],
html.new-request-page .request-form .button-primary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: #1a1a1a;
  color: #FFFFFF;
  border: 1.5px solid #1a1a1a;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

html.new-request-page .request-form input[type="submit"]:hover,
html.new-request-page .request-form button[type="submit"]:hover,
html.new-request-page .request-form .button-primary:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}

html.new-request-page .request-form input[type="submit"]:focus,
html.new-request-page .request-form button[type="submit"]:focus,
html.new-request-page .request-form .button-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(63, 219, 237, 0.35);
}

html.new-request-page .request-form input[type="submit"]:disabled,
html.new-request-page .request-form button[type="submit"]:disabled,
html.new-request-page .request-form .button-primary:disabled {
  background-color: #808080;
  border-color: #808080;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form actions row — push submit to the right on wider screens */
html.new-request-page .request-form .form-field:last-of-type {
  margin-bottom: 2rem;
}

/* Error message styling — World secondary red */
html.new-request-page .form-field .error-message,
html.new-request-page .form-field [data-test-id="error-message"] {
  color: #EA392A;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

html.new-request-page .form-field.has-error input,
html.new-request-page .form-field.has-error select,
html.new-request-page .form-field.has-error textarea {
  border-color: #EA392A;
}

/* Required marker */
html.new-request-page .form-field .required {
  color: #EA392A;
  margin-left: 0.25rem;
}

/* End of NEW REQUEST PAGE block */

/* ============================================================
   v107g34 — Glossary page UX overrides
   Hide the article-vote ("Was this article helpful?") widget on
   the canonical glossary article. The glossary is a reference,
   not a how-to, so rating it is not meaningful.
   Scoped to `html.is-glossary-page` (added synchronously in
   document_head.hbs via window.HC_GLOSSARY_ARTICLE_ID match)
   so this never affects any other article.
   ============================================================ */
html.is-glossary-page .apl-vote,
html.is-glossary-page #apl-vote,
html.is-glossary-page .article-vote,
html.is-glossary-page .article-votes {
  display: none !important;
}

/* End of v107g34 glossary overrides */

/* ============================================================
   v115.3 — ENTERPRISE PORTAL APP SHELL
   Measured from the approved TFH-brand handoff:
   Figma NicQhDV2c743pMxUW8Xtrp, frame 7294:76360 (home) and
   7294:77161 (category). Supersedes the v115/v115.1 values, which
   came from the superseded Archive file and differed materially:
   224px white rail (was 279px grey), 32px gutters (was 60px),
   SQUARE corners (was 16px radius), no page title, no search,
   no section labels, #1a1a1a/#808080/#ebebeb (was 1f1f1f/7d7d7d/f1f1f1).
   ============================================================ */
:root {
  --ep-text: #1a1a1a;
  --ep-text-secondary: #808080;
  --ep-surface: #f7f7f7;
  --ep-hairline: #ebebeb;
  --ep-pad: 32px;
  /* Handoff is drawn at a 1512px viewport: 224px rail + 32px gutters =
     1224px of content, giving 392px category cards. Left fluid, that
     stretches badly on ultra-wide monitors (a 3008px window produced
     662px cards on the first draft). Capping the content box keeps card
     widths near the designed size from ~1900px upward, while 1440-1920
     — where these admins actually work — stays fluid and matches. */
  --ep-content-max: 1632px;
  --ep-gap-section: 48px;
  /* Acumin VF is the new TFH brand face. It is an Adobe font and is NOT
     bundled here — shipping it needs a licence (Adobe Fonts web project
     or equivalent). Until that lands the stack falls through to the
     theme's existing licensed faces, so the layout is correct and only
     the typeface differs. Add the webfont ahead of --font-ep and nothing
     else has to change. */
  --font-ep: 'Acumin VF', 'Acumin Pro', 'WorldProMVP', 'Inter',
             -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Topbar ----------
   v137g35. Replaces the 224px fixed rail (Chadwick, 2026-09-02). One 56px
   row owns the frame at EVERY width, which is what removes the old
   .ep-pagehead overlap: that band was static at top:0 underneath a fixed
   .header at top:0 / z-index 999, so the search field was unclickable on
   every page below 1024px.

   STATIC, not fixed. The rail had to be fixed because it was a full-height
   column; a row does not, and keeping it in normal flow means no z-index
   contest with the article sticky bar and no margin compensation on main.
   It scrolls away with the page, matching the handoff's non-sticky feel. */
.ep-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--ep-hairline);
  font-family: var(--font-ep);
}
.ep-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px var(--ep-pad);
  max-width: calc(var(--ep-content-max) + (var(--ep-pad) * 2));
  /* Same centred box as the content frame below. These two must agree or the
     mark and the search field stop lining up with the cards on wide screens.
     The bar's own background still spans the full viewport — only its
     contents are constrained. */
  margin: 0 auto;
}
.ep-topbar-spacer { flex: 1 1 auto; }

/* Back to Portal. Hidden unless document_head.hbs proved a destination
   before first paint — see the v137g35 block there. Ordered first so that
   its absence closes the row up rather than leaving a reserved gap. */
.ep-topbar-portal,
.ep-topbar-divider { display: none; }
html.ep-has-portal-link .ep-topbar-portal { display: inline-flex; }
html.ep-has-portal-link .ep-topbar-divider { display: block; }
.ep-topbar-portal {
  align-items: center;
  gap: 12px;
  flex: none;
  height: 40px;
  padding: 0 12px;
  /* Pull the box back by its own left padding so the ARROW — not the
     invisible box edge — lands on the 32px content gutter, level with the
     mark in the no-portal state and with the category cards below. The
     hover fill bleeds 12px into the gutter, exactly as the rail rows did. */
  margin-left: -12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ep-text);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
  transition: background 140ms ease;
}
.ep-topbar-portal:hover {
  background: var(--ep-surface);
  color: var(--ep-text);
  text-decoration: none;
}
.ep-topbar-portal-icon { display: inline-flex; flex: none; color: var(--ep-text); }
.ep-topbar-portal-icon svg { width: 16px; height: 16px; display: block; }
/* UI Kit marks are filled paths using currentColor. */
.ep-topbar-portal-icon svg path { fill: currentColor; }
/* Without this the back-arrow visually attaches to the World mark and reads
   as "back to World" rather than "leave the portal, arrive at the HC". */
.ep-topbar-divider {
  width: 1px;
  height: 24px;
  flex: none;
  background: var(--ep-hairline);
}

.ep-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--ep-text);
  text-decoration: none;
}
.ep-topbar-brand:hover { color: var(--ep-text); text-decoration: none; }
/* settings/logo.svg is the square World mark (60x60 viewBox), not a
   wordmark — constrain height and let width follow. */
.ep-topbar-mark { height: 24px; width: auto; display: block; }
.ep-topbar-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.ep-topbar-contact {
  flex: none;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  color: var(--ep-text);
  font-family: var(--font-ep);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--ep-dur-micro) var(--ep-ease-hover);
}
.ep-topbar-contact:hover { border-color: var(--ep-text-secondary); }
.ep-topbar-contact:focus-visible { outline: none; border-color: var(--ep-text); }

/* Narrow viewports: the row wraps rather than crushing the field. Search
   takes its own full-width line below the brand and Contact us. */
@media (max-width: 767.98px) {
  .ep-topbar-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .ep-topbar-inner .ep-search { flex: 1 1 100%; width: 100%; order: 1; }
  .ep-topbar-portal { padding: 0 8px; margin-left: -8px; }
  .ep-topbar-portal span:last-child { display: none; }
  .ep-topbar-divider { height: 20px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ep-topbar-inner { padding: 8px 16px; gap: 12px; }
  .ep-topbar-inner .ep-search { width: 180px; }
}

/* ---------- Content frame ---------- */
/* Handoff: content starts 32px right of the 224px rail and ends 32px
   from the viewport edge (1224px inside a 1512px frame). */
.home-page .apl-container,
.category-page .apl-container,
.article-page .container,
.category-page .container {
  max-width: calc(var(--ep-content-max) + (var(--ep-pad) * 2));
  /* v139g35: centred (Chadwick, 2026-09-03). Left-pinning made sense while
     the 224px rail held the left edge — content sat 32px right of the rail
     and the cap only bit on very wide monitors. With the rail gone the cap
     leaves 32px on the left and everything else on the right, which reads
     as a layout bug above ~1700px. `auto` is a no-op below the cap, so
     narrow and designed widths are untouched. */
  margin: 0 auto;
  padding: 0 var(--ep-pad);
}
.home-page body, .category-page body { font-family: var(--font-ep); }
.home-page .apl-cats { padding: 34px 0 0; }
.home-page .apl-featured { padding: var(--ep-gap-section) 0 0; }
.home-page .apl-section-title { font-family: var(--font-ep); }

/* ---------- Category cards ---------- */
/* Handoff card is 392x161 at 3-up. With four live categories we hold one
   row and take the 288px column width of the featured row instead
   (Casper, 2026-08-25) — same rhythm, no orphan card. */
.home-page .apl-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1279.98px) { .home-page .apl-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px)  { .home-page .apl-cat-grid { grid-template-columns: minmax(0, 1fr); } }
.home-page .apl-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  min-height: 161px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  transition: background 140ms ease;
}
.home-page .apl-card:hover { transform: none; box-shadow: none; background: var(--ep-surface); }
/* Bare 40px line-art mark — the handoff has no chip behind it. */
.home-page .apl-card-icon {
  width: 40px;
  height: 40px;
  background: none;
  border-radius: 0;
  color: var(--ep-text);
}
.home-page .apl-card-icon img,
.home-page .apl-card-icon svg { width: 40px; height: 40px; display: block; }
/* Meta lines: "2 min read · <date>". The separator is inserted by
   script.js only when both halves are present, so a card with no
   reading time never shows an orphan dot. */
/* The base theme paints this separator via its own ::before; force ours so
   the handoff's "2 min read · April 17, 2026" dot actually appears. */
/* script.js writes the "·" into this span itself — do NOT add a ::before
   glyph as well, or the meta line renders a double separator. Spacing only. */
.apl-card-meta-sep { margin: 0 6px; }
/* script.js hides this separator on cards that previously had no second
   meta value. The handoff's meta line is "2 min read · April 17, 2026",
   and both halves are now always rendered, so force it back on for the
   two card types that carry a date. (A card with no reading time would
   show a leading dot; every article here has body text, so reading time
   is always computed.) */
.apl-feat-meta [data-card-meta-sep],
.category-page .apl-article-card-meta [data-card-meta-sep] { display: inline !important; }
/* Badge and video-overlay slots ship with the `hidden` attribute and are
   revealed by label. Base rules give them a display value, which silently
   defeats `hidden` and leaves a stray mark beside compact card titles. */
.apl-card-badge[hidden],
.apl-card-video-overlay[hidden] { display: none !important; }
.home-page .apl-feat-meta,
.category-page .apl-article-card-meta { display: block; }
.home-page .apl-card-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--ep-text);
}
.apl-card-count {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
}
.home-page .apl-card-desc { display: none; }

/* ---------- Featured articles ---------- */
/* v115.4: 3-up, deliberately one column wider than the 4-up category
   row above so the two card types read as different things (Casper,
   2026-08-25). At the 1224px content width this gives 392px columns. */
.home-page .apl-feat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 24px !important;
}
.home-page .apl-feat-grid > .apl-feat {
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.home-page .apl-feat:hover { transform: none; box-shadow: none; }
/* The bento presets size slot 0 as a 32/9 "wide" banner via
   .apl-article-card--bento[data-card-size="wide"] (specificity 0,3,0),
   which beat this rule and letterboxed the thumbnail to 528x149 — a
   3:2 image lost ~58% of its height to the crop. featured_layout is now
   'classic' (no per-slot sizing), and !important here keeps the handoff
   ratio even if that setting is changed in Guide admin. */
.home-page .apl-feat-banner,
.home-page .apl-article-card--bento[data-card-size] .apl-feat-banner {
  display: block;
  width: 100%;
  aspect-ratio: 288 / 174 !important;
  border-radius: 0;
  overflow: hidden;
  background: var(--ep-surface);
}
.home-page .apl-feat-banner img { width: 100%; height: 100%; object-fit: cover; }
.home-page .apl-feat-eyebrow,
.home-page .apl-feat-desc { display: none; }
.home-page .apl-feat-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ep-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-page .apl-feat-meta {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
@media (max-width: 1279.98px) { .home-page .apl-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599.98px)  { .home-page .apl-feat-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- FAQs ---------- */
.ep-faq { background: #ffffff; padding: 64px 0 72px; font-family: var(--font-ep); }
.ep-faq .apl-section-title {
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ep-text);
  margin: 0 0 16px;
}
.ep-faq-item { border-top: 1px solid var(--ep-hairline); }
.ep-faq-item:last-child { border-bottom: 1px solid var(--ep-hairline); }
.ep-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ep-text);
  cursor: pointer;
  list-style: none;
}
.ep-faq-q::-webkit-details-marker { display: none; }
.ep-faq-q span { max-width: 642px; }
/* Handoff (hover frame 7294:77006): the toggle changes GLYPH AND COLOUR —
   collapsed is a plus in #808080, expanded is a minus in #1a1a1a. The
   vertical bar is hidden on open rather than rotating the whole mark, so
   the expanded state reads as a true minus. */
.ep-faq-q::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--ep-text-secondary), var(--ep-text-secondary)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ep-text-secondary), var(--ep-text-secondary)) center/1.5px 13px no-repeat;
  transition: background-size 180ms ease;
}
.ep-faq-item[open] .ep-faq-q::after {
  background:
    linear-gradient(var(--ep-text), var(--ep-text)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ep-text), var(--ep-text)) center/1.5px 0 no-repeat;
}
.ep-faq-a {
  padding: 0 0 16px;
  /* Handoff sets 14px / #808080 / 120%. The 120% is kept a little looser
     here: the mock's answer is a single line, whereas real FAQ answers run
     to paragraphs and 1.2 is uncomfortably tight for those. */
  font-size: 14px;
  line-height: 1.45;
  color: var(--ep-text-secondary);
  max-width: 1178px;
}

/* ---------- Support pill: RETIRED in v137g35 ----------
   Styles removed with the markup. The pill is Enterprise Portal shell
   furniture (handoff node 7294:76472 — fixed viewport corner in both HC
   frames, same layer as the portal nav and Log out), and EP renders its HC
   tab from the Zendesk API rather than embedding this theme. The Help
   Center's support entry point is .ep-topbar-contact. */

/* ---------- Category page ---------- */
/* Handoff 7294:77161: breadcrumb, title, grey subtitle, then the same
   4-up article cards as the featured row. */
.category-page .apl-page-hero { border-bottom: none; padding: var(--ep-pad) 0 0; }
.category-page .article-breadcrumbs,
.category-page .article-breadcrumbs a {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
.category-page .article-breadcrumbs a:hover { color: var(--ep-text); }
.category-page .apl-page-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ep-text);
  margin: 12px 0 4px;
}
.category-page .apl-page-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
  margin: 0;
}
.category-page .apl-section-block { margin-top: 32px; }
.category-page .apl-article-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1279.98px) { .category-page .apl-article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px)  { .category-page .apl-article-list { grid-template-columns: minmax(0, 1fr); } }
.category-page .apl-article-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.category-page .apl-article-card:hover { transform: none; box-shadow: none; }
.category-page .apl-card-banner {
  width: 100%;
  aspect-ratio: 288 / 174;
  border-radius: 0;
  overflow: hidden;
  background: var(--ep-surface);
}
.category-page .apl-card-banner img { width: 100%; height: 100%; object-fit: cover; }
.category-page .apl-article-card-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ep-text);
}
.category-page .apl-article-card-desc { display: none; }
.category-page .apl-article-card-meta {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}

/* ---------- Article page ---------- */
/* The portal hands articles off to Zendesk (EP-99) and has no article
   frame, so this page is built from the handoff's own primitives. */
.article-page { font-family: var(--font-ep); }
/* Desktop-first: the rail already shows the mark, so the sticky bar does
   not repeat it. Restored only on narrow viewports where the rail
   collapses to a strip and drops its logo. */
.article-sticky-bar__logo { display: none; }
@media (max-width: 1023.98px) { .article-sticky-bar__logo { display: block; } }
.article-sticky-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ep-hairline);
}
.article-sticky-bar__title { font-size: 14px; font-weight: 500; color: var(--ep-text); }
.article-page .article-breadcrumbs,
.article-page .article-breadcrumbs a {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
.article-page .article-breadcrumbs a:hover { color: var(--ep-text); }
.article-page article > header { padding: var(--ep-pad) 0 0; }
.article-page article > header h1 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ep-text);
  margin: 12px 0 8px;
}
.article-page .apl-article-meta,
.article-page .apl-article-meta li {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
.article-page .article-content {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ep-text);
}
.article-page .article-content p { margin: 0 0 16px; }
.article-page .article-content h2 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ep-text);
  margin: 40px 0 12px;
}
.article-page .article-content h3 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ep-text);
  margin: 28px 0 8px;
}
.article-page .article-content ul,
.article-page .article-content ol { margin: 0 0 16px; padding-left: 22px; }
.article-page .article-content li { margin: 0 0 8px; }
.article-page .article-content img { max-width: 100%; height: auto; border-radius: 0; }
.article-page .article-content hr { border: none; border-top: 1px solid var(--ep-hairline); margin: 32px 0; }
/* Link affordance — required BECAUSE of this version's palette swap, not
   a pre-existing defect. Baseline v114 coloured article links blue via
   `[itemprop="articleBody"] a { color:#007CFB }` (verified live: links
   rgb(0,124,251) on rgb(45,44,44) text). Neutralising the palette for
   brand parity removed that cue and left text-decoration:none, so links
   would read as ordinary text (WCAG 1.4.1). Underline restores the
   affordance without adding a chromatic accent the brand does not use.
   To go back to coloured links, drop this rule and exclude #007CFB from
   the palette swap. Glossary terms keep their own dotted treatment. */
.article-page .article-content a:not(.hc-glossary-term) {
  color: var(--ep-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ep-text-secondary);
}
.article-page .article-content a:not(.hc-glossary-term):hover { text-decoration-color: var(--ep-text); }
.apl-ai-answer__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ep-text-secondary);
}
.apl-ai-answer__body a:hover { text-decoration-color: var(--ep-text); }
.article-page .article-votes,
.article-page .article-section-nav {
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}
.article-page .article-section-nav__prev-link,
.article-page .article-section-nav__next-link { font-size: 16px; line-height: 1.3; color: var(--ep-text); }
.article-page .related-articles h2,
.article-page .recent-articles h2 {
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ep-text);
  margin: 0 0 16px;
}
.article-page .related-articles ul,
.article-page .recent-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ep-hairline);
}
.article-page .related-articles li,
.article-page .recent-articles li { margin: 0; border-bottom: 1px solid var(--ep-hairline); }
.article-page .related-articles li a,
.article-page .recent-articles li a {
  display: block;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ep-text);
  text-decoration: none;
}
.article-page .related-articles li a:hover,
.article-page .recent-articles li a:hover { color: var(--ep-text-secondary); }
.article-page [data-element="table-of-contents"] a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
  text-decoration: none;
}
.article-page [data-element="table-of-contents"] a:hover,
.article-page [data-element="table-of-contents"] .is-active > a { color: var(--ep-text); }

/* ---------- v115.9 — corrections found on the first draft deploy ----------
   Everything below was discovered by rendering the draft against real
   content; none of it was visible in the design file. */

/* 1. Surface colours. The v115 palette swap rewrote hex values file-wide,
      which also recoloured surfaces that are meant to be white: `main`
      picked up the hairline colour (#ebebeb) and .apl-cats picked up
      #f7f7f7, producing grey bands above and below the content. The
      handoff's page is white throughout. */
.home-page main, .category-page main, .article-page main { background: #ffffff; }
.home-page .apl-cats,
.home-page .apl-featured { background: #ffffff; padding-left: 0; padding-right: 0; }
.home-page .apl-cats { padding-top: 34px; padding-bottom: 0; }

/* 2. v137g35 — the inherited Zenplates header is retired at EVERY width.
      It used to return below 1024px because it still owned the mobile menu;
      the topbar now owns the frame at all widths, and on this brand that
      menu is empty anyway — header_link_1/2/3 are blank, category_dropdown_style
      is 'none', header_search_style is 'none', and the HC is EN-only so
      alternative_locales renders nothing (all verified against live settings,
      2026-09-02). Leaving it visible would double the logo and stack a second
      fixed bar over the topbar.

      NOTE FOR JAPANESE (Chadwick, 2026-08-28): when a second locale is added,
      `alternative_locales` becomes non-empty and the language selector inside
      this header is the only control that renders it. It will be invisible.
      The selector must be moved into .ep-topbar at that point — it is not a
      code path that fails loudly, so it needs doing deliberately. */
.home-page .header,
.category-page .header,
.section-page .header,
.article-page .header,
.search-results-page .header { display: none; }
.home-page main, .category-page main, .article-page main { margin-top: 0; }
@media (max-width: 1023.98px) {
  .home-page main, .category-page main, .article-page main { margin-top: 0 !important; }
}

/* 3. Two base rules use !important and were beating the scoped overrides:
      `.apl-card-icon svg { width:22px !important }` kept the category
      marks at 22px instead of the handoff's 40px, and a shared
      `display:block !important` rule kept card descriptions visible. The
      handoff's category cards show icon, title and article count only. */
.home-page .apl-card-icon svg,
.home-page .apl-card-icon img { width: 40px !important; height: 40px !important; }
.home-page .apl-card-icon svg path { fill: currentColor; }
.home-page .apl-card-desc,
.home-page .apl-feat-desc,
.home-page .apl-feat-eyebrow { display: none !important; }
.category-page .apl-article-card-desc { display: none !important; }


/* ---------- v115.12 — category page, found on the rendered draft ---------- */
/* The content band inherited #f7f7f7 from the palette swap; the handoff's
   category screen is white like the rest of the page. */
.category-page .apl-content { background: #ffffff; padding: 0 0 64px; }

/* Sections with no published articles were rendering as a dashed "empty"
   placeholder — a Guide-authoring affordance that has no place on a
   public, customer-facing page. Hide the placeholder, and hide the whole
   section block where the browser supports :has() so no stray gap or
   heading is left behind. */
.category-page .apl-empty { display: none; }
.category-page .apl-section-block:has(.apl-empty) { display: none; }


/* ---------- v115.13 — eyebrows + article-view alignment ---------- */

/* Section eyebrow above card titles on category and section pages. The
   handoff has no equivalent (its category screen shows a single section),
   but with section headers hidden the cards otherwise carry no section
   context at all. Sits above the title in the secondary grey. */
.apl-article-card-eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ep-text-secondary);
}
.apl-article-card-eyebrow:empty { display: none; }

/* Article view alignment.
   The page previously inherited the 1632px content cap, which left the
   body text (760px measure) stranded far from the right-hand related
   articles, and let the vote card and section nav run wider than the text
   they sit under. Cap the article page at the handoff's own 1224px
   content width so the two columns sit in a sensible relationship, and
   hold the sub-content blocks to the same measure as the prose. */
.article-page .container {
  max-width: calc(1224px + (var(--ep-pad) * 2));
}
.article-page .article-votes,
.article-page .article-section-nav,
.article-page .apl-article-meta,
.article-page article > header {
  max-width: 760px;
}
.article-page .article-votes { margin-left: 0; margin-right: 0; }
/* Related/recently-viewed sit in the right-hand column; align their top
   edge with the article title rather than floating mid-page. */
.article-page .related-articles,
.article-page .recent-articles { margin-top: 0; }


/* ---------- v115.17 — thumbnail is card artwork, not article content ----------
   An image tagged data-thumbnail="true" exists to feed the Help Center
   card and the Enterprise Portal's article card. It is not part of the
   article's prose, and rendering it as a full-width hero at the top of
   the body duplicates artwork the reader has just clicked through from.

   Hiding it here is safe on both consumers:
     - the card hydrator parses the <template class="apl-card-body-source">
       copy of the body, not the rendered DOM, so cards still resolve it;
     - the portal reads the body over the API and never sees this CSS.

   To show it in the article again, delete these two rules. */
.article-page .article-content img[data-thumbnail="true"] { display: none; }
/* Collapse the wrapping paragraph too, but only when the thumbnail is its
   sole child — never hide a paragraph that also carries real content. */
.article-page .article-content p:has(> img[data-thumbnail="true"]:only-child) { display: none; }


/* ============================================================
   v115.19 — handoff alignment pass (Casper review, 2026-08-25)
   ============================================================ */

/* --- Category card internal spacing (item 3) ---
   The handoff card is icon, then a text block with an 8px internal gap:
   `gap-[32px]` separates the icon from the BLOCK, not every child. Our
   markup is flat (icon, title, count), so the 32px gap was applying twice
   and adding to the count's 8px margin — 40px between title and count,
   and a 194px card against the handoff's 161px. Drive the rhythm with
   explicit margins instead of a container gap. */
.home-page .apl-card { gap: 0; }
.home-page .apl-card-icon { margin-bottom: 32px; }
.home-page .apl-card-title { margin: 0; }
.apl-card-count { margin: 8px 0 0; }

/* --- Recommended (featured) cards (items 1, 2, 4) --- */
/* Same flat-markup problem: a single 16px card gap sat between the banner
   AND between title and meta, where the handoff wants 16px then 4px. */
.home-page .apl-feat-grid > .apl-feat {
  gap: 0;
  border-radius: 0;          /* item 4 — handoff cards are square */
  overflow: visible;
}
.home-page .apl-feat-banner { margin-bottom: 16px; }
.home-page .apl-feat-title {
  /* item 1 — the handoff sets 16px on a 288px card. This row is 3-up at
     ~384px per Casper's earlier call, so the type is stepped up one notch
     to hold the same optical weight against the wider card. Revert to
     16px for literal handoff parity. */
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}
/* The base theme pins card meta with `margin-top: auto !important` (line
   ~20770, "Pin meta to the bottom of any card") so it sinks to the bottom
   of a stretched card. Our cards are content-height, so that simply
   collapsed the handoff's 4px title-to-meta gap to zero. Match the
   !important to restore it. */
.home-page .apl-feat-meta,
.category-page .apl-article-card-meta,
.section-page .apl-article-card-meta { margin-top: 4px !important; }

/* --- Category / section lists stay a plain grid, never bento (item 5) --- */
/* The bento presets tag slots with data-card-size and resize them; inner
   pages must stay a uniform grid regardless of the theme setting. */
.category-page .apl-article-list,
.section-page .apl-article-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 24px !important;
}
.category-page .apl-article-list > .apl-article-card,
.section-page .apl-article-list > .apl-article-card {
  grid-column: auto !important;
  grid-row: auto !important;
}
.category-page .apl-article-card[data-card-size] .apl-card-banner,
.section-page .apl-article-card[data-card-size] .apl-card-banner {
  aspect-ratio: 288 / 174 !important;
}
@media (max-width: 1279.98px) {
  .category-page .apl-article-list,
  .section-page .apl-article-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 599.98px) {
  .category-page .apl-article-list,
  .section-page .apl-article-list { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- Article view alignment (item 7) --- */
/* Prose sits in a 760px measure starting at the 32px gutter. The related
   column was 416px wide and drifting toward the viewport edge; holding it
   to 320px puts a deliberate gutter between the two columns instead of a
   variable gap that grows with the window. */
.article-page .related-articles,
.article-page .recent-articles { max-width: 320px; }
.article-page article > footer { margin-top: 48px; }
/* Sub-blocks share the prose measure so nothing runs wider than the text. */
.article-page .article-votes,
.article-page .article-section-nav { max-width: 760px; }


/* ---------- v115.21 — QA pass corrections ---------- */

/* Category/section card text block: .apl-card-body is a flex column with an
   8px gap, which stacked on top of the 4px meta margin and produced a 12px
   title-to-meta gap against the handoff's 4px. Drive the rhythm with
   margins only, as on the home cards. */
.category-page .apl-card-body,
.section-page .apl-card-body { gap: 0; }
.category-page .apl-article-card-eyebrow,
.section-page .apl-article-card-eyebrow { margin: 0 0 4px; }
.category-page .apl-article-card-title,
.section-page .apl-article-card-title { margin: 0; }

/* Article view: the right-hand column is an .md\:col-4 aside whose inner
   related block only fills ~373px, leaving the column drifting toward the
   viewport edge. Capping the aside keeps a deliberate gutter between the
   760px prose measure and the related list at any window width. */
.article-page aside[class*="col-4"] { max-width: 360px; }


/* ---------- v117g35 — footer removed ---------- */
/* The approved handoff has no footer on any screen: the page ends after
   the FAQ block. With the five social links cleared and the hardcoded
   mailto icon removed from footer.hbs, the <footer> now renders as an
   empty nav that still contributes its top border and mt-6 spacing — so
   hide the element itself rather than leave a stray rule and gap.

   Nothing else lives in it: show_credit_link is off and
   back_to_top_link_style is 'none'. Belt-and-braces with the cleared
   settings, so the icons cannot reappear if a setting is repopulated in
   Guide admin. Delete this rule to bring the footer back. */
.home-page #footer,
.category-page #footer,
.section-page #footer,
.article-page #footer { display: none; }


/* ============================================================
   v118g35 — UI Kit motion, squared corners, FAQ article template
   ============================================================ */

/* ---------- Motion tokens ----------
   Straight from World UI Kit 5.0 → Variables → Motion (17 tokens).
   The kit's Motion FOUNDATION page is still a stub ("TODO: Pattern
   Catalog"), but the token values themselves are defined, and the stub
   lists the intended pattern-to-token mapping — which is what the rules
   below follow.

   Springs (spring(0) / spring(0.15) / spring(0.3)) have no CSS transition
   equivalent, so gentle and snappy are approximated with cubic-beziers at
   the kit's own timings. Anything needing true spring physics would have
   to be a Web Animations API keyframe, which none of this UI warrants. */
:root {
  --ep-dur-instant: 0s;
  --ep-dur-micro: 0.1s;
  --ep-dur-short: 0.2s;
  --ep-dur-medium: 0.25s;
  --ep-dur-long: 0.3s;
  --ep-dur-exit: 0.16s;

  --ep-ease-enter: cubic-bezier(0.17, 0.84, 0.44, 1);
  --ep-ease-exit: cubic-bezier(0.17, 0.84, 0.44, 1);
  --ep-ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ep-ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1);
  --ep-ease-linear: linear;

  /* spring/gentle  — spring(0),    timing 0.4s  */
  --ep-spring-gentle: cubic-bezier(0.32, 0.72, 0, 1);
  --ep-spring-gentle-dur: 0.4s;
  /* spring/snappy  — spring(0.15), timing 0.35s */
  --ep-spring-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --ep-spring-snappy-dur: 0.35s;
}

/* Kit pattern — "Selection highlight: easing/hover + duration/micro" and
   "Press / tap: easing/hover + duration/micro". Applies to every surface
   that responds to pointer state. */
.home-page .apl-card,
.category-page .apl-article-card,
.section-page .apl-article-card,
.home-page .apl-feat,
.ep-topbar-portal,
.ep-topbar-contact,
.ep-faq-q {
  transition:
    background-color var(--ep-dur-micro) var(--ep-ease-hover),
    border-color var(--ep-dur-micro) var(--ep-ease-hover),
    color var(--ep-dur-micro) var(--ep-ease-hover);
}
/* Article-body links: colour only, same feedback timing. */
.article-page .article-content a:not(.hc-glossary-term) {
  transition: text-decoration-color var(--ep-dur-micro) var(--ep-ease-hover);
}
/* Card thumbnails: "List insert / remove: easing/move + duration/short".
   A quiet scale on hover reads as responsive without moving layout, since
   the banner clips overflow. */
.home-page .apl-feat-banner img,
.category-page .apl-card-banner img,
.section-page .apl-card-banner img {
  transition: transform var(--ep-dur-short) var(--ep-ease-enter);
}
.home-page .apl-feat:hover .apl-feat-banner img,
.category-page .apl-article-card:hover .apl-card-banner img { transform: scale(1.02); }

/* Kit pattern — "Expand / collapse: spring/gentle (height) + easing/enter
   (content)". <details> cannot animate its own height reliably across
   browsers, so the height step is left instant and the CONTENT is animated
   on reveal, which is the part a reader actually perceives. The toggle
   glyph uses the gentle spring timing. */
.ep-faq-q::after {
  transition: background-size var(--ep-spring-gentle-dur) var(--ep-spring-gentle);
}
.ep-faq-item[open] .ep-faq-a {
  animation: ep-faq-reveal var(--ep-dur-short) var(--ep-ease-enter) both;
}
@keyframes ep-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Kit pattern — "Reduced-motion fallback: duration/instant, crossfade only,
   springs and overshoot dropped." */
@media (prefers-reduced-motion: reduce) {
  .home-page .apl-card,
  .category-page .apl-article-card,
  .section-page .apl-article-card,
  .home-page .apl-feat,
  .ep-topbar-portal,
  .ep-topbar-contact,
  .ep-faq-q,
  .ep-faq-q::after,
  .article-page .article-content a:not(.hc-glossary-term) {
    transition-duration: var(--ep-dur-instant);
  }
  .home-page .apl-feat-banner img,
  .category-page .apl-card-banner img,
  .section-page .apl-card-banner img { transition: none; transform: none !important; }
  .ep-faq-item[open] .ep-faq-a { animation: none; }
}

/* ---------- Squared corners, everywhere ----------
   The ENT UI Kit is uniformly boxy. The inherited Zenplates theme rounds
   almost every component, so square them on the surfaces this brand owns.
   Deliberate exceptions below. */
.home-page :where(
  .apl-card, .apl-feat, .apl-feat-banner, .apl-card-banner, .apl-card-icon,
  .apl-card-badge, .apl-search-input, input, textarea, select, button,
  .btn, .apl-alert-banner, .apl-alert, .apl-result-card, .apl-empty
),
.category-page :where(
  .apl-article-card, .apl-card-banner, .apl-card-badge, input, textarea,
  select, button, .btn, .apl-empty, .apl-alert
),
.section-page :where(
  .apl-article-card, .apl-card-banner, .apl-card-badge, input, textarea,
  select, button, .btn, .apl-empty, .apl-alert
),
.article-page :where(
  .article-votes, .article-section-nav, .article-content img, .article-content pre,
  .article-content blockquote, .article-content table, input, textarea, select,
  button, .btn, .apl-alert, .article-sticky-bar
) {
  border-radius: 0;
}
/* Exceptions, and why:
   - .ep-topbar-portal keeps its 10px radius. The handoff's own sidebar rows
     are authored `rounded-[10px]`, and Back to Portal is that control moved
     into the row, so squaring it would move AWAY from the reference. Set to
     0 here if you want it flat. Contact us is deliberately square — it is a
     Help Center control, not a portal one.
   - Avatars/dots that are true circles are left alone; the kit draws the
     chat avatar square but that component is not built yet. */
.home-page .ep-topbar-portal,
.category-page .ep-topbar-portal,
.section-page .ep-topbar-portal,
.article-page .ep-topbar-portal { border-radius: 10px; }

/* ---------- FAQ article template (templates/article_pages/faq.hbs) ---------- */
.ep-faq-page .ep-faq-article { max-width: 760px; }
.ep-faq-page .ep-faq-article__header { padding: var(--ep-pad) 0 0; }
.ep-faq-page .ep-faq-article__header h1 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ep-text);
  margin: 12px 0 8px;
}
.ep-faq-page .ep-faq-article__answer { margin-top: 8px; }
.ep-faq-page .ep-faq-article__back { margin: 48px 0 72px; }
.ep-faq-page .ep-faq-article__back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  color: var(--ep-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--ep-dur-micro) var(--ep-ease-hover);
}
.ep-faq-page .ep-faq-article__back a:hover { background: var(--ep-surface); text-decoration: none; }


/* ---------- v119g35 — top alignment ----------
   Content was starting ~161px down the page against the handoff's 34px.
   Two causes, both leftovers from the inherited theme:
     1. `main` carries `margin-top: 60px` to clear the fixed header — but
        this brand hides that header on desktop, so the gap compensated
        for nothing. The v115.9 override lost to a more specific base rule,
        hence !important here.
     2. `main` is a flex column; its gap/justification pushed the first
        section down again.
   The 34px that remains is `.apl-cats { padding-top }`, which IS the
   handoff value (cards sit 34px from the top of the content pane).

   v137g35: the narrow-viewport restore below used to re-apply the 60px
   because the header returned under 1024px. It does not return any more —
   the topbar owns the frame at every width — so the compensation became
   60px of dead white between the bar and the first card on home, category
   and article. (Section and search-results escaped it only because their
   own later rules happened to re-zero it, which is exactly why this was
   easy to miss.) This block sits AFTER the general rule at ~23148 with the
   same specificity and !important, so it wins — it has to be zeroed here,
   not there. */
.home-page main,
.category-page main,
.section-page main,
.article-page main {
  margin-top: 0 !important;
  padding-top: 0;
  gap: 0;
  justify-content: flex-start;
}
@media (max-width: 1023.98px) {
  .home-page main,
  .category-page main,
  .section-page main,
  .article-page main { margin-top: 0 !important; }
}
/* Article and category pages open with their own 32px gutter block, so
   they need no extra lead-in above the breadcrumb. */
.article-page article > header,
.category-page .apl-page-hero { padding-top: var(--ep-pad); }


/* ---------- v120g35 — article page vertical alignment ---------- */

/* 1. The article sticky bar is `position: fixed; left: 0`, so the rail —
      also fixed, and at z-index 90 against the bar's 10 — covered its
      first 224px and clipped the article title ("...y account?"). Fixed
      elements ignore the body padding that offsets everything else, so the
      bar has to be inset explicitly. */
/* v137g35: the rail is gone, so the bar no longer needs insetting past it. */
.article-page .article-sticky-bar {
  left: 0;
  width: auto;
  right: 0;
}
@media (max-width: 1023.98px) {
  .article-page .article-sticky-bar { left: 0; }
}

/* 2. The right-hand column was pinned by
        `html.article-page aside:has(.apl-related--sidebar) > div { top: 156px }`
      inside a min-width:768px block. That 156px is documented in the rule
      itself as "~60px main header + up to ~80px article-sticky-bar + ~16px
      breathing room" — but this brand hides the main header on desktop, so
      60px of that budget no longer exists. Sticky clamps an element to no
      closer than `top` from the viewport, so at scroll 0 the related list
      sat 106px BELOW the article header instead of level with it.

      Alignment at rest and stickiness are mutually exclusive here: any
      offset large enough to clear the sticky bar while scrolling is also
      large enough to push the column down at rest. Since the related list
      is short (~212px), the column is simply not sticky on this brand —
      it starts level with the article header and scrolls with the page.
      To restore stickiness, set a `top` and accept the at-rest offset. */
html.article-page aside:has(.apl-related--sidebar) > div,
.article-page aside .sticky-top {
  position: static;
  top: auto;
}
/* Keep the sticky bar above the related column when both are on screen. */
.article-page .article-sticky-bar { z-index: 95; }

/* 3. Level the three columns at rest: rail, prose and related all begin at
      the same 32px gutter. */
.article-page article > header { padding-top: var(--ep-pad); }
.article-page aside[class*="col-4"] { padding-top: var(--ep-pad); }

/* End of v115.3 Enterprise Portal app-shell block */


/* ============================================================
   v125g35 — MOBILE QA PASS (2026-08-26)
   Findings from a 375x812 anonymous pass over home / category /
   article / FAQ article / search. Desktop is unaffected: every rule
   here is either inside the <=1023.98px block or targets an element
   the desktop layout already hides.
   ============================================================ */

/* 1. MOBILE HEADER HAS NO BOTTOM EDGE.
      The header is fixed at z-index 999 and renders opaque white, so
      content scrolls underneath it — but it carries no border and no
      shadow (computed: `border-bottom: 0px none`, `box-shadow: none`),
      so a card edge or a line of body text can sit flush against it
      with nothing marking the boundary. Desktop never showed this
      because the header is hidden there and the rail owns the frame.

      On `bg_color_header`: the setting shipped as rgba(60, 81, 121, 0),
      fully transparent, but a later `.header { background: #fff }` in
      this stylesheet already overrides it, and on article pages
      `body.article-sticky-bar-active .header` paints an !important
      white gradient on top. The header is therefore opaque today and
      nothing bleeds through it. The manifest value is now opaque white
      as well, purely so the setting matches what is actually painted —
      if either override is removed later the header will not silently
      go transparent. */
@media (max-width: 1023.98px) {
  .home-page header.header,
  .category-page header.header,
  .section-page header.header {
    /* `header.header, header.header.border-bottom` (line ~19832) kills the
       baseline theme's border with !important, so this has to match it.

       Article pages are deliberately absent from this list. There,
       `body.article-sticky-bar-active header.header` strips the border
       (and the shadow) with !important at a higher specificity, because
       the sticky bar sits flush beneath the header and supplies its own
       edge. Adding .article-page here would be dead weight — the rule
       loses that cascade, and it should. */
    border-bottom: 1px solid var(--ep-hairline) !important;
  }
}

/* 2. STICKY-BAR BREADCRUMB RENDERED IN DEFAULT LINK BLUE.
      `.article-sticky-bar__crumbs .breadcrumbs li` is correctly
      #808080, but nothing set a colour on the anchors inside it, so
      they fell through to the UA default rgb(0, 0, 238). The in-page
      breadcrumb has its own rule and was never affected — this is the
      sticky bar's copy only, which is why it showed up on mobile
      (the bar carries the crumbs there) and not on desktop. */
.article-sticky-bar__crumbs .breadcrumbs a,
.article-sticky-bar__crumbs .breadcrumbs a:visited {
  color: inherit;
  text-decoration: none;
}
.article-sticky-bar__crumbs .breadcrumbs a:hover,
.article-sticky-bar__crumbs .breadcrumbs a:focus-visible {
  color: var(--ep-text);
  text-decoration: underline;
}

/* 3. (retired in v137g35) The empty-mobile-strip workaround lived here.
      The rail collapsed to a horizontal strip below 1024px whose only
      child was conditional, so it rendered as an empty bar plus a seam
      for most visitors, and needed a 56px offset to escape the fixed
      header. Topbar row, no strip, no fixed header, no workaround. */

/* 4. VOTE WIDGET RADIUS.
      Everything else in the redesign is square — cards, inputs, the
      FAQ accordion. `.apl-vote` still carried the baseline theme's
      16px, which read as a foreign element on a narrow screen where
      it spans the full width. */
.apl-vote { border-radius: 0; }

/* End of v125g35 mobile QA block */


/* ============================================================
   v127g35 — SECTION + CATEGORY VIEW ALIGNMENT (2026-08-26)
   The section page had never been brought onto the redesign. Reviewed
   at 1440 and 375 against home and category.
   ============================================================ */

/* 1. CONTENT FRAME.
      The v115.3 content-frame rule lists .home-page, .category-page and
      .article-page but NOT .section-page, so section pages fell back to
      the baseline theme's centred container: content began at x=335
      instead of 256 and ran 980px wide instead of 1137, which also
      squeezed the 4-up grid to 215px columns and wrapped card titles one
      word per line. Same frame as everything else now. */
.section-page .apl-container,
.section-page .container {
  max-width: calc(var(--ep-content-max) + (var(--ep-pad) * 2));
  /* v139g35: centred (Chadwick, 2026-09-03). Left-pinning made sense while
     the 224px rail held the left edge — content sat 32px right of the rail
     and the cap only bit on very wide monitors. With the rail gone the cap
     leaves 32px on the left and everything else on the right, which reads
     as a layout bug above ~1700px. `auto` is a no-op below the cap, so
     narrow and designed widths are untouched. */
  margin: 0 auto;
  padding: 0 var(--ep-pad);
}
.section-page body { font-family: var(--font-ep); }

/* 2. UNCONSTRAINED CARD BANNER — the root cause of the broken section page.
      The aspect-ratio guard was written as
        .section-page .apl-article-card[data-card-size] .apl-card-banner
      but data-card-size is only emitted by the bento presets. With
      section_layout / category_layout set to "none" the attribute never
      appears, so the rule never applied and a thumbnail rendered at its
      natural height — 897px — which stretched every sibling in the grid
      row to 899px. Dropping the attribute gate constrains the banner in
      the plain-grid case too, which is the case we actually ship. */
.category-page .apl-card-banner,
.section-page .apl-card-banner,
.category-page .apl-article-card--featured .apl-card-banner,
.section-page .apl-article-card--featured .apl-card-banner {
  display: block;
  width: 100% !important;
  height: auto !important;
  /* The baseline theme lays a "featured" card out horizontally — a 38%-wide
     banner beside the text — and enforces it with
     `.apl-article-card--featured .apl-card-banner { width: 38%;
     min-height: 200px; height: auto; }`. The width was already being
     overridden elsewhere, but min-height was not, which is why the wrapper
     stayed 200px tall even once the image inside was a correct 161px:
     39px of empty --ep-surface under every promoted thumbnail. These
     pages use one uniform card, so the horizontal treatment is dropped
     outright rather than patched around. */
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
  border-radius: 0;
  background: var(--ep-surface);
  flex: none;
}
.category-page .apl-article-card--featured,
.section-page .apl-article-card--featured { flex-direction: column !important; }
/* The ratio has to live on the IMG, not the wrapper. The card is a flex
   column, so the wrapper's height stays content-driven and the image's
   natural height wins over any aspect-ratio set on the parent — which is
   exactly what happened on the category page, where the wrapper reported
   `aspect-ratio: 288 / 174` and still measured 200px tall because the
   image inside was 200px. Giving the replaced element the ratio plus
   `height: auto` makes its height definite, and the wrapper then sizes to
   it. */
.category-page .apl-card-banner img,
.section-page .apl-card-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 288 / 174 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover;
}

/* 3. CARD CHROME PARITY.
      Category article cards are unboxed (transparent, no border, no
      padding) and so is the home page's featured row — boxes are reserved
      for the category tiles that act as navigation. Section cards were
      the odd one out: white fill plus a border, and the promoted card
      carried a leftover blue-tinted border, rgba(0, 102, 204, 0.15), from
      the baseline palette. Matched to the others. */
.section-page .apl-article-card,
.section-page .apl-article-card--featured {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 4. DESCRIPTIONS.
      Hidden on the home page and on category pages; section pages were
      still printing full excerpts, which is what turned each card into a
      wall of one-word lines once the column was squeezed. */
.section-page .apl-article-card-desc { display: none !important; }

/* 5. HERO + SURFACE PARITY WITH THE CATEGORY PAGE.
      Measured side by side at 1440. The section page was running the
      baseline theme's scale and surfaces throughout:
        main            #ebebeb  -> should be #fff
        .apl-content    #f7f7f7  -> should be #fff   (the grey band)
        breadcrumb      16px/#000 -> 14px/secondary
        page title      32px      -> 20px, 12px top margin
        hero padding    32/0/24   -> 32/0/0
      The grey surfaces are why the page read as a different site: every
      other view in the redesign sits on white, with grey reserved for
      the article page's related-articles footer. */
.section-page main,
.section-page .apl-content { background: #ffffff; }
.section-page .apl-content { padding: 0 0 64px; }
.section-page .apl-page-hero { border-bottom: none; padding: var(--ep-pad) 0 0; }
.section-page .article-breadcrumbs,
.section-page .article-breadcrumbs a {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
.section-page .article-breadcrumbs a:hover { color: var(--ep-text); }
.section-page .apl-page-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ep-text);
  margin: 12px 0 4px;
}
.section-page .apl-page-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
  margin: 0;
}

/* 6. THE LEGACY HEADER WAS STILL RENDERING ON SECTION PAGES.
      Same omission as the content frame: the desktop header-hide rule
      lists .home-page, .category-page and .article-page. On section
      pages the baseline header therefore painted at the top of the
      viewport, putting the World mark and the `tagline` setting
      ("World ID | Enterprise") half behind the 224px rail — the clipped
      text at the rail's edge. The narrow-viewport rules already covered
      .section-page, so this only ever showed on desktop. */
.section-page .header { display: none; }
.section-page main { margin-top: 0; }
/* v137g35: the narrow-viewport restore that lived here is gone with the
   rail — the topbar owns the frame at every width. */
@media (max-width: 1023.98px) {
  .section-page main { margin-top: 0 !important; }
}

/* End of v127g35 section + category alignment block */


/* ============================================================
   v129g35 — FEATURED ROW IS LABEL-DRIVEN (2026-08-26)
   The row moved from Curlybars `promoted_articles` (server-rendered) to a
   label query fetched by script.js, because the Enterprise Portal's Help
   Center tab must render the same row and the HC API cannot filter on
   `promoted` — only on labels. Agreed with Max + Misha 2026-08-26.

   The only visual consequence: the cards arrive a beat after first paint.
   Reserving the row's height keeps everything below it still, so the page
   does not jump when they land. One row of the handoff card (288x174
   banner + eyebrow + title + meta) measures ~286px; the reserve is applied
   to the GRID rather than the section so a taller-than-expected card can
   still grow past it.
   ============================================================ */
.home-page [data-ep-featured-grid] { min-height: 286px; }
@media (max-width: 1279.98px) { .home-page [data-ep-featured-grid] { min-height: 572px; } }
@media (max-width: 599.98px)  { .home-page [data-ep-featured-grid] { min-height: 0; } }
/* Once the cards are in, drop the reserve so an odd count cannot leave a
   band of dead space under the last row. */
.home-page [data-ep-featured-grid][data-ep-featured-ready] { min-height: 0; }

/* Cards fade in rather than snapping, using the kit's enter easing. */
.home-page [data-ep-featured-grid][data-ep-featured-ready] > .apl-feat {
  animation: ep-feat-in var(--ep-dur-short) var(--ep-ease-enter) both;
}
@keyframes ep-feat-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .home-page [data-ep-featured-grid][data-ep-featured-ready] > .apl-feat { animation: none; }
}

/* End of v129g35 block */

/* Column count follows the number of cards actually rendered, set by
   script.js as data-ep-featured-count. A fixed 3-up grid orphaned the 4th
   card onto its own row the moment a 4th article was featured; this fills
   one row evenly for any count from 1 to 4. Beyond 4 it falls back to the
   4-column track and wraps, which at least wraps in pairs. */
.home-page [data-ep-featured-grid][data-ep-featured-count="1"] { grid-template-columns: minmax(0, 1fr) !important; }
.home-page [data-ep-featured-grid][data-ep-featured-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.home-page [data-ep-featured-grid][data-ep-featured-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.home-page [data-ep-featured-grid][data-ep-featured-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1279.98px) {
  .home-page [data-ep-featured-grid][data-ep-featured-count] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 599.98px) {
  .home-page [data-ep-featured-grid][data-ep-featured-count] { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ============================================================
   v130g35 — SEARCH RESTORED (2026-08-26)
   Placement taken from the ARCHIVE Figma (vaRjSY2jVy2vYpQXOs2mXb,
   frame 2376:3013), which is the only mockup that has a search field —
   the current handoff has none. Archive geometry: content column 1113
   wide, page title at x=0, Search 220x40 at x=893, magnifier inset 12px.
   So: one row above the category cards, field flush right.

   Styling is deliberately NOT from the archive. That file predates the
   boxy rebuild and draws a rounded grey pill; everything shipped since
   v115 is square on #ebebeb hairlines, so the field is rebuilt in the
   current system instead.
   ============================================================ */
/* v137g35: .ep-pagehead / .ep-pagehead-row retired — the field moved into
   .ep-topbar. The rules below still style .ep-search itself, which is the
   same markup in its new home. */
.ep-search {
  position: relative;
  flex: 0 0 auto;
  width: 220px;                /* archive width */
}
/* NB: Zendesk's {{search}} helper puts the class you pass it on the
   <form>, not on the input. Styling `.ep-search-input` as if it were the
   field therefore padded the FORM as well, shrinking its content box to
   220 - 48 = 172 and starving the input's width:100% (it measured 170).
   The field is addressed by element instead, and the form is explicitly
   reset below. */
.ep-search input[type="search"] {
  width: 100%;
  height: 40px;                /* archive height */
  box-sizing: border-box;
  padding: 0 12px 0 36px;      /* 12px inset + 16px icon + 8px gap */
  margin: 0;
  font-family: var(--font-ep);
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text);
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;            /* square, per the current system */
  box-shadow: none;
  transition: border-color var(--ep-dur-micro) var(--ep-ease-hover);
}
.ep-search input[type="search"]::placeholder { color: var(--ep-text-secondary); }
.ep-search input[type="search"]:hover { border-color: var(--ep-text-secondary); }
.ep-search input[type="search"]:focus {
  outline: none;
  border-color: var(--ep-text);
}
/* Zendesk's search helper wraps the input in its own form/div and ships
   a submit button we do not use (submit=false still emits markup on some
   theme versions). Neutralise anything that would break the 40px row. */
.ep-search form,
.ep-search .ep-search-input,
.ep-search .search {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  width: 100%;
}
.ep-search [type="submit"],
.ep-search button { display: none; }
.ep-search-icon {
  position: absolute;
  left: 12px;                  /* archive inset */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;                 /* archive icon size */
  height: 16px;
  color: var(--ep-text-secondary);
  pointer-events: none;
}

/* Below the 4-up breakpoint the field takes the full content width —
   a 220px field marooned on the right reads as an orphan on a phone. */
/* Width at narrow viewports is set by the .ep-topbar-inner media queries,
   which are more specific than this and win. Kept as the floor for any
   .ep-search rendered outside the topbar. */
@media (max-width: 1023.98px) {
  .ep-search { width: 100%; }
}

/* End of v130g35 block */

/* ---- v131g35: search is global, and the native dropdown is restyled ---- */

/* v137g35: the per-template spacing rules for the retired .ep-pagehead band
   are gone. The topbar is a bordered row of its own, and every page's hero
   already supplies its own top padding. */

/* ZENDESK'S NATIVE INSTANT-SEARCH DROPDOWN.
   Typing opens <zd-autocomplete>, a Zendesk web component appended to
   <body> — not theme markup, so none of the card/panel styling reached it.
   It shipped as a 12px-radius panel with a drop shadow, and matched text
   wrapped in <em> with a pale-yellow highlighter fill (rgb(250,240,137))
   at font-weight 700.

   The yellow is the real problem: this palette uses World yellow as a brand
   accent on thumbnails, so a yellow highlighter in a menu reads as a
   different design language. Emphasis is carried by weight instead, which
   is what the rest of the theme does.

   These elements are in the light DOM (no shadow root), so ordinary CSS
   reaches them — verified live before writing this. The panel's inline
   style sets its own left/top/width from script; its right edge already
   lines up with the field, so position is left alone and only the chrome
   is changed. */
zd-autocomplete {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--ep-hairline) !important;
  font-family: var(--font-ep);
}
zd-autocomplete-multibrand { border-radius: 0 !important; }
zd-autocomplete em {
  background: transparent !important;
  color: inherit !important;
  font-weight: 600 !important;
  padding: 0 !important;
  font-style: normal !important;
}


/* ============================================================
   v132g35 — SEARCH RESULTS PAGE (2026-08-26)
   Search is now reachable from every page, so this template gets the same
   treatment section pages got in v127: it had never been migrated either.
   ============================================================ */

/* Same omission as .section-page before it — the desktop header-hide rule
   never listed .search-results-page, so the baseline header painted at the
   top of the viewport with the World mark and the `tagline` setting
   ("World ID | Enterprise") sitting half behind the 224px rail. */
.search-results-page .header { display: none; }
/* The baseline sets a bare `main { margin-top: 60px !important }` to clear
   its own fixed header. Every other page type carries an !important
   override against it; search results did not, so it kept a 60px gap above
   the breadcrumb that no other page has. Match the !important. */
.search-results-page main { margin-top: 0 !important; }
/* v137g35: header retired at every width; no restore, and no 60px gap to
   compensate for on a phone. */
@media (max-width: 1023.98px) {
  .search-results-page main { margin-top: 0 !important; }
}

/* Content frame, so results line up with every other page rather than
   falling back to the baseline theme's centred container. */
.search-results-page .apl-container {
  max-width: calc(var(--ep-content-max) + (var(--ep-pad) * 2));
  /* v139g35: centred (Chadwick, 2026-09-03). Left-pinning made sense while
     the 224px rail held the left edge — content sat 32px right of the rail
     and the cap only bit on very wide monitors. With the rail gone the cap
     leaves 32px on the left and everything else on the right, which reads
     as a layout bug above ~1700px. `auto` is a no-op below the cap, so
     narrow and designed widths are untouched. */
  margin: 0 auto;
  padding: 0 var(--ep-pad);
}
.search-results-page body { font-family: var(--font-ep); }

/* Surfaces: the baseline greys behind the filter row and the results list
   are the same mismatch the section page had. Everything else in the
   redesign sits on white. */
/* The `html.` prefix is required, not decorative: the V25 polish block sets
   these two sections to #f7f7f7 via
   `html.search-results-page .apl-results-section`, which is specificity
   (0,2,1). A plain `.search-results-page .apl-results-section` is (0,2,0)
   and loses, so `main` went white while the filter row and results list
   stayed grey — a half-migrated page. Matching the element selector and
   coming later in the file wins it. */
.search-results-page main,
html.search-results-page .apl-search-filters-section,
html.search-results-page .apl-results-section { background: #ffffff; }

/* Result cards match the article cards elsewhere: no fill, no rounding,
   separated by a hairline instead of floating on grey. */
.search-results-page .apl-result-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ep-hairline);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}
.search-results-page .apl-result-card:hover { background: var(--ep-surface); }

/* Filter pills were fully rounded; square them like every other control. */
.search-results-page .apl-pill {
  border-radius: 0;
  border: 1px solid var(--ep-hairline);
  background: #ffffff;
}
.search-results-page .apl-pill--active {
  background: var(--ep-text);
  border-color: var(--ep-text);
  color: #ffffff;
}
.search-results-page .apl-pill-count { border-radius: 0; }

/* Shown when every result on the page was an FAQ entry and got filtered. */
.ep-result-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--ep-text-secondary);
  font-size: 14px;
}

/* Hero scale, matching the category and section pages. The results title
   was still running the baseline 32px against their 20px, and the
   breadcrumb was black rather than secondary — the same drift v127 fixed
   on section pages. */
.search-results-page .apl-page-hero { border-bottom: none; padding: var(--ep-pad) 0 0; }
.search-results-page .article-breadcrumbs,
.search-results-page .article-breadcrumbs a {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-text-secondary);
}
.search-results-page .article-breadcrumbs a:hover { color: var(--ep-text); }
.search-results-page .apl-page-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ep-text);
  margin: 12px 0 4px;
}
.search-results-page .apl-page-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
  margin: 0;
}

/* End of v132g35 block */


/* ============================================================
   v134g35 — SEARCH RESULT TITLES (2026-08-26)
   Titles broke apart whenever the query matched a word inside them —
   extra space around the matched word, and long titles failing to wrap
   like ordinary prose.

   Cause: `.apl-result-title` is `display: flex; gap: 6px; flex-wrap: nowrap`
   (line ~19539). It was made a flex container for one reason only: to seat
   the optional external-link SVG beside the title. But a matched title is
   `text + <mark class="search-hl">term</mark> + text`, and in a flex
   container each of those runs becomes its own flex item. So `gap: 6px`
   was inserted on BOTH sides of every highlighted word, the <mark> was
   blockified, and `nowrap` stopped the line breaking where prose should.
   The highlight styling itself was always fine — `mark.search-hl` is
   already transparent at weight 600. Only the layout was wrong.

   Fix: put the title back into normal inline flow and let the icon sit
   inline, which is all it needed in the first place.
   ============================================================ */
.search-results-page .apl-result-title {
  display: block;
  gap: 0;
}
.search-results-page .apl-result-title mark.search-hl {
  display: inline;
  /* Guard against flex blockification returning if the rule above is ever
     lost — a blockified mark puts the rest of the title on its own line. */
  white-space: normal;
}
.search-results-page .apl-result-external {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

/* Empty state, found in the same pass. The no-results panel was a
   16px-radius card on a translucent black hairline, with two fully rounded
   pill buttons — the only rounded things left on the page once the result
   cards were squared. Same treatment as everything else. */
.search-results-page .apl-noresults {
  border-radius: 0;
  border: 1px solid var(--ep-hairline);
  background: #ffffff;
}
.search-results-page .apl-noresults .apl-support-btn {
  border-radius: 0;
  border: 1px solid var(--ep-hairline);
}
.search-results-page .apl-noresults .apl-support-btn.primary {
  border-color: var(--ep-text);
}

/* End of v134g35 block */

/* ============================================================
   v140g35 — CONTACT PAGE + FORCED REQUEST FORM
   (templates/custom_pages/contact.hbs, templates/document_head.hbs)

   Same system as everything since v115: square corners, 1px
   var(--ep-hairline) borders, white ground, var(--ep-surface) on hover,
   monochrome. No new palette is introduced here on purpose. The Zoom
   page this was modelled on uses three saturated blue buttons; World's
   brand keeps primary colour sparing and this theme's approved handoff
   is monochrome throughout, so three equal hairline cards is the
   on-brand reading of that reference, not a downgrade of it.
   ============================================================ */

/* ---------- Page frame ----------
   Every redesigned view in this theme opts INTO the frame by page class,
   and the base Zenplates look is what you get if you forget one. A new
   page class therefore has to join three separate lists or it renders as
   a different site: the legacy `.header` navbar reappears stacked under
   the topbar (list at ~23154), `main` falls back to the base theme's
   #ebebeb (~23135 and the .section-page rule), and `main` keeps the
   `margin-top: 60px` that compensates for a fixed header this brand no
   longer shows (the v119g35/v137g35 block, which needs !important to beat
   the base rule).

   All three were visibly wrong on the first staging render of this page —
   two stacked headers on a grey ground — which is precisely why it was
   rendered before going anywhere near prod. */
.ep-contact-page .header { display: none; }
.ep-contact-page main { background: #ffffff; }
.ep-contact-page main {
  margin-top: 0 !important;
  padding-top: 0;
  gap: 0;
  justify-content: flex-start;
}
@media (max-width: 1023.98px) {
  .ep-contact-page main { margin-top: 0 !important; }
}

.ep-contact-page .apl-container {
  max-width: calc(var(--ep-content-max) + (var(--ep-pad) * 2));
  margin: 0 auto;
  padding: 0 var(--ep-pad);
}
.ep-contact-page body { font-family: var(--font-ep); }
.ep-contact { padding: 34px 0 var(--ep-gap-section); font-family: var(--font-ep); }

/* The topbar control became an <a> in v140g35 (it has a destination now).
   Its rule above was written for a <button>, which centred its own label
   and carried no underline; an anchor does neither, so a 40px-tall box
   would print its text along the top edge. Overridden here rather than
   edited in place so the original block stays comparable with the World
   ID fork, which still ships the button. */
a.ep-topbar-contact {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
a.ep-topbar-contact:hover { text-decoration: none; color: var(--ep-text); }

/* The topbar's own "Contact us" control is the main route to this page,
   so on this page it would point at itself. Hidden rather than removed
   from header.hbs: that markup is shared by every other template. */
.ep-contact-page .ep-topbar-contact { display: none; }

.ep-contact-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ep-text);
}
.ep-contact-sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ep-text-secondary);
}

/* Three across, then straight to one. Two columns would leave an orphan
   card on a row of its own at exactly the widths where the row is
   tightest. */
.ep-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 0;
}
@media (max-width: 1023.98px) {
  .ep-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* One rule for the <a> tiles and the <button> tile, which is why the
   button resets are here: a button carries its own font, alignment and
   width defaults and would otherwise sit a few pixels off its siblings. */
.ep-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 200px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  font-family: inherit;
  text-align: left;
  color: var(--ep-text);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.ep-contact-card:hover {
  background: var(--ep-surface);
  border-color: var(--ep-text-secondary);
  text-decoration: none;
  color: var(--ep-text);
}
.ep-contact-card:focus-visible {
  outline: none;
  border-color: var(--ep-text);
  box-shadow: 0 0 0 1px var(--ep-text);
}

.ep-contact-card-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--ep-text);
}
.ep-contact-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ep-text-secondary);
}
/* Pushed to the foot of the card so the three calls to action line up
   across the row however long the descriptions run. */
.ep-contact-card-cta {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ep-text);
}
.ep-contact-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--ep-dur-micro) var(--ep-ease-hover);
}
.ep-contact-card:hover .ep-contact-arrow { transform: translateX(2px); }

/* Live region for the chat tile. Always in the DOM (a role="status" node
   has to exist before its text changes to be announced) and collapsed
   while empty so it costs no layout. */
.ep-contact-card-status {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ep-text-secondary);
}
.ep-contact-card-status:empty { display: none; }

/* Widget never arrived. Subdued, still operable, and the status line
   below it says where the click will actually go. Deliberately NOT
   display:none — the widget resolves after paint, and removing a tile
   under the cursor is worse than a muted one. */
.ep-contact-card[data-ep-chat-state="unavailable"] { background: var(--ep-surface); }
.ep-contact-card[data-ep-chat-state="unavailable"] .ep-contact-card-title,
.ep-contact-card[data-ep-chat-state="unavailable"] .ep-contact-card-cta { color: var(--ep-text-secondary); }
.ep-contact-card[data-ep-chat-state="opening"] { cursor: progress; }

@media (max-width: 767.98px) {
  .ep-contact { padding: 24px 0 32px; }
  .ep-contact-page .apl-container { padding: 0 16px; }
  .ep-contact-title { font-size: 24px; }
  .ep-contact-card { min-height: 0; }
}

/* ---------- Forced single form on /requests/new ----------
   document_head.hbs rewrites the URL to the one Enterprise form before
   first paint and stamps .new-request-page on <html> while it is there.
   The picker is hidden in CSS rather than only in JS so it never paints:
   {{request_form}} is rendered server-side, so the <select> is in the
   markup that arrives, and a script that hides it after DOMContentLoaded
   shows it first. The JS hide in new_request_page.hbs stays as the
   fallback for anything :has() cannot reach.

   Wrapper, not just the <select> — the label ("Please choose your issue
   below") is a sibling inside it and would otherwise be left behind. */
.new-request-page .form-field:has(> select[name="request[ticket_form_id]"]) { display: none; }
.new-request-page select[name="request[ticket_form_id]"] { display: none; }

/* End of v140g35 block */

/* ============================================================
   v141g35 — CATEGORY SECTION HEADERS
   (Peter, 2026-09-16: "the size of them and the spacing between
   them and the line above look off")

   These headers were hidden from v115.3 until 2026-09-16, when they
   were revealed to make the two-section split in User Provisioning
   legible. Revealing them exposed styling that had never been
   designed for this brand — they were still rendering at the
   inherited Zenplates scale:

     page title (the category name)  20px / 500
     page description                14px / secondary
     section name                    30px / 500   <- outranked the H1
     section emblem                  56px grey circle

   So the section name read as the most important thing on the page,
   and the 56px chip set the header row's height while the 30px text
   sat optically centred in it — which is the gap Peter is pointing
   at, not the margin.

   Section name now sits a step BELOW the page title at 16px Medium,
   matching the card-title scale the handoff uses, and the emblem is
   dropped: this design system has no chips anywhere (category cards
   use a bare line-art icon on purpose). The emblem is decorative and
   aria-hidden, so nothing is lost semantically. Restore it by
   deleting the display:none if a designed treatment ever arrives.
   ============================================================ */
.category-page .apl-section-header {
  gap: 0;
  margin: 0 0 16px;
}
.category-page .apl-section-emblem { display: none; }
.category-page .apl-section-block > .apl-section-header > .apl-section-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--ep-text);
}
/* Spacing. Measured on the live page first: the gap between the category
   description and the first section header was ZERO, not too large — the
   32px `.apl-section-block { margin-top }` in the v115.3 block COLLAPSES
   through `.apl-content`, which has no top padding or border to contain it.
   That collapse is the other half of what Peter is seeing.

   So the first block's separation is owned by the container, where it
   cannot collapse, and the per-block margin only ever separates one block
   from the next. Verified at 1440px: 32px above the first header, 16px
   header-to-cards, 56px between blocks. */
.category-page .apl-content { padding-top: 32px; }
.category-page .apl-section-block { margin-top: 40px; }
.category-page .apl-section-block:first-child { margin-top: 0; }

/* End of v141g35 block */

/* ============================================================
   v142g35 — ARTICLE CARD: THUMBNAIL AND TEXT BACK ON THE GUTTER
   (Casper, 2026-09-16: card labels/titles/subtitles are not
   left-aligned to the thumbnail)

   Measured on the live page at 1440px. The page gutter is 32px —
   page title, description, section name and the card grid all sit
   there. Inside a card, neither child did:

     card box    32   <- correct
     thumbnail   12   <- 20px LEFT of the gutter
     text        56   <- 24px RIGHT of the gutter
                       = 44px apart

   Two inherited conventions disagreeing. `.apl-card-banner` carries
   the Zenplates bleed pattern — `width: calc(100% + 40px)` with
   `margin: -20px -20px 14px` — which is correct only when the CARD
   itself has 20px padding. This brand zeroed the card padding and
   put 24px on `.apl-card-body` instead, so the banner bleeds out to
   the left while the text is inset to the right.

   Not a v141g35 regression: both rules are in the baseline block
   (style.css ~18949 and ~19182), and the misalignment has been live
   on category cards since v115.7 put a banner on every card. It
   reached section pages when those cards gained banners on
   2026-09-16.

   The fix follows the home featured row, which is already correct
   (thumb and text both at 32): zero horizontal bleed, zero
   horizontal padding, keep the card box as the alignment edge.
   VERTICAL SPACING IS DELIBERATELY UNTOUCHED — the banner keeps its
   14px bottom margin and the body its 24px top/bottom padding, so
   this change is horizontal only.

   Scope is exact: `.apl-card-body` is emitted by category_page.hbs
   and section_page.hbs and nowhere else. The home featured row uses
   `.apl-feat-*`, the 4 category tiles keep their 20px padding per
   the handoff, and the search results page uses neither.
   ============================================================ */
.category-page .apl-article-card > .apl-card-banner,
.section-page .apl-article-card > .apl-card-banner {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.category-page .apl-article-card > .apl-card-body,
.section-page .apl-article-card > .apl-card-body {
  padding-left: 0;
  padding-right: 0;
}

/* End of v142g35 block */

/* ============================================================
   v143g35 — TOPBAR LANGUAGE SELECTOR
   (Casper, 2026-09-17 — Japanese ahead of JP teams joining)

   Icon-only, far right of the topbar, after search. Drawn from the
   same parts as the controls beside it: 1px var(--ep-hairline),
   square corners, white ground, var(--ep-surface) on hover. No new
   token is introduced.

   Sized to match .ep-topbar-contact rather than guessed: that
   control is 14px/400 with 0 16px padding inside a 57px bar whose
   inner has 8px vertical padding, so the row's controls are ~40px
   tall. The globe button is square at that height.

   The menu is absolutely positioned under the button and right-
   aligned, because the button sits at the end of the row and a
   left-aligned panel would hang off the viewport at narrow widths.
   z-index sits above the topbar's own stacking context but below
   the Zendesk staff toolbar.
   ============================================================ */
.ep-lang { position: relative; flex-shrink: 0; }
.ep-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  color: var(--ep-text);
  cursor: pointer;
}
.ep-lang-btn:hover { background: var(--ep-surface); }
.ep-lang-btn[aria-expanded="true"] { background: var(--ep-surface); }
.ep-lang-glyph { display: inline-flex; width: 16px; height: 16px; }
.ep-lang-glyph svg { width: 16px; height: 16px; display: block; }
.ep-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid var(--ep-hairline);
  border-radius: 0;
  padding: 4px 0;
  z-index: 1000;
}
.ep-lang-item {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ep-text);
  text-decoration: none;
  white-space: nowrap;
}
a.ep-lang-item:hover { background: var(--ep-surface); text-decoration: none; }
.ep-lang-item--current { color: var(--ep-text-secondary); cursor: default; }

/* Below 768px .ep-topbar-inner wraps and search takes its own row
   (order: 1). The selector is already icon-only, so it simply stays
   on the first row beside Contact us — no separate treatment needed
   beyond keeping it from stretching when the row wraps. */
@media (max-width: 767.98px) {
  .ep-lang { order: 0; }
}

/* End of v143g35 block */