/* --------------------------------------

Custom styles 

--------------------------------------- */
*:root {
  --color-primary: #4045d5;
  --color-secondary: #35a4eb;
  --color-accent: #ffff00;
  --color-accent-light: #ffffe2;
  --color-surface: #ebf3fb;
  --heading-font: "montserrat", sans-serif;
  --body-font: "poppins", sans-serif;
  --accent-font: "kalam", sans-serif;
}
/* --------------------------------------

Global

--------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 3rem;
}
body {
  font-family: var(--body-font);
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: #000000;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: 0.7em;
}
h1 {
  font-size: 3.125rem;
}
h2 {
  font-size: 3.125rem;
}
.heading-large h2 {
  font-size: 3.75rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.25rem;
}
p, ul, ol {
  margin-bottom: 1em;
}
ul li, ol li {
  margin-bottom: 0.5em;
}
section {
  padding: 5rem 0 5rem;
}
.color-primary-bg {
  background-color: var(--color-primary);
}
.color-secondary-bg {
  background-color: var(--color-secondary);
}
.color-surface-bg {
  background-color: var(--color-surface);
}
.heading-white h2 {
  color: #fff;
}
.heading-white-h3 h3 {
  color: #fff;
}
.heading-accent-h2 h2 {
  color: var(--color-accent);
}
.heading-accent-h3 h3 {
  color: var(--color-accent);
}
.color-accent-text {
  color: var(--color-accent);
}
.accent-font-text {
  font-family: var(--accent-font);
}
.color-primary-text {
  color: var(--color-primary);
}
.color-secondary-text {
  color: var(--color-secondary);
}
.large-body-text-1 {
  font-size: 1.625rem;
}
.large-body-text-2 {
  font-size: 1.75rem;
}
.large-body-text-3 {
  font-size: 1.875rem;
}
.large-body-text-4 {
  font-size: 2rem;
}
.large-body-text-5 {
  font-size: 2.5rem;
}
.large-body-text-6 {
  font-size: 3.125rem;
}
/* ----- Link styling ----- */
a:link, a:visited {
  color: var(--accent-color);
  text-decoration: underline;
}
a:hover, a:active, a:focus {
  color: var(--primary-color);
  text-decoration: none;
  opacity: 0.9;
}
/* ----- Custom text underlines ----- */
.text-underline-primary {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.text-underline-primary::after {
  content: "";
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  width: 100%;
  height: 1.2rem;
  background-image: url(../images/blue-line.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.text-underline-primary-2 {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.text-underline-primary-2::after {
  content: "";
  position: absolute;
  bottom: -0.9rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background-image: url(../images/blue-line-2.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.text-underline-primary-3 {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.text-underline-primary-3::after {
  content: "";
  position: absolute;
  bottom: -1.2rem;
  left: 0;
  width: 100%;
  height: 1.9rem;
  background-image: url(../images/blue-line.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.text-underline-secondary {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.text-underline-secondary::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  left: 0;
  width: 100%;
  height: 1.6rem;
  background-image: url(../images/secondary-line.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.text-underline-accent {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.text-underline-accent::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
  height: 1.6rem;
  background-image: url(../images/yellow-line.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.large-accent-text.text-underline-accent::after {
  bottom: 0rem;
}
/* ----- Buttons ----- */
.large-btn-accent {
  color: var(--color-primary) !important;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-size: 1.375rem;
  font-weight: 700;
  padding: 0.6em 1.8em;
  border-radius: 50px;
  text-decoration: none !important;
  word-break: break-word;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
}
.large-btn-accent:hover {
  color: var(--color-accent) !important;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-decoration: none;
}
.large-btn-accent.disabled {
  pointer-events: none;
  opacity: .65;
}
.large-btn-primary {
  color: var(--color-accent) !important;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: 1.375rem;
  font-weight: 700;
  padding: 0.6em 1.8em;
  border-radius: 50px;
  text-decoration: none !important;
  word-break: break-word;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
}
.large-btn-primary:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  text-decoration: none;
}
.large-btn-secondary:hover {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}
.large-btn-light {
  color: var(--color-secondary) !important;
  background-color: #fff;
  border: 1px solid var(--color-secondary);
  font-size: 1.375rem;
  font-weight: 700;
  padding: 0.6em 1.8em;
  border-radius: 50px;
  text-decoration: none !important;
  word-break: break-word;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
}
.large-btn-light:hover {
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary);
  text-decoration: none;
}
/* ----- Announcement Bar ----- */
.announcement-bar {
  font-family: var(--body-font);
  color: #fff;
  background-color: var(--color-primary);
  padding: 1.5rem;
}
.announcement-bar span {
  color: var(--color-accent);
  font-weight: 700;
  display: block;
}
.announcement-bar p {
  margin-bottom: 0;
}
.announcement-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.announcement-bar-container .large-btn-accent {
  flex-shrink: 0;
}
/* --------------------------------------

Navbar

--------------------------------------- */
.navbar {
  padding: 0.8rem 0.8rem;
}
.navbar .nav-link {
  font-family: var(--heading-font);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--primary-dark-color);
  font-weight: 400;
  text-decoration: none;
  margin-left: 0.4em;
  margin-right: 0.4em;
}
.navbar .nav-link:hover {
  color: var(--accent-dark-color);
}
.navbar-nav .nav-link.active {
  color: var(--accent-dark-color);
}
.navbar li {
  margin-bottom: 0;
}
.dropdown-menu {
  font-size: 1.1rem;
  border-radius: 0;
}
.dropdown-menu a {
  color: var(--primary-dark-color);
}
a.dropdown-item {
  font-family: var(--heading-font);
  text-decoration: none;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--primary-dark-color);
  background-color: var(--light-gray-color);
}
/* ----- Navbar toggler icon ----- */
.navbar-toggler {
  color: var(--primary-dark-color);
  border: 2px solid var(--primary-dark-color);
  opacity: 0.9;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41, 76, 86, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* --------------------------------------

Book page

--------------------------------------- */
.coming-soon-graphic {
  margin-bottom: -90px;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}
.cta-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* ----- Custom bullets as arrow right ----- */
ul.arrow-right-bullets {
  list-style-type: none;
  padding-left: 1rem;
}
ul.arrow-right-bullets li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2335a4eb' d='M254.5 154.4L320.1 220H24c-13.3 0-24 10.7-24 24v24c0 13.3 10.7 24 24 24h296.1l-65.6 65.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L441 273c9.4-9.4 9.4-24.6 0-33.9L305.5 103.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.3em 1.3em;
  background-position: 0 0.1em;
  padding-left: 1.5em;
}
/* ----- Testimonials ----- */
blockquote {
  color: var(--color-secondary);
  font-style: normal;
  font-weight: 600;
  line-height: 1.7;
  margin-left: 0;
  padding-left: 0;
  position: relative;
}
blockquote footer {
  margin: 0;
}
blockquote cite {
  color: var(--color-secondary);
  font-style: normal;
}
blockquote cite::before {
  content: "\2014";
  margin-right: 0.5rem;
}
blockquote p:last-of-type {
  margin-bottom: 0 !important;
}
/* ----- Book stores dropdown ----- */
.book-stores .dropdown-menu {
  font-family: var(--body-font);
  font-size: 1.125rem;
  text-transform: uppercase;
  border-radius: 30px;
  border: 1px solid var(--color-secondary);
  overflow: hidden;
}
.book-stores .dropdown-item {
  font-weight: 700;
}
.book-stores a.dropdown-item {
  color: var(--color-primary);
}
.book-stores .dropdown-item:hover, .book-stores .dropdown-item:active {
  color: var(--bs-dropdown-link-hover-color);
  background-color: #ffffe2;
}
/* ----- Sample download modal ----- */
#sampleDownload .modal-content {
  color: #000000;
  background-color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 30px;
  position: relative;
  padding: 2rem;
}
#sampleDownload .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
}
#sampleDownload h2 {
  font-family: var(--body-font);
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: #000000;
}
#sampleDownload .small {
  font-size: 0.875rem;
  font-style: italic;
}
#sampleDownload input[type="text"], #sampleDownload input[type="email"] {
  width: 100%;
  border: 1px solid var(--color-secondary);
  padding: 0.5em 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--color-primary) !important;
  font-size: 1.375rem;
  font-weight: 700;
  border-radius: 50px;
  margin-bottom: 1rem;
}
#sampleDownload input[type="submit"] {
  color: var(--color-primary) !important;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-size: 1.375rem;
  font-weight: 700;
  padding: 0.5em 1.6em;
  border-radius: 50px;
  text-decoration: none !important;
  word-break: break-word;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  line-height: normal;
}
#sampleDownload input[type="submit"]:hover {
  color: var(--color-accent) !important;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-decoration: none;
}
/* ----- You will learn ----- */
.learn {
  padding-bottom: 20rem;
}
.learn h2 {
  color: var(--color-accent);
}
/* ----- Tools section ----- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  column-gap: 90px;
}
.tool {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #707070;
}
.tools h3 {
  font-family: var(--accent-font);
  font-size: 1.875rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tool p {
  margin-bottom: 0;
}
/* ----- Splide 1 ----- */
.concepts-carousel {
  margin-top: -290px;
}
.concepts-carousel .splide__slide {
  display: flex;
}
.concepts-carousel .splide__arrow {
  background: transparent;
}
.concepts-carousel .splide__arrow--prev {
  left: 1rem;
}
.concepts-carousel .splide__arrow--next {
  right: 1rem;
}
.concepts-carousel .splide__arrow svg {
  fill: var(--dark-blue-color);
  height: 2em;
  width: 2em;
}
.concepts-carousel .splide__arrow--prev svg {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
.concept-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  background-color: var(--color-surface);
  padding: 2rem;
  margin-top: 4rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-align: center;
}
.concept-slide h3 {
  font-family: var(--heading-font);
  font-size: 1.75rem;
}
.circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--accent-font);
  width: 100px;
  height: 100px;
  background-color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  color: var(--color-primary);
}
.splide__slide:nth-of-type(3n + 1) .concept-slide {
  background-color: var(--color-surface);
}
.splide__slide:nth-of-type(3n + 2) .concept-slide {
  background-color: var(--color-accent-light);
}
.splide__slide:nth-of-type(3n + 3) .concept-slide {
  background-color: #fff;
}
/* --------------------------------------

Gifts Section

--------------------------------------- */
#pre-order .subheading {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 1rem;
}
#pre-order .subheading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
#pre-order .subheading img {
  width: 193px;
  height: auto;
  flex-shrink: 0;
}
#pre-order .subheading h3 {
  font-family: var(--accent-font);
  font-size: 2.250rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-bottom: 0;
}
/* ----- Blue round bullets ----- */
ul.round-bullets {
  list-style: none;
  padding-left: 1.5em;
}
ul.round-bullets li {
  position: relative;
  margin-bottom: 0.5em;
}
ul.round-bullets li::before {
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  display: inline-block;
}
hr {
  border: none;
  border-top: 1px solid var(--color-primary);
  margin: 2rem 0;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 90px;
}
.step {
  position: relative;
  background-color: #fff;
  padding: 5rem 5rem 2rem;
  margin: 4rem 0.5rem 0.5rem;
  text-align: center;
}
.arrow-down {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  margin-top: 3rem;
  margin-bottom: -45px;
}
/* ----- Splide 2 ----- */
.kind-words-carousel .splide__slide {
  display: flex;
}
.kind-words-carousel .splide__arrow {
  background: transparent;
}
.kind-words-carousel .splide__arrow--prev {
  left: 1rem;
}
.kind-words-carousel .splide__arrow--next {
  right: 1rem;
}
.kind-words-carousel .splide__arrow svg {
  fill: var(--dark-blue-color);
  height: 2em;
  width: 2em;
}
.kind-words-carousel .splide__arrow--prev svg {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
.kind-words-carousel blockquote {
  font-weight: 500;
}
.kind-words-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  padding: 2rem;
  margin-top: 4rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-align: center;
}
.splide__slide:nth-child(odd) .kind-words-slide {
  background-color: var(--color-surface);
}
.splide__slide:nth-child(even) .kind-words-slide {
  background-color: var(--color-accent-light);
}
.kind-words-slide blockquote {
  font-size: 1.375rem;
  color: #000;
}
.kind-words-slide blockquote cite {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  gap: 0.5rem;
  color: var(--color-primary);
  margin-top: 2rem;
}
.kind-words-slide blockquote cite::before {
  content: " ";
  margin-right: 0;
}
.kind-words-slide .author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.kind-words-slide .author {
  font-weight: 700;
}
.kind-words-slide .author-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 1rem;
}
/* --------------------------------------

Be Yourself Crew page

--------------------------------------- */
.crew-page h1 {
  font-size: 4.688rem;
  line-height: 1.1;
}
.video-container {
  margin-top: 5rem;
  margin-bottom: -200px;
}
.intro {
  padding-top: 260px;
}
/* ----- Custom bullets as yellow circle and checkmark ----- */
.checkmark-yes ul {
  list-style-type: none;
  padding-left: 1rem;
}
.checkmark-yes ul li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.455' height='28' viewBox='0 0 27.455 28'%3E%3Cpath d='M12.5 3A12.5 12.5 0 1 1 0 15.5 12.5 12.5 0 0 1 12.5 3' fill='%23ff0'/%3E%3Cpath d='M23.653.779a1.936 1.936 0 0 1 3.127.03 3.372 3.372 0 0 1 .083 3.931L14.893 23.555a2.082 2.082 0 0 1-1.607.9 2.044 2.044 0 0 1-1.633-.828L3.715 13.649a3.328 3.328 0 0 1-.646-2.769A2.61 2.61 0 0 1 4.692 8.84a1.971 1.971 0 0 1 2.2.813l6.282 7.891L23.6.862c.019-.029.039-.056.06-.083Z' fill='%2335a4eb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  background-position: 0 0.1em;
  padding-left: 1.7em;
}
/* ----- Custom bullets as yellow circle and checkmark ----- */
.checkmark-no ul {
  list-style-type: none;
  padding-left: 1rem;
}
.checkmark-no ul li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.647' height='28' viewBox='0 0 25.647 28'%3E%3Cpath d='M12.325 3.351A12.324 12.324 0 1 1 0 15.676 12.325 12.325 0 0 1 12.325 3.351' fill='%23ff0'/%3E%3Cpath d='M22.831.369q.636 0 1.726 1.19a3.342 3.342 0 0 1 1.089 2.029.792.792 0 0 1-.335.636 10.211 10.211 0 0 1-.922.638 3.911 3.911 0 0 0-.988.871q-4.09 5.063-6.1 7.711.806 1.441 2.279 3.955t2.113 3.738a4.573 4.573 0 0 1 .637 1.878 1.511 1.511 0 0 1-.52 1.139 1.692 1.692 0 0 1-1.19.486q-1.776 0-6.1-7.241a64.528 64.528 0 0 1-3.855 5.247Q9.02 24.6 8 24.606a3.55 3.55 0 0 1-2.062-.737Q4.9 23.133 4.9 22.461a.733.733 0 0 1 .168-.536 5.648 5.648 0 0 0 .6-.671 97.8 97.8 0 0 0 6.4-8.314A70.045 70.045 0 0 1 8.919 6.052 14.945 14.945 0 0 1 7.678 1.425Q7.678 0 8.282 0a8.437 8.437 0 0 1 2.967.588q1.559.585 1.559 1.357 0 2.413 2.077 6.872a46.92 46.92 0 0 1 4.962-6.805A4.545 4.545 0 0 1 22.831.369' fill='%2335a4eb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  background-position: 0 0.1em;
  padding-left: 1.7em;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  column-gap: 90px;
  color: #fff;
}
.benefit {
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}
.benefit.benefit-last {
  padding-bottom: 2rem;
  margin-bottom: 0;
}
.benefits-grid .benefit:last-child {
  padding-bottom: 1rem;
  margin-bottom: 0;
}
.benefit:nth-child(-n+2) {
  border-bottom: 3px solid var(--color-secondary);
}
.benefit h3 {
  font-family: var(--accent-font);
  font-size: 1.875rem;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.benefit h4 {
  font-family: var(--accent-font);
  font-size: 3.438rem;
  line-height: 1.3;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
/* --------------------------------------

YouTube lazy load

--------------------------------------- */
.yt-lazy {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.yt-lazy iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.yt-lazy img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
/* --------------------------------------

Footer

--------------------------------------- */
/* --------------------------------------

Media queries

--------------------------------------- */
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .large-accent-text {
    font-size: 3.75rem;
  }
}
/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
  .coming-soon-graphic {
    margin-bottom: 0.5rem;
  }
  .concepts-carousel .splide__arrow--prev {
    left: 0.3em;
  }
  .concepts-carousel .splide__arrow--next {
    right: 0.3em;
  }
  .step {
    padding: 5rem 2rem 2rem;
  }
  .kind-words-slide blockquote cite {
    display: block;
  }
  .kind-words-slide .author-info {
    margin-top: 1.2rem;
  }
  .kind-words-slide .author-photo {
    width: 120px;
    height: 120px;
    margin-right: 0;
  }
}
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .intro {
    padding-top: 240px;
  }
  .step-grid {
    column-gap: 40px;
  }
}
/* Styles for devices between 992px and 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  header .large-btn-light, header .large-btn-accent {
    font-size: 1.2rem;
  }
}
/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  h1, .crew-page h1 {
    font-size: 2.813rem;
  }
  h2, .heading-large h2 {
    font-size: 2.5rem;
  }
  h3, .concept-slide h3, .tools h3, .large-body-text-4 {
    font-size: 1.688rem;
  }
  #pre-order .subheading h3 {
    font-size: 1.800rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  .benefit h4 {
    font-size: 2.75rem;
  }
  .tools-grid, .benefits-grid {
    grid-template-columns: 1fr;
  }
  .header-image img {
    width: 350px;
    height: auto;
  }
  .mission .photo img {
    width: 450px;
    height: auto;
  }
  .claude-photo img {
    width: 300px;
    height: auto;
  }
  .step-grid {
    grid-template-columns: 1fr;
  }
}
/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  section {
    padding: 3rem 0 3rem;
  }
  .cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .video-container {
    margin-top: 3rem;
    margin-bottom: -100px;
  }
  .intro {
    padding-top: 140px;
  }
  .announcement-bar-container {
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .kind-words-slide blockquote cite {
    text-align: center;
  }
  #pre-order .subheading {
    flex-direction: column;
    text-align: center;
  }
}
/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  body {
    font-size: 17px;
    line-height: 1.6;
  }
  h1 {
    font-size: 2.25rem;
  }
  .crew-page h1 {
    font-size: 2.1rem;
  }
  h2, .heading-large h2, .large-body-text-5 {
    font-size: 2.063rem;
  }
  h3, .concept-slide h3, .tools h3, .large-body-text-4, #pre-order .subheading h3 {
    font-size: 1.563rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  .benefit h4 {
    font-size: 2.234rem;
  }
  .large-body-text-1, .crew-page .large-body-text-4 {
    font-size: 1.375rem;
  }
  .large-body-text-2 {
    font-size: 1.5rem;
  }
  .large-body-text-3 {
    font-size: 1.625rem;
  }
  .large-btn-accent, .large-btn-light, .large-btn-primary {
    font-size: 1rem;
    padding: 0.6em 1em;
  }
  .book-stores .dropdown-menu {
    font-size: 1.063rem;
  }
  .concepts-carousel .splide__arrow--prev {
    left: 0.5em;
  }
  .concepts-carousel .splide__arrow--next {
    right: 0.5em;
  }
  .learn {
    padding-bottom: 19rem;
  }
  .circle {
    width: 80px;
    height: 80px;
    font-size: 3rem;
    margin-bottom: -40px;
  }
  .header-image img {
    width: 230px;
    height: auto;
  }
  .mission .photo img {
    width: 250px;
  }
  .claude-photo img {
    width: 210px;
  }
  .arrow-down {
    display: block;
  }
  .step {
    padding: 4rem 2rem 2rem;
  }
}