html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

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

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

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

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

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

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

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

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

pre {
  overflow: auto;
}

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

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

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

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

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

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

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

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

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

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

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

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

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

.w-col-2 {
  width: 16.6667%;
}

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

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

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

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

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

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

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

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 5px;
}

.w-slider-nav.w-num > div {
  font-size: inherit;
  line-height: inherit;
  width: auto;
  height: auto;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 5px;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

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

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

.w-code-component > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:root {
  --colors--white: #fff;
  --colors--black-03: #444;
  --font-size--text-default: 18px;
  --line-height--text-default: 180%;
  --font-size--h1-large-desktop: 88px;
  --line-height--h1\<deleted\|variable-13001182-0c08-1e7c-82ee-a3fcf61d8b89\>: 1.2em;
  --font-size--h1-tablet: 60px;
  --font-size--h1-mobile: 40px;
  --font-size--h2-desktop: 56px;
  --line-height--h2: 115%;
  --font-size--h2-tablet: 48px;
  --font-size--h2-mobile: 36px;
  --font-size--h3-desktop: 52px;
  --font-size--h3-tablet: 46px;
  --font-size--h3-mobile: 36px;
  --font-size--h4-desktop: 40px;
  --line-height--h4: 120%;
  --font-size--h4-tablet: 38px;
  --font-size--h4-mobile: 34px;
  --font-size--h5-desktop: 24px;
  --line-height--h5: 134%;
  --font-size--h5-tablet: 22px;
  --line-height--h5\<deleted\|variable-301a2b20-4342-b90d-3248-f31bdb0eb8b3\>: 1.2em;
  --font-size--h6-desktop: 20px;
  --line-height--h6: 145%;
  --font-size--h6-tablet: 20px;
  --font-size--h6-mobile: 20px;
  --line-height--h6\<deleted\|variable-72e1955c-eafc-4797-fe4d-99f4ebfca0a9\>: 1.2em;
  --colors--black-01: #151515;
  --line-height--h1: 100%;
  --line-height--h3: 115%;
  --font-size--h5-mobile: 20px;
  --font-size--text-sm: 16px;
  --line-height--text-sm: 180%;
  --font-size--text-lg: 20px;
  --line-height--text-lg: 168%;
  --colors--primary: #3665fb;
  --colors--black-10: #e8e8e8;
  --colors--transparent: transparent;
  --colors--black-09: #d0d0d0;
  --section-padding--mobile-p: 40px;
  --colors--bg-color: #f9f9f9;
  --section-padding--desktop: 100px;
  --section-padding--tab: 80px;
  --section-padding--mobile-l: 60px;
  --font-size--button-sm: 16px;
  --line-height--button-sm: 124%;
  --colors--balck-11: #f3f3f3;
  --text-xs: 14px;
  --colors--black-02: #2c2c2c;
  --font-size--h1-desktop: 80px;
  --font-size--button-lg: 18px;
  --font-size--text-lg-mobile: 18px;
  --line-height--button-lg: 110%;
}

.w-pagination-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.w-pagination-previous, .w-pagination-next {
  color: #333;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 9px 20px;
  font-size: 14px;
  display: block;
}

body {
  background-color: var(--colors--white);
  color: var(--colors--black-03);
  font-family: DM Sans, sans-serif;
  font-size: var(--font-size--text-default);
  line-height: var(--line-height--text-default);
}

h1 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h1-large-desktop);
  line-height: var(--line-height--h1\<deleted\|variable-13001182-0c08-1e7c-82ee-a3fcf61d8b89\>);
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h2-desktop);
  line-height: var(--line-height--h2);
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h3-desktop);
  line-height: var(--font-size--h3-desktop);
  margin-top: 0;
  margin-bottom: 0;
}

h4 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h4-desktop);
  line-height: var(--line-height--h4);
  margin-top: 0;
  margin-bottom: 0;
}

h5 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h5-desktop);
  line-height: var(--line-height--h5);
  margin-top: 0;
  margin-bottom: 0;
}

h6 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h6-desktop);
  line-height: var(--line-height--h6);
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--colors--black-03);
  text-decoration: none;
}

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

label {
  margin-bottom: 0;
  display: block;
}

strong {
  color: var(--colors--black-01);
  font-weight: 700;
}

.container {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.h1 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h1-large-desktop);
  line-height: var(--line-height--h1);
  letter-spacing: -2px;
  font-weight: 700;
}

.h2 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h2-desktop);
  line-height: var(--line-height--h2);
  letter-spacing: -2px;
  font-weight: 700;
}

.h3 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h3-desktop);
  line-height: var(--line-height--h3);
  letter-spacing: -1.5px;
  font-weight: 700;
}

.h4 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h4-desktop);
  line-height: var(--line-height--h4);
  letter-spacing: -1px;
  font-weight: 700;
}

.h5 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h5-desktop);
  line-height: var(--line-height--h5);
  letter-spacing: -.5px;
  font-weight: 700;
}

.h6 {
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--h6-desktop);
  line-height: var(--line-height--h6);
  letter-spacing: -.3px;
  font-weight: 700;
}

.text-default {
  font-size: var(--font-size--text-default);
  line-height: var(--line-height--text-default);
  font-weight: 400;
}

.text-sm {
  font-size: var(--font-size--text-sm);
  line-height: var(--line-height--text-sm);
}

.text-lg {
  font-size: var(--font-size--text-lg);
  line-height: var(--line-height--text-lg);
}

.text-lg.font-500 {
  font-weight: 500;
}

.nav-menu {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  color: #fff;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  height: auto;
  display: flex;
}

.nav-link {
  color: var(--colors--black-03);
  padding: 0;
  transition: all .3s;
}

.nav-link:hover, .nav-link.w--current {
  color: var(--colors--primary);
}

.dropdown-link {
  color: var(--colors--black-01);
  margin-left: 0;
  font-size: 16px;
  line-height: 1.5em;
}

.dropdown-link:hover, .dropdown-link.w--current {
  color: var(--colors--primary);
}

.header-section {
  z-index: 2147483647;
  border-bottom: 1px solid var(--colors--black-10);
  background-color: var(--colors--white);
  position: sticky;
  top: 0;
}

.navbar {
  background-color: var(--colors--transparent);
  color: #000;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.logo {
  width: 175px;
}

.brand {
  max-width: 134px;
}

.dropdown-list {
  background-color: #fff;
  border-radius: 5px;
}

.dropdown-list.w--open {
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--token-45dc5b98-5f37-4d75-bbed-428b7260b726, white);
  border-radius: 5px;
  padding: 20px;
  left: -120px;
  box-shadow: 0 4px 20px #1515150f;
}

.footer-social-links-icon {
  width: 24px;
  height: 24px;
}

.footer-content-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: stretch stretch;
  display: flex;
}

.footer-social-links-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  display: flex;
}

.footer-block {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.footer-link-title {
  color: var(--colors--black-01);
  font-weight: 900;
}

.social-link {
  box-shadow: inset 0 0 0 1px var(--colors--black-09);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 12px;
  transition: all .3s;
  display: flex;
}

.social-link:hover {
  background-color: var(--colors--primary);
  box-shadow: none;
}

.footer-link {
  color: var(--colors--black-01);
  text-decoration: none;
  transition: color .4s;
}

.footer-link:hover {
  color: var(--colors--primary);
}

.newsletter {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  max-width: 382px;
  display: flex;
}

.footer-links-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.copyright-block {
  border-top: 1px solid var(--colors--black-10);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  display: flex;
}

.footer-links-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: #fff;
  flex-flow: column;
  display: flex;
}

.footer-content-layout-block {
  z-index: 5;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
  position: relative;
}

.logo-wrapper {
  justify-content: space-around;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.brand-logo {
  margin-right: 97px;
}

.brands-section {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  padding-top: 32px;
  padding-bottom: 116px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sub-heading-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--colors--black-01);
  letter-spacing: .2em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  display: flex;
  overflow: hidden;
}

.brands-logo-block {
  flex: none;
  justify-content: space-around;
  align-items: center;
  min-width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.brands-shade-left-block {
  background-image: linear-gradient(90deg, var(--colors--white), var(--colors--white) 50%, var(--colors--transparent));
  pointer-events: none;
  width: 200px;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.brands-shade-right-block {
  background-image: linear-gradient(90deg, var(--colors--transparent), var(--colors--white) 50%, var(--colors--white) 100%, white);
  pointer-events: none;
  width: 200px;
  height: 100%;
  position: absolute;
  inset: 0% -1% 0% auto;
}

.testimonial-author-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonial-author-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.testimonial-author-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.testimonial-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 644px;
  padding: 48px;
  display: flex;
}

.footer {
  padding-top: var(--section-padding--desktop);
  padding-bottom: 40px;
}

.page-wrapper {
  /* overflow-x:clip instead of overflow:hidden - it still clips the decorative
     hero/CTA images that stick out horizontally, but unlike hidden it does NOT
     create a scroll container, so position:sticky descendants keep working. */
  overflow-x: clip;
}

.hero-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
  background-image: url("../images/journeywithai_65.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  position: relative;
}

.hero-content-block {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.hero-title {
  color: var(--colors--black-01);
  font-size: var(--font-size--h1-large-desktop);
  line-height: var(--line-height--h1);
  text-align: center;
  letter-spacing: -2px;
  font-weight: 700;
}

.colored-text {
  color: var(--colors--primary);
  letter-spacing: -1px;
  font-family: DM Serif Text, sans-serif;
  font-style: italic;
  font-weight: 400;
}

.hero-title-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: column;
  max-width: 830px;
  display: flex;
}

.hero-button-wrap {
  margin-top: 48px;
}

.featured-course-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
  background-color: var(--colors--bg-color);
  border-radius: 5px;
}

.course-content-block {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}

.courses-collection-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 10px;
  padding-bottom: 10px;
  display: grid;
}

.courses-content-block {
  z-index: 55;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
  position: relative;
}

.courses-wrapper {
  grid-column-gap: 38px;
  grid-row-gap: 38px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.course-card-head-block {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}

.course-thumbnail {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.button-hover-bg {
  background-color: #011813;
  position: absolute;
  inset: auto 0% 0%;
}

.tabs {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
}

.button {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--colors--primary);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 4px 4px 4px 30px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.button:where(.w-variant-9315d7ab-6334-b4c6-977c-5c9c7f47a2c4) {
  font-size: var(--font-size--button-sm);
  line-height: var(--line-height--button-sm);
  padding: 14px 30px;
}

.button:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  border: 1px solid var(--colors--black-10);
  background-color: var(--colors--transparent);
  color: var(--colors--black-01);
  font-size: var(--font-size--button-sm);
  line-height: var(--line-height--button-sm);
  padding: 14px 30px;
  transition: all .3s;
}

.button:where(.w-variant-853fae60-1f7c-18fd-5be3-ec74c839114a) {
  padding: 14px 30px;
  font-family: Hanken Grotesk, sans-serif;
  line-height: 110%;
}

.button:hover {
  background-color: var(--colors--black-01);
}

.button:hover:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  background-color: var(--colors--primary);
  color: var(--colors--white);
}

.text-dark {
  color: var(--colors--black-01);
  text-decoration: none;
}

.duration-widget {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-md {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
}

.course-tab-link {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border: 1px solid var(--colors--black-09);
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--text-sm);
  background-color: #0000;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 14px 24px;
  font-weight: 700;
  line-height: 124%;
  display: inline-flex;
}

.course-tab-link:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  font-family: Hanken Grotesk, sans-serif;
}

.course-tab-link:hover {
  border-color: var(--colors--primary);
}

.course-tab-link.w--current {
  background-color: var(--colors--primary);
  color: var(--colors--white);
}

.duration-widget-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.courses-card {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--colors--white);
  color: var(--colors--black-03);
  border-radius: 5px;
  flex-flow: column;
  padding: 24px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 4px 20px #1515150f;
}

.courses-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
  background-color: var(--colors--bg-color);
}

.button-arrow-block {
  z-index: 3;
  background-color: #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
  overflow: hidden;
}

.card-badge {
  background-color: var(--colors--white);
  color: var(--colors--black-03);
  border-radius: 5px;
  padding: 8px 12px;
  position: absolute;
  inset: 20px 20px auto auto;
}

.course-card-price-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  display: flex;
}

.course-card-info {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.course-card-image-wrap {
  border-radius: 5px;
  width: 100%;
  max-width: 432px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.tabs-menu {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 38px;
  display: flex;
}

.button-text {
  z-index: 3;
  position: relative;
}

.section-title-block {
  color: var(--colors--black-01);
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.rating-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.rating-text {
  font-size: 16px;
  line-height: 110%;
}

.tab-pane {
  padding-top: var(--section-padding--desktop);
}

.testimonial-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--mobile-l);
}

.testimonial-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.testimonial-heading-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  max-width: 590px;
  display: flex;
}

.testimonial-card-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.testimonial-author-image-wrap {
  background-color: var(--colors--black-10);
  border-radius: 5px;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.testimonial-heading-block-wrap {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.testimonial-heading-block-wrap:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  overflow: hidden;
}

.cta-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.cta-section:where(.w-variant-29e41092-a5a4-07e9-2215-668b345f6f6e) {
  display: none;
}

.cta-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--colors--bg-color);
  background-image: url("../images/journeywithai_65.webp");
  background-position: 50%;
  background-size: cover;
  border-radius: 5px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta-heading-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 564px;
  display: flex;
}

.cta-image-01 {
  position: absolute;
  inset: auto auto 0% 0%;
}

.cta-image-02 {
  position: absolute;
  inset: 0% 0% auto auto;
}

.learning-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.badge-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.state-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
  background-color: #f9f9f9;
}

.learning-content-top-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.learning-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.learning-content-block:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  overflow: hidden;
}

.mission-vission-content-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: #151515;
  flex-flow: column;
  padding-right: 65px;
  display: flex;
}

.mission-vission-content-wrap:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
  padding-right: 0;
}

.values-widget-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.mission-vission-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
}

.mission-vission-section:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  background-color: var(--colors--bg-color);
}

.counter-widgets-wrapper {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
}

.mission-heading-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 568px;
  display: flex;
}

.mission-vission-image {
  object-fit: cover;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

.learning-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.counter-number-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.badge {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
  color: var(--colors--black-03);
  vertical-align: baseline;
  background-color: #fff;
  border-radius: 5px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 8px 16px;
}

.badge:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  display: none;
}

.values-widget-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: grid;
}

.learning-image-wrap {
  width: 100%;
  max-width: 645px;
}

.values-section {
  background-color: #f9f9f9;
  padding-top: 100px;
  padding-bottom: 100px;
}

.mission-vission {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: flex-start;
  display: flex;
}

.mission-vission:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
  flex-flow: column;
  max-width: 300px;
}

.counter-icon-wrap {
  width: 100%;
  max-width: 72px;
}

.mission-vission-content-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.mission-vission-content-wrapper:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  flex-flow: row;
}

.mission-vission-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 648px;
  display: flex;
}

.mission-vission-image-wrap {
  border-radius: 5px;
  width: 100%;
  max-width: 573px;
}

.mission-vission-image-wrap:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  overflow: hidden;
}

.banner-content-block {
  z-index: 55;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: var(--colors--black-01);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 888px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.banner-description-wrap {
  color: var(--colors--black-03);
  max-width: 748px;
}

.counter-widget {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  max-width: 374px;
  display: flex;
}

.mission-vission-icon-wrap {
  flex: none;
  width: 32px;
  height: 32px;
}

.mission-vission-icon-wrap:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
  width: 56px;
  height: 56px;
}

.values-widget {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
}

.values-widget:hover {
  box-shadow: inset 0 0 0 1px #3665fb33;
}

.banner-section {
  background-color: #f9f9f9;
  padding-top: 80px;
  padding-bottom: 80px;
}

.learning-content-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 594px;
  display: flex;
}

.mission-vission-divider {
  background-color: #e8e8e8;
  height: 1px;
}

.mission-vission-divider:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  display: none;
}

.values-widget-icon-wrap {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  padding: 20px;
  display: flex;
}

.feature-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
}

.feature-content-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  display: flex;
}

.feature-card {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  background-color: var(--colors--bg-color);
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
  border-radius: 5px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  padding: 32px;
  display: flex;
}

.feature-title-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #151515;
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.feature-title-wrap:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  color: var(--colors--black-01);
}

.feature-icon {
  width: 40px;
  height: 40px;
}

.feature-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.feature-image-wrap {
  border-radius: 5px;
  height: 100%;
  overflow: hidden;
}

.feature-item-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.feature-big-card {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--colors--bg-color);
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
  border-radius: 5px;
  flex-flow: column;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.feature-big-card-body {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  padding: 32px;
  display: flex;
}

.feature-big-card-title-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.feature-big-card-title-wrap:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  color: var(--colors--black-01);
}

.faq-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: 60px;
}

.faq-wrapper {
  flex-flow: column;
  display: flex;
}

.accordion-details-wrap {
  margin-bottom: 24px;
  overflow: hidden;
}

.line-2 {
  background-color: var(--colors--primary);
  border-radius: 5px;
  min-width: 16px;
  min-height: 1.5px;
  position: absolute;
  transform: rotate(90deg);
}

.faq-icon {
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  position: relative;
}

.faq-question {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--colors--black-01);
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 16px;
  line-height: 1.3;
  display: flex;
}

.line-1 {
  background-color: var(--colors--primary);
  border-radius: 5px;
  min-width: 16px;
  min-height: 1.5px;
}

.faq-buttom-text-wrap {
  text-align: center;
  align-self: center;
}

.faq-content-layout {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  flex-flow: column;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.faq-wrap {
  box-shadow: 0 1px 0 0 var(--colors--black-10);
  cursor: pointer;
}

.link {
  color: var(--colors--primary);
  text-decoration: none;
}

.all-courses-tabs {
  flex-flow: column;
  display: flex;
}

.all-courses-tabs-menu {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 888px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 24px;
  padding-bottom: 100px;
  display: flex;
}

.blog-section {
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
}

.blog-tabs {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
}

.blog-content-block {
  z-index: 55;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
  position: relative;
}

.blog-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
}

