@charset "UTF-8";
:root {
  interpolate-size: allow-keywords; /* this is what makes animating to height:auto possible */
}

.todo {
  background: skyblue;
  outline: 5px dashed blue;
  outline-offset: 5px;
  margin: 2rem 0;
}

html {
  height: 100%;
  color: #f5f5f5;
  overflow-x: hidden;
  background: #0e0e0e;
}

body {
  background-size: cover;
  margin: 0;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
}

[data-theme=light] body:is(.chapters, .toolkit) {
  background: #fff;
  color: #000;
}

main {
  flex: 1;
}
main:focus {
  outline: none;
}

.content-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--space-s-l);
}

@media all and (min-width: 64rem) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 2rem;
  }
}
.sellup .grid {
  grid-gap: 0;
}

@media all and (min-width: 64rem) {
  .two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-4xl);
  }
}

.section {
  padding: var(--space-3xl) 0;
}
.section h2 {
  font-weight: 800;
  margin-bottom: var(--space-l);
}
.homepage .section h2 {
  text-align: center;
}

.section--light {
  background-color: #fff;
  color: #111;
}
.section--light .section-intro {
  color: var(--grey-on-white);
}

.section--dark .section-intro {
  color: var(--grey-on-black);
}

.section--grey {
  color: #000;
  background: #ddd;
}

.section--purple {
  background: var(--color-brand);
  color: #000;
}
.section--purple mark {
  background-color: #000;
  color: #fff;
}

.subsection {
  margin-bottom: var(--space-3xl);
}

.subscription-confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step-2);
}

#original-price {
  color: #aaa;
}

.btn #original-price {
  color: hsl(315, 50%, 90%);
}

:root,
[data-theme=light] {
  --color-highlight: hsl(300, 50%, 85%);
  --color-code: hsl(260, 95%, 95%);
  --color-brand: #8866bb;
  --color-accent: var(--color-brand);
  --color-code: hsl(260, 95%, 95%);
  --supporting-text-color: hsl(268, 10.4%, 75%);
  --secondary-supporting-text-color: #aaa;
  --bg-color: hsl(268, 47.4%, 97%);
  --text-color: #111;
  --link-color: inherit;
  --border-color: #888;
  --outline-border: hsl(268, 10%, 88%);
  --grey-on-white: #666;
  --grey-on-black: #aaa;
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1500,18,1.2,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1500;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1500px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --f--2-min: 12.64;
  --f--2-max: 12.50;
  --step--2: calc(
    ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) *
      var(--fluid-bp)
  );
  --f--1-min: 14.22;
  --f--1-max: 15.00;
  --step--1: calc(
    ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
      var(--fluid-bp)
  );
  --f-0-min: 16.00;
  --f-0-max: 18.00;
  --step-0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );
  --f-1-min: 18.00;
  --f-1-max: 21.60;
  --step-1: calc(
    ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );
  --f-2-min: 20.25;
  --f-2-max: 25.92;
  --step-2: calc(
    ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );
  --f-3-min: 22.78;
  --f-3-max: 31.10;
  --step-3: calc(
    ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );
  --f-4-min: 25.63;
  --f-4-max: 37.32;
  --step-4: calc(
    ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );
  --f-5-min: 28.83;
  --f-5-max: 44.79;
  --step-5: calc(
    ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
      var(--fluid-bp)
  );
  --f-6-min: 32.44;
  --f-6-max: 53.75;
  --step-6: calc(
    ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) *
      var(--fluid-bp)
  );
  --f-7-min: 36.49;
  --f-7-max: 64.50;
  --step-7: calc(
    ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) *
      var(--fluid-bp)
  );
  --f-8-min: 41.05;
  --f-8-max: 77.40;
  --step-8: calc(
    ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min)) *
      var(--fluid-bp)
  );
  --f-9-min: 46.18;
  --f-9-max: 92.88;
  --step-9: calc(
    ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) *
      var(--fluid-bp)
  );
  --f-10-min: 51.96;
  --f-10-max: 111.45;
  --step-10: calc(
    ((var(--f-10-min) / 16) * 1rem) + (var(--f-10-max) - var(--f-10-min)) *
      var(--fluid-bp)
  );
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1500,20,1.2,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7|8,s-l|m-xl|m-2xl|m-3xl|l-2xl|l-3xl|2xl-4xl|3xl-4xl|3xl-5xl|xl-5xl|2xl-5xl|xl-4xl|xl-3xl */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1500;
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1500px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --fc-3xs-min: (var(--fc-s-min) * 0.25);
  --fc-3xs-max: (var(--fc-s-max) * 0.25);
  --fc-2xs-min: (var(--fc-s-min) * 0.5);
  --fc-2xs-max: (var(--fc-s-max) * 0.5);
  --fc-xs-min: (var(--fc-s-min) * 0.75);
  --fc-xs-max: (var(--fc-s-max) * 0.75);
  --fc-s-min: (var(--f-0-min, 16));
  --fc-s-max: (var(--f-0-max, 20));
  --fc-m-min: (var(--fc-s-min) * 1.5);
  --fc-m-max: (var(--fc-s-max) * 1.5);
  --fc-l-min: (var(--fc-s-min) * 2);
  --fc-l-max: (var(--fc-s-max) * 2);
  --fc-xl-min: (var(--fc-s-min) * 3);
  --fc-xl-max: (var(--fc-s-max) * 3);
  --fc-2xl-min: (var(--fc-s-min) * 4);
  --fc-2xl-max: (var(--fc-s-max) * 4);
  --fc-3xl-min: (var(--fc-s-min) * 6);
  --fc-3xl-max: (var(--fc-s-max) * 6);
  --fc-4xl-min: (var(--fc-s-min) * 7);
  --fc-4xl-max: (var(--fc-s-max) * 7);
  --fc-5xl-min: (var(--fc-s-min) * 8);
  --fc-5xl-max: (var(--fc-s-max) * 8);
  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp));
  --space-5xl: calc(((var(--fc-5xl-min) / 16) * 1rem) + (var(--fc-5xl-max) - var(--fc-5xl-min)) * var(--fluid-bp));
  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  --space-4xl-5xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-5xl-max) - var(--fc-4xl-min)) * var(--fluid-bp));
  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-xl: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-m-2xl: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-m-3xl: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-2xl-4xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  --space-3xl-5xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-5xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  --space-xl-5xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-5xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-5xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-5xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
}

:root {
  --a11y-font: "Atkinson Hyperlegible";
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  	"Segoe UI Symbol";
}

body {
  font-size: var(--step-0);
  line-height: 1.7;
  font-family: var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: var(--font);
  text-wrap: balance;
}
.transcript h1,
.transcript h2,
.transcript h3,
.transcript h4,
.transcript h5,
.transcript h6 {
  margin: revert;
}
h1.underlined,
h2.underlined,
h3.underlined,
h4.underlined,
h5.underlined,
h6.underlined {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #888;
  margin-bottom: var(--space-xl);
}

h1,
h2 {
  font-weight: 800;
}

.h-display {
  font-size: var(--step-8);
  letter-spacing: -2px;
  line-height: 1;
  font-weight: 900;
}

.h0 {
  font-size: var(--step-6);
  letter-spacing: -1px;
  line-height: 1.2;
  font-weight: 900;
}

.h-1 {
  font-size: var(--step-7);
  letter-spacing: -2px;
  line-height: 1.1;
  font-weight: 900;
}

h1,
.h1 {
  font-size: var(--step-5);
  letter-spacing: -1px;
  line-height: 1.2;
  font-weight: 740;
}

h2,
.h2 {
  font-size: var(--step-4);
  letter-spacing: -1px;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: initial;
}

h4,
.h4 {
  font-size: var(--step-2);
  letter-spacing: initial;
}

h5,
.h5,
h6,
.h6 {
  font-size: var(--step-1);
  margin-bottom: 0.5em;
  letter-spacing: initial;
}

small,
caption,
cite,
figcaption {
  font-size: var(--step--1);
}

:root {
  --border-radius: .35em;
  overscroll-behavior: none;
}

::selection {
  background-color: #dd1188;
  color: #fff;
  text-shadow: none;
}

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

html {
  accent-color: var(--color-accent);
  font-family: var(--font-family);
}

*:focus-visible,
[type=button]:focus-visible,
[type=reset]:focus-visible,
[type=submit]:focus-visible,
button:focus-visible,
.btn:focus-visible,
iframe:focus-visible {
  outline: 3px solid white;
  box-shadow: 0 0 0 6px black;
  position: relative;
  z-index: 1;
  overflow: visible;
}

#skip-link {
  position: fixed;
  top: -100vh;
  left: 1rem;
  z-index: 999;
  font-weight: 500;
  color: #000;
  background: #fff;
  padding: 0.75em 1.5em;
  font-size: var(--step-1);
  text-align: center;
  transition: top 0.1s linear;
  text-decoration: none;
}
#skip-link:focus, #skip-link:focus-visible {
  outline: 6px double black;
  box-shadow: 0 0 0 4px white;
  top: 1rem;
  left: 1rem;
}

svg {
  flex: none;
  color: inherit;
}

#back-to-top {
  display: inline-flex;
  transition: all 0.2s linear;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration-thickness: 0.1em;
  transition: color 0.1s linear;
}
:where(.site-header) a {
  color: inherit;
  text-decoration: none;
}
:where(.site-footer) a {
  color: inherit;
}
a:hover {
  color: var(--color-accent);
}
a img,
a svg {
  display: inline-block;
  vertical-align: middle;
}

a[aria-current=true] {
  font-weight: bold;
}

p {
  margin: 0 0 1.5em;
}

hr {
  margin: 4rem 0;
  width: 100%;
  height: 1px;
  background: var(--color-brand);
  border: none;
}

pre[class*=language-] {
  margin: 2rem 0;
}

ul,
ol {
  margin: 0 0 1.5em 0;
  padding: 0;
  padding-left: 1.8rem;
}
ul li,
ol li {
  margin: 0 0 0.75em;
}

dt {
  font-weight: 600;
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
dt a {
  font: inherit;
}

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

ul:where([role=list]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

p + ul {
  margin-top: 0;
}

ul li {
  margin-block-end: 1.5rem;
}
.chapter ul li {
  margin-block-end: 1em;
}

ul li::marker {
  font-weight: bold;
  color: var(--color-accent);
}

ol {
  font-feature-settings: "tnum";
  margin-inline-start: 0.5em;
}

ol li::marker {
  font-weight: 700;
  font-size: 1em;
  color: var(--color-accent);
}

figure {
  margin: 2rem 0;
}
figure img {
  margin-bottom: 1rem;
  display: inline-block;
  margin-inline: auto;
  width: 100%;
}
figure figcaption {
  color: var(--grey);
  padding: 1.5em 0.5em;
}
figure.wide {
  grid-column: 1/13;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}

aside[role=note] {
  padding: 1.5em;
  font-size: 0.85em;
  margin-bottom: 2.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}

button,
button[type=button] {
  cursor: pointer;
  border: none;
  box-sizing: border-box;
}

nav ol,
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.c-toc ul,
nav.c-toc ol {
  padding-left: 2rem;
}

blockquote {
  margin: 4rem 0;
  padding-left: 2rem;
  border-left: 5px solid currentColor;
  font-size: var(--step-1);
  font-weight: 600;
  position: relative;
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85em;
  font-style: normal;
  font-weight: 300;
}

.banner {
  padding: var(--space-s-l);
  box-shadow: 0 0 0.5px #111, 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
[data-theme=dark] .banner {
  background: linear-gradient(hsl(276, 16%, 18%), hsl(276, 16%, 16%));
  text-shadow: 1px 1px 1px #111;
  border-top: 1px solid hsl(276, 16%, 22%);
}

blockquote.testimonial {
  padding-left: 0;
  border: none;
  margin: 2rem 0;
  font-weight: 500;
  font-size: var(--step-1);
}
blockquote.testimonial mark {
  background-color: var(--color-brand);
  color: #fff;
}
blockquote.testimonial::before {
  font-size: 2em;
  position: absolute;
  left: -0.5em;
  top: -0.25em;
  color: var(--color-brand);
}
blockquote.testimonial cite {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  grid-gap: 1rem;
  font-size: var(--step-0);
  font-style: normal;
  font-weight: 500;
  margin-top: 2rem;
}
blockquote.testimonial cite img {
  border-radius: 50%;
}
blockquote.testimonial cite p:first-child {
  margin-bottom: 0;
}
blockquote.testimonial cite p:last-child {
  color: var(--grey-on-white);
  font-weight: 400;
}
.section--dark blockquote.testimonial cite p:last-child {
  color: var(--grey-on-black);
}
blockquote.testimonial.featured {
  font-size: var(--step-3);
  font-weight: 600;
}
@media all and (min-width: 800px) {
  blockquote.testimonial.featured {
    text-align: center;
    margin: 4rem auto;
    max-width: 65ch;
  }
  blockquote.testimonial.featured cite {
    text-align: left;
  }
}

p:empty {
  display: none;
}

q {
  font-style: italic;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-size: 1rem;
  margin: 2rem 0;
}
table caption {
  padding: 0.5rem 1rem;
  font-size: 1em;
  caption-side: top;
  font-family: var(--font);
}

th {
  text-align: left;
  font-family: var(--font);
}

td,
th {
  border: 1px solid #ddd;
  padding: 0.85rem 0.5rem;
}

[data-state=no] {
  background-color: rgba(248, 37, 37, 0.35);
}

[data-state=yes] {
  background-color: rgba(0, 173, 101, 0.5);
}

.btn {
  --button-background-color: hsl(315, 50%, 50%);
  --button-hover-background-color: hsl(315, 50%, 40%);
  --button-text-color: #fff;
  all: unset;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  top: 0;
  display: inline-block;
  padding: 0.35em 0.85em;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: all 0.2s linear;
}

.cta__pricing {
  display: inline-block;
}

.btn--large {
  font-size: var(--step-1);
  padding: 0.65em 1.25em;
}

.btn--primary {
  background: linear-gradient(45deg, var(--button-background-color), var(--button-hover-background-color));
  background-color: var(--button-hover-background-color);
  background: #dd1188;
  color: var(--button-text-color);
}
.btn--primary:hover {
  background: var(--button-hover-background-color);
  color: var(--button-text-color);
}
.btn--primary:active {
  top: 3px;
  box-shadow: 0 5px 0 transparent;
}
.btn--primary[disabled] {
  top: 3px;
  box-shadow: 0 5px 0 transparent;
  opacity: 0.75;
}

.btn--secondary {
  background-color: #000;
  color: #fff;
  text-shadow: none;
  border-width: 2px;
  border-color: currentColor;
}
.btn--secondary:hover {
  background-color: var(--button-hover-background-color);
  color: var(--button-text-color);
  border-color: var(--button-hover-background-color);
}

.btn--ghost {
  background-color: inherit;
  color: inherit;
  text-shadow: none;
  border-width: 2px;
  border-color: currentColor;
}
.btn--ghost:hover {
  background: var(--button-hover-background-color);
  color: var(--button-text-color);
  border-color: var(--button-hover-background-color);
}

.btn--small {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

details {
  padding: 0 1em 1em 0;
  max-width: 100%;
}

details[open] {
  max-width: 100%;
}

details[open] summary svg {
  transform: rotate(90deg);
}

summary {
  cursor: pointer;
  max-width: 100%;
  line-height: inherit;
  margin-bottom: 0;
  font: inherit;
  font-family: inherit;
  color: inherit;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  *:focus {
    transition: outline-width 0.15s linear;
  }
}
.chapters-toc-wrapper {
  grid-column: 1/13;
}

.bookmarks-wrapper {
  grid-column: 3/10;
}

.site-header {
  padding: var(--space-m) 0;
  font-size: var(--step-0);
  font-family: var(--system-font);
  background: #0e0e0e;
  color: #fff;
}
.site-header .btn {
  margin: 0;
}
.site-header:focus, .site-header:target {
  outline: none;
}
@media all and (min-width: 52rem) {
  .site-header {
    padding: var(--space-l) 0;
  }
}
.site-header .content-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: var(--space-s-l);
  align-items: center;
}

.logo {
  grid-column: 1/2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.logo img {
  top: -5px;
  height: 45px;
  color: inherit;
}
@media all and (max-width: 1024px) {
  .logo img {
    height: 35px;
  }
}
@media all and (max-width: 800px) {
  .logo span {
    display: none;
  }
}

.top-banner {
  background: linear-gradient(30deg, var(--color-brand), #553388);
  border-bottom: 1px solid #553388;
  color: #fff;
}
.top-banner .content-container {
  padding: 1rem;
  text-align: center;
  font-weight: 500;
  font-size: var(--step-0);
}
@media all and (max-width: 640px) {
  .top-banner {
    font-size: 0.9rem;
  }
  .top-banner .content-container {
    padding: 0.75rem 1rem;
  }
}

.global-theme-switcher {
  grid-column: 3/4;
}

.global-theme-switcher_buttons {
  display: inline-flex;
  gap: 0.65rem;
  border-radius: 4px;
}
.global-theme-switcher_buttons button {
  flex: 0;
  padding: 0.25rem;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
  color: inherit;
  border: 1px solid transparent;
  background: inherit;
  border-radius: 2px;
  font: inherit;
  font-weight: 300;
  font-size: var(--step--1);
}
.global-theme-switcher_buttons button:hover .global-theme-switcher__icon {
  color: var(--color-brand);
}

.global-theme-switcher__button[aria-pressed=true] {
  font-weight: 600;
  position: relative;
}
.global-theme-switcher__button[aria-pressed=true] .global-theme-switcher__icon {
  color: var(--color-brand);
}

.site-footer {
  padding: var(--space-2xl-3xl) 0;
  font-size: var(--step-0);
}

.copyright p {
  margin-bottom: 0.75rem;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
textarea {
  font: inherit;
  display: inline-block;
  width: 100%;
  line-height: 1.3;
  padding: 0.75em;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}
input[type=text][aria-invalid],
input[type=password][aria-invalid],
input[type=email][aria-invalid],
input[type=number][aria-invalid],
textarea[aria-invalid] {
  border-color: #B32221;
  background: #F6D6D7;
}

input[type=number] {
  font: inherit;
  display: inline-block;
  line-height: 1.3;
  padding: 0.75em;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.2);
}

form p {
  margin-bottom: 0;
}

form a.forgot-password {
  font-size: var(--step--1);
  display: block;
  margin: 0.75rem 0;
}

input[type=checkbox] {
  width: 1.5em;
  height: 1.5em;
}

input[readonly] {
  cursor: not-allowed;
  background-color: hsl(268, 10.4%, 60%);
  color: #000;
  box-shadow: inset 0 1px 3px hsl(268, 10.4%, 50%);
}

form [aria-live=assertive]:not(:empty),
form [role=alert]:not(:empty) {
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  color: #B32221;
  background: #F6D6D7;
}
form [aria-live=assertive]:not(:empty)::before,
form [role=alert]:not(:empty)::before {
  content: url("data:image/svg+xml,%3Csvg width='1.5em' height='1.5em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B32221' d='M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z'%3E%3C/path%3E%3C/svg%3E");
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
form [aria-live=polite]:not(:empty),
form [role=status]:not(:empty),
form [role=status][aria-live=assertive]:not(:empty) {
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  color: #335236;
  background: #D4ECD9;
}
form [aria-live=polite]:not(:empty)::before,
form [role=status]:not(:empty)::before,
form [role=status][aria-live=assertive]:not(:empty)::before {
  content: "";
  display: none;
}

.status:not(:empty) {
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  color: #335236;
  background: #D4ECD9;
}
.status:not(:empty)::before {
  content: "";
  display: none;
}

.error:not(:empty) {
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  color: #B32221;
  background: #F6D6D7;
}
.error:not(:empty)::before {
  content: url("data:image/svg+xml,%3Csvg width='1.5em' height='1.5em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B32221' d='M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z'%3E%3C/path%3E%3C/svg%3E");
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

[disabled] {
  opacity: 0.75;
}

.password-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  position: relative;
}
.password-wrapper .form-field {
  grid-column: 1/3;
}
.password-wrapper input[type=password],
.password-wrapper input[type=text] {
  grid-column: 1/3;
  grid-row: 2;
  margin: 0;
}

button.password-reveal {
  all: unset;
  cursor: pointer;
  display: block;
  font-size: var(--step--1);
  margin: 0;
  line-height: 1.5;
  grid-column: 2/3;
  grid-row: 2;
  z-index: 2;
  align-self: stretch;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-left: 1px solid var(--border-color);
  text-align: center;
  color: #111;
  min-width: 5rem;
  box-shadow: none;
  background-color: #fff;
}
button.password-reveal[aria-pressed=true] {
  background-color: #eee;
  box-shadow: inset 0 3px 5px 1px rgba(0, 0, 0, 0.4);
}

.form-field {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-field__text-label {
  display: block;
  font-size: var(--step-0);
  color: var(--supporting-text-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

label {
  display: block;
  font-weight: 500;
}

label[for=discount] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.login-content-wrapper {
  margin: 0 auto;
  width: min(100%, 500px);
}

button[type=submit] {
  display: block;
  text-align: center;
  flex: 0;
  margin: 0;
  margin-top: 1rem;
}

.hint {
  margin: var(--space-xs) 0;
  font-size: var(--step--1);
  color: var(--supporting-text-color);
}

form.team {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
}
form.team label[for=number] {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  border-bottom: 1px dotted #666;
  padding-bottom: 1.5rem;
}
form.team input[type=number] {
  max-width: 100px;
  justify-self: flex-end;
}
form.team label[for=total] {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
}
form.team output {
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
}
form.team #group-savings:not(:empty) {
  display: block;
  border-radius: 4px;
  background-color: #1B74BC;
  color: #fff;
  padding: 0.15em 0.5em;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  text-align: center;
  text-transform: uppercase;
  max-width: max-content;
  align-self: flex-end;
}

#full-price.discounted {
  display: inline-block;
  position: relative;
  color: #777;
  margin-right: 1rem;
  font-size: 0.8em;
}
output #full-price.discounted {
  font-size: 1em;
}
#full-price.discounted::after {
  content: "";
  border-radius: 3px;
  position: absolute;
  width: 100%;
  height: 0.1em;
  background-color: red;
  transform: rotate(-10deg);
  left: 6px;
  top: calc(50% - 1.5px);
}
.btn #full-price.discounted::after {
  background-color: currentColor;
}

.loader {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-brand);
}

.c-custom-select {
  --icon: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cpath%20fill%3D%22%23777%22%20d%3D%22M9.914%2011.086l-2.829%202.829%208.914%208.914%208.914-8.914-2.828-2.828-6.086%206.086z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");
  --border-color: currentColor;
  --color: inherit;
  --box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  --border-radius: 8px;
  --background-color: #fff;
  --gradient-background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  --outline-color: hsl(265, 50%, 50%);
  --padding: .5em;
  --margin: 0;
}

.c-custom-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--margin);
  padding: var(--padding);
  padding-right: calc(var(--padding) * 3);
  font: inherit;
  color: var(--color);
  line-height: 1.3;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background-color: var(--background-color);
  background-image: var(--icon), var(--gradient-background);
  background-repeat: no-repeat, repeat;
  background-position: right calc(var(--padding) * 1.5) top 50%, 0 0;
  background-size: 1em auto, 100%;
}

.c-custom-select::-ms-expand {
  display: none;
}

.c-custom-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--outline-color);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
}

.c-custom-select:focus:not(:focus-visible) {
  box-shadow: none;
}

.homepage {
  line-height: 1.6;
}

.hero {
  padding: var(--space-3xl) 0 var(--space-5xl);
  text-align: center;
}
.hero .author {
  margin: var(--space-m) 0 var(--space-xl);
  font-size: var(--step-0);
  letter-spacing: 0;
  font-weight: normal;
  text-align: left;
  color: var(--grey-on-black);
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1rem;
}
.hero .author img {
  border-radius: 50%;
}
.hero .author a {
  font-weight: 500;
  color: white;
}

.course-title {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: var(--step-7);
}
.course-title span {
  display: block;
}
@media all and (max-width: 17.5rem) {
  .course-title {
    font-size: calc(1rem + 5vw);
  }
}
.course-title img {
  max-width: 100%;
}

.course-description {
  font-size: var(--step-2);
  color: var(--grey-on-black);
  margin-bottom: var(--space-l);
}
.homepage .course-description {
  font-size: var(--step-2);
}
.course-description strong {
  font-size: var(--step-5);
  font-weight: 800;
}

.homepage {
  font-size: var(--step-1);
}

.sellup {
  color: var(--supporting-text-color);
  font-size: var(--step-1);
  padding: var(--space-xl-2xl) 0 var(--space-xl-3xl);
}
.sellup strong {
  color: #fff;
}
.sellup .video-wrapper {
  grid-column: 2/12;
  margin-bottom: var(--space-2xl-3xl);
  margin-top: calc(-1 * var(--space-4xl));
}
.sellup .video {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.sellup .video iframe {
  border: none;
}
.sellup blockquote {
  grid-column: 3/10;
}
.sellup summary {
  font-weight: bold;
  width: 100%;
  height: 100%;
  text-align: inherit;
  line-height: 1.4;
  font-weight: 600;
  padding: var(--space-s);
  padding-right: var(--icon-space);
  color: var(--color-brand);
  position: relative;
  transition: outline 0.1s linear;
  margin-bottom: var(--heading-margin);
}

.course-topics {
  list-style-type: "";
  padding: 0;
}
.course-topics li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.75em;
}
.course-topics li::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238866bb' d='M21 11.080v0.92c-0.001 2.485-1.009 4.733-2.64 6.362s-3.88 2.634-6.365 2.632-4.734-1.009-6.362-2.64-2.634-3.879-2.633-6.365 1.009-4.733 2.64-6.362 3.88-2.634 6.365-2.633c1.33 0.001 2.586 0.289 3.649 0.775 0.502 0.23 1.096 0.008 1.325-0.494s0.008-1.096-0.494-1.325c-1.327-0.606-2.866-0.955-4.479-0.956-3.037-0.002-5.789 1.229-7.78 3.217s-3.224 4.74-3.226 7.777 1.229 5.789 3.217 7.78 4.739 3.225 7.776 3.226 5.789-1.229 7.78-3.217 3.225-4.739 3.227-7.777v-0.92c0-0.552-0.448-1-1-1s-1 0.448-1 1zM21.293 3.293l-9.293 9.302-2.293-2.292c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3 3c0.391 0.391 1.024 0.39 1.415 0l10-10.010c0.39-0.391 0.39-1.024-0.001-1.414s-1.024-0.39-1.414 0.001z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.what-you-get header {
  font-size: var(-step-1);
  grid-column: 2/12;
  text-align: center;
  margin-bottom: var(--space-2xl-3xl);
}
.what-you-get header h2 {
  margin: 0;
}

.features {
  display: grid;
  grid-gap: var(--space-xl-3xl) var(--space-2xl-5xl);
}
@media all and (min-width: 800px) {
  .features {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}
.features * {
  grid-column: initial;
}
.features li.feature {
  margin-block-end: 0;
}

.feature article {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--space-m);
}
@media all and (min-width: 480px) {
  .feature article {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: var(--space-m);
    align-items: start;
  }
}
.feature article h3 {
  position: relative;
  font-size: var(--step-2);
}
.feature article p {
  color: var(--grey-on-white);
}
.feature article svg {
  width: 2.5rem;
  height: 2.5rem;
  display: none;
}

.cta {
  text-align: center;
}

.cta__price {
  font-size: var(--step-6);
  letter-spacing: -1px;
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 2rem;
}

.cta__hints {
  margin-top: 1.5rem;
}

.cta__card {
  width: max-content;
  max-width: 100%;
  margin: var(--space-l) auto;
}
.cta__card .features-list {
  list-style: none;
  text-align: left;
  width: max-content;
  margin-bottom: var(--space-l);
}
.cta__card .features-list li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.cta__card .features-list li::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Echeck%3C/title%3E%3Cpath d='M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z' fill='%2300754E'%3E%3C/path%3E%3C/svg%3E");
  line-height: 0;
}

.cta__button {
  width: 100%;
  box-sizing: border-box;
}

.content-overview * {
  grid-column: 4/10;
}

.about {
  padding: var(--space-4xl) 0;
}
.about .content-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
}
.homepage .about h2 {
  text-align: left;
}

.about__photo {
  margin-bottom: 2rem;
  max-width: 500px;
  height: auto;
  border-radius: 0.5rem;
  flex: 1 1 250px;
}

.about__text {
  flex: 1 1 400px;
}

.faqs details {
  margin-bottom: var(--space-s);
}
.faqs details p:last-child {
  margin-bottom: 0;
}
.faqs summary {
  font-size: var(--step-2);
  font-weight: 600;
  text-wrap: balance;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: top;
}
.faqs summary::before {
  content: " ";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' style='transform: rotate%28180deg%29'%3E%3Cpath d='m0 0h24v24h-24z' /%3E%3Cpath clip-rule='evenodd' d='m7.25007 2.38782c1.29871-.28862 2.87423-.38782 4.74993-.38782s3.4512.0992 4.7499.38782c1.3101.29115 2.3989.78818 3.2365 1.62576s1.3346 1.92644 1.6258 3.23649c.2886 1.29871.3878 2.87423.3878 4.74993s-.0992 3.4512-.3878 4.7499c-.2912 1.3101-.7882 2.3989-1.6258 3.2365s-1.9264 1.3346-3.2365 1.6258c-1.2987.2886-2.8742.3878-4.7499.3878s-3.45122-.0992-4.74993-.3878c-1.31005-.2912-2.39891-.7882-3.23649-1.6258s-1.33461-1.9264-1.62576-3.2365c-.28862-1.2987-.38782-2.8742-.38782-4.7499s.0992-3.45122.38782-4.74993c.29115-1.31005.78818-2.39891 1.62576-3.23649s1.92644-1.33461 3.23649-1.62576zm6.45703 5.90507c.3905.39053.3905 1.02369 0 1.41422l-2.2929 2.29289 2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-2.7375-2.7375c-.5355-.5355-.5355-1.4037.00001-1.9392l2.73749-2.73751c.3905-.39052 1.0237-.39052 1.4142 0z' fill='%237759A4' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
  background-size: 100% auto;
  display: block;
  margin-right: 0.5em;
  margin-top: 8px;
  transition: transform 0.3s ease-in-out;
  background-repeat: no-repeat;
}
.faqs details[open] summary::before {
  transform: rotate(90deg);
}
.faqs [data-details-content] {
  margin-inline-start: calc(0.5em + 1.5rem);
}

.faqs h2 {
  margin-bottom: var(--space-xl);
}

/* target the pseudo-content part of the details element; this part follows the summary in the DOM */
details::details-content {
  display: block;
  overflow: hidden;
  margin-top: 1rem;
  block-size: 0;
  transition-property: block-size, content-visibility, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-behavior: allow-discrete;
  opacity: 0;
}

details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.testimonials article {
  display: inline-block;
  margin-bottom: var(--space-3xl);
}
@media all and (min-width: 800px) {
  .testimonials {
    columns: 2 auto;
    column-gap: 20%;
    break-inside: avoid;
  }
}

.license-code {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.license-code .copy-btn {
  justify-self: flex-end;
  margin: 0 0.5rem;
}

.license-code-notification {
  flex: 999 0 auto;
}

.licenses-assigned {
  margin: var(--space-xl) 0;
  background: #222;
  border-radius: 8px;
}
.licenses-assigned.no-team-members {
  color: var(--grey-on-black);
  padding: 1rem;
}
.licenses-assigned dt,
.licenses-assigned dd {
  margin: 0;
}

.licenses-assigned__person {
  padding: var(--space-m) var(--space-m);
  border-radius: 8px;
  margin-bottom: var(--space-m);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-l);
  border-bottom: 1px solid #333;
}
.licenses-assigned__person:last-of-type {
  border: none;
}

.licenses-assigned__person__name {
  margin-bottom: var(--space-xs);
  display: none;
}

.licenses-assigned__person__email {
  color: var(--supporting-text-color);
}

.spinner {
  border: 4px solid #f3f3f3;
  /* Light gray */
  border-top: 4px solid #795f8c;
  /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Hide the spinner initially */
.hide-spinner {
  display: none;
}

.popup-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.popup-overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  background-color: #fff;
  color: #1d1d1d;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  left: 50%;
  padding: 25px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, calc(-50% + 50px));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.popup-overlay.show-popup {
  opacity: 1;
  visibility: visible;
}
.popup-overlay.show-popup .popup {
  transform: translate(-50%, -50%);
}

.chapter__head {
  color: #fff;
  box-shadow: 0 0 0.5px #111, 0 2px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  padding-top: var(--space-xl);
}

.chapter__desc {
  padding: var(--space-m-l) 0 var(--space-xs-xl);
}

.chapter__title {
  margin-bottom: var(--space-s);
  text-shadow: 1px 1px 1px #111;
  margin-top: 1rem;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.6;
}

.chapter__title .order {
  color: var(--grey-on-black);
  display: flex;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: normal;
  font-size: 0.5em;
  margin-bottom: var(--space-2xs);
}

.chapter__teaser {
  font-size: var(--step--1);
  font-weight: 350;
  color: #ccc;
  margin-bottom: var(--space-xl);
}
.chapter__teaser p:last-of-type {
  margin-bottom: 0;
}
.chapter__teaser summary {
  font-weight: 500;
}

.video {
  aspect-ratio: 16/10;
  margin-bottom: var(--space-m);
  border: none;
}
.video iframe {
  display: block;
  aspect-ratio: 16/10;
  width: 100%;
  height: 100%;
}

.theatre {
  color: #ddd;
}
.transcript__upper {
  position: relative;
  margin-bottom: var(--space-m);
}

.reading-time {
  font-size: var(--step--1);
  margin-bottom: var(--space-m);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-left: 0.1rem;
}

.transcript {
  position: relative;
  font-family: var(--a11y-font), var(--font);
  padding-block: var(--space-3xl);
  background-color: #fff;
  font-size: var(--step-0);
  color: #000;
}
[data-theme=dark] .transcript {
  background-color: #1d1d1d;
  color: #eee;
}
.transcript .content-container {
  grid-gap: 0 4rem;
}
.transcript .grid > * {
  grid-column: 1/8;
  min-width: 0;
}
.transcript .grid > pre {
  grid-column: 1/12;
}
.transcript .grid > table {
  grid-column: 1/10;
}
.transcript .grid figure.wide {
  grid-column: 1/13;
}

h2.transcript__label {
  font-weight: 800;
  z-index: 2;
}
h2.transcript__label span {
  display: inline-block;
  background-color: hsl(268, 50%, 76%);
  padding: 0.15em 0.5em;
}

.chapter__desc {
  grid-column: 1/8;
  grid-row: 1;
}

.chapter__toggle {
  grid-column: 9/13;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: flex;
  justify-content: center;
}
.transcript .chapter__toggle {
  display: block;
  grid-row: initial;
  grid-column: 2/12;
}

.pagination {
  grid-column: 1/13;
  grid-row: 2;
}

.toc {
  flex: 1 0 max-content;
  margin-bottom: var(--space-s);
}

.toc .toc__trigger {
  gap: 1rem;
  font-weight: 600;
}

.toc__panel[data-open=false] {
  display: none;
}
.toc__panel[data-open=true] {
  display: block;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.toc.toc ol {
  list-style: none;
  margin: 0;
  margin-block-start: 2rem;
  padding: 0;
}
.toc.toc ol li::before {
  content: "└";
  margin-right: 0.25rem;
  color: var(--color-brand);
}
.toc.toc ol li > ol {
  margin-top: 0.75rem;
  padding-left: 1rem;
}
.toc.toc a {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.toc.toc ::marker {
  font-weight: bold;
}

/* mark chapter as completed toggle */
.chapter__toggle.chapter__toggle {
  margin-bottom: var(--space-m);
  font-size: 0.85rem;
}

.chapter__toggle button {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.65em 1em;
  border-radius: 4px;
  font: inherit;
  color: #111;
  font-weight: 500;
  background: hsl(268, 50%, 75%);
  border: 2px solid transparent;
}
.chapter__toggle button svg {
  width: 1.65em;
  height: 1.65em;
  color: inherit;
  border: 2px solid currentColor;
  fill: transparent;
  border-radius: 4px;
  padding: 0.25em;
  border-radius: 50%;
}
.chapter__toggle button[disabled] {
  cursor: not-allowed;
  opacity: 50%;
  pointer-events: none;
}
.chapter__toggle button[disabled] svg {
  opacity: 50%;
}
.chapter__toggle button[aria-pressed=true] svg {
  fill: currentColor;
}

.section--admin--input {
  margin-bottom: 20px;
}
.section--admin button[type=submit] {
  display: flex;
  align-items: center;
}
.section--admin .error {
  margin-top: 20px;
  color: red;
  font-size: 0.8rem;
}
.section--admin .spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 3px solid #fff;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin: 0 0 0 10px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.span-4-12 {
  grid-column: 5/9;
}

.site-nav {
  grid-column: 2/3;
  justify-self: end;
  font-size: var(--step--1);
  font-weight: 500;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-xs-s);
  list-style: none;
  align-items: center;
}
.site-nav ul li {
  margin: 0;
}
.site-nav a {
  color: var(--supporting-text-color);
}
.site-nav button, .site-nav .btn {
  color: #fff;
}
.site-nav a[aria-current=true] {
  color: var(--color-brand);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.site-nav .logout-button {
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--supporting-text-color);
  padding: 0;
}
.site-nav .logout-button:hover {
  color: var(--color-brand);
}

.chapters-toc__title {
  color: inherit;
  font-weight: normal;
}

.chapters-toc__list {
  counter-reset: chapters;
  list-style: none;
}

.chapters-toc__item ol {
  counter-reset: chapters;
  list-style: none;
}

.chapters-toc__item__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-m) var(--space-xl);
}

.chapters-toc__item__thumbnail {
  border-radius: var(--border-radius);
  width: 25%;
  height: auto;
  flex: 1 1 250px;
  opacity: 0.85;
}
[data-theme=light] .chapters-toc__item__thumbnail {
  opacity: 1;
}

.chapters-toc__item__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.chapters-toc__item__content {
  flex: 2 1 350px;
}

.chapters-toc__item__title .order {
  color: var(--color-brand);
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: normal;
  font-size: var(--step--1);
  margin-bottom: var(--space-xs);
}

.chapters-toc__item {
  border-radius: var(--border-radius);
  margin-bottom: var(--space-3xl-4xl);
}
.chapters-toc__item img {
  border-radius: var(--border-radius);
}
.chapters-toc__item:last-of-type {
  margin-bottom: 0;
}
.chapters-toc__item ol {
  margin-top: var(--space-l-2xl);
  padding: 0;
}
.chapters-toc__item ol:empty {
  display: none;
}

.chapters-toc__item__title.chapters-toc__item__title {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-s);
  text-decoration: none;
  text-align: left;
  font-family: var(--system-font);
  letter-spacing: -0.5px;
}

.coming-soon {
  font-weight: normal;
  font-size: 0.75em;
}

.chapters-toc__item__details {
  font-size: var(--step-0);
}
.chapters-toc__item__details p:nth-last-of-type() {
  margin-bottom: 0;
}

.chapters-toc__item__teaser {
  color: var(--grey-on-black);
  margin: var(--space-xs) 0 var(--space-m);
  font-size: var(--step-0);
  font-weight: 350;
}
[data-theme=light] .chapters-toc__item__teaser {
  color: var(--grey-on-white);
}

.chapters-toc__item__glossary,
.chapters-toc__item__duration {
  font-size: var(--step--1);
  color: var(--grey-on-black);
}
[data-theme=light] .chapters-toc__item__glossary,
[data-theme=light] .chapters-toc__item__duration {
  color: var(--grey-on-white);
}
.chapters-toc__item__glossary summary,
.chapters-toc__item__duration summary {
  padding: 0.5rem 1.5rem 0.5rem 1rem;
  font-weight: 500;
  font-size: var(--step--1);
  color: inherit;
}

/* mark chapter as completed */
.completed-badge {
  display: flex;
  font-size: 1rem;
  color: inherit;
  margin-right: 8px;
}
.completed-badge .badge {
  background-color: hsl(268, 50%, 76%);
  color: #000;
  text-shadow: none;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  text-transform: initial;
  font-weight: 500;
  margin-left: 0.75em;
}
[data-theme=light] .completed-badge .badge {
  background-color: var(--color-brand);
  color: #fff;
}
.completed-badge .badge:empty {
  padding: 0;
  background: none;
}
.completed-badge svg {
  display: none;
  width: 1em;
  height: 1em;
  color: inherit;
  border: 2px solid currentColor;
  fill: transparent;
  padding: 0.1em;
  border-radius: 50%;
  pointer-events: none;
}
.completed-badge svg.active {
  fill: currentColor;
}

.c-breadcrumbs {
  font-size: var(--step--1);
  margin-block-end: var(--space-s-m);
}
.c-breadcrumbs li {
  display: inline-flex;
  margin: 0;
}
.c-breadcrumbs li::after {
  content: "/";
  display: inline-block;
  margin-inline: 0.5em;
}
.c-breadcrumbs li:last-of-type::after {
  display: none;
}
.c-breadcrumbs a {
  font-weight: 300;
  text-decoration: none;
}
.c-breadcrumbs a[aria-current] {
  font-weight: 500;
}

/* Pagination within (and between) individual posts */
.pagination {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  background-color: inherit;
  color: inherit;
  padding: var(--space-m-l) 0;
  font-size: var(--step-0);
  border-top: 1px solid #333;
}
.transcript .pagination {
  margin-top: 2rem;
  font-size: var(--step-0);
  padding: var(--space-s-m);
}

.pagination__next, .pagination__previous {
  text-decoration: none;
  padding: 0.5em 0;
  color: inherit;
  font-weight: 350;
}
.pagination__next .label, .pagination__previous .label {
  text-transform: initial;
  color: var(--color-brand);
  font-size: 0.85em;
  display: block;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.pagination__next span, .pagination__previous span {
  color: #ddd;
  font-weight: normal;
}
.transcript .pagination__next span, .transcript .pagination__previous span {
  color: #555;
}

.chapter-theme-switcher-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 10;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .chapter-theme-switcher-wrapper {
    display: none;
  }
}
.chapter-theme-switcher-label.chapter-theme-switcher-label {
  font: inherit;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0;
  display: none;
}

.chapter-theme-switcher__buttons {
  display: flex;
}

.chapter-theme-switcher__button {
  flex: 0;
  padding: 0.5rem 1.5rem;
  display: inline-flex;
  background: inherit;
  border-radius: 0;
  font: inherit;
  font-weight: 300;
  align-items: center;
  margin: 0;
  gap: 0.25rem;
  color: inherit;
  box-shadow: none;
  background: hsl(268, 50%, 76%);
  color: #000;
  text-shadow: none;
}
.chapter-theme-switcher__button:first-child {
  border-radius: 0 0 0 4px;
}
.chapter-theme-switcher__button:last-child {
  border-radius: 0 0 4px 0;
}
.chapter-theme-switcher__button:hover {
  background: hsl(268, 50%, 70%);
}
.chapter-theme-switcher__button:hover .chapter-theme-switcher__icon {
  color: var(--color-accent);
}

.chapter-theme-switcher__button[aria-pressed=true] {
  font-weight: 600;
  position: relative;
}
.chapter-theme-switcher__button[aria-pressed=true]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  top: 100%;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
}

/**
 * a11y-dark theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */
code[class*=language-],
pre[class*=language-] {
  color: #f8f8f2;
  background: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #2b2b2b;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #d4d0ab;
}

.token.punctuation {
  color: #fefefe;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ffa07a;
}

.token.boolean,
.token.number {
  color: #00e0e0;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #abe338;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #00e0e0;
}

.token.atrule,
.token.attr-value,
.token.function {
  color: #ffd700;
}

.token.keyword {
  color: #00e0e0;
}

.token.regex,
.token.important {
  color: #ffd700;
}

.token.important,
.token.bold {
  font-weight: bold;
}

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

.token.entity {
  cursor: help;
}

/*
 Plugin support
 */
/* Line highlight */
.line-highlight {
  background: rgba(255, 217, 0, 0.1);
  border-top: 1px solid rgba(255, 217, 0, 0.55);
  border-bottom: 1px solid rgba(255, 217, 0, 0.55);
}

/* Line numbers */
.line-numbers .line-numbers-rows {
  border-right: 1px solid #F8F8F2;
}

.line-numbers-rows > span:before {
  color: #D4D0AB;
}

/*
 High contrast mode support
*/
@media screen and (-ms-high-contrast: active) {
  code[class*=language-],
  pre[class*=language-] {
    color: windowText;
    background: window;
  }
  :not(pre) > code[class*=language-],
  pre[class*=language-] {
    background: window;
  }
  .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }
  .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
    font-weight: bold;
  }
  .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
    color: highlight;
  }
  .token.attr-value,
  .token.url {
    font-weight: normal;
  }
}
[data-theme=light] {
  /**
  * a11y-light theme for JavaScript, CSS, and HTML
  * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
  * @author ericwbailey
  */
  /* Code blocks */
  /* Inline code */
  /*
   Plugin support
  */
  /* Line highlight */
  /* Line numbers */
  /*
   High contrast mode support
  */
}
[data-theme=light] code[class*=language-],
[data-theme=light] pre[class*=language-] {
  color: #545454;
  background: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
[data-theme=light] pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}
[data-theme=light] :not(pre) > code[class*=language-],
[data-theme=light] pre[class*=language-] {
  background: #fefefe;
}
[data-theme=light] :not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
[data-theme=light] .token.comment,
[data-theme=light] .token.prolog,
[data-theme=light] .token.doctype,
[data-theme=light] .token.cdata {
  color: #696969;
}
[data-theme=light] .token.punctuation {
  color: #545454;
}
[data-theme=light] .token.property,
[data-theme=light] .token.tag,
[data-theme=light] .token.constant,
[data-theme=light] .token.symbol,
[data-theme=light] .token.deleted {
  color: #007299;
}
[data-theme=light] .token.boolean,
[data-theme=light] .token.number {
  color: #008000;
}
[data-theme=light] .token.selector,
[data-theme=light] .token.attr-name,
[data-theme=light] .token.string,
[data-theme=light] .token.char,
[data-theme=light] .token.builtin,
[data-theme=light] .token.inserted {
  color: #aa5d00;
}
[data-theme=light] .token.operator,
[data-theme=light] .token.entity,
[data-theme=light] .token.url,
[data-theme=light] .language-css .token.string,
[data-theme=light] .style .token.string,
[data-theme=light] .token.variable {
  color: #008000;
}
[data-theme=light] .token.atrule,
[data-theme=light] .token.attr-value,
[data-theme=light] .token.function {
  color: #aa5d00;
}
[data-theme=light] .token.keyword {
  color: #d91e18;
}
[data-theme=light] .token.regex,
[data-theme=light] .token.important {
  color: #d91e18;
}
[data-theme=light] .token.important,
[data-theme=light] .token.bold {
  font-weight: bold;
}
[data-theme=light] .token.italic {
  font-style: italic;
}
[data-theme=light] .token.entity {
  cursor: help;
}
[data-theme=light] .line-highlight {
  background: rgba(183, 134, 11, 0.075);
  border-top: 1px solid #b8860b;
  border-bottom: 1px solid #b8860b;
}
[data-theme=light] .line-numbers .line-numbers-rows {
  border-right: 1px solid #aa5d00;
}
[data-theme=light] .line-numbers-rows > span:before {
  color: #696969;
}
@media screen and (-ms-high-contrast: active) {
  [data-theme=light] code[class*=language-],
  [data-theme=light] pre[class*=language-] {
    color: windowText;
    background: window;
  }
  [data-theme=light] :not(pre) > code[class*=language-],
  [data-theme=light] pre[class*=language-] {
    background: window;
  }
  [data-theme=light] .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }
  [data-theme=light] .token.atrule,
  [data-theme=light] .token.attr-value,
  [data-theme=light] .token.function,
  [data-theme=light] .token.keyword,
  [data-theme=light] .token.operator,
  [data-theme=light] .token.selector {
    font-weight: bold;
  }
  [data-theme=light] .token.attr-value,
  [data-theme=light] .token.comment,
  [data-theme=light] .token.doctype,
  [data-theme=light] .token.function,
  [data-theme=light] .token.keyword,
  [data-theme=light] .token.operator,
  [data-theme=light] .token.property,
  [data-theme=light] .token.string {
    color: highlight;
  }
  [data-theme=light] .token.attr-value,
  [data-theme=light] .token.url {
    font-weight: normal;
  }
}

.newsletter .section-title {
  margin-bottom: var(--space-xl);
}

.newsletter-cta-text {
  font-size: var(--step-1);
  font-weight: 500;
}

.newsletter-cta {
  margin: var(--space-xl) 0;
}

.newsletter .layout-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.newsletter .layout-wrapper input {
  flex: 4 1 300px;
}
.newsletter .layout-wrapper button {
  margin: 0;
  flex: 1 1 200px;
}

.newsletter form label {
  font-weight: 500;
}

/**************************************************\
 * Tabs | Text component-specific styles.
 ***************************************************/
.c-tabs__tablist .c-tabs__tab {
  padding: 1rem;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px dotted transparent;
}
.c-tabs__tablist .c-tabs__tab[aria-selected=true] {
  color: var(--color--primary);
}
.c-tabs__tablist .c-tabs__tab:focus, .c-tabs__tablist .c-tabs__tab.focus-visible {
  outline: none;
  border-color: currentColor;
  outline-offset: -4px;
}
.c-tabs__tablist .c-tabs__tab:focus:not(:focus-visible) {
  outline: none;
  border-color: transparent;
}
.js-focus-visible .c-tabs__tablist .c-tabs__tab:focus:not(.focus-visible) {
  outline: none;
  border-color: transparent;
}

.c-tabs .c-tabs__tablist {
  padding: 0;
  position: relative;
}

.c-tabs .c-tabs__tab {
  padding: 1.5rem;
  border-bottom: 4px solid transparent;
  border-left: none;
}
.c-tabs .c-tabs__tab[aria-selected=true] {
  color: var(--color--primary);
  font-weight: bold;
  border-bottom: 4px solid currentColor;
}
.c-tabs .c-tabs__tab:hover {
  color: var(--color--primary);
}
.c-tabs .c-tabs__tab:focus, .c-tabs .c-tabs__tab.focus-visible {
  background-color: var(--color-grey-90);
  font-weight: bold;
  outline: none;
}

.parity-bar {
  text-align: left;
  padding: var(--space-l);
  background: #ddd;
  border-radius: 8px;
  margin-bottom: var(--space-2xl);
  border: 2px dashed #bbb;
}
.parity-bar .content {
  grid-column: 2/12;
}
.parity-bar .content p {
  margin-bottom: 0.75em;
}
.parity-bar--team {
  background: hsl(276, 16%, 15%);
}

.logos-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4rem + 2vw) calc(3.5rem + 1vw);
  align-items: center;
  justify-content: center;
  margin: var(--space-2xl) 0;
  filter: grayscale(1);
}

.logos-list__item {
  display: flex;
  place-content: center;
  flex: 1 1 calc(120px + 2vw);
  margin: 0;
}

img.logos-list__item__logo {
  display: block;
  max-width: 100%;
  height: 60px;
  object-fit: contain;
}
@media all and (min-width: 800px) {
  img.logos-list__item__logo {
    max-width: 160px;
    height: 70px;
  }
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .logos-list__item {
    -ms-high-contrast-adjust: none;
    forced-color-adjust: none;
    background: #fff;
    padding: 1rem;
  }
}
@media all and (min-width: 40em) {
  .course-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3rem;
  }
}

.progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  max-width: 300px;
}
.progress .progress-value {
  font-weight: bold;
  line-height: 0.8;
}
.progress label span {
  display: block;
  margin-block-end: 0.25rem;
}

progress {
  -webkit-appearance: none;
  -moz-appearane: none;
  appearance: none;
  height: 15px;
  width: 100%;
  border: none;
  background-color: lavender;
  border-radius: 50px;
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
  padding: 2px;
  display: block;
}

progress::-webkit-progress-bar {
  background: lavender;
  border-radius: 50px;
}

progress::-webkit-progress-value {
  border-radius: 50px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

progress::-moz-progress-bar {
  border-radius: 50px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

::-moz-progress-bar {
  background: #BD3E9D;
}

::-webkit-progress-value {
  background: #BD3E9D;
}

::-ms-fill {
  background: #BD3E9D;
}

@media all and (max-width: 40em) {
  .progress-reset {
    margin-top: 2rem;
  }
}

dialog {
  max-width: 650px;
  padding: var(--space-xl);
  border-radius: 0.5rem;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* Visually hide text while keeping it accessible */
/* Support includes IE9+ */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); /* IE support */
  clip-path: inset(50%); /* hide visually */
  /* shrink to a 1px square */
  width: 1px;
  height: 1px;
  /* hide any resulting overflow */
  overflow: hidden;
  /* remove from page flow so it doesn’t affect layout */
  position: absolute;
  /* ensure proper text announcement by SRs */
  white-space: nowrap;
}

.mt0 {
  margin-top: 0 !important;
}

.eyebrow.eyebrow {
  text-transform: uppercase;
  color: var(--color-brand);
  font-size: var(--step-1);
  margin-bottom: var(--space-s-m);
  font-weight: 500;
  letter-spacing: 1px;
}

[hidden]:not(:is([hidden=until-found])) {
  display: none !important;
}

.text-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 5px;
}

.block-level {
  display: block;
  align-content: center;
}

.size-2x {
  font-size: 1.25em;
}

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

.mb0.mb0 {
  margin-bottom: 0;
}

.span-1-6 {
  grid-column: 1/6;
}

.span-1-5 {
  grid-column: 1/5;
}

.span-1-7 {
  grid-column: 1/7;
}

.span-1-8 {
  grid-column: 1/8;
}

.span-1-9 {
  grid-column: 1/9;
}

.span-1-10 {
  grid-column: 1/10;
}

.span-1-12 {
  grid-column: 1/12;
}

.span-6-12 {
  grid-column: 6/13;
}

.span-7-12 {
  grid-column: 7/12;
}

.span-2-10 {
  grid-column: 2/10;
}

.span-2-7 {
  grid-column: 2/7;
}

.span-2-12 {
  grid-column: 2/12;
}

.span-2-8 {
  grid-column: 2/8;
}

.span-1-13 {
  grid-column: 1/13;
}

.span-3-10 {
  grid-column: 3/10;
}

.span-3-11 {
  grid-column: 3/11;
}