.blog-image-wrap {
  border-radius: 5px;
  width: 100%;
  max-width: 432px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.blog-widget {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-radius: 5px;
  flex-flow: column;
  padding: 24px;
  display: flex;
  box-shadow: 0 4px 20px #1515150f;
}
.blog-widget-body {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.blog-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.hero-rating-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.hero-rating-text {
  color: #8a8a8a;
  font-size: 16px;
  line-height: 110%;
}

.blog-tabs-menu {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.blog-widget-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.all-courses-section {
  padding-top: 80px;
  padding-bottom: var(--section-padding--desktop);
  position: relative;
}

.eye-icons-wrap {
  position: absolute;
  top: 18%;
  bottom: auto;
  right: 4%;
}

.link-checkbox {
  color: var(--colors--primary);
  text-decoration: none;
}

.login-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.facebook-logo {
  width: 30px;
  height: 30px;
}

.input-field-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.log-in-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.facebook-login-wrap {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}

/*
  A form's answer, next to the form.

  The template puts both message blocks after the form, so a failed sign-in
  printed its reason at the very bottom of the card - under the Sign up link,
  past the button you would press again. Ordering them first puts the message
  where the eye already is.

  And it reads as a form error rather than as a system failure: the site's own
  error red at the size the rest of the form is set in, not white-on-red at
  20px, which was louder than the heading above it.
*/
.jwai-form {
  flex-direction: column;
  display: flex;
}

.error-message,
.success-message {
  order: -1;
}

.error-message {
  color: #d92d20;
  text-align: left;
  background-color: #d92d200f;
  border: 1px solid #d92d2033;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.success-message {
  color: #384855;
  background-color: #f4f4f6;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}

/* The way out when the password is the thing you have forgotten. Above the
   button, under the field it is about, and on the left where the labels start. */
.jwai-forgot-row {
  justify-content: flex-start;
  margin-top: -8px;
  display: flex;
}

/* Which account the new password is for. Shown once the link checks out, so
   somebody with two addresses is not guessing. */
.jwai-reset-for {
  margin: 0 0 4px;
}

.jwai-reset-for[hidden] {
  display: none;
}

.password-wrap {
  width: 100%;
  position: relative;
}

.input-field {
  color: var(--colors--black-01);
  border: 1px solid #cdd1d4;
  border-radius: 5px;
  width: 100%;
  height: 56px;
  margin-bottom: 0;
  padding: 20px 20px 20px 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75em;
}

.input-field:focus {
  border-color: var(--colors--primary);
}

.input-field::placeholder {
  color: var(--colors--black-03);
}

.google-login-wrap {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.google-logo {
  width: 30px;
  height: 30px;
}

.link-block {
  border: 1px solid #cdd1d4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 15px;
  text-decoration: none;
  display: flex;
}

.login-text {
  color: #384855;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75em;
}

.login-layout {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.login-diviver {
  background-color: #cdd1d4;
  width: 264px;
  height: 1px;
}

.login-divider-wrapper {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  align-items: center;
  display: flex;
}

.login-form-block-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: var(--colors--black-01);
  flex-flow: column;
  width: 100%;
  max-width: 466px;
  display: flex;
}

.login-button-wrap {
  flex-flow: column;
  display: flex;
}

.login-logo {
  max-height: 158.93px;
}

.login-form-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 50vw;
  padding: 40px 60px;
  display: flex;
}

.login-button {
  z-index: 5;
  background-color: var(--colors--primary);
  color: #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1em;
  transition: background-color .3s;
  display: flex;
  position: relative;
}

.login-button:hover {
  background-color: var(--colors--black-01);
}

.login-image-wrap {
  align-self: stretch;
  width: 100%;
  max-width: 50vw;
  min-height: 100vh;
  display: block;
  overflow: hidden;
}

.italic-text {
  font-style: italic;
}

.form-field-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.form-fields-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  display: flex;
}

.contact-section {
  padding-top: 80px;
  padding-bottom: 60px;
}

.form-button-block {
  margin-top: 36px;
  transition: background-color .3s;
}

.contact-us-info-block {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  max-width: 519px;
  display: flex;
}

.contact-form-desription {
  margin-bottom: 32px;
}

.submit-button {
  background-color: var(--colors--primary);
  color: #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 20px 34px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7em;
  display: flex;
}

.form-fields-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.contact-us-form-block {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  max-width: 648px;
  padding: 48px;
  overflow: hidden;
}

.contact-layout {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.input-field-wrap {
  width: 100%;
  position: relative;
}

.input-field-icon-wrap {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  inset: 18px auto auto 20px;
}

.text-area {
  color: var(--colors--black-01);
  border: 1px solid #cdd1d4;
  border-radius: 5px;
  width: 100%;
  height: 56px;
  margin-bottom: 0;
  padding: 18px 20px 18px 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75em;
}

.text-area:focus {
  border-color: var(--colors--primary);
}

.text-area::placeholder {
  color: var(--colors--black-03);
}

.contact-heading-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.contact-us-link-block {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: column;
  display: flex;
}

.contact-link {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--colors--black-03);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.contact-link-text-wrap {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}

.divider {
  background-color: var(--colors--black-10);
  width: 100%;
  height: 1px;
}

.utility-content-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--colors--black-01);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 597px;
  display: flex;
}

.utility-page-wrap {
  background-image: url("../images/journeywithai_65.webp");
  background-position: 50%;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vh;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.utility-content-block-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.utility-button-wrap {
  margin-left: auto;
  margin-right: auto;
}

.testimonial-card-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
}

.testimonial-section-02 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-image-01 {
  width: 12%;
  max-width: 249px;
  position: absolute;
  inset: 26% auto auto 0%;
}

.hero-image-02 {
  width: 12%;
  max-width: 238px;
  position: absolute;
  inset: 42% 0% auto auto;
}

.course-price {
  color: var(--colors--black-01);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.rating-text-wrap {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: var(--colors--black-01);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.course-mentor {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--colors--black-03);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.course-details-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: 60px;
}

.course-details-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.course-details-left-col {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  width: 100%;
  max-width: 784px;
  display: flex;
}

.course-details-right-col {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  width: 100%;
  max-width: 424px;
  display: flex;
}

.course-detials-image-wrap {
  border-radius: 5px;
  width: 100%;
  overflow: hidden;
}

.course-image {
  width: 100%;
}

.mentor-image-wrap {
  border-radius: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #4d4d4d;
}

.course-mentor-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--colors--black-03);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.course-info-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: var(--colors--black-01);
  flex-flow: column;
  display: flex;
}

.course-rating-details {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.course-content-table {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.course-content-accordion-block {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  padding: 32px;
  overflow: hidden;
}

.course-accordion-wrap {
  box-shadow: 0 1px 0 0 var(--colors--black-09);
  cursor: pointer;
}

.course-accoridion-title {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--colors--black-01);
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 32px;
  line-height: 1.3;
  display: flex;
}

.accordion-icon {
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  display: flex;
}

.accordion-details {
  margin-bottom: 24px;
}

.price-wrap {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--colors--black-01);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.price-text {
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: var(--font-size--h6-desktop);
  line-height: var(--line-height--h6);
  letter-spacing: -.3px;
  padding-bottom: 8px;
  font-weight: 700;
}

.course-details {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.course-details-point-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.course-details-point-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.course-requirment-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.course-requirement-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

.course-requirement-title {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--colors--black-01);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.related-course-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: 60px;
}

.mentor-details-section {
  padding-top: var(--font-size--h1-tablet);
  padding-bottom: var(--section-padding--desktop);
}

.mentor-details-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.mentor-details-left-col {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--colors--balck-11);
  border-radius: 5px;
  flex-flow: column;
  width: 100%;
  max-width: 358px;
  padding: 24px 24px 36px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.mentor-details-right-col {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  width: 100%;
  max-width: 872px;
  display: flex;
}

.mentor-details-image-wrap {
  border-radius: 5px;
  width: 100%;
  max-width: 310px;
  height: 320px;
  overflow: hidden;
}

.mentor-info-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mentor-social-link-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mentor-about-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.mentor-about-title-wrap {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--colors--black-01);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.mentor-about-point {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.mentor-about-block-wrap {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}

.mentor-related-course-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.mentor-related-course-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.mentor-related-course-title {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.mentor-image, .blog-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.blog-title {
  color: var(--colors--black-01);
  text-decoration: none;
}

.blog-details-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.blog-details-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  width: 100%;
  max-width: 872px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.blog-details-image-warp {
  width: 100%;
  max-width: 872px;
  overflow: hidden;
}

.blog-details-rich-content {
  padding-left: 30px;
  padding-right: 30px;
}

.blog-details-rich-content h5 {
  color: var(--colors--black-01);
  margin-top: 0;
  margin-bottom: 20px;
}

.blog-details-rich-content ul {
  padding-left: 20px;
}

.nav-button-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}

.nav-content-block {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.empty-state {
  background-color: var(--colors--black-10);
  color: var(--colors--black-01);
  border-radius: 5px;
  padding: 16px 24px;
}

.nav-dropdown-link {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--colors--black-03);
  justify-content: flex-start;
  align-items: center;
  margin-right: 0;
  padding: 34px 0;
  display: flex;
}

.nav-dropdown-link:hover {
  color: var(--colors--primary);
}

.license-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.licence-text-block-wrap {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-flow: column;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.license-text-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.version-text-content {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.changelog-content-layout {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.version-content-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--colors--primary);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  color: #fff;
  text-align: center;
  flex-flow: column;
  width: 100%;
  max-width: 602px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  display: flex;
}

.release-date-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.changelog-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.release-date-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copyright-link-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copyright-link {
  color: var(--colors--primary);
  font-size: 16px;
  line-height: 1.5em;
  text-decoration: none;
  transition: color .4s;
}

.copyright-link:hover {
  color: var(--colors--primary);
}

.faq-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.faq-heading-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  max-width: 454px;
  display: flex;
}

.text-link {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--colors--primary);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
}

.process-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
}

.process-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.process-heading-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: center;
  flex-flow: column;
  width: 100%;
  max-width: 640px;
  display: flex;
  overflow: hidden;
}

.process-card-wrapper {
  grid-column-gap: 90px;
  grid-row-gap: 90px;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.process-card {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 380px;
  padding: 32px 12px;
  display: flex;
}

.process-card-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  max-width: 356px;
  display: flex;
}

.process-card-icon-wrap {
  z-index: 55;
  background-color: var(--colors--white);
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  display: flex;
  position: relative;
}

.process-particle-01 {
  width: 20.9566%;
  max-width: 248px;
  position: absolute;
  top: 50px;
  left: 22%;
}

.process-particle-02 {
  width: 20.9566%;
  max-width: 248px;
  position: absolute;
  inset: 70px 21% auto auto;
}

.terms-condition-section, .utility-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: 60px;
}

@media screen and (max-width: 991px) {
  .terms-condition-section, .utility-section {
    padding-top: var(--section-padding--tab);
  }
}

.utility-layout {
  max-width: 812px;
  margin-left: auto;
  margin-right: auto;
}

.utility-rich-content h5 {
  color: var(--colors--black-01);
  margin-bottom: 20px;
}

.utility-rich-content h2 {
  color: var(--colors--black-01);
  font-size: var(--font-size--h5-desktop);
  line-height: var(--line-height--h5);
  margin-bottom: 20px;
}

.text-xs {
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 100%;
}

.text-xs:where(.w-variant-5e23f941-15e1-6895-0f88-e82619522ebf) {
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
}

.course-title {
  color: var(--colors--black-01);
  text-decoration: none;
}

.mission-content-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: row;
  display: flex;
}

.mission-content-wrapper:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  flex-flow: row;
}

.mission-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
  background-color: var(--colors--bg-color);
}

.mission-section:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  background-color: var(--colors--bg-color);
}

.mission-content-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mission-content-block:where(.w-variant-52cd067a-7a9d-56fd-318f-c85cb930afc5) {
  overflow: hidden;
}

.testimonial-icon {
  width: 100%;
  max-width: 152px;
}

/* The social links sat 80px below the description, far enough that they read
   as a separate block rather than as part of it. They take the same gap the
   logo and the description already use, so the column is one stack. */
.footer-logo-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  max-width: 314px;
  display: flex;
}

.footer-content-wrap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.password-input-field {
  color: var(--colors--black-03);
  border: 1px solid #cdd1d4;
  border-radius: 5px;
  width: 100%;
  height: 56px;
  margin-bottom: 0;
  padding: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75em;
}

.password-input-field:focus {
  border-color: var(--colors--primary);
}

.password-input-field::placeholder {
  color: var(--colors--black-03);
}

.dropdown-link-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-items: start;
  display: grid;
}

.course-review-block, .review-card-block {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}

.review-author-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.review-author-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

.review-author-image-wrap {
  background-color: var(--colors--black-10);
  border-radius: 5px;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.review-author-image {
  width: 100%;
  height: 100%;
}

.review-icon {
  width: 100%;
  max-width: 152px;
}

.review-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--colors--black-10);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 48px;
  display: flex;
}

.review-card-top {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.review-title-wrap {
  border-bottom: 1px solid var(--colors--black-10);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  display: flex;
}

.next {
  background-color: var(--colors--primary);
  color: var(--colors--white);
  font-size: var(--font-size--text-default);
  line-height: var(--line-height--text-default);
  border-radius: 5px;
  margin-left: 0;
  margin-right: 0;
  padding: 12px 16px;
}

.pagination {
  margin-top: 80px;
}

.previous {
  background-color: var(--colors--primary);
  color: var(--colors--white);
  font-size: var(--font-size--text-default);
  line-height: var(--line-height--text-default);
  border-radius: 5px;
  margin-left: 0;
  margin-right: 0;
  padding: 12px 16px;
}

.sg-paragraph-wrap {
  color: #2b2b2b;
  max-width: 867px;
  margin-bottom: 40px;
}

.sg-color-widget-body {
  margin-top: 12px;
}

.sg-button-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-top: 40px;
  display: grid;
}

.sg-button-wrap {
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.sg-title-wrap {
  color: #1b1b1b;
  margin-bottom: 20px;
}

.pages-wrapper {
  overflow: hidden;
}

.sg-headline-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  max-width: 760px;
  margin-bottom: 80px;
}

.sg-color-widget-wrap {
  width: 100%;
  font-weight: 500;
}

.sg-main-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.sg-typography-title {
  max-width: 250px;
}

.sg-color-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 48px;
  display: flex;
}

.sg-color-widget-thumbnail {
  border-radius: 5px;
  width: 100%;
  height: 105px;
}

.sg-color-widget-thumbnail.primary {
  background-color: var(--colors--primary);
  border-radius: 5px;
}

.sg-color-widget-thumbnail.blck-10 {
  background-color: var(--colors--black-10);
}

.sg-color-widget-thumbnail.black-09 {
  background-color: var(--colors--black-09);
}

.sg-color-widget-thumbnail.black-03 {
  background-color: var(--colors--black-03);
}

.sg-color-widget-thumbnail.black-02 {
  background-color: var(--colors--black-02);
}

.sg-color-widget-thumbnail.black-01 {
  background-color: var(--colors--black-01);
}

.sg-color-widget-thumbnail.bg {
  background-color: var(--colors--bg-color);
}

.sg-color-widget-thumbnail.white {
  background-color: var(--colors--white);
  box-shadow: 0 2px 5px #0003;
}

.sg-typography-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 40px;
  display: flex;
}

.sg-color-widget-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  display: grid;
}

.sg-heading-wrap {
  color: #1b1b1b;
  margin-bottom: 40px;
}

.banner-block {
  z-index: 55;
  position: relative;
}

.courses-button-wrap {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.counter-icon {
  width: 100%;
}

.faq-title {
  color: var(--colors--black-01);
  max-width: 350px;
  text-decoration: none;
}

.sign-up-link {
  color: var(--colors--primary);
  text-decoration: none;
}

.banner-bg {
  background-color: var(--colors--bg-color);
  height: 440px;
  position: absolute;
  inset: 0%;
}

.blog-banner-bg {
  background-color: var(--colors--bg-color);
  height: 390px;
  position: absolute;
  inset: 0%;
}

.course-card-button {
  border: 1px solid var(--colors--black-10);
  color: var(--colors--black-03);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 13px;
  text-decoration: none;
  display: flex;
}

.utility-description-wrap {
  max-width: 520px;
}

.pagination-button-icon {
  filter: invert();
}

.counter-up {
  color: var(--colors--black-01);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 56px;
  display: flex;
  overflow: hidden;
}

.counter-down {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 56px;
  display: flex;
  overflow: hidden;
}

.counter-block {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: #dab254;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.counter {
  color: #dab254;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.counter-number-up {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
}

.counter-number-down, .counter-text {
  color: var(--colors--black-01);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
}

.nav-dropdown-icon-wrap {
  width: 20px;
  height: 23px;
  position: relative;
  overflow: hidden;
}

.nav-dropdown-icon {
  width: 20px;
  height: 23px;
  display: block;
}

.nav-dropdown-hover-icon {
  width: 20px;
  height: 23px;
  position: absolute;
  inset: 0%;
}

.nav-dropdown-toggle {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--colors--black-03);
  justify-content: flex-start;
  align-items: center;
  margin-right: 0;
  padding: 34px 0;
  display: flex;
}

.sg-content-block {
  max-width: 1096px;
  margin-left: auto;
  margin-right: auto;
}

.mentor-details-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 0;
}

@media screen and (max-width: 991px) {
  .footer {
    padding-top: var(--section-padding--tab);
  }

  h1 {
    font-size: var(--font-size--h1-tablet);
  }

  h2 {
    font-size: var(--font-size--h2-tablet);
  }

  h3 {
    font-size: var(--font-size--h3-tablet);
  }

  h4 {
    font-size: var(--font-size--h4-tablet);
  }

  h5 {
    font-size: var(--font-size--h5-tablet);
    line-height: var(--line-height--h5\<deleted\|variable-301a2b20-4342-b90d-3248-f31bdb0eb8b3\>);
  }

  h6 {
    font-size: var(--font-size--h6-tablet);
  }

  .container {
    max-width: 720px;
  }

  .h1 {
    font-size: var(--font-size--h1-tablet);
  }

  .h2 {
    font-size: var(--font-size--h2-tablet);
  }

  .h3 {
    font-size: var(--font-size--h3-tablet);
  }

  .h4 {
    font-size: var(--font-size--h4-tablet);
  }

  .h5 {
    font-size: var(--font-size--h5-tablet);
  }

  .h6 {
    font-size: var(--font-size--h6-tablet);
  }

  .nav-menu {
    background-color: var(--colors--white);
    opacity: 1;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 20px #1515150f;
  }

  .nav-link {
    color: var(--colors--black-01);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .dropdown-link {
    margin-left: 10px;
  }

  .header-section {
    z-index: 2147483647;
  }

  .navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .menu-button {
    border: 1px solid var(--colors--black-10);
    border-radius: 5px;
    padding: 0;
  }

  .menu-button.w--open {
    background-color: var(--colors--transparent);
    border-radius: 5px;
    box-shadow: 0 0 5px #3665fb4d;
  }

  .nav-dropdown {
    display: block;
  }

  .dropdown-list {
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
    background-color: #01050966;
    overflow: hidden;
  }

  .dropdown-list.w--open {
    padding: 0;
    left: auto;
  }

  .footer-content-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .copyright-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
  }

  .brand-logo {
    margin-left: 20px;
    margin-right: 20px;
  }

  .brands-section {
    padding-top: 0;
    padding-bottom: 80px;
  }

  .sub-heading-wrap {
    text-align: center;
  }

  .brands-logo-block {
    min-width: 150%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .testimonial-card {
    max-width: none;
    padding: 45px 45px 56px;
  }

  .hero-section {
    z-index: 1;
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .hero-title {
    font-size: var(--font-size--h1-tablet);
  }

  .hero-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: 630px;
  }

  .hero-button-wrap {
    margin-top: 30px;
  }

  .featured-course-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .course-content-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .courses-collection-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .courses-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .course-card-image-wrap {
    height: 280px;
  }

  .tab-pane {
    padding-top: var(--section-padding--tab);
  }

  .testimonial-section {
    padding-top: var(--section-padding--tab);
  }

  .testimonial-card-block {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .testimonial-heading-block-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cta-content-block {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cta-image-01 {
    pointer-events: none;
    width: 260px;
  }

  .cta-image-02 {
    pointer-events: none;
    width: 190px;
  }

  .learning-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .state-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .learning-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .mission-vission-content-wrap {
    padding-right: 0;
  }

  .mission-vission-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .counter-widgets-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .mission-vission-image {
    object-position: 50% 16%;
  }

  .counter-number-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .values-widget-wrapper {
    grid-row-gap: 32px;
    grid-template-columns: 1fr 1fr;
  }

  .learning-image-wrap {
    width: 100%;
    max-width: none;
    height: 400px;
  }

  .values-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .mission-vission-block {
    max-width: 100%;
  }

  .mission-vission-image-wrap {
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    max-width: 100%;
    height: 500px;
  }

  .banner-description-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .counter-widget {
    max-width: 100%;
  }

  .values-widget {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 0;
  }

  .banner-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .learning-content-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: none;
  }

  .feature-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .feature-content-block {
    flex-flow: column;
  }

  .feature-card {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .feature-image-wrap {
    height: 400px;
  }

  .feature-big-card {
    justify-content: flex-start;
    align-items: center;
  }

  .faq-section {
    padding-top: var(--section-padding--tab);
  }

  .accordion-details-wrap {
    margin-top: -16px;
    margin-bottom: 8px;
  }

  .faq-content-layout {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .all-courses-tabs-menu {
    padding-bottom: 40px;
  }

  .blog-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .blog-image-wrap {
    height: 280px;
  }

  .blog-tabs-menu {
    padding-bottom: 80px;
  }

  .blog-widget-wrapper {
    grid-template-columns: 1fr 1fr;
    place-items: center;
  }

  .all-courses-section {
    padding-bottom: 0;
  }

  .login-image {
    object-fit: cover;
    object-position: 50% 29%;
    width: 100%;
  }

  .login-layout {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    align-items: center;
  }

  .login-form-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    max-width: 100vw;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .login-button {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* min-height has to go with it. The wrap is min-height: 100vh above, for the
     column beside the form on a desktop; a min-height beats a height, so the
     50vh here never took effect and the photo kept a whole screen to itself -
     which on a phone put the email field 1097px down, a full swipe below a
     picture, before anyone could sign in. */
  .login-image-wrap {
    width: 100%;
    max-width: 100vw;
    height: 50vh;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .login-section {
    background-image: none;
  }

  .contact-section {
    padding-top: 80px;
  }

  .form-button-block {
    margin-top: 32px;
  }

  .contact-us-info-block {
    max-width: none;
  }

  .submit-button {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .submit-button:hover {
    background-color: var(--colors--black-01);
  }

  .contact-us-form-block {
    max-width: 100%;
    padding: 32px;
  }

  .contact-layout {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
  }

  .utility-page-wrap {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .testimonial-card-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    grid-template-columns: 1fr;
    justify-content: space-between;
    align-items: flex-start;
  }

  .testimonial-section-02 {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .course-details-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: 0;
  }

  .course-details-content-block {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
  }

  .course-details-left-col {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .course-details-right-col {
    max-width: none;
  }

  .course-info-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .course-content-accordion-block {
    flex-flow: column;
    display: flex;
  }

  .course-accoridion-title {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .related-course-section {
    padding-top: var(--section-padding--tab);
  }

  .mentor-details-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: 0;
  }

  .mentor-details-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .mentor-details-left-col {
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .mentor-details-right-col {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .mentor-about-point {
    flex-flow: wrap;
  }

  .mentor-about-block-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .mentor-related-course-wrap {
    grid-template-columns: 1fr 1fr;
    place-items: center;
  }

  .blog-details-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .blog-details-rich-content h5 {
    line-height: var(--line-height--h5);
  }

  .nav-button-wrap.desktop-only {
    display: none;
  }

  .nav-content-block {
    justify-content: space-between;
    width: 100%;
  }

  .nav-dropdown-link {
    color: var(--colors--black-01);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .license-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .licence-text-block-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .changelog-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .copyright-link-block {
    order: -1;
  }

  .faq-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .process-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .process-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .process-card-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .process-card-wrapper:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
    grid-template-columns: 1fr;
  }

  .process-card {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: 450px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .process-particle-01, .process-particle-02 {
    display: none;
  }

  .utility-rich-content h2 {
    font-size: var(--font-size--h5-tablet);
  }

  .mission-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  .mission-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .dropdown-link-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .review-card {
    max-width: none;
  }

  .pagination {
    margin-top: 60px;
  }

  .sg-button-block {
    margin-top: 30px;
  }

  .sg-button-wrapper {
    margin-top: 20px;
  }

  .sg-button-wrap {
    justify-content: center;
    align-items: center;
  }

  .sg-main-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .sg-color-block, .sg-typography-block {
    margin-bottom: 80px;
  }

  .banner-bg, .blog-banner-bg {
    height: 410px;
  }

  .course-card-button {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }

  .hamburger-line-top {
    background-color: var(--colors--primary);
    border-radius: 5px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .hamburger-line-middle {
    background-color: var(--colors--primary);
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .hamburger-line-bottom {
    background-color: var(--colors--primary);
    border-radius: 5px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .nav-dropdown-toggle {
    color: var(--colors--black-01);
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media screen and (max-width: 767px) {
  .terms-condition-section, .utility-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  h1 {
    font-size: var(--font-size--h1-mobile);
  }

  h2 {
    font-size: var(--font-size--h2-mobile);
  }

  h3 {
    font-size: var(--font-size--h3-mobile);
  }

  h4 {
    font-size: var(--font-size--h4-mobile);
  }

  h5 {
    font-size: var(--font-size--h5-tablet);
  }

  h6 {
    font-size: var(--font-size--h6-mobile);
    line-height: var(--line-height--h6\<deleted\|variable-72e1955c-eafc-4797-fe4d-99f4ebfca0a9\>);
  }

  .container {
    max-width: 540px;
  }

  .h1 {
    font-size: var(--font-size--h1-mobile);
  }

  .h2 {
    font-size: var(--font-size--h2-mobile);
  }

  .h3 {
    font-size: var(--font-size--h3-mobile);
  }

  .h4 {
    font-size: var(--font-size--h4-mobile);
  }

  .h5 {
    font-size: var(--font-size--h5-mobile);
  }

  .h6 {
    font-size: var(--font-size--h6-mobile);
  }

  .text-lg {
    font-size: var(--font-size--text-default);
  }

  .footer-content-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .footer-links-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .copyright-block {
    padding-top: 30px;
  }

  .footer-links-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .footer-content-layout-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .brand-logo {
    max-width: 10%;
  }

  .brands-section {
    padding-bottom: 60px;
  }

  .brands-logo-block {
    min-width: 100%;
  }

  .brands-shade-left-block, .brands-shade-right-block {
    display: none;
  }

  .testimonial-author-info {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .testimonial-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    min-width: 450px;
    max-width: none;
    padding: 24px;
  }

  .footer {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: 30px;
  }

  .hero-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .hero-title {
    font-size: var(--font-size--h1-mobile);
  }

  .hero-title-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    max-width: 430px;
  }

  .hero-button-wrap {
    margin-top: 16px;
  }

  .featured-course-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .course-content-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .courses-collection-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }

  .courses-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .duration-widget-wrapper {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .courses-card {
    width: 100%;
    padding: 24px;
  }

  .courses-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .course-card-image-wrap {
    max-width: 432svh;
    height: 260px;
  }

  .tabs-menu {
    margin-bottom: 30px;
  }

  .tab-pane {
    padding-top: var(--section-padding--mobile-l);
  }

  .testimonial-section {
    padding-top: var(--section-padding--mobile-l);
  }

  .testimonial-card-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .testimonial-heading-block-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .cta-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .cta-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .cta-heading-block {
    max-width: 400px;
  }

  .cta-image-01 {
    width: 160px;
    display: none;
  }

  .cta-image-02 {
    width: 140px;
    display: none;
  }

  .learning-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .state-section, .mission-vission-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .counter-widgets-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: flex-start;
  }

  .counter-number-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .values-widget-wrapper {
    grid-row-gap: 32px;
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .learning-image-wrap {
    height: 300px;
  }

  .values-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .counter-icon-wrap {
    max-width: 50px;
  }

  .mission-vission-content-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .mission-vission-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .mission-vission-image-wrap {
    height: 300px;
  }

  .banner-content-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .banner-description-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .values-widget {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 0;
  }

  .banner-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .values-widget-icon-wrap {
    width: 60px;
    height: 60px;
    padding: 0;
  }

  .feature-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .feature-card {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 24px;
  }

  .feature-image-wrap {
    height: 300px;
  }

  .feature-item-wrap {
    flex-flow: column;
  }

  .faq-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .accordion-details-wrap {
    margin-bottom: 20px;
  }

  .faq-question {
    padding-top: 30px;
    padding-bottom: 10px;
  }

  .faq-content-layout {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .all-courses-tabs-menu {
    margin-bottom: 100px;
    padding-bottom: 24px;
  }

  .blog-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .blog-image-wrap {
    max-width: none;
    height: 260px;
  }

  .blog-tabs-menu {
    padding-bottom: 40px;
  }

  .blog-widget-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr;
  }

  .all-courses-section {
    padding-top: var(--section-padding--mobile-l);
  }

  .input-field-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .log-in-wrapper {
    justify-content: center;
    align-items: stretch;
  }

  .login-form-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .login-image-wrap {
    height: 40vh;
  }

  .form-fields-wrapper {
    flex-flow: column;
  }

  .contact-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .form-button-block {
    margin-top: 24px;
  }

  .contact-us-info-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .contact-us-form-block {
    padding: 24px;
  }

  .contact-layout {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .contact-us-link-block {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .utility-page-wrap {
    height: 70vh;
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .testimonial-card-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-section-02 {
    padding-top: 40px;
  }

  .hero-image-02 {
    top: 33%;
  }

  .course-details-section {
    padding-top: var(--section-padding--mobile-l);
  }

  .course-content-accordion-block {
    padding: 16px;
  }

  .course-accoridion-title {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .related-course-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .mentor-details-section {
    padding-top: var(--section-padding--mobile-l);
  }

  .mentor-details-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
  }

  .mentor-details-right-col {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .mentor-details-image-wrap {
    max-width: none;
  }

  .mentor-about-block-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .mentor-related-course-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr;
  }

  .blog-details-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .blog-details-rich-content {
    padding-left: 15px;
    padding-right: 15px;
  }

  .blog-details-rich-content h5 {
    font-size: var(--font-size--h5-mobile);
  }

  .license-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .licence-text-block-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .release-date-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
  }

  .changelog-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .faq-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .process-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .process-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
  }

  .process-card-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr;
  }

  .process-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .process-card:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .process-card-icon-wrap {
    width: 60px;
    height: 60px;
  }

  .utility-rich-content h2 {
    font-size: var(--font-size--h5-mobile);
  }

  .mission-content-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .mission-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .mission-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .testimonial-icon {
    max-width: 130px;
  }

  .footer-logo-block, .footer-content-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .dropdown-link-wrap {
    height: 320px;
    overflow: auto;
  }

  .course-review-block, .review-card-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .review-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    min-width: 450px;
    max-width: none;
    padding-bottom: 32px;
  }

  .pagination {
    margin-top: 40px;
  }

  .sg-paragraph-wrap {
    margin-bottom: 16px;
  }

  .sg-button-wrapper {
    flex-flow: wrap;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: flex-start;
  }

  .sg-button-wrap {
    justify-content: center;
    align-items: center;
  }

  .sg-main-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .sg-color-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    margin-bottom: 60px;
  }

  .sg-color-widget-thumbnail {
    height: 85px;
  }

  .sg-typography-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    margin-bottom: 60px;
  }

  .sg-color-widget-wrapper {
    width: 100%;
  }

  .sg-heading-wrap {
    margin-bottom: 30px;
  }

  .all-course-tabs-content {
    top: -100px;
  }

  .faq-title {
    max-width: 280px;
  }

  .banner-bg {
    height: 390px;
  }

  .blog-banner-bg {
    height: 320px;
  }

  .counter-block {
    height: 30px;
    overflow: hidden;
  }

  .counter {
    height: 40px;
    overflow: hidden;
  }

  .counter-number-up, .counter-number-down {
    font-size: 32px;
  }

  .counter-text {
    font-size: 30px;
  }
}

@media screen and (max-width: 479px) {
  .footer {
    padding-top: var(--section-padding--mobile-p);
  }

  .text-lg {
    font-size: var(--font-size--text-default);
  }

  .nav-menu {
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 4px;
    margin-right: 4px;
    box-shadow: 0 2px 5px #0003;
  }

  .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .logo {
    width: 135px;
  }

  .footer-content-wrapper {
    grid-template-columns: 1fr;
  }

  .copyright-block {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .footer-links-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .brands-section {
    padding-bottom: var(--section-padding--mobile-p);
  }

  .testimonial-card {
    min-width: auto;
    max-width: none;
  }

  .hero-section, .featured-course-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .courses-collection-wrapper {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }

  .courses-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .button-arrow-block {
    background-color: var(--colors--white);
  }

  .testimonial-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .cta-heading-block {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cta-image-01 {
    object-fit: cover;
    object-position: 64% 57%;
    height: 171px;
  }

  .cta-image-02 {
    object-fit: cover;
    object-position: 50% 0%;
    height: 130px;
  }

  .learning-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .state-section, .mission-vission-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .values-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .mission-vission {
    flex-flow: column;
  }

  .mission-vission:where(.w-variant-90803c31-e9e7-aab7-724f-1ffb47ff2fe5) {
    max-width: none;
  }

  .values-widget {
    padding-left: 10px;
    padding-right: 10px;
  }

  .banner-section, .feature-section, .faq-section, .related-course-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .tab-pane {
    padding-top: var(--section-padding--mobile-p);
  }

  .accordion-details-wrap {
    margin-top: -6px;
    margin-bottom: 10px;
  }

  .faq-icon {
    min-width: 30px;
    min-height: 30px;
  }

  .faq-question {
    padding-top: 16px;
    padding-bottom: 6px;
  }

  .all-courses-tabs-menu {
    position: static;
  }

  .blog-widget-wrapper {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }

  .all-courses-section {
    padding-top: var(--section-padding--mobile-p);
  }

  .login-layout {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .contact-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .hero-image-01, .hero-image-02 {
    display: none;
  }

  .course-details-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .course-details-left-col {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .course-accoridion-title {
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .accordion-icon {
    min-width: 30px;
    min-height: 30px;
  }

  .accordion-details {
    margin-bottom: 0;
    padding-bottom: 16px;
    font-size: 16px;
  }

  .course-details-point-wrap {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .mentor-details-section {
    padding-top: var(--section-padding--mobile-p);
  }

  .mentor-related-course-wrap {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }

  .blog-details-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .version-content-wrapper {
    padding: 48px;
  }

  .release-date-block {
    flex-flow: column;
  }

  .copyright-link-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .process-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .terms-condition-section, .utility-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .mission-content-wrapper {
    flex-flow: column;
  }

  .mission-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .footer-logo-block {
    max-width: none;
  }

  .password-input-field {
    color: var(--colors--black-01);
  }

  .password-input-field::placeholder {
    color: var(--colors--black-03);
  }

  .dropdown-link-wrap {
    grid-template-columns: 1fr;
  }

  .review-author-block {
    justify-content: flex-start;
    align-items: center;
  }

  .review-author-info {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .review-card {
    min-width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 25px;
  }

  .review-card-top {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .sg-button-wrapper {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: flex-start;
  }

  .pages-wrapper {
    overflow: hidden;
  }

  .sg-color-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    margin-bottom: 30px;
  }

  .sg-typography-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    margin-top: 30px;
  }

  .sg-color-widget-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: flex-start;
    width: 100%;
  }

  .banner-bg {
    height: 475px;
  }

  .blog-banner-bg {
    height: 420px;
  }

  .counter-number-up, .counter-number-down {
    font-size: 32px;
  }
}

@media screen and (max-width: 767px) {
  #w-node-c2ab8dfb-13a6-26d2-83c6-bf3ac950c556-d93ba350 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

/* Fix: this Webflow export's page-load/scroll IX2 interactions don't complete
   reliably outside Webflow's own hosting, leaving elements with the "inl-*"
   class permanently stuck at opacity:0 (set by each page's own inline.css).
   Force them fully visible with no transform so all content actually shows. */
[class*=" inl-"], [class^="inl-"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hide the Webflow hosting badge — not applicable since this is a
   self-hosted static export, not a Webflow-hosted site. */
.w-webflow-badge, #webflow-badge, a[href*="webflow.com/?utm"] {
  display: none !important;
}

/* Header height: the original template relied on the "Pages" dropdown toggle
   (padding: 34px 0) to set the desktop header height, since .nav-link is
   padding:0. That dropdown was removed, so apply the same vertical padding to
   the nav links to preserve the original header height (and give the links a
   proper click target). Desktop only - mobile has its own .navbar padding. */
@media screen and (min-width: 992px) {
  .nav-link {
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* About page: keep the left heading/intro column in view while the taller
   right column (image, FAQ accordions) scrolls past it.
   align-self:flex-start is required - both parents are flex with
   align-items:stretch, which would make the column full height and leave
   sticky no distance to travel. Desktop only: both layouts collapse to a
   single column at <=991px, where sticky has no benefit. */
@media screen and (min-width: 992px) {
  .learning-content-wrapper,
  .faq-heading-block {
    position: sticky;
    top: 120px;
    align-self: flex-start;
  }
}

/* ==========================================================================
   Header: nav alignment + mobile sidebar menu
   ========================================================================== */

/* Desktop: push the nav links to the right so they sit next to the
   Log In / Sign Up buttons instead of floating in the middle. */
@media screen and (min-width: 992px) {
  .nav-menu {
    margin-left: auto;
  }
  .nav-button-wrap {
    margin-left: 48px;
  }
}



/* Users who ask for less motion get the sidebar with no slide. */
@media (prefers-reduced-motion: reduce) {
  .w-nav-overlay .nav-menu {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Brand logo sizing.
   The new wordmark SVG is 963x150 (~6.4:1), much wider than the placeholder it
   replaced, so the old caps made it tiny in the header and oversized in the
   footer (the footer <img> has no class and was previously bounded only by the
   old file's natural width).
   -------------------------------------------------------------------------- */
.brand {
  max-width: 200px;
}
.logo {
  width: 200px;
  height: auto;
}
.footer-logo img {
  width: 200px;
  height: auto;
}

@media screen and (max-width: 991px) {
  .brand { max-width: 170px; }
  .logo  { width: 170px; }
}

@media screen and (max-width: 479px) {
  .brand { max-width: 150px; }
  .logo  { width: 150px; }
  .footer-logo img { width: 170px; }
}

/* Form wrappers were renamed from .w-form to .jwai-form so Webflow's delegated
   `$(document).on("submit", ".w-form form")` handler can no longer match them
   and POST submissions to webflow.com. Carry over the original .w-form spacing. */
.jwai-form {
  margin: 0 0 15px;
}

/* ==========================================================================
   Blog + Skills listing grids
   The category tabs were removed, so each page is one flat grid of cards.
   ========================================================================== */

/* Webflow IX2 writes stalled inline opacity/transform onto these cards outside
   Webflow hosting. js/jwai-catalog.js strips it; this is the no-JS safety net. */
.blog-widget,
.courses-card {
  opacity: 1;
}

.blog-widget-wrapper,
.courses-collection-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 40px;
  padding-top: 0;
}

/* --- load more ---------------------------------------------------------- */
.jwai-hidden {
  display: none !important;
}

.jwai-fade-in {
  animation: jwai-card-in .45s ease both;
}

@keyframes jwai-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.jwai-load-more-wrap {
  justify-content: center;
  margin-top: 56px;
  display: flex;
}

.jwai-load-more {
  grid-column-gap: 10px;
  background-color: var(--colors--primary);
  color: var(--colors--white);
  cursor: pointer;
  border: 1px solid var(--colors--primary);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 15px 40px;
  font-family: Hanken Grotesk, sans-serif;
  font-size: var(--font-size--button-sm);
  font-weight: 700;
  line-height: 124%;
  display: inline-flex;
  transition: background-color .2s ease, color .2s ease;
}
.jwai-load-more:hover {
  background-color: var(--colors--white);
  color: var(--colors--primary);
}
.jwai-load-more:disabled {
  cursor: default;
}

/* spinner: hidden until the button is loading */
.jwai-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  /* the site caps corners at 5px, but a spinner has to be a true circle -
     at 5px the ring reads as a rounded square tumbling rather than spinning */
  border-radius: 50%;
  display: none;
}
.jwai-load-more.is-loading .jwai-spinner {
  display: block;
  animation: jwai-spin .6s linear infinite;
}
.jwai-load-more.is-loading .jwai-load-more-text {
  opacity: .75;
}

@keyframes jwai-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .jwai-fade-in { animation: none; }
  .jwai-load-more.is-loading .jwai-spinner { animation-duration: 1.4s; }
}

@media screen and (max-width: 767px) {
  .blog-widget-wrapper,
  .courses-collection-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 28px;
  }
  .jwai-load-more-wrap { margin-top: 40px; }
}

/* The tab wrapper clipped with overflow:hidden (for Webflow's tab transitions).
   With the tabs removed that clipping only cut the box-shadow off the first and
   last card in each row, making them look flat next to the middle one. */
.w-tab-content {
  overflow: visible;
}

/* Room below the header band so the cards clear it. The band edge itself is
   positioned by js/jwai-catalog.js using the section's own top padding, which
   keeps the band's internal spacing symmetric.
   Scoped to the Blog / Skills listing sections - the home page reuses these
   grids in sections that have no header band, where it just added dead space. */
.blog-section .blog-widget-wrapper,
.all-courses-section .courses-collection-wrapper {
  padding-top: 80px;
}

@media screen and (max-width: 991px) {
  .blog-section .blog-widget-wrapper,
  .all-courses-section .courses-collection-wrapper {
    padding-top: 96px;
  }
}

@media screen and (max-width: 767px) {
  .blog-section .blog-widget-wrapper,
  .all-courses-section .courses-collection-wrapper {
    padding-top: 72px;
  }
}

/* The breadcrumb pill is #fff on the #f9f9f9 header band with a #e8e8e8
   hairline, which is effectively invisible. Give it enough contrast to read. */
.badge {
  box-shadow: inset 0 0 0 1px var(--colors--black-09);
  color: var(--colors--black-02);
}

/* The CTA block opened with its own padding-top on top of the preceding
   section's padding-bottom, so the gap was counted twice (e.g. 100px + 60px =
   160px on the Skills page). Let the section above own that spacing.

   The same doubling happened underneath: the CTA closed with 60px and the
   footer opened with its own 60px, stacking to 120px on every page. The footer
   owns the space below now. */
.cta-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* The section directly above the CTA used to close with 60px on every page,
   while every other join on the same page had a full section's padding on each
   side. That made the CTA the one tight join in the whole scroll. These are the
   sections that sit above it - they now close on the same ladder they open on,
   so the gap above the CTA reads like every other gap.

   The values match the --section-padding-- steps rather than referencing them,
   because .all-courses-section and .blog-section open at 80px by design and
   only their closing edge is being brought into line.

   .skill-detail-page .faq-section keeps its own 0 - it is scoped tighter, and
   on that page the FAQ is not the section above the CTA anyway. */
.testimonial-section,
.faq-section,
.all-courses-section,
.blog-section,
.contact-section,
.related-course-section,
.terms-condition-section,
.utility-section {
  padding-bottom: var(--section-padding--desktop);
}

@media screen and (max-width: 991px) {
  .testimonial-section,
  .faq-section,
  .all-courses-section,
  .blog-section,
  .contact-section,
  .related-course-section,
  .terms-condition-section,
  .utility-section {
    padding-bottom: var(--section-padding--tab);
  }
}

@media screen and (max-width: 767px) {
  .testimonial-section,
  .faq-section,
  .all-courses-section,
  .blog-section,
  .contact-section,
  .related-course-section,
  .terms-condition-section,
  .utility-section {
    padding-bottom: var(--section-padding--mobile-l);
  }
}

@media screen and (max-width: 479px) {
  .testimonial-section,
  .faq-section,
  .all-courses-section,
  .blog-section,
  .contact-section,
  .related-course-section,
  .terms-condition-section,
  .utility-section {
    padding-bottom: var(--section-padding--mobile-p);
  }
}

/* ==========================================================================
   Mobile navigation (self-managed - see js/jwai-nav.js)
   The .w-nav hook was removed from .navbar, so Webflow's nav module no longer
   shows/hides the hamburger or moves the menu. Both are handled here.
   ========================================================================== */

.menu-button {
  display: none;
}

.jwai-nav-backdrop {
  display: none;
}

/* Above the breakpoint the header already shows these, so the copies in the
   menu would be the same two links twice on one line. */
.jwai-nav-account {
  display: none;
}

@media screen and (max-width: 991px) {
  .menu-button {
    z-index: 1002;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  /* the slide-in panel */
  .nav-menu {
    z-index: 1001;
    background-color: var(--colors--white);
    border-radius: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    width: min(320px, 84vw);
    height: 100%;
    margin: 0;
    padding: 104px 24px 32px;
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    overflow-y: auto;
    box-shadow: -8px 0 34px #15151521;
  }
  body.jwai-nav-open .nav-menu,
  body.jwai-nav-closing .nav-menu {
    display: flex;
  }
  body.jwai-nav-open .nav-menu {
    animation: jwai-nav-in .28s ease both;
  }
  body.jwai-nav-closing .nav-menu {
    animation: jwai-nav-out .26s ease both;
  }

  .nav-menu .nav-link {
    text-align: left;
    border-bottom: 1px solid var(--colors--black-10);
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
  }

  /* The account links copied in from the header, which shows none of them at
     this width. Same rows as the page links above them, set apart only by
     where they sit: Log In and Sign Up when signed out, Cart and Account once
     signed in. */
  .jwai-nav-account {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .jwai-nav-account-link {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .jwai-nav-account-link:last-child {
    border-bottom: 0;
  }

  .jwai-nav-backdrop {
    z-index: 1000;
    background-color: #15151559;
    position: fixed;
    inset: 0;
  }
  body.jwai-nav-open .jwai-nav-backdrop,
  body.jwai-nav-closing .jwai-nav-backdrop {
    display: block;
  }
  body.jwai-nav-open .jwai-nav-backdrop {
    animation: jwai-bd-in .28s ease both;
  }
  body.jwai-nav-closing .jwai-nav-backdrop {
    animation: jwai-bd-out .26s ease both;
  }

  /* stop the page scrolling behind the open panel */
  body.jwai-nav-open {
    overflow: hidden;
  }

  /* hamburger turns into a close (X) */
  .hamburger-line-top,
  .hamburger-line-middle,
  .hamburger-line-bottom {
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-button.w--open {
    background-color: var(--colors--transparent);
    box-shadow: none;
  }
  .menu-button.w--open .hamburger-line-top {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-button.w--open .hamburger-line-middle {
    opacity: 0;
  }
  .menu-button.w--open .hamburger-line-bottom {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@keyframes jwai-nav-in  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes jwai-nav-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes jwai-bd-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes jwai-bd-out  { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body.jwai-nav-open .nav-menu,
  body.jwai-nav-closing .nav-menu,
  body.jwai-nav-open .jwai-nav-backdrop,
  body.jwai-nav-closing .jwai-nav-backdrop {
    animation-duration: .01ms;
  }
}

/* --- logo sizing: bumped up, it read too small in the header --- */
.brand { max-width: 240px; }
.logo  { width: 240px; height: auto; }

@media screen and (max-width: 991px) {
  .brand { max-width: 200px; }
  .logo  { width: 200px; }
}

@media screen and (max-width: 479px) {
  .brand { max-width: 178px; }
  .logo  { width: 178px; }
}

/* The template pulled the tab content up by 100px at ≤767px to sit under the
   tab menu, which carried a matching margin-bottom: 100px. The tab menu is gone,
   so that offset had nothing to cancel and dragged the cards over the heading. */
.all-course-tabs-content {
  top: 0;
}

/* Home page "Browse the Skill Library": the removed tab menu used to provide the
   space between the heading and the cards, leaving only a 24px gap. Match the
   48px used by the "Our Featured Skills" section above it.
   (.courses-section is home-only; the Skills page uses .all-courses-section.) */
.courses-section .courses-collection-wrapper {
  padding-top: 24px;
}

/* Login / Sign-up logo.
   The template only constrained max-height (158.93px). The old placeholder logo
   was 190px wide so that was enough, but the real wordmark is 963x150, so with
   no width limit it rendered at full natural width. Constrain by width instead,
   in line with the header logo. */
.login-logo {
  width: 220px;
  max-width: 100%;
  max-height: none;
  height: auto;
}

@media screen and (max-width: 767px) {
  .login-logo {
    width: 180px;
  }
}

/* Login / Sign-up: tighten the logo-to-form gap.
   The template set a 60px flex gap on .login-form-block, which reads as a void
   now that the logo row is only ~35px tall. The narrower breakpoints already
   step this down (24px / 20px), so only the desktop value needs adjusting. */
@media screen and (min-width: 992px) {
  .login-form-block {
    grid-row-gap: 32px;
    row-gap: 32px;
  }
}

/* Login / Sign-up: centre the panel now that the social sign-in row is gone.
   The template left-justified to flex-start because the divider + provider
   buttons filled the column. Without them the form sat at the top with a large
   void beneath it. `safe` keeps the top edge reachable if the content ever
   outgrows the viewport, instead of centring it off-screen. */
@media screen and (min-width: 992px) {
  .login-form-block {
    justify-content: safe center;
  }
}

/* =========================================================================
   Skill card - compact list style.

   Square thumbnail on the left, details on the right: rating and price share
   the top line, then the name, the curator, a hairline rule, and the meta row
   split by a vertical divider.

   Tokens come from the site's own components rather than a new palette:
     card   white, 16px radius, 0 4px 20px #1515150f   (.blog-widget)
     media  12px radius, clipped                       (.blog-image-wrap)
     rules  var(--colors--black-10) hairlines          (.badge)

   CSS Grid re-flows the template's existing markup - no HTML change - and
   every selector is scoped under .courses-card so it outranks the template's
   single-class rules earlier in this file.
   ========================================================================= */

/* a horizontal card needs the width, so two per row instead of three */
@media screen and (min-width: 992px) {
  .courses-collection-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }
}

.courses-card {
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 0;
  background-color: var(--colors--white);
  border: 0;
  border-radius: 5px;
  padding: 16px;
  display: grid;
  align-items: stretch;
  position: relative;
  box-shadow: 0 4px 20px #1515150f;
}

/* --- left: square thumbnail --------------------------------------------- */
.courses-card .course-card-image-wrap {
  grid-area: 1 / 1 / 2 / 2;
  border-radius: 5px;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 208px;
  align-self: stretch;
}

.courses-card:hover .course-thumbnail {
  transform: scale(1.05);
}

/* --- right: the details -------------------------------------------------- */
.courses-card .course-card-info {
  grid-area: 1 / 2 / 2 / 3;
  grid-row-gap: 12px;
  justify-content: flex-start;
  padding: 4px 0 2px;
}

/* rating left, price right */
/* the price now sits under the summary with a tag icon, so the row packs to
   the left instead of spreading its two ends apart */
.courses-card .course-card-price-block {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 4px;
}

.courses-card .course-price .h6 {
  color: var(--colors--black-01);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.courses-card .course-card-head-block {
  grid-row-gap: 8px;
  margin-top: 2px;
}

.courses-card .course-title .h5 {
  font-size: 19px;
  line-height: 132%;
}

.courses-card:hover .course-title .h5 {
  color: var(--colors--primary);
}

.courses-card .course-mentor {
  color: var(--colors--black-03);
  font-size: 15px;
}

/* --- meta row, closed off by a hairline rule ----------------------------- */
.courses-card .duration-widget-wrapper {
  border-top: 1px solid var(--colors--black-10);
  grid-column-gap: 14px;
  grid-row-gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  flex-wrap: nowrap;
}

.courses-card .duration-widget {
  grid-column-gap: 7px;
  padding: 0;
}

/* vertical divider between the meta items */
.courses-card .duration-widget + .duration-widget {
  border-left: 1px solid var(--colors--black-10);
  padding-left: 14px;
}

.courses-card .duration-widget img {
  width: 16px;
  height: 16px;
  opacity: .55;
}

.courses-card .duration-widget .text-sm {
  color: var(--colors--black-03);
  font-size: 13.5px;
  line-height: 1;
}

/* the action collapses to a circular arrow parked on the bottom-right, in
   line with the meta row - still the real link, just without the label */
/* Webflow's IX2 still carries a class-based interaction for .course-card-button
   and writes inline styles onto it, which outrank ordinary author rules and made
   the hover colour fire inconsistently. Author !important outranks a style
   attribute, so these win no matter what IX2 writes.
   The arrow also answers to its own :hover, not just the card's, so pointing
   straight at it always lights it up. */
.courses-card .course-card-button {
  width: 38px;
  height: 38px;
  background-color: var(--colors--bg-color) !important;
  border: 0;
  border-radius: 5px;
  flex: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  color: var(--colors--black-01) !important;
  transition: all .3s;
}

.courses-card:hover .course-card-button,
.courses-card .course-card-button:hover,
.courses-card .course-card-button:focus-visible {
  background-color: var(--colors--primary) !important;
}

.courses-card .course-card-button .button-text {
  display: none;
}

.courses-card .course-card-button:after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--colors--black-01);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: all .3s;
}

.courses-card:hover .course-card-button:after,
.courses-card .course-card-button:hover:after,
.courses-card .course-card-button:focus-visible:after {
  background-color: var(--colors--white);
}

/* --- responsive ---------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .courses-card { grid-template-columns: 170px minmax(0, 1fr); }
  .courses-card .course-card-image-wrap { min-height: 196px; }
  .courses-card .course-title .h5 { font-size: 17.5px; }
}

/* the template drops to two columns at 991px, which leaves a horizontal card
   far too narrow - force a single column so it gets the width it needs */
@media screen and (max-width: 991px) {
  .courses-collection-wrapper { grid-template-columns: 1fr; grid-row-gap: 24px; }
  .courses-card { grid-template-columns: 250px minmax(0, 1fr); width: 100%; }
  .courses-card .course-card-image-wrap { min-height: 208px; }
  .courses-card .course-title .h5 { font-size: 19px; }
}

@media screen and (max-width: 767px) {
  .courses-card { grid-template-columns: 190px minmax(0, 1fr); grid-column-gap: 16px; }
  .courses-card .course-card-image-wrap { min-height: 196px; }
  .courses-card .course-title .h5 { font-size: 17px; }
  .courses-card .course-summary { font-size: 13.5px; }
  .courses-card .duration-widget-wrapper { grid-column-gap: 10px; }
  .courses-card .duration-widget + .duration-widget { padding-left: 10px; }
}

/* below this a side-by-side split is too narrow to read, so stack it back */
@media screen and (max-width: 600px) {
  .courses-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 0;
    grid-row-gap: 14px;
  }
  .courses-card .course-card-image-wrap {
    grid-area: 1 / 1 / 2 / 2;
    height: 200px;
    min-height: 0;
  }
  .courses-card .course-card-info { grid-area: 2 / 1 / 3 / 2; padding: 0 0 2px; }
  .courses-card .course-title .h5 { font-size: 18px; }
  .courses-card .course-summary { font-size: 14px; }
  /* the meta row keeps text and arrow on one line - shrink the gaps, not the row */
  .courses-card .duration-widget-wrapper { grid-column-gap: 8px; padding-top: 12px; }
  .courses-card .duration-widget { grid-column-gap: 5px; }
  .courses-card .duration-widget + .duration-widget { padding-left: 8px; }
  .courses-card .duration-widget .text-sm { font-size: 12.5px; }
  .courses-card .course-card-button { width: 34px; height: 34px; }
}

@media screen and (max-width: 400px) {
  .courses-card { padding: 12px; }
  .courses-card .course-card-image-wrap { height: 175px; }
  .courses-card .duration-widget img { width: 14px; height: 14px; }
  .courses-card .duration-widget .text-sm { font-size: 12px; }
}

/* two-line summary under the curator, clamped so every card stays the same
   height no matter how long the copy runs */
.courses-card .course-summary {
  color: var(--colors--black-03);
  font-size: 14.5px;
  line-height: 155%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

@media screen and (max-width: 1100px) {
  .courses-card .course-summary { -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; }
}

/* =========================================================================
   Testimonial marquee.

   The card itself is untouched - this only changes how the row moves. The
   track is cloned by js/jwai-marquee.js and slides left by exactly one run
   (--jwai-marquee-distance), so the wrap point is invisible. Duration is
   handed in by the script from the measured width, keeping the pace constant
   whatever the card count.
   ========================================================================= */

.jwai-marquee {
  width: 100%;
  overflow: hidden;
  /* fade the two edges so cards enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.testimonial-card-block.jwai-marquee-track {
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: max-content;
  animation: jwai-marquee var(--jwai-marquee-duration, 40s) linear infinite;
  will-change: transform;
}

.jwai-marquee-track .testimonial-card {
  flex: none;
  width: 644px;
  max-width: 78vw;
}

@keyframes jwai-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--jwai-marquee-distance, 0px) * -1), 0, 0); }
}

@media screen and (max-width: 991px) {
  .testimonial-card-block.jwai-marquee-track { flex-flow: row; align-items: stretch; }
  .jwai-marquee-track .testimonial-card { width: 560px; }
}

@media screen and (max-width: 767px) {
  .jwai-marquee-track .testimonial-card { width: 420px; min-width: 0; }
}

@media screen and (max-width: 479px) {
  .jwai-marquee-track .testimonial-card { width: 82vw; }
}

/* anyone who has asked for less motion keeps the plain static row */
@media (prefers-reduced-motion: reduce) {
  .testimonial-card-block.jwai-marquee-track { animation: none; }
}

/* =========================================================================
   About Us - "Practical / Valuable / Honest" values row.

   The template left these as bare centred text on a grey band, so they read as
   three loose paragraphs rather than a set. Each one now sits in the site's own
   card recipe - white, 5px radius, 0 4px 20px #1515150f, same as .blog-widget -
   which reads as a card against the section's #f9f9f9 background.

   Copy is left-aligned: these run to three lines, and centred ragged text that
   long is harder to scan than a flush left edge.
   ========================================================================= */

.values-widget-wrapper {
  align-items: stretch;
}

.values-widget {
  background-color: var(--colors--white);
  border-radius: 5px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  padding: 32px;
  text-align: left;
  box-shadow: 0 4px 20px #1515150f;
  transition: all .3s;
}

.values-widget:hover {
  box-shadow: 0 14px 34px #1515151f;
}

/* the icon tile picks up the brand tint instead of a grey hairline, so the
   row has a point of colour without competing with the headings */
.values-widget-icon-wrap {
  background-color: #3665fb14;
  border: 0;
  width: 64px;
  height: 64px;
  flex: none;
}

.values-widget .value-image {
  width: 28px;
  height: 28px;
}

.values-widget-text-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.values-widget .h5 {
  font-size: 20px;
  line-height: 130%;
}

@media screen and (max-width: 991px) {
  .values-widget { grid-column-gap: 18px; grid-row-gap: 18px; padding: 28px; }
  .values-widget-icon-wrap { width: 58px; height: 58px; }
}

@media screen and (max-width: 767px) {
  .values-widget { grid-column-gap: 16px; grid-row-gap: 16px; padding: 24px; }
  .values-widget-icon-wrap { width: 54px; height: 54px; }
  .values-widget .value-image { width: 24px; height: 24px; }
}
/* =========================================================================
   Skill detail - right column.

   The buy panel now travels with the reader instead of scrolling away, and it
   reads as one bordered card rather than three loose stacks. Sticky needs
   align-self on a stretch parent, otherwise the column is full height and has
   nothing to stick within.
   ========================================================================= */

/* the panel supplies its own rule between blocks now */
.course-details-right-col .divider {
  background-color: var(--colors--black-10);
}

.course-details-right-col .course-details {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.course-details-right-col .course-requirment-block {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
}

/* =========================================================================
   Blog detail - full container width.

   The template capped this block at 872px inside a 1360px .container, so the
   hero image and the article sat in a narrow well while the header and every
   other section ran the full width. Releasing the cap lines it up with the
   rest of the page.
   ========================================================================= */

.blog-details-content-block {
  max-width: none;
}

/* the hero carried its own 872px cap (class is misspelled in the template),
   and the article body was inset another 30px a side */
.blog-details-image-warp {
  max-width: none;
  border-radius: 5px;
}

.blog-details-rich-content {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (max-width: 767px) {
  .blog-details-rich-content { padding-left: 0; padding-right: 0; }
}

/* =========================================================================
   Blog card.

   Was image + title + date only, which left a tall card carrying very little.
   It now follows the same family as the skill card - white, 5px radius, the
   site's 0 4px 20px #1515150f shadow - and carries a date, a two-line summary
   and the same circular arrow, so the row reads as one system.
   ========================================================================= */

.blog-widget {
  background-color: var(--colors--white);
  border-radius: 5px;
  grid-column-gap: 0;
  grid-row-gap: 0;
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 20px #1515150f;
  transition: all .3s;
}

.blog-image-wrap {
  border-radius: 5px;
  max-width: none;
  height: 230px;
}

.blog-image {
  transition: transform .55s ease;
}

.blog-widget:hover .blog-image {
  transform: scale(1.05);
}

.blog-widget-body {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  flex: 1;
  padding: 18px 4px 2px;
  display: flex;
}

/* date sits above the headline as a quiet meta line */
.blog-widget .blog-info {
  grid-column-gap: 7px;
  order: -1;
  align-items: center;
}

.blog-widget .blog-info img {
  width: 16px;
  height: 16px;
  opacity: .55;
}

.blog-widget .blog-info .text-sm {
  color: var(--colors--black-03);
  font-size: 13.5px;
  line-height: 1;
}

.blog-widget .blog-title .h5 {
  font-size: 19px;
  line-height: 134%;
  transition: color .2s;
}

.blog-widget:hover .blog-title .h5 {
  color: var(--colors--primary);
}

/* two-line summary, clamped so every card in the row stays the same height */
.blog-summary {
  color: var(--colors--black-03);
  font-size: 14.5px;
  line-height: 155%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* footer rule + the same arrow the skill card uses */
.blog-card-foot {
  border-top: 1px solid var(--colors--black-10);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
}

.blog-read-more {
  color: var(--colors--black-03);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.blog-widget:hover .blog-read-more {
  color: var(--colors--primary);
}

.blog-card-arrow {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
  transition: all .3s;
}

.blog-widget:hover .blog-card-arrow,
.blog-card-arrow:hover {
  background-color: var(--colors--primary);
}

.blog-card-arrow:after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--colors--black-01);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: all .3s;
}

.blog-widget:hover .blog-card-arrow:after,
.blog-card-arrow:hover:after {
  background-color: var(--colors--white);
}

@media screen and (max-width: 991px) {
  .blog-image-wrap { height: 210px; }
}

@media screen and (max-width: 767px) {
  .blog-image-wrap { height: 200px; }
  .blog-widget-body { padding: 16px 2px 2px; }
}

/* -------------------------------------------------------------------------
   Blog grid - equal heights and one consistent gap.

   The template centred the grid items at <=991px (place-items: center), so
   cards sized to their own content and a short one sat adrift in its cell.
   Stretching the row and letting the card fill it keeps every card in a row
   the same height, and the title is clamped so a long headline cannot push
   one card taller than its neighbours.
   ------------------------------------------------------------------------- */

.blog-widget-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  place-items: stretch;
  align-items: stretch;
}

.blog-widget {
  height: 100%;
}

.blog-widget .blog-title .h5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* the footer is a link now, so it needs the anchor reset the template gives
   its other inline-block links */
.blog-card-foot {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  .blog-widget-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    place-items: stretch;
  }
}

@media screen and (max-width: 767px) {
  .blog-widget-wrapper { grid-column-gap: 24px; grid-row-gap: 24px; }
}

/* =========================================================================
   Blog detail - article + sticky contents.

   The article keeps the full container width it was given, and the contents
   box rides alongside it. Sticky needs align-self on a stretch parent,
   otherwise the aside is full height and has nothing to travel within.

   scroll-margin-top on the headings keeps a jumped-to section clear of the
   fixed header instead of landing underneath it.
   ========================================================================= */

.blog-article-layout {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  align-items: start;
  display: flex;
}

.blog-article-main {
  min-width: 0;
  flex: 1;
}

/* the hero sits directly above the opening paragraph now, so it needs its own
   breathing room - nothing else was separating them */
.blog-article-main .blog-details-image-warp {
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .blog-article-main .blog-details-image-warp { margin-bottom: 28px; }
}

.blog-details-rich-content h5 {
  scroll-margin-top: 120px;
}

.blog-toc {
  flex: none;
  width: 340px;
}

@media screen and (min-width: 992px) {
  .blog-toc {
    position: sticky;
    top: 110px;
    align-self: flex-start;
  }
}

.blog-toc-inner {
  background-color: var(--colors--white);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  padding: 24px;
}

.blog-toc-title {
  color: var(--colors--black-01);
  border-bottom: 1px solid var(--colors--black-10);
  margin-bottom: 14px;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}

.toc-list {
  flex-flow: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.toc-item {
  margin: 0;
}

.toc-link {
  color: var(--colors--black-03);
  border-left: 2px solid transparent;
  padding: 7px 0 7px 12px;
  font-size: 14.5px;
  line-height: 145%;
  text-decoration: none;
  display: block;
  transition: all .3s;
}

.toc-link:hover {
  color: var(--colors--primary);
  border-left-color: var(--colors--black-09);
}

/* the section currently on screen, set by js/jwai-toc.js */
.toc-link.is-current {
  color: var(--colors--primary);
  border-left-color: var(--colors--primary);
  font-weight: 600;
}

@media screen and (max-width: 991px) {
  .blog-article-layout {
    flex-flow: column-reverse;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .blog-toc { width: 100%; }
  /* stacked, align-items: start sized the column to its widest code block, so
     on a phone the text ran off the screen; the column takes the screen's width
     and code blocks and tables scroll inside their own box */
  .blog-article-main { width: 100%; }
}

/* the article section and the FAQ below it each brought their own padding,
   which stacked into one large gap - drop the article's so only the FAQ's
   own spacing remains */
.blog-details-section {
  padding-bottom: 0;
}

/* the breadcrumb crumbs are links now - keep them the badge's own colour so
   the row still reads as one line, with the brand blue saved for hover */
.badge a {
  color: inherit;
  text-decoration: none;
}

.badge a:hover {
  color: var(--colors--primary);
}

/* Privacy, Terms and FAQ each capped their content well inside the container,
   so the body sat in a narrow well while the header ran full width. Released
   to match the blog detail page. */
.utility-layout,
.faq-content-layout {
  max-width: none;
}

/* the breadcrumb is the first thing on the page, so fading it in just delays
   the one bit of orientation the reader wants immediately - hold it visible */
.badge-wrap,
.badge-wrap .badge {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================================
   Skill detail - hero image.

   The photo ran at its natural ratio across the full 784px column, which came
   out 626px tall and pushed everything else below the fold. Capped so the
   image supports the page rather than dominating it.
   ========================================================================= */

.course-detials-image-wrap {
  height: 380px;
}

.course-detials-image-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .course-detials-image-wrap { height: 320px; }
}

@media screen and (max-width: 767px) {
  .course-detials-image-wrap { height: 240px; }
}

/* =========================================================================
   Blog detail - get the reader to the article sooner.

   Releasing the width cap made the hero as wide as the container, and at its
   natural ratio that came out 813px tall. Together with the banner it pushed
   the first paragraph 1.6 screens down. Capping the hero and tightening the
   two gaps above the article brings the text back near the fold without
   losing the image.
   ========================================================================= */

/* The title band and the gap below it are back on the site's rhythm - this page
   was opening 24px tighter than every other inner page and the article started
   60px sooner, which read as a different page. The hero cap below is what
   actually kept the article near the fold, so the rhythm costs little here. */
.blog-details-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
}

.blog-details-section {
  padding-top: var(--section-padding--desktop);
}

@media screen and (max-width: 991px) {
  .blog-details-content-block { grid-column-gap: 32px; grid-row-gap: 32px; }

  .blog-details-section { padding-top: var(--section-padding--tab); }
}

@media screen and (max-width: 767px) {
  .blog-details-section { padding-top: var(--section-padding--mobile-l); }
}

@media screen and (max-width: 479px) {
  .blog-details-section { padding-top: var(--section-padding--mobile-p); }
}

/* =========================================================================
   Skill detail - "About this Skill".
   ========================================================================= */

.skill-about-section {
  padding-top: 80px;
  padding-bottom: 20px;
}

.skill-about-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.skill-about-head .h2 {
  margin-bottom: 12px;
}

.skill-about-section .course-requirment-block {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

.skill-about-section .course-requirement-wrap {
  background-color: var(--colors--white);
  border-radius: 5px;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  padding: 28px;
  box-shadow: 0 4px 20px #1515150f;
}

@media screen and (max-width: 991px) {
  .course-details-content-block { grid-column-gap: 36px; grid-row-gap: 36px; }
  .course-details-right-col { max-width: 380px; }
  .skill-about-section { padding-top: 60px; }
  .skill-about-section .course-requirment-block { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 767px) {
  .course-details-content-block { flex-flow: column; }
  .course-details-right-col { max-width: none; }
  .skill-about-section .course-requirment-block { grid-template-columns: 1fr; }
  .skill-about-section .course-requirement-wrap { padding: 24px; }
}

/* =========================================================================
   Skill detail - product layout.

   Laid out like a shop product page: gallery on the left, and everything you
   decide to buy on stacked down the right. Adapted for a digital item - no
   quantity stepper, and the shipping strip becomes a download strip.
   ========================================================================= */

/* The breadcrumb starts this section, and unlike the banner on the other inner
   pages it sits on white with no band behind it - so a full section's padding
   above it reads as empty page rather than as spacing. It opens tight and
   closes on the normal rhythm, which the next section needs. */
.product-section {
  padding-top: 40px;
  padding-bottom: var(--section-padding--desktop);
}

@media screen and (max-width: 991px) {
  .product-section {
    padding-bottom: var(--section-padding--tab);
  }
}

@media screen and (max-width: 767px) {
  .product-section {
    padding-top: 28px;
    padding-bottom: var(--section-padding--mobile-l);
  }
}

@media screen and (max-width: 479px) {
  .product-section {
    padding-bottom: var(--section-padding--mobile-p);
  }
}

/* --- breadcrumb with chevrons ------------------------------------------- */
.product-breadcrumb {
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
}

.product-breadcrumb a {
  color: var(--colors--black-03);
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: var(--colors--primary);
}

.product-breadcrumb span {
  color: var(--colors--black-01);
  font-weight: 500;
}

.product-breadcrumb a:after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-color: var(--colors--black-09);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block;
}

/* --- two columns --------------------------------------------------------- */
.product-layout {
  grid-column-gap: 56px;
  grid-row-gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  display: grid;
}

/* --- left: thumbs + stage ------------------------------------------------ */
.product-stage {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.product-main-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity .18s ease;
}

/* --- right: the buying column ------------------------------------------- */
.product-info {
  flex-flow: column;
  display: flex;
}

.product-title {
  margin: 0 0 6px;
}

.product-rule {
  background-color: var(--colors--black-10);
  width: 100%;
  height: 1px;
  margin: 24px 0;
}

.product-summary {
  color: var(--colors--black-03);
  margin: 0;
  font-size: 17px;
  line-height: 168%;
}

.product-points {
  color: var(--colors--black-03);
  margin: 18px 0 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 175%;
}

.product-points li {
  margin-bottom: 4px;
}

.product-price-row {
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  display: flex;
}

.product-price {
  color: var(--colors--black-01);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.product-price-was {
  color: var(--colors--black-03);
  font-size: 20px;
  text-decoration: line-through;
}

.product-price-note {
  color: var(--colors--black-03);
  margin-top: 8px;
  font-size: 14px;
}

.product-actions {
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
}

.product-buy {
  background-color: var(--colors--primary);
  color: var(--colors--white);
  border-radius: 5px;
  padding: 15px 34px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
}

.product-buy:hover {
  background-color: var(--colors--black-01);
}

.product-secondary {
  color: var(--colors--black-01);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  padding: 15px 26px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
}

.product-secondary:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

/* --- meta rows + download strip ------------------------------------------ */
.product-meta {
  flex-flow: column;
  gap: 8px;
  margin: 0;
  display: flex;
}

.product-meta-row {
  gap: 8px;
  font-size: 15px;
  display: flex;
}

.product-meta-row dt {
  color: var(--colors--black-01);
  font-weight: 600;
}

/* An email address and a payment reference are single unbroken words long
   enough to leave the card on a phone. They break rather than overflow. */
.product-meta-row dd {
  color: var(--colors--black-03);
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-assurance {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 20px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
}

.product-assurance strong {
  color: var(--colors--black-01);
}

.product-assurance span:last-child {
  color: var(--colors--black-03);
}

.product-assurance-sep {
  background-color: var(--colors--black-10);
  width: 1px;
  height: 20px;
}

@media screen and (max-width: 991px) {
  .product-layout { grid-column-gap: 36px; }
  .product-price { font-size: 30px; }
}

@media screen and (max-width: 767px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .product-buy, .product-secondary { flex: 1; text-align: center; }
}

@media screen and (max-width: 479px) {
}

/* -------------------------------------------------------------------------
   Skill detail - typography and sticky gallery.

   Everything in the buying column was inheriting #444, so the name, the
   category, the summary and the bullets all landed on one flat grey with no
   hierarchy. The name and the labels take the near-black, the body copy keeps
   the softer grey, and the category becomes a brand-tinted tag.

   The gallery is also much shorter than the column beside it (420 against
   762), which left a large hole. It sticks now, so it travels with the reader
   instead of stranding that space.
   ------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  .product-gallery {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

.product-title {
  color: var(--colors--black-01);
  font-size: 40px;
  line-height: 118%;
}

.product-summary {
  color: var(--colors--black-03);
  font-size: 17px;
}

/* branded ticks instead of default disc markers */
.product-points {
  padding-left: 0;
  list-style: none;
}

.product-points li {
  color: var(--colors--black-02);
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

.product-points li:before {
  content: "";
  width: 19px;
  height: 19px;
  background-color: var(--colors--primary);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  position: absolute;
  top: 5px;
  left: 0;
}

.product-price-note {
  color: var(--colors--black-03);
}

/* the meta rows sit in their own panel so they stop competing with the copy */
.product-meta {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  gap: 10px;
  padding: 18px 20px;
}

.product-meta-row dt {
  color: var(--colors--black-01);
  flex: none;
  min-width: 92px;
}

.product-meta-row dd {
  color: var(--colors--black-02);
}

.product-assurance {
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
  background-color: var(--colors--white);
}

@media screen and (max-width: 991px) {
  .product-title { font-size: 34px; }
}

@media screen and (max-width: 767px) {
  .product-title { font-size: 30px; }

  /*
    Label above, value below.

    Side by side, a long label takes the width its own words need and leaves the
    value whatever is left - so "Payment reference:" squeezed a Stripe intent id
    into a third of the row and broke it over three lines, while "Name:" next to
    it wasted two thirds. Stacked, every value gets the full width and the rows
    read down the page instead of fighting for it.
  */
  .product-meta-row {
    flex-direction: column;
    gap: 2px;
  }

  .product-meta-row dt {
    min-width: 0;
  }
}

/* shared heading for the reused sections on the skill detail page - the
   feature grid has no heading slot of its own on the home page */
.skill-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.skill-section-head .h2 {
  margin-bottom: 12px;
}

.skill-section-head .text-lg {
  color: var(--colors--black-03);
}

/* the About block keeps its icons in tinted tiles */
.skill-about-section .course-requirement-title {
  grid-column-gap: 12px;
  align-items: center;
}

.skill-about-section .course-requirement-title img {
  background-color: #3665fb14;
  border-radius: 5px;
  width: 42px;
  height: 42px;
  padding: 11px;
}

@media screen and (max-width: 767px) {
  .skill-section-head { margin-bottom: 32px; }
}

/* =========================================================================
   Rescue the elements Webflow's IX2 hides.

   IX2 still writes opacity: 0 onto these as the opening state of a scroll
   reveal, but the trigger that would play the reveal lived in the data-w-id
   attributes, which the export no longer carries. The result is content that
   is present, laid out and permanently invisible - nine Skill cards on the
   home page, the process cards, the feature art, the counters and every FAQ
   row on About Us.

   The earlier rescue only covered elements carrying an inl- class; IX2 targets
   these by their own class instead, so they were missed. Author !important
   outranks the style attribute, which is where IX2 writes.
   ========================================================================= */

.courses-card,
.process-card,
.feature-image,
.feature-icon,
.feature-card,
.feature-big-card,
.counter-widget,
.faq-wrap,
.blog-widget,
.values-widget,
.testimonial-card,
.course-requirement-wrap {
  opacity: 1 !important;
}


/* =========================================================================
   Lenis smooth scroll - required stylesheet.

   Lenis ships these rules and expects them on the page; without them the
   scroll goes intermittent, which is exactly the "sometimes the page will
   not scroll" behaviour. html.lenis needs height: auto or the cached scroll
   limit fights the real document height, and scroll-behavior must be auto so
   the browser's own smooth scrolling does not run against Lenis.
   ========================================================================= */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Skill detail - the two image + blocks sections.

   The About block puts its image on the right and the copy on the left; How it
   works mirrors it, so the two read as a pair rather than a repeat. Both also
   need their own closing space, which the page rhythm rule had zeroed for
   every section.
   ------------------------------------------------------------------------- */

/* About: image right, copy left */
.skill-detail-page .mission-vission-section:not(.skill-how-section) .mission-content-block {
  flex-flow: row-reverse;
}

/* it follows the product block, which already closes with its own space */
.skill-detail-page .mission-vission-section:not(.skill-how-section) {
  padding-top: 0;
}

/* the sections either side supply the gap around the questions */
.skill-detail-page .faq-section {
  padding-top: 0;
  padding-bottom: 0;
}



@media screen and (max-width: 991px) {
  /* stacked, the copy should still lead */
  .skill-detail-page .mission-vission-section:not(.skill-how-section) .mission-content-block {
    flex-flow: column;
  }
}

/* -------------------------------------------------------------------------
   Skill detail - gallery strip under the preview, and a flush FAQ.
   ------------------------------------------------------------------------- */

.product-gallery {
  flex-flow: column;
  gap: 16px;
  display: flex;
}

/* the strip is a slider: it scrolls and snaps, so it holds any number of
   previews instead of only the three a fixed grid allowed. The arrows sit on
   top of the strip rather than beside it, so they cost no width and the
   thumbnails keep the full span under the main image. */
.product-thumbs {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 14px;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.product-thumbs::-webkit-scrollbar {
  display: none;
}

.product-thumb {
  scroll-snap-align: start;
  cursor: pointer;
  background-color: var(--colors--bg-color);
  border: 0;
  border-radius: 5px;
  flex: 0 0 calc(25% - 10.5px);
  height: 104px;
  padding: 0;
  position: relative;
  overflow: hidden;
  opacity: .55;
  transition: opacity .2s;
}

/* the preview crossfades on change, driven by .is-swapping from jwai-gallery.js */
.product-main-image.is-swapping {
  opacity: 0;
}

.product-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.product-thumb:hover {
  opacity: .85;
}

/* the selected preview is the one at full strength - no border needed */
.product-thumb.is-active {
  opacity: 1;
}




@media screen and (max-width: 767px) {
  .product-thumb { height: 84px; flex-basis: calc(40% - 8.4px); }
}

/* --- previews: arrows sit on the main image, the strip below just scrolls -- */
.product-stage-nav {
  cursor: pointer;
  background-color: #151515b8;
  border: 0;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color .2s;
}

.product-stage-nav.is-prev { left: 14px; }
.product-stage-nav.is-next { right: 14px; }

.product-stage-nav:hover {
  background-color: var(--colors--primary);
}

.product-stage-nav:after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--colors--white);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  display: block;
}

.product-stage-nav.is-prev:after {
  transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .product-stage-nav { width: 34px; height: 34px; }
  .product-stage-nav.is-prev { left: 10px; }
  .product-stage-nav.is-next { right: 10px; }
}

/* =========================================================================
   Shop flow - Cart, Checkout, Order confirmed, Payment failed.

   Everything here is assembled from parts the site already has: the banner
   heading block, the white 5px card with the same soft shadow, .product-rule
   as a divider, .product-meta for label/value rows, .product-buy and
   .product-secondary for the buttons, .duration-widget for the file and setup
   pills, and the form fields from the contact page. The only genuinely new
   pieces are the ones a storefront needs and the template never had: a cart
   line, a totals panel, a payment picker and an order status banner.
   ========================================================================= */

.cart-section,
.checkout-section {
  padding-top: var(--section-padding--desktop);
  padding-bottom: var(--section-padding--desktop);
}

/* --- the white card these pages are built from --------------------------- */
.cart-row,
.cart-summary,
.checkout-fieldset {
  background-color: var(--colors--white);
  border-radius: 5px;
  box-shadow: 0 4px 20px #1515150f;
}

/* --- cart ---------------------------------------------------------------- */
.cart-layout {
  grid-column-gap: 40px;
  grid-row-gap: 32px;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  display: grid;
}

.cart-items {
  flex-flow: column;
  gap: 20px;
  display: flex;
}

.cart-row {
  grid-column-gap: 26px;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: stretch;
  padding: 18px;
  display: grid;
}

.cart-row .course-card-image-wrap {
  border-radius: 5px;
  height: 100%;
  min-height: 128px;
  overflow: hidden;
}

.cart-row .course-thumbnail {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cart-row-info {
  flex-flow: column;
  gap: 12px;
  min-width: 0;
  display: flex;
}

/* the price rides on the title's line, hard right */
.cart-row-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  display: flex;
}

.cart-row-head .course-title {
  min-width: 0;
}

/* margin-top:auto pins the pills and the bin to the bottom of the card, so
   rows with copy of different lengths still line up along their base */
.cart-row-foot {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  display: flex;
}

/* the same type scale the skill card uses for these exact components, so a
   cart line reads as the same object as the card it came from */
.cart-row-info .course-title .h6 {
  font-size: 19px;
  line-height: 132%;
}

.cart-row-info .course-summary {
  color: var(--colors--black-01);
  margin: 0;
  font-size: 15px;
  line-height: 165%;
}

.cart-row-info .duration-widget .text-sm {
  color: var(--colors--black-01);
  font-size: 13.5px;
}

.cart-price {
  color: var(--colors--black-01);
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
}

/* the same X the mobile nav uses, drawn as a mask so it inherits colour */
.cart-remove {
  cursor: pointer;
  background-color: var(--colors--transparent);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  position: relative;
  transition: all .3s;
}

.cart-remove:after {
  content: "";
  background-color: var(--colors--black-01);
  width: 17px;
  height: 17px;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m2.5 0-.8 13.1a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m2.5 0-.8 13.1a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

.cart-remove:hover {
  border-color: var(--colors--primary);
}

.cart-remove:hover:after {
  background-color: var(--colors--primary);
}

/* --- totals panel, shared by cart and checkout --------------------------- */
.cart-summary {
  padding: 28px;
}

.cart-summary-title {
  margin: 0;
}

.cart-summary .product-rule {
  margin: 20px 0;
}

.cart-summary-lines {
  flex-flow: column;
  gap: 12px;
  display: flex;
}

.cart-summary-row {
  color: var(--colors--black-01);
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  display: flex;
}

.cart-summary-total {
  color: var(--colors--black-01);
  justify-content: space-between;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
}

/* .product-buy is an <a> everywhere else; as a button it needs the reset */
.cart-cta {
  text-align: center;
  cursor: pointer;
  border: 0;
  width: 100%;
  margin-top: 24px;
  font-family: inherit;
  display: block;
}

.cart-summary-back {
  color: var(--colors--black-01);
  text-align: center;
  margin-top: 14px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  transition: color .3s;
}

.cart-summary-back:hover {
  color: var(--colors--primary);
}

/* --- the dialling code, inside the phone field --------------------------- */
/*
  The code and the number are one value, so they are one control: the select
  sits where the field's icon would, inside the same border, and the number
  starts after it. Two boxes side by side would read as two questions.
*/
.jwai-phone .input-field-wrap:before {
  display: none;                       /* the select stands in for the icon */
}

/* fixed width, so the number always starts in the same place whether the code
   is +1 or +971 */
.jwai-dial {
  color: var(--colors--black-01);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--colors--transparent);
  border: 0;
  border-right: 1px solid var(--colors--black-10);
  width: 84px;
  height: 30px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  z-index: 2;
}

.jwai-dial:focus {
  outline: none;
  color: var(--colors--primary);
}

/* the checkout's own icon rule also lands on this field at four classes, so
   this one carries a fifth rather than depending on which comes last */
.jwai-field.jwai-phone .input-field,
.jwai-field.jwai-phone .input-field-wrap:not(:has(.input-field-icon-wrap)) .input-field {
  padding-left: 108px;
}

.jwai-phone .jwai-label {
  left: 108px;
}

.jwai-phone .input-field:focus ~ .jwai-label,
.jwai-phone .input-field:not(:placeholder-shown) ~ .jwai-label {
  left: 0;
}

/* the wrap draws the select's own chevron, since appearance is off */
.jwai-field.jwai-phone .input-field-wrap:after {
  content: "";
  background-color: var(--colors--black-01);
  width: 11px;
  height: 11px;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
}

/* --- a note under a field ------------------------------------------------ */
.checkout-hint {
  color: var(--colors--black-01);
  margin: 7px 0 0;
}

.checkout-hint:empty {
  display: none;
}

/* a field the country does not have goes, rather than sitting there asking
   for something that does not exist */
.form-field-wrap[hidden] {
  display: none;
}

/* --- the Stripe element -------------------------------------------------- */
/* Stripe draws inside an iframe it owns, so the box around it is ours and the
   type inside it is matched by handing Stripe the same values, from
   js/jwai-stripe.js. The Card Element is one row, so it gets a field's border
   rather than sitting bare on the card. */
.checkout-stripe-mount {
  background-color: var(--colors--white);
  border: 1px solid #cdd1d4;
  border-radius: 5px;
  padding: 19px 20px;
  transition: border-color .16s ease;
}

.checkout-stripe-mount.StripeElement--focus {
  border-color: var(--colors--primary);
}

.checkout-stripe-mount.StripeElement--invalid {
  border-color: #d92d20;
}

.checkout-stripe-note {
  color: var(--colors--black-01);
  margin: 14px 0 0;
}

/* --- checkout ------------------------------------------------------------ */
.checkout-layout {
  grid-column-gap: 40px;
  grid-row-gap: 32px;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  display: grid;
}

.checkout-form-col {
  min-width: 0;
}

.checkout-fieldset {
  padding: 28px;
}

.checkout-fieldset + .checkout-fieldset {
  margin-top: 24px;
}

/* .h5 is typography only on this template - colour comes from a .text-dark
   wrapper, which these panel headings do not have */
.checkout-legend,
.cart-summary-title {
  color: var(--colors--black-01);
  margin: 0 0 20px;
}

.cart-summary-title {
  margin: 0;
}

.checkout-pay-option .text-sm,
.checkout-mini-info .text-default {
  color: var(--colors--black-01);
}

.checkout-pay-options {
  flex-flow: column;
  gap: 10px;
  margin-bottom: 24px;
  display: flex;
}

.checkout-pay-option {
  cursor: pointer;
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 18px;
  display: flex;
  transition: border-color .3s;
}

.checkout-pay-option:hover {
  border-color: var(--colors--black-09);
}

.checkout-pay-option:has(input:checked) {
  border-color: var(--colors--primary);
}

.checkout-pay-option input {
  accent-color: var(--colors--primary);
  width: 18px;
  height: 18px;
  margin: 0;
}

.checkout-pay-text {
  flex-flow: column;
  gap: 2px;
  display: flex;
}

.checkout-pay-label {
  color: var(--colors--black-01);
  font-weight: 500;
}

.checkout-mini-list {
  flex-flow: column;
  gap: 18px;
  display: flex;
}

.checkout-mini-row {
  align-items: center;
  gap: 14px;
  display: flex;
}

.checkout-mini-info .text-default,
.checkout-mini-info .text-sm {
  margin: 0;
}

.checkout-mini-thumb {
  object-fit: cover;
  border-radius: 5px;
  flex: none;
  width: 52px;
  height: 52px;
}

.checkout-mini-info {
  flex: 1;
  min-width: 0;
}

/* This is a recap, not the product page - it inherits 18px on a 1.8 line
   height, which turned a wrapped title into two widely spaced lines. Smaller
   type on a tighter leading keeps each Skill to a compact block. */
.checkout-mini-info .text-default {
  font-size: 15px;
  line-height: 1.4;
}

.checkout-mini-info .text-sm {
  color: var(--colors--black-01);
  font-size: 13px;
  line-height: 1.4;
}

.checkout-mini-price {
  color: var(--colors--black-01);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

/* --- order confirmed / payment cancelled ---------------------------------
   Both pages are the 404 page's centred layout with an animated mark above the
   heading, so there is no new page furniture to maintain.

   The mark is drawn rather than faded in: the ring sweeps round, the tick or
   cross draws after it, and a soft pulse rides out behind. The dash lengths are
   the real path lengths, so each stroke finishes exactly when it is complete.
   -------------------------------------------------------------------------- */
/* The 404 page's wrap is a 90vh flex box that centres its child vertically.
   These two pages don't need that: the block owns its own rhythm, so the wrap
   just flows, and its bottom padding goes to zero because the footer already
   opens with a full section's padding. Scoped with :has() so the 404 keeps the
   centred treatment it was designed with. */
.utility-page-wrap:has(.order-block) {
  height: auto;
  padding-bottom: 0;
  display: block;
}

/* One parent owns every gap on these pages. The children carry no margins at
   all, so the rhythm is a single number rather than five that have to be kept
   in agreement. */
.order-block {
  text-align: center;
  color: var(--colors--black-01);
  flex-flow: column;
  align-items: center;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
}

.order-block > * {
  margin: 0;
}

.order-copy {
  color: var(--colors--black-01);
  max-width: 560px;
  font-size: var(--font-size--text-lg);
  line-height: var(--line-height--text-lg);
}

/* each fact stays whole - as bare text runs the flex box broke them mid
   sentence, so a phone got "No charge" and "was made to your card" on
   separate lines */
.order-meta-item {
  display: inline;
}

.order-mark {
  width: 100px;
  height: 100px;
}

.order-mark-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.order-mark-svg circle,
.order-mark-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* measured, not 2*pi*r - the rendered circle comes out a shade shorter */
.order-mark-ring {
  stroke-width: 4;
  stroke-dasharray: 263.5;
  stroke-dashoffset: 263.5;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: jwai-mark-ring .62s cubic-bezier(.65, 0, .35, 1) forwards;
}

.order-mark-glyph {
  stroke-width: 5.5;
  animation: jwai-mark-glyph .34s cubic-bezier(.65, 0, .35, 1) .5s both;
}

/* the tick is one 48.1 unit path; each arm of the cross is 36.8 */
.is-success .order-mark-glyph {
  stroke-dasharray: 48.1;
  stroke-dashoffset: 48.1;
}

.is-failed .order-mark-glyph {
  stroke-dasharray: 36.8;
  stroke-dashoffset: 36.8;
}

.is-failed .order-mark-glyph.is-second {
  animation-delay: .66s;
}

.order-mark-pulse {
  stroke-width: 3;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: jwai-mark-pulse .9s ease-out .55s;
}

/* success takes the brand blue, the same tick used on the product bullets */
.is-success .order-mark-ring,
.is-success .order-mark-glyph,
.is-success .order-mark-pulse {
  stroke: var(--colors--primary);
}

/* the cancelled state is the one place the palette needs a colour of its own */
.is-failed .order-mark-ring,
.is-failed .order-mark-glyph,
.is-failed .order-mark-pulse {
  stroke: #d92d20;
}

@keyframes jwai-mark-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes jwai-mark-glyph {
  to { stroke-dashoffset: 0; }
}

@keyframes jwai-mark-pulse {
  0% { opacity: .45; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* drawn strokes are motion; without it the mark is simply already there */
@media (prefers-reduced-motion: reduce) {
  .order-mark-ring,
  .order-mark-glyph {
    animation: none;
    stroke-dashoffset: 0;
  }

  .order-mark-pulse {
    display: none;
  }
}

.order-meta {
  color: var(--colors--black-01);
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  /* body line-height is 1.8, which stacked the two facts too far apart */
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
}

.order-meta strong {
  color: var(--colors--black-01);
  font-weight: 600;
}

.order-meta-sep {
  background-color: var(--colors--black-10);
  width: 1px;
  height: 16px;
}

.order-alt-link {
  color: var(--colors--black-01);
  font-size: 15px;
  text-decoration: none;
  transition: color .3s;
}

.order-alt-link:hover {
  color: var(--colors--primary);
}

@media screen and (max-width: 991px) {
  /* 120px of empty page above the mark is a desktop measurement */
  .utility-page-wrap:has(.order-block) {
    padding-top: var(--section-padding--tab);
  }
}

@media screen and (max-width: 767px) {
  .utility-page-wrap:has(.order-block) {
    padding-top: var(--section-padding--mobile-l);
  }

  .order-block {
    gap: 22px;
  }

  .order-copy {
    font-size: var(--font-size--text-lg-mobile);
  }

  .order-mark {
    width: 84px;
    height: 84px;
  }

  /* one fact per line, so the eye reads two facts and not five fragments */
  .order-meta {
    flex-flow: column;
    gap: 8px;
  }

  .order-meta-item {
    display: block;
  }

  /* stacked, the rule between the two facts would read as a stray tick */
  .order-meta-sep {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .utility-page-wrap:has(.order-block) {
    padding-top: var(--section-padding--mobile-p);
  }

  .order-block {
    gap: 20px;
  }

  .order-copy {
    font-size: 17px;
  }

  .order-mark {
    width: 72px;
    height: 72px;
  }

  .order-meta,
  .order-alt-link {
    font-size: 14px;
  }
}

/* --- the cart badge ------------------------------------------------------ */
/* Sits on the corner of the icon, so the count reads as belonging to the cart
   rather than as a second thing beside it. */
.jwai-cart-link {
  position: relative;
}

.jwai-cart-count {
  color: var(--colors--white);
  text-align: center;
  background-color: var(--colors--primary);
  /* 5px, like every other corner on the site. This was 9px - half the height,
     the trick that keeps a badge round once the count reaches two digits - and
     it was the only radius anywhere above 5. */
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  position: absolute;
  top: -2px;
  right: -4px;
}

.jwai-cart-count[hidden] {
  display: none;
}

/* --- a button that is working -------------------------------------------- */
/* The label is replaced by the word and a spinner rather than by "Adding..."
   alone, so the button is visibly busy and not just differently worded. */
.product-buy.is-working {
  cursor: progress;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.product-buy.is-working:after {
  content: "";
  border: 2px solid #ffffff59;
  border-top-color: var(--colors--white);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: .7s linear infinite jwai-spin;
  display: block;
}

/* --- the dialog ---------------------------------------------------------- */
.jwai-modal {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

/* The dialog animates itself in on insert rather than waiting for a class to
   be added a frame later. A frame is not guaranteed - a background tab throttles
   requestAnimationFrame - and a dialog that opens invisible is worse than one
   that opens without a transition. */
.jwai-modal-backdrop {
  background-color: #15151566;
  position: absolute;
  inset: 0;
  animation: .2s ease forwards jwai-fade-in;
}

@keyframes jwai-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.jwai-modal-card {
  text-align: center;
  background-color: var(--colors--white);
  border-radius: 5px;
  width: 100%;
  max-width: 420px;
  padding: 36px 32px 32px;
  position: relative;
  box-shadow: 0 20px 60px #15151533;
  animation: .2s ease forwards jwai-rise;
}

@keyframes jwai-rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.jwai-modal.is-closing {
  animation: .16s ease forwards jwai-fade-out;
  pointer-events: none;
}

@keyframes jwai-fade-out {
  to { opacity: 0; }
}

/* the mark draws itself on, which is the only movement in the dialog */
.jwai-modal-mark {
  color: var(--colors--primary);
  background-color: #3665fb1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
}

.jwai-modal-mark.is-error {
  color: #d92d20;
  background-color: #d92d201a;
}

.jwai-modal-mark svg {
  width: 26px;
  height: 26px;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: .45s ease .1s forwards jwai-draw;
}

@keyframes jwai-draw {
  to { stroke-dashoffset: 0; }
}

.jwai-modal-title {
  margin: 0 0 8px;
}

.jwai-modal-text {
  color: var(--colors--black-01);
  margin: 0 0 24px;
  font-size: 15px;
}

.jwai-modal-actions {
  justify-content: center;
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
}

.jwai-modal-actions .product-buy,
.jwai-modal-actions .product-secondary {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
}

.jwai-modal-close {
  cursor: pointer;
  background-color: var(--colors--transparent);
  border: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  position: absolute;
  top: 12px;
  right: 12px;
}

.jwai-modal-close:before,
.jwai-modal-close:after {
  content: "";
  background-color: var(--colors--black-01);
  border-radius: 1px;
  width: 15px;
  height: 1.6px;
  position: absolute;
  inset: 0;
  margin: auto;
}

.jwai-modal-close:before { transform: rotate(45deg); }
.jwai-modal-close:after { transform: rotate(-45deg); }

.jwai-modal-close:hover:before,
.jwai-modal-close:hover:after {
  background-color: var(--colors--primary);
}

@media screen and (max-width: 479px) {
  .jwai-modal-actions .product-buy,
  .jwai-modal-actions .product-secondary {
    width: 100%;
  }
}

/* --- a set of provider keys ---------------------------------------------- */
/*
  Two near-identical blocks of fields, one of which charges real cards. What
  tells them apart has to be visible without reading: the one in use carries
  the border and a tinted header, and its name and state sit together at the
  top with the actions that belong to that set - not stacked underneath where
  they read as belonging to the page.
*/
.admin-pair {
  margin-top: 20px;
  padding: 0;
  overflow: hidden;
}

/* A card that carries its own head and body brings its own padding. The
   card's would be added to theirs and push the heading 30px further in than
   every other panel's, which is exactly how far out of line it looked. */
.dash-card:has(> .admin-pair-head) {
  padding: 0;
}

.admin-pair-head {
  border-bottom: 1px solid var(--colors--black-10);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 30px;
  display: flex;
  flex-wrap: wrap;
}

.admin-pair-title .dash-subhead {
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  display: flex;
}

.admin-pair-title .dash-panel-sub {
  margin: 0;
}

.admin-pair-actions {
  flex: none;
  gap: 10px;
  display: flex;
}

.admin-pair .form-fields-wrap {
  padding: 26px 30px 30px;
}

.admin-pair-body {
  padding: 22px 30px 26px;
}

.admin-pair.is-active-pair {
  border: 1px solid var(--colors--primary);
}

.admin-pair.is-active-pair .admin-pair-head {
  background-color: #3665fb0a;
  border-bottom-color: #3665fb26;
}

.dash-subhead .dash-order-status {
  font-size: 11px;
}

/* "optional" belongs to the label, so it is quieter than it and on its line */
/* A tick, wearing the same border and radius as the buttons beside it, so a
   panel head with one control in it still looks like a panel head. */
.jwai-check {
  cursor: pointer;
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
  transition: border-color .16s ease;
}

.jwai-check:hover {
  border-color: var(--colors--primary);
}

.jwai-check input {
  accent-color: var(--colors--primary);
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}

.jwai-check:has(input:checked) {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.admin-optional {
  color: var(--colors--black-01);
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  /* it sits on the label's line, so it takes the label's height rather than
     the three times its own that it was inheriting */
  line-height: inherit;
}

/* the second half of a row that only has one field in it */
.admin-pair .form-fields-wrapper .form-field-wrap:empty {
  padding: 0;
}

/* --- the JSON editor ----------------------------------------------------- */
/*
  A code box, not a comment box: monospace, no wrapping, tabs that indent, and
  a gutter of line numbers that scrolls with the text - because the parser
  reports a line, and a message naming line 47 is no help beside a box with no
  line 47 to find.
*/
.admin-json {
  padding: 0;
  overflow: hidden;
}

.admin-json-head {
  border-bottom: 1px solid var(--colors--black-10);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 30px;
  display: flex;
  flex-wrap: wrap;
}

.admin-json-title .dash-subhead {
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  display: flex;
}

.admin-json-title .dash-panel-sub {
  max-width: 640px;
  margin: 0;
}

.admin-json-actions {
  flex: none;
  gap: 10px;
  display: flex;
}

.admin-json form {
  padding: 22px 30px 30px;
}

/* A window onto the document, not the whole document laid out flat. A long
   Skill runs to a few hundred lines; left to grow, the box pushed Save and the
   line-number gutter thousands of pixels down the page. Fixed height, the text
   scrolls inside it, and the corner drags if you want more room. */
.admin-json-editor {
  background-color: #fbfbfc;
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  display: flex;
  height: 560px;
  overflow: hidden;
  resize: vertical;
  transition: border-color .16s ease;
}

.admin-json-editor:focus-within {
  border-color: var(--colors--primary);
}

.admin-json-gutter {
  color: var(--colors--black-01);
  opacity: .38;
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
  white-space: pre;
  background-color: #f3f4f6;
  border-right: 1px solid var(--colors--black-10);
  flex: none;
  min-width: 52px;
  padding: 18px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 21px;
  height: 100%;
  overflow: hidden;
}

.admin-json-input {
  color: var(--colors--black-01);
  tab-size: 2;
  white-space: pre;
  background-color: var(--colors--transparent);
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 21px;
  overflow: auto;
  resize: none;
}

.admin-json-error {
  color: #d92d20;
  margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.admin-json-error[hidden] {
  display: none;
}

/* --- an API key, once ---------------------------------------------------- */
/* Shown at the moment it is made and never again, so it is set apart from the
   list rather than sitting in it looking like something that can be re-read. */
.admin-key-once {
  background-color: #3665fb0a;
  border: 1px solid #3665fb40;
  border-radius: 5px;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.admin-key-value {
  color: var(--colors--black-01);
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
  background-color: var(--colors--white);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .admin-json-gutter { display: none; }
  .admin-json form, .admin-json-head { padding-left: 18px; padding-right: 18px; }
}

/* --- cart states --------------------------------------------------------- */
.cart-items-col {
  min-width: 0;
}

/* these all set display themselves, which beats the [hidden] default, so the
   attribute has to be honoured explicitly or a hidden row still paints */
.cart-items[hidden],
.cart-empty[hidden],
.cart-summary[hidden],
.cart-summary-row[hidden] {
  display: none;
}

/* with the summary gone there is no second column to reserve, so the empty
   state gets the full width instead of sitting in a narrow gutter. It goes on
   an empty cart two ways: the server leaves the panel out of the page, and
   removing the last row hides the one already there. */
.cart-layout:has(.cart-summary[hidden]),
.cart-layout:not(:has(.cart-summary)) {
  grid-template-columns: minmax(0, 1fr);
}

/* removing a Skill fades its row rather than snapping the list upward */
.cart-row {
  transition: opacity .22s ease;
}

.cart-row.is-leaving {
  opacity: 0;
}

.cart-empty {
  text-align: center;
  background-color: var(--colors--white);
  border-radius: 5px;
  padding: 48px 28px;
  box-shadow: 0 4px 20px #1515150f;
}

.cart-empty .h5 {
  margin-bottom: 10px;
}

.cart-empty p {
  color: var(--colors--black-01);
  max-width: 420px;
  margin: 0 auto 24px;
}

.cart-empty .product-buy {
  display: inline-block;
}

/* --- responsive ---------------------------------------------------------- */
@media screen and (min-width: 992px) {
  /* Both columns are shorter than the page, so both travel rather than
     stranding whitespace - the summary on the cart and on the checkout, and
     the cart list itself once it is shorter than the viewport. align-self is
     required: the grid stretches its items by default, which leaves sticky no
     distance to travel. */
  .cart-summary {
    align-self: start;
    position: sticky;
    top: 110px;
  }

  .cart-items-col,
  .checkout-form-col {
    align-self: start;
  }
}

@media screen and (max-width: 991px) {
  .cart-section,
  .checkout-section {
    padding-top: var(--section-padding--tab);
    padding-bottom: var(--section-padding--tab);
  }

  /* A 320px summary against this container leaves the list about 350px wide,
     which is narrower than the card needs - so the columns stack here rather
     than at 767, and the summary runs full width above the button. */
  .cart-layout,
  .checkout-layout {
    grid-row-gap: 28px;
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-row {
    grid-column-gap: 20px;
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .cart-row .course-card-image-wrap {
    min-height: 118px;
  }
}

@media screen and (max-width: 767px) {
  .cart-section,
  .checkout-section {
    padding-top: var(--section-padding--mobile-l);
    padding-bottom: var(--section-padding--mobile-l);
  }

  .cart-row {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  /* stacked, the price would crowd the title, so it drops onto its own line */
  .cart-row-head {
    flex-flow: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media screen and (max-width: 479px) {
  .cart-section,
  .checkout-section {
    padding-top: var(--section-padding--mobile-p);
    padding-bottom: var(--section-padding--mobile-p);
  }

  .cart-row {
    grid-row-gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-row .course-card-image-wrap {
    min-height: 170px;
  }

  .cart-summary,
  .checkout-fieldset {
    padding: 22px;
  }
}


/* =========================================================================
   Shop flow - form fields.

   The label starts where the placeholder would be and rises into the top of
   the field once you focus it or type. It is pure CSS: :placeholder-shown is
   the "is this empty" test, which is why every input carries a single-space
   placeholder. No JavaScript, so it survives with scripting off - the label is
   simply always up.

   Each field also draws its own icon from a mask rather than an <img>, so the
   icon is right for the field and picks up the focus colour with it.
   ========================================================================= */

/* the label rises clear of the box rather than crowding into it, so the field
   keeps the same height as every other input on the site and the typed value
   sits on the line the placeholder was on. The padding is the row the label
   moves into, reserved up front so nothing shifts when it goes. */
.jwai-field {
  gap: 0;
  padding-top: 22px;
}

.jwai-field .input-field,
.jwai-field .input-field:focus {
  color: var(--colors--black-01);
}

/* A checkout field draws its icon on the wrap rather than in an
   .input-field-icon-wrap, so the rule that pulls the padding in for fields
   with no icon reads it as bare and runs the text under the icon. */
.jwai-field .input-field-wrap:not(:has(.input-field-icon-wrap)) .input-field {
  padding-left: 48px;
}

/* the resting label sits exactly where the placeholder text would be */
.jwai-label {
  color: var(--colors--black-01);
  pointer-events: none;
  font-size: 16px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 48px;
  transform: translateY(-50%);
  transition: top .16s ease, left .16s ease, font-size .16s ease, color .16s ease, transform .16s ease;
}

.jwai-field .input-field:focus ~ .jwai-label,
.jwai-field .input-field:not(:placeholder-shown) ~ .jwai-label {
  font-size: 13px;
  font-weight: 500;
  top: -20px;
  left: 0;
  transform: none;
}

.jwai-field .input-field:focus ~ .jwai-label {
  color: var(--colors--primary);
}

/* each field now carries its own label row, so the gap between them comes
   down by the same amount and the rhythm stays where it was */
.checkout-fieldset .form-fields-wrap,
.checkout-fieldset .form-fields-wrapper {
  grid-row-gap: 12px;
}

/* --- the icon ------------------------------------------------------------ */
.jwai-field .input-field-wrap:before {
  content: "";
  background-color: var(--colors--black-01);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: background-color .16s ease;
  z-index: 1;
}

.jwai-field:focus-within .input-field-wrap:before {
  background-color: var(--colors--primary);
}

.jwai-field[data-icon="user"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="mail"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="globe"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="pin"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="hash"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="card"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="calendar"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="lock"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="phone"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jwai-field[data-icon="building"] .input-field-wrap:before {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h.01M15 8h.01M9 12h.01M15 12h.01M10 21v-4h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h.01M15 8h.01M9 12h.01M15 12h.01M10 21v-4h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================================
   Signed-in header.

   The markup ships with Log In / Sign Up, which is right for a visitor and
   right if the script never runs. jwai-auth.js swaps in these two icons once
   the server confirms a session, so nothing here is ever shown to a visitor.
   ========================================================================= */

.jwai-nav-icons {
  align-items: center;
  gap: 8px;
  display: flex;
}

.jwai-icon-link {
  color: var(--colors--black-01);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  display: flex;
  transition: all .3s;
}

.jwai-icon-link svg {
  width: 21px;
  height: 21px;
  display: block;
}

.jwai-icon-link:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

/* Nothing here on a phone. The signed-in state used to keep its two icons in
   the header, so a phone had some way to reach the cart - but they landed
   against the logo on one side and the hamburger on the other, three things
   crowded into a strip built for two. Cart and Account are in the menu now,
   which is where the rest of the navigation lives. */

/* =========================================================================
   Account dashboard.

   Sidebar left, one panel of content right. The logo sits at the top of the
   sidebar and there is no site header or footer - inside the account the
   sidebar is the navigation, so a second nav would only compete with it.
   ========================================================================= */

/*
  The dashboard sets its own line-height and text size.

  It inherited the storefront's, which is 18px on a 1.8 line - right for a
  paragraph on a landing page, and wrong for every label, subtitle and value in
  a panel. At 15px that ratio is 2.16, at 13px it is 2.49, and on the word
  "optional" at 11px it was 2.95: text floating in nearly three times its own
  height, which is what made the admin look untidy however carefully each panel
  was spaced.

  15px because a dashboard is read at arm's length in dense rows, not scanned
  down a wide column. Anything that wants its own size still says so.
*/
.dash-body {
  background-color: var(--colors--bg-color);
  font-size: 15px;
  line-height: 1.45;
}

.dash {
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.dash[hidden] {
  display: none;
}

/* --- sidebar ------------------------------------------------------------- */
.dash-side {
  background-color: var(--colors--white);
  border-right: 1px solid var(--colors--black-10);
  flex-flow: column;
  gap: 34px;
  padding: 28px 20px;
  display: flex;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* The topbar and its backdrop are the drawer's, and the drawer only exists
   below the breakpoint. Above it the sidebar is simply there. */
.dash-topbar,
.dash-backdrop {
  display: none;
}

@keyframes dash-drawer-in  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes dash-drawer-out { from { transform: none; } to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  body.dash-nav-open .dash-side,
  body.dash-nav-closing .dash-side,
  body.dash-nav-open .dash-backdrop,
  body.dash-nav-closing .dash-backdrop {
    animation-duration: .01ms;
  }
}

/* max-width comes from .w-inline-block and would cap this at the content box,
   so the negative margins could not reach the sidebar's edges and the rule
   stopped short of them */
.dash-logo {
  border-bottom: 1px solid var(--colors--black-10);
  width: calc(100% + 40px);
  max-width: none;
  margin: 0 -20px;
  padding: 0 20px 26px;
  display: block;
}

.dash-logo img {
  width: 168px;
  display: block;
}

.dash-nav {
  flex-flow: column;
  gap: 4px;
  display: flex;
}

.dash-nav-link {
  cursor: pointer;
  color: var(--colors--black-01);
  text-align: left;
  /* the grey that used to be the hover: at rest each item reads as an item
     rather than as bare text sitting on the sidebar */
  background-color: var(--colors--bg-color);
  border: 0;
  border-radius: 5px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  transition: all .3s;
}

.dash-nav-link svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* Hover and active are the same state to look at: the grey in between read as
   a third, disabled-ish state and made the real selection harder to find. */
.dash-nav-link:hover,
.dash-nav-link:focus-visible,
.dash-nav-link.is-active {
  background-color: var(--colors--primary);
  color: var(--colors--white);
  outline: none;
}

/* --- who you are, and the way out ---------------------------------------- */
.dash-side-foot {
  flex-flow: column;
  gap: 14px;
  margin-top: auto;
  display: flex;
}

.dash-who {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.dash-avatar {
  background-color: var(--colors--primary);
  color: var(--colors--white);
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.dash-who-text {
  min-width: 0;
}

.dash-who-name {
  color: var(--colors--black-01);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.dash-who-mail {
  color: var(--colors--black-01);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.dash-logout {
  cursor: pointer;
  color: var(--colors--black-01);
  background-color: var(--colors--transparent);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  transition: all .3s;
}

.dash-logout svg {
  width: 17px;
  height: 17px;
}

.dash-logout:hover {
  border-color: #d92d20;
  color: #d92d20;
}

/* The way back to the panel wears the Log Out button's shape - it sits beside
   it - but not its red hover, which means leaving. */
.jwai-admin-link {
  text-decoration: none;
  margin-bottom: 10px;
}

.jwai-admin-link:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.jwai-admin-link[hidden] {
  display: none;
}

/* --- content ------------------------------------------------------------- */
.dash-main {
  min-width: 0;
  padding: 40px;
}

.dash-panel {
  display: none;
}

.dash-panel.is-active {
  display: block;
}

.dash-panel-head {
  margin-bottom: 24px;
}

.dash-panel-title {
  color: var(--colors--black-01);
  margin: 0 0 6px;
}

.dash-panel-sub {
  color: var(--colors--black-01);
  margin: 0;
  font-size: 15px;
}

.dash-card {
  background-color: var(--colors--white);
  border-radius: 5px;
  width: 100%;
  padding: 30px;
  box-shadow: 0 4px 20px #1515150f;
}

.dash-subhead {
  color: var(--colors--black-01);
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 600;
}

/* --- the email you cannot change ----------------------------------------- */
.dash-readonly {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  margin-bottom: 28px;
  padding: 18px 20px;
}

.dash-readonly-label {
  color: var(--colors--black-01);
  font-size: 13px;
  font-weight: 600;
}

.dash-readonly-value {
  color: var(--colors--black-01);
  margin: 4px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.dash-readonly-note {
  color: var(--colors--black-01);
  font-size: 13px;
  line-height: 1.5;
}

.dash-form-foot {
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
}

/* A secondary action standing beside Save should be the same height as it.
   Left alone it takes the site's 32px line and comes out 50px against Save's
   46, which reads as two buttons from two different forms. */
.dash-form-foot .dash-method-action {
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
}

/* .product-buy is sized for a hero, which put a 62px submit at the foot of a
   form whose fields are 56px. A form action is not the loudest thing on the
   page it sits on. This is the account's Save Changes as well as the admin's,
   which is the point - the two dashboards use one button. */
.dash-save {
  cursor: pointer;
  border: 0;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
}

.dash-save:disabled {
  cursor: default;
  opacity: .6;
}

.dash-msg {
  font-size: 14px;
}

.dash-msg.is-ok {
  color: var(--colors--primary);
}

.dash-msg.is-error {
  color: #d92d20;
}

.dash-msg[hidden] {
  display: none;
}

/* --- payment methods ----------------------------------------------------- */
.dash-note {
  background-color: #3665fb0d;
  color: var(--colors--black-01);
  border-radius: 5px;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.55;
  display: flex;
}

.dash-note svg {
  color: var(--colors--primary);
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.dash-methods {
  flex-flow: column;
  gap: 12px;
  display: flex;
}

.dash-methods:empty {
  display: none;
}

.dash-method {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  display: flex;
}

.dash-method.is-default {
  border-color: var(--colors--primary);
}

.dash-method-brand {
  background-color: var(--colors--bg-color);
  color: var(--colors--black-01);
  text-transform: uppercase;
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 36px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.dash-method-main {
  flex: 1;
  min-width: 0;
}

.dash-method-number {
  color: var(--colors--black-01);
  font-size: 15px;
  font-weight: 600;
}

.dash-method-meta {
  color: var(--colors--black-01);
  text-transform: capitalize;
  font-size: 13px;
}

.dash-method-tag {
  color: var(--colors--primary);
  font-size: 13px;
  font-weight: 600;
}

/* A height of its own, rather than whatever the site's 32px line gives it.
   Left to the line-height this came out at 50px in a panel head - taller than
   the 46px Save it sits above, so the quiet action was the loudest button on
   the page. 34px sits under Save and above the 30px used inside a row. */
.dash-method-action {
  cursor: pointer;
  color: var(--colors--black-01);
  background-color: var(--colors--transparent);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  transition: all .3s;
}

.dash-method-action:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.dash-method-remove {
  cursor: pointer;
  background-color: var(--colors--transparent);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  position: relative;
  transition: all .3s;
}

.dash-method-remove:after {
  content: "";
  background-color: var(--colors--black-01);
  width: 16px;
  height: 16px;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m2.5 0-.8 13.1a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6m2.5 0-.8 13.1a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

.dash-method-remove:hover {
  border-color: #d92d20;
}

.dash-method-remove:hover:after {
  background-color: #d92d20;
}

.dash-add-method {
  border-top: 1px solid var(--colors--black-10);
  margin-top: 28px;
  padding-top: 28px;
}

/* --- orders -------------------------------------------------------------- */
.dash-orders {
  flex-flow: column;
  gap: 12px;
  display: flex;
}

.dash-orders:empty {
  display: none;
}

.dash-order {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  display: flex;
}

.dash-order-main {
  flex: 1;
  min-width: 0;
}

.dash-order-ref {
  color: var(--colors--black-01);
  font-size: 15px;
  font-weight: 600;
}

.dash-order-meta {
  color: var(--colors--black-01);
  font-size: 13px;
}

.dash-order-total {
  color: var(--colors--black-01);
  font-size: 16px;
  font-weight: 700;
}

.dash-order-status {
  text-transform: capitalize;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.dash-order-status.is-paid {
  background-color: #3665fb1a;
  color: var(--colors--primary);
}

/* "Saved" is not a problem, so it should not wear the colour that failures
   and refunds wear. */
/* "Saved" and "off" are not problems, so they do not wear the colour failures
   wear - but a grey chip on a grey page reads as nothing at all, so this one
   carries a line instead of relying on its fill. */
.dash-order-status.is-idle {
  background-color: var(--colors--white);
  color: var(--colors--black-01);
  box-shadow: inset 0 0 0 1px var(--colors--black-10);
}

.dash-order-status.is-refunded,
.dash-order-status.is-failed {
  background-color: #d92d201a;
  color: #d92d20;
}

/* --- empty states -------------------------------------------------------- */
.dash-empty {
  text-align: center;
  padding: 40px 20px;
}

.dash-empty[hidden] {
  display: none;
}

.dash-empty .h6 {
  margin-bottom: 8px;
}

.dash-empty p {
  color: var(--colors--black-01);
  max-width: 380px;
  margin: 0 auto 20px;
  font-size: 15px;
}

.dash-empty .product-buy {
  display: inline-block;
}

/* --- boot screen --------------------------------------------------------- */
.dash-boot {
  background-color: var(--colors--bg-color);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.dash-boot-inner {
  text-align: center;
  color: var(--colors--black-01);
}

.dash-spinner {
  border: 2px solid var(--colors--black-10);
  border-top-color: var(--colors--primary);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  animation: jwai-spin .7s linear infinite;
}

@keyframes jwai-spin {
  to { transform: rotate(360deg); }
}

/* An <input> takes the field's 20px of vertical padding happily. A <select>
   does not: its text is one unbreakable line, and 20px top and bottom leaves
   14px to draw it in, so the words come out sliced. */
.dash-form select.input-field,
.jwai-field select.input-field {
  padding-top: 0;
  padding-bottom: 0;
}

/* a <select> has no placeholder, so its label starts where the others land */
.jwai-label.is-fixed {
  font-size: 13px;
  font-weight: 500;
  top: -20px;
  left: 0;
  transform: none;
}

/* The browser draws its own arrow on a select, and it is a different shape, a
   different size and a different colour on every platform - so the admin's
   dropdowns looked like nothing else on the site. This one is the site's own
   chevron, drawn as a mask on the wrap rather than a background on the select,
   so it takes the field's colour and turns primary with it on focus. The
   select keeps room for it on the right. */
select.input-field {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
}

.input-field-wrap:has(select.input-field):after {
  content: "";
  background-color: var(--colors--black-01);
  width: 15px;
  height: 15px;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: background-color .16s ease;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.input-field-wrap:has(select.input-field:focus):after {
  background-color: var(--colors--primary);
}

/* --- responsive ---------------------------------------------------------- */
@media screen and (max-width: 991px) {
  /*
    The sidebar becomes a drawer.

    It used to flatten into a strip across the top, which meant seven links
    wrapped into rows of icons with their names hidden - a row of pictograms
    and no way to tell Orders from Payments. A drawer keeps the sidebar as it
    is, names and all, and gives the page back its full width.

    Same behaviour as the storefront's menu, because it is the same gesture:
    a topbar with the logo and a hamburger, a panel that slides in, a backdrop
    that closes it.
  */
  .dash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dash-topbar {
    z-index: 1001;
    background-color: var(--colors--white);
    border-bottom: 1px solid var(--colors--black-10);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    display: flex;
    position: sticky;
    top: 0;
  }

  .dash-topbar .dash-logo {
    border-bottom: 0;
    width: auto;
    margin: 0;
    padding: 0;
  }

  /* The panel itself: off to the left until asked for, and mounted only while
     open so it cannot be reached by tabbing through a closed drawer. */
  .dash-side {
    z-index: 1002;
    border-right: 1px solid var(--colors--black-10);
    border-bottom: 0;
    gap: 24px;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    padding: 24px 20px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
  }

  body.dash-nav-open .dash-side,
  body.dash-nav-closing .dash-side {
    display: flex;
  }

  body.dash-nav-open .dash-side {
    animation: dash-drawer-in .28s ease both;
  }

  body.dash-nav-closing .dash-side {
    animation: dash-drawer-out .26s ease both;
  }

  /* The full-bleed width that carries the logo's border across the sidebar has
     to go with the negative margin that paid for it. */
  .dash-logo {
    width: 100%;
  }

  /* A drawer has room for the names, so they come back. */
  .dash-nav {
    flex-flow: column;
    gap: 6px;
    overflow-x: visible;
  }

  .dash-nav-link {
    justify-content: flex-start;
    width: 100%;
    white-space: nowrap;
  }

  .dash-side-foot {
    margin-top: auto;
  }

  .dash-backdrop {
    z-index: 1000;
    background-color: #15151559;
    display: none;
    position: fixed;
    inset: 0;
  }

  body.dash-nav-open .dash-backdrop,
  body.dash-nav-closing .dash-backdrop {
    display: block;
  }

  body.dash-nav-open .dash-backdrop {
    animation: jwai-bd-in .22s ease both;
  }

  body.dash-nav-closing .dash-backdrop {
    animation: jwai-bd-out .22s ease both;
  }

  body.dash-nav-open {
    overflow: hidden;
  }

  .dash-main {
    padding: 28px 20px;
  }
}

@media screen and (max-width: 767px) {
  .dash-card {
    padding: 22px;
  }

  /* Said again here, because the line above is later in the file than the
     top-level rule and was handing these cards their padding back - which put
     their headings 22px further in than the rest. */
  .dash-card:has(> .admin-pair-head),
  .dash-card:has(> .admin-json-head) {
    padding: 0;
  }

  /* And the head and body they bring keep to the same inset as a plain card,
     rather than the 30px the desktop uses. */
  .admin-pair-head,
  .admin-pair-body,
  .admin-json-head,
  .admin-json form {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* The names stay. They were hidden here because the sidebar used to flatten
     into a row of icons with no room for them; it is a drawer now, and a drawer
     that says "Orders" beats one that shows a box. */
  .dash-nav-link {
    padding: 12px;
  }

  .dash-method,
  .dash-order {
    flex-wrap: wrap;
  }
}

/* =========================================================================
   Admin - the rich text editor.

   Built on contenteditable rather than a dependency: the whole surface is a
   dozen commands, and a bundled editor would arrive with its own stylesheet to
   fight with this one.
   ========================================================================= */

.jwai-editor {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  overflow: hidden;
}

.jwai-editor-bar {
  background-color: var(--colors--bg-color);
  border-bottom: 1px solid var(--colors--black-10);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px;
  display: flex;
}

.jwai-editor-btn {
  cursor: pointer;
  color: var(--colors--black-01);
  background-color: var(--colors--white);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  min-width: 32px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  transition: all .2s;
}

.jwai-editor-btn:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.jwai-editor-sep {
  background-color: var(--colors--black-10);
  width: 1px;
  height: 20px;
  margin: 0 4px;
}

.jwai-editor-area {
  color: var(--colors--black-01);
  background-color: var(--colors--white);
  min-height: 260px;
  padding: 20px;
  font-size: 16px;
  line-height: 1.7;
  overflow-y: auto;
}

.jwai-editor-area:focus {
  outline: none;
}

/* the editor shows the shape of the article, not the site's full type scale */
.jwai-editor-area h2 { margin: 22px 0 10px; font-size: 24px; font-weight: 700; }
.jwai-editor-area h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 700; }
.jwai-editor-area p { margin: 0 0 14px; }
.jwai-editor-area ul,
.jwai-editor-area ol { margin: 0 0 14px; padding-left: 22px; }
.jwai-editor-area li { margin-bottom: 6px; }
.jwai-editor-area a { color: var(--colors--primary); }
.jwai-editor-area img { border-radius: 5px; max-width: 100%; height: auto; }

.jwai-editor-area blockquote {
  border-left: 3px solid var(--colors--primary);
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  color: var(--colors--black-03);
}

/* --- repeatable rows in the section editor ------------------------------- */
.jwai-repeat {
  flex-flow: column;
  gap: 14px;
  display: flex;
}

.jwai-repeat-row {
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  padding: 18px;
  position: relative;
}

.jwai-repeat-row .form-fields-wrap {
  gap: 14px;
}

.jwai-repeat-remove {
  cursor: pointer;
  background-color: var(--colors--white);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  position: absolute;
  top: 12px;
  right: 12px;
  transition: all .2s;
}

.jwai-repeat-remove:after {
  content: "";
  background-color: var(--colors--black-01);
  width: 13px;
  height: 13px;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
}

.jwai-repeat-remove:hover {
  border-color: #d92d20;
}

.jwai-repeat-remove:hover:after {
  background-color: #d92d20;
}

.jwai-repeat-add {
  cursor: pointer;
  color: var(--colors--black-01);
  background-color: var(--colors--transparent);
  border: 1px dashed var(--colors--black-09);
  border-radius: 5px;
  width: 100%;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  transition: all .2s;
}

.jwai-repeat-add:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.jwai-section-block {
  border-top: 1px solid var(--colors--black-10);
  margin-top: 28px;
  padding-top: 28px;
}

.jwai-section-block:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.jwai-section-label {
  color: var(--colors--black-01);
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}

.jwai-section-kind {
  background-color: var(--colors--bg-color);
  color: var(--colors--black-03);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
}

/* =========================================================================
   Admin - panel layout.
   ========================================================================= */

.admin-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
}

/* .product-buy is the storefront's call to action, sized for a hero. Sitting
   beside a page title it came out 62px tall, taller than the rows it adds to,
   so here it takes a header's size instead. */
.admin-head .product-buy,
.admin-head .product-secondary {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  /* flex: none, because the storefront button grows. Beside a page title that
     let it swallow every spare pixel - 232px of "New Skill" next to an 83px
     heading on a phone. A header action is the width of its own words. */
  flex: none;
  height: 42px;
  padding: 0 22px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
}

/* The account puts its rows inside one panel, bordered rather than floating.
   The admin used to give every row and every figure its own drop shadow,
   which read as a different product sitting behind the same sidebar. */
.admin-stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}

.admin-stat {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .3s;
  position: relative;
}

.admin-stat:hover {
  border-color: var(--colors--primary);
}

/* the same tint the paid badge uses, so the admin keeps to one blue */
.admin-stat-icon {
  color: var(--colors--primary);
  background-color: #3665fb1a;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
  position: absolute;
  top: 20px;
  right: 20px;
}

.admin-stat-icon svg {
  width: 18px;
  height: 18px;
}

/* the icon sits on this line, so the figure stops before it rather than
   running underneath once the count reaches four digits */
.admin-stat-value {
  color: var(--colors--black-01);
  padding-right: 48px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.admin-stat-label {
  color: var(--colors--black-01);
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
}

.admin-stat-note {
  color: var(--colors--black-01);
  margin-top: 2px;
  font-size: 13px;
}

/* the same list the account uses for orders and downloads */
.admin-table {
  flex-flow: column;
  gap: 12px;
  display: flex;
}

.admin-row {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  display: flex;
  transition: border-color .3s;
}

.admin-row:hover {
  border-color: var(--colors--primary);
}

/* flex:none matters - without it the thumbnail takes its intrinsic width and
   pushes the whole row into a column */
/* The row's controls, grouped so they stay together when the row wraps. On a
   wide screen the group is invisible: it lays its children out exactly as the
   row would have, with the row's own gap. */
.admin-row-actions {
  align-items: center;
  flex: none;
  gap: 16px;
  display: flex;
}

.admin-row-thumb {
  object-fit: cover;
  border-radius: 5px;
  flex: none;
  width: 64px;
  height: 48px;
}

/* Body copy on this site runs at a 32px line, which is right for a paragraph
   and wrong for a row: it opened a gap between the title and its path, stood
   the badge up at 42px and the Edit button at 50px, and left the three
   controls at three different heights. These rows set their own. */
.admin-row-main {
  flex-flow: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.admin-row-title {
  color: var(--colors--black-01);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.admin-row-meta {
  color: var(--colors--black-01);
  font-size: 13px;
  line-height: 1.45;
}

.admin-row-meta a {
  color: var(--colors--primary);
  text-decoration: none;
}

/* the figure and the badge hold a column each, so the buttons at the end of
   every row line up however long the price or the status is */
.admin-row-price {
  color: var(--colors--black-01);
  text-align: right;
  white-space: nowrap;
  min-width: 68px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.admin-row .dash-order-status {
  text-align: center;
  flex: none;
  min-width: 84px;
  line-height: 1;
  padding: 7px 10px;
}

/* a count sitting beside the row rather than inside it, so it holds its own
   column instead of pushing the tag and the button about as the number grows */
.admin-row > .admin-row-meta {
  text-align: right;
  flex: none;
  min-width: 76px;
  line-height: 1;
}

.admin-row .dash-method-tag {
  text-align: center;
  flex: none;
  min-width: 52px;
  line-height: 1;
}

/* one height for both controls, so they read as a pair rather than as two
   things that happen to sit next to each other. 30px keeps them under the
   26px badge's weight and well inside the row rather than filling it. */
.admin-row .dash-method-action {
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  line-height: 1;
  display: inline-flex;
}

.admin-row .dash-method-remove {
  width: 30px;
  height: 30px;
}

.admin-row .dash-avatar {
  flex: none;
}

.admin-sections {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  /*
    The row stacks instead of shrinking.

    flex-wrap alone was not enough: the middle column is flex: 1 1 0 with
    min-width: 0, so beside a 68px price and an 84px badge it collapsed to 69px
    and the order reference broke over three lines while the email ran out past
    its own box. What wrapped was the last button, which is the one thing that
    had room.

    So the title and its detail take a line of their own - beside the thumbnail,
    which is only 64px - and the price, the state and the buttons share the line
    underneath, in that order, aligned left with everything else.
  */
  .admin-row {
    flex-wrap: wrap;
    align-items: center;
    /* 12, not 16: the second line carries a price, a state, Edit and a delete
       button, and at 16 the last of them tipped onto a third line by itself. */
    column-gap: 12px;
    row-gap: 14px;
  }

  .admin-row-main {
    flex: 1 1 calc(100% - 84px);
    min-width: 0;
  }

  /* no thumbnail on this row, so the main block has the whole line */
  .admin-row:not(:has(.admin-row-thumb)):not(:has(.dash-avatar)) .admin-row-main {
    flex-basis: 100%;
  }

  /* the price stops being a fixed column and just sits where it falls */
  .admin-row-price {
    min-width: 0;
  }

  /* The buttons are one thing, so they wrap as one. Loose, the delete button
     was a sibling like any other and dropped onto a line by itself whenever
     the values above it ran long - which on the widest row meant three lines
     for what is really a title, some numbers and two controls. */
  .admin-row-actions {
    margin-left: auto;
  }
}

/* --- admin: image upload ------------------------------------------------- */
.jwai-upload {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  display: flex;
}

.jwai-upload-input {
  display: none;
}

/* the same 30px the row controls use - it is a helper beside a field, not an
   action of its own */
.jwai-upload-btn {
  cursor: pointer;
  color: var(--colors--black-01);
  background-color: var(--colors--white);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  transition: all .2s;
}

.jwai-upload-btn:hover {
  border-color: var(--colors--primary);
  color: var(--colors--primary);
}

.jwai-upload-btn:disabled {
  cursor: default;
  opacity: .6;
}

.jwai-upload-note {
  font-size: 13px;
}

.jwai-upload-note.is-ok {
  color: var(--colors--primary);
}

.jwai-upload-note.is-error {
  color: #d92d20;
}

.jwai-upload-preview {
  object-fit: cover;
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  flex-basis: 100%;
  width: 120px;
  height: 76px;
}

.jwai-upload-preview[hidden] {
  display: none;
}

.jwai-json-toggle {
  cursor: pointer;
  background-color: var(--colors--transparent);
  margin-bottom: 16px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  display: inline-block;
}

/* --- admin: the JSON section editor -------------------------------------- */
.jwai-json-hint {
  color: var(--colors--black-01);
  background-color: var(--colors--bg-color);
  border-radius: 5px;
  margin-bottom: 14px;
  padding: 12px 16px;
  font-size: 13px;
}

.jwai-json-hint summary {
  cursor: pointer;
  font-weight: 600;
}

.jwai-json-hint pre {
  color: var(--colors--black-03);
  margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.jwai-json-count {
  margin-top: 10px;
  font-size: 13px;
}

.jwai-json-count.is-error {
  color: #d92d20;
}

/* =========================================================================
   Account - downloads and the order detail view.
   ========================================================================= */

.dash-downloads {
  flex-flow: column;
  gap: 12px;
  display: flex;
}

.dash-download {
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  display: flex;
  transition: border-color .3s;
}

.dash-download:hover {
  border-color: var(--colors--primary);
}

.dash-download-thumb {
  object-fit: cover;
  border-radius: 5px;
  flex: none;
  width: 64px;
  height: 48px;
}

.dash-download-main {
  flex: 1;
  min-width: 0;
}

.dash-download-name {
  color: var(--colors--black-01);
  font-size: 15px;
  font-weight: 600;
}

.dash-download-meta {
  color: var(--colors--black-01);
  font-size: 13px;
}

/* The same height as this page's own Save Changes. Sized by padding alone it
   came out at 54px against Save's 46, so the two buttons on one dashboard were
   two different buttons. */
.dash-download-btn {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  flex: none;
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
}

/* --- one order --- */
.dash-order.is-clickable {
  cursor: pointer;
  transition: border-color .3s;
}

.dash-order.is-clickable:hover,
.dash-order.is-clickable:focus-visible {
  border-color: var(--colors--primary);
  outline: none;
}

.dash-order-detail[hidden] {
  display: none;
}

.dash-detail-head {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
}

.dash-detail-head .product-secondary {
  cursor: pointer;
  background-color: var(--colors--transparent);
  padding: 9px 18px;
  font-family: inherit;
  font-size: 14px;
}

.dash-order-detail .cart-summary-lines {
  gap: 10px;
}

.dash-order-detail .dash-form-foot .product-buy {
  cursor: pointer;
  border: 0;
  font-family: inherit;
}

/* --- mobile ------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .dash-logo {
    border-bottom: 0;
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .dash-card {
    padding: 22px;
  }

  /* the button drops under the name rather than squeezing it */
  .dash-download {
    flex-wrap: wrap;
  }

  .dash-download-main {
    flex-basis: calc(100% - 80px);
  }

  .dash-download-btn {
    flex-basis: 100%;
    text-align: center;
  }

  .dash-detail-head {
    flex-flow: column-reverse;
    align-items: flex-start;
  }
}


/* =========================================================================
   Form field icons, and the show/hide password button.

   The icons are masks rather than image files, so each field gets one that
   belongs to it, they all inherit the field's colour, and adding another needs
   no new asset. The template only shipped a handful of icon images, which is
   why six different fields were all wearing the same one.
   ========================================================================= */

.input-field-icon-wrap[data-icon]:after {
  content: "";
  background-color: var(--colors--black-03);
  width: 20px;
  height: 20px;
  display: block;
  transition: background-color .2s;
}

.input-field-wrap:focus-within .input-field-icon-wrap[data-icon]:after {
  background-color: var(--colors--primary);
}

.input-field-icon-wrap[data-icon="user"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="mail"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="phone"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="building"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h.01M15 8h.01M9 12h.01M15 12h.01M10 21v-4h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h.01M15 8h.01M9 12h.01M15 12h.01M10 21v-4h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="globe"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="pin"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="hash"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="tag"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="file"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="lock"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="card"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input-field-icon-wrap[data-icon="calendar"]:after {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- show / hide password ------------------------------------------------ */
.jwai-eye {
  cursor: pointer;
  color: var(--colors--black-03);
  background-color: var(--colors--transparent);
  border: 0;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  transition: color .2s;
}

.jwai-eye svg {
  width: 19px;
  height: 19px;
  display: block;
}

.jwai-eye:hover,
.jwai-eye:focus-visible {
  color: var(--colors--primary);
  outline: none;
}

/* the toggle sits where the text would otherwise run underneath it */
.jwai-has-eye .input-field,
.jwai-has-eye .password-input-field {
  padding-right: 52px;
}


/* The 48px on the left of a field is the space its icon sits in. A field with
   no icon - a password, once its eye moved to the right - was holding that
   space open for nothing, so the text started a long way in. */
.input-field-wrap:not(:has(.input-field-icon-wrap)) .input-field,
.input-field-wrap:not(:has(.input-field-icon-wrap)) .password-input-field,
.password-wrap:not(:has(.input-field-icon-wrap)) .password-input-field,
.password-wrap:not(:has(.input-field-icon-wrap)) .input-field {
  padding-left: 20px;
}


/* The breadcrumb the badge already showed, now a nav so a crawler and a screen
   reader can tell it is one. display:contents so it adds no box: the badge lays
   out exactly as it did before. */
.jwai-crumbs {
  display: contents;
}


/* =========================================================================
   "See the deliverable first".

   Every paid pack in product line 01 ships a complete worked example, and the
   examples are published free. The link belongs beside the price, because it
   answers the question a reader has before they have decided to buy, not
   after. Quiet enough that it does not compete with the buy button, on its own
   line so it does not read as a second call to action sitting next to the
   first.
   ========================================================================= */

.product-example-link {
  color: var(--colors--black-03);
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}

.product-example-link:hover {
  color: var(--colors--primary);
}


/* =========================================================================
   Tables and code inside an article.

   The worked examples publish as posts, and the substance of several of them
   is tabular - a score table, a debt ledger, ten lost deals with the reason
   each one died. The stylesheet had only the Webflow reset for a table, so
   they arrived unruled and ran off the side on a phone. The wrapper scrolls
   rather than the page: a wide table is the one thing on the page allowed its
   own horizontal scroll.
   ========================================================================= */

.blog-details-rich-content table {
  width: 100%;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  border-collapse: collapse;
  overflow: hidden;
}

.blog-details-rich-content th,
.blog-details-rich-content td {
  border-bottom: 1px solid var(--colors--black-10);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.blog-details-rich-content th {
  background-color: var(--colors--bg-color);
  font-weight: 600;
}

.blog-details-rich-content tr:last-child td {
  border-bottom: 0;
}

/* The scroller the converter wraps every table in. A <figure> rather than a
   <div>, because sanitize() in lib/blog.js keeps figure and drops the class
   attribute - so the wrapper has to be a tag the stylesheet can find on its
   own. :has() is already used elsewhere in this file. */
.blog-details-rich-content figure:has(> table) {
  max-width: 100%;
  margin: 24px 0;
  overflow-x: auto;
}

.blog-details-rich-content figure:has(> table) > table {
  min-width: 560px;
  margin: 0;
}

.blog-details-rich-content pre {
  background-color: var(--colors--bg-color);
  border: 1px solid var(--colors--black-10);
  border-radius: 5px;
  margin: 24px 0;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.blog-details-rich-content pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}