.how-page main {
  padding-top: 144px;
}

.how-shell {
  margin-inline: auto;
  max-width: 1280px;
  width: 100%;
}

/* Intro / hero */
.how-intro {
  height: 998px;
  overflow: hidden;
}

.how-intro__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 100px;
}

.how-intro__summary {
  height: 215px;
  position: relative;
}

.how-intro__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  left: 0;
  position: absolute;
  top: 0;
  width: 822px;
}

.how-intro__eyebrow {
  color: var(--color-deep-teal-2);
  font-family: var(--font-script);
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.how-intro h1 {
  color: var(--color-deep-teal-1);
  font-size: 44px;
  line-height: 1.3;
  max-width: none;
  width: 575px;
}

.how-intro__copy {
  color: var(--color-deep-teal-1);
  font-size: 18px;
  left: 870px;
  line-height: 1.3;
  position: absolute;
  top: 100px;
  width: 410px;
}

.how-intro__media {
  border-radius: 12px;
  height: 635px;
  overflow: hidden;
  width: 1280px;
}

.how-intro__media video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Supporting copy */
.how-explainer {
  height: 438px;
  padding-block: 100px;
}

.how-explainer__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline: auto;
  width: 728px;
}

.how-explainer h2 {
  color: var(--color-deep-teal-2);
  font-size: 42px;
  line-height: 1.4;
  width: 728px;
}

.how-explainer__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.how-explainer__copy p {
  color: var(--color-deep-teal-1);
  font-size: 18px;
  line-height: 1.3;
}

/* Three-step process */
.how-steps {
  height: 971px;
  overflow: hidden;
  position: relative;
}

.how-steps::before {
  background: linear-gradient(180deg, rgba(251, 239, 210, 0) 0%, var(--color-cream) 12%, var(--color-cream) 88%, rgba(251, 239, 210, 0) 100%);
  content: "";
  height: 888px;
  left: 50%;
  position: absolute;
  top: 83px;
  transform: translateX(-50%);
  width: 100vw;
}

.how-steps__wordmark {
  height: 122.578px;
  left: 50%;
  max-width: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1340px;
}

.how-steps__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  top: 223px;
  z-index: 1;
}

.how-steps h2 {
  color: var(--color-deep-teal-1);
  font-size: 42px;
  line-height: 1.4;
  margin-inline: auto;
  text-align: center;
  width: 676px;
}

.how-step__copy {
  color: var(--color-deep-teal-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  left: 32px;
  position: absolute;
  top: 32px;
  width: 346px;
  z-index: 2;
}

.how-step__copy > span {
  color: var(--color-brown-sugar);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 950;
  line-height: normal;
}

.how-step__copy > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-step h3 {
  font-size: 20px;
  line-height: normal;
}

.how-step p {
  font-size: 18px;
  line-height: 1.3;
}

.how-step__visual {
  display: block;
  max-width: none;
}

.how-step--dip .how-step__visual {
  aspect-ratio: 347 / 289;
  height: 289px;
  left: 64px;
  top: 169px;
  transform: scaleX(-1);
  width: 347px;
}

.how-step--dip .how-step__visual img {
  height: 112.42%;
  left: -.17%;
  top: -2.7%;
  width: 111%;
}

.how-step--dress .how-step__visual {
  aspect-ratio: 355 / 309;
  height: 309px;
  left: 55.33px;
  top: 151px;
  transform: scaleX(-1);
  width: 355px;
}

.how-step--dress .how-step__visual img {
  height: 102.23%;
  left: -7.65%;
  top: 5.07%;
  width: 107.36%;
}

.how-step--deliver .how-step__visual {
  aspect-ratio: 348 / 260;
  height: 260px;
  right: 0;
  top: 194px;
  width: 348px;
}

.how-step--deliver .how-step__visual img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  width: 100%;
}

/* Traditional methods comparison */
.how-comparison {
  height: 1344px;
  position: relative;
}

.how-comparison__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 1288px;
  position: relative;
  top: -32px;
}

.how-comparison__top {
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 792px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.how-comparison__heading {
  color: var(--color-deep-teal-1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 296px;
  padding-top: 120px;
  text-align: center;
}

.how-comparison__heading h2 {
  font-size: 42px;
  line-height: 1.4;
  margin-inline: auto;
  width: 652px;
}

.how-comparison__heading p {
  font-size: 18px;
  line-height: 1.3;
  margin-inline: auto;
  width: 780px;
}

.method-card {
  height: 448px;
  width: 1280px;
}

.method-card__image {
  flex: 0 0 640px;
  height: 448px;
}

.method-card__panel {
  flex: 0 0 713px;
}

.method-card__panel h3 {
  font-size: 32px;
  line-height: 44px;
}

.method-list {
  grid-template-columns: repeat(2, 244px);
  width: 520px;
}

.method-list ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.method-list li {
  font-size: 20px;
  line-height: 1.3;
  min-height: 26px;
}

.method-list li.is-multiline::before {
  top: 5px;
}

.method-list--bad li::before {
  background-image: url("../images/how-it-works-close.svg");
}

.method-list--good li::before {
  background-image: url("../images/how-it-works-check.svg");
}

/* Final CTA */
.how-cta {
  height: 456px;
  position: relative;
  text-align: center;
}

.how-cta__palm {
  align-items: center;
  display: flex;
  height: 309px;
  justify-content: center;
  position: absolute;
  width: 221px;
  z-index: 1;
}

.how-cta__palm img {
  height: 290.763px;
  max-width: none;
  width: 192.037px;
}

.how-cta__palm--left {
  bottom: -9px;
  left: -57px;
}

.how-cta__palm--left img {
  transform: scaleX(-1) rotate(5.89deg) skewX(-.01deg);
}

.how-cta__palm--right {
  right: -57px;
  top: 96px;
}

.how-cta__palm--right img {
  transform: rotate(-5.89deg) skewX(-.01deg);
}

.how-cta__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  left: 50%;
  position: absolute;
  top: 100px;
  transform: translateX(-50%);
  width: 672px;
  z-index: 2;
}

.how-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.how-cta h2 {
  color: var(--color-deep-teal-1);
  font-size: 42px;
  line-height: 1.4;
}

.how-cta__copy p {
  color: var(--color-deep-teal-1);
  font-size: 18px;
  line-height: 1.3;
}

.how-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media only screen and (max-width: 1366px) {
  .how-shell { width: min(1280px, 100%); }
}

@media only screen and (max-width: 1199px) {
  .how-shell { width: calc(100% - 40px); }
  .how-intro { height: auto; padding-bottom: 92px; }
  .how-intro__inner { padding-top: 92px; }
  .how-intro__summary { display: grid; gap: 48px; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); height: auto; }
  .how-intro__heading, .how-intro__copy { left: auto; position: relative; top: auto; width: 100%; }
  .how-intro h1 { width: min(575px, 100%); }
  .how-intro__media { aspect-ratio: 1280 / 635; height: auto; width: 100%; }
  .how-explainer { height: auto; }
  .how-steps { height: auto; min-height: 900px; }
  .how-steps__wordmark { width: calc(100% - 40px); }
  .how-step__copy { left: 24px; width: calc(100% - 48px); }
  .how-step p { font-size: 16px; }
  .how-step--dip .how-step__visual { left: 12%; }
  .how-step--dress .how-step__visual { left: 8%; }
  .how-comparison { height: auto; padding-bottom: 88px; }
  .how-comparison__inner { height: auto; top: 0; }
  .how-comparison__top { gap: 0; height: auto; position: static; }
  .how-comparison__heading { height: auto; padding-block: 96px 48px; }
  .how-comparison__heading h2 { font-size: 36px; width: min(652px, 100%); }
  .how-comparison__heading p { width: min(780px, 100%); }
  .method-card { display: grid; grid-template-columns: 1fr; height: auto; width: 100%; }
  .method-card__image,
  .method-card__panel,
  .method-card--old .method-card__image,
  .method-card--old .method-card__panel,
  .method-card--new .method-card__image,
  .method-card--new .method-card__panel {
    border-radius: 12px;
    height: auto;
    margin-left: 0;
    width: 100%;
  }
  .method-card__image { aspect-ratio: 640 / 448; }
  .method-card--old .method-card__panel,
  .method-card--new .method-card__panel { padding: 52px; }
  .method-card--new .method-card__image { order: -1; }
  .method-list { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .method-list li { font-size: 18px; }
}

@media only screen and (max-width: 1024px) {
  .how-page main { padding-top: 120px; }
  .how-intro__summary { grid-template-columns: 1fr; }
  .how-intro__copy { max-width: 680px; }
  .how-explainer { padding-block: 84px; }
  .how-explainer__content, .how-explainer h2 { width: min(728px, calc(100% - 56px)); }
  .how-steps { padding-bottom: 84px; }
  .how-steps__inner { top: 190px; }
  .how-steps h2 { font-size: 36px; width: min(676px, 100%); }
  .how-step { height: 430px; }
  .how-step__copy > span { font-size: 38px; }
  .how-step--dip .how-step__visual, .how-step--dress .how-step__visual { bottom: 0; height: auto; left: 0; top: auto; width: 108%; }
  .how-step--deliver .how-step__visual { bottom: 0; height: auto; top: auto; width: 100%; }
  .method-list { grid-template-columns: repeat(2, 1fr); }
  .how-cta h2 { font-size: 36px; }
}

@media only screen and (max-width: 912px) {
  .how-steps { padding-bottom: 88px; }
  .how-steps__inner { top: 170px; }
  .how-steps__grid { grid-template-columns: 1fr; margin-inline: auto; max-width: 520px; width: 100%; }
  .how-step { height: 458px; }
  .how-step--dip .how-step__visual { bottom: 0; height: 330px; left: 12%; top: auto; width: 430px; }
  .how-step--dress .how-step__visual { bottom: 0; height: 330px; left: 10%; top: auto; width: 430px; }
  .how-step--deliver .how-step__visual { bottom: 0; height: 300px; top: auto; width: 405px; }
}

@media only screen and (max-width: 767px) {
  .how-shell { width: calc(100% - 40px); }
  .how-page main { padding-top: 112px; }
  .how-intro { padding-bottom: 72px; }
  .how-intro__inner { gap: 40px; padding-top: 72px; }
  .how-intro__eyebrow { font-size: 24px; }
  .how-intro h1 { font-size: 32px; line-height: 1.3; }
  .how-intro__copy, .how-explainer__copy p { font-size: 16px; line-height: 1.4; }
  .how-intro__media { aspect-ratio: 1.35; }
  .how-explainer { padding-block: 72px; }
  .how-explainer__content, .how-explainer h2 { width: calc(100% - 40px); }
  .how-explainer h2, .how-steps h2, .how-comparison__heading h2, .how-cta h2 { font-size: 30px; line-height: 1.32; }
  .how-steps__wordmark { height: auto; width: calc(100% - 24px); }
  .how-steps__inner { top: 120px; }
  .how-step { height: 420px; }
  .how-comparison { padding-bottom: 72px; }
  .how-comparison__heading { gap: 16px; padding-block: 72px 40px; }
  .how-comparison__heading p { font-size: 16px; line-height: 1.4; }
  .method-card__panel h3 { font-size: 26px; line-height: 1.35; }
  .method-card--old .method-card__panel, .method-card--new .method-card__panel { padding: 40px 28px; }
  .method-list { gap: 16px; grid-template-columns: 1fr; }
  .method-list li { font-size: 18px; }
  .how-cta { height: auto; min-height: 500px; }
  .how-cta__content { padding-block: 88px; position: relative; top: auto; width: calc(100% - 40px); }
  .how-cta__copy p { font-size: 16px; }
  .how-cta__actions { align-items: center; flex-direction: column; }
  .how-cta__palm { opacity: .35; }
}

@media only screen and (max-width: 576px) {
  .how-step--dip .how-step__visual, .how-step--dress .how-step__visual { bottom: 0; height: auto; left: 0; top: auto; width: 108%; }
  .how-step--deliver .how-step__visual { height: auto; width: 100%; }
}

@media only screen and (max-width: 479px) {
  .how-shell { width: calc(100% - 32px); }
  .how-intro__inner { padding-top: 60px; }
  .how-intro__eyebrow { font-size: 22px; }
  .how-intro h1 { font-size: 28px; }
  .how-explainer__content, .how-explainer h2 { width: calc(100% - 32px); }
  .how-explainer h2, .how-steps h2, .how-comparison__heading h2, .how-cta h2 { font-size: 26px; }
  .how-steps__inner { top: 96px; }
  .how-step { height: 390px; }
  .how-step__copy { left: 20px; top: 20px; width: calc(100% - 40px); }
  .how-step__copy > span { font-size: 34px; }
  .how-step h3 { font-size: 18px; }
  .how-step p { font-size: 15px; }
  .method-card--old .method-card__panel, .method-card--new .method-card__panel { padding: 34px 22px; }
  .method-card__panel h3 { font-size: 24px; }
  .method-list li { font-size: 16px; }
  .how-cta__content { width: calc(100% - 32px); }
  .how-cta__palm { display: none; }
}

@media only screen and (max-width: 374px) {
  .how-intro h1 { font-size: 26px; }
  .how-explainer h2, .how-steps h2, .how-comparison__heading h2, .how-cta h2 { font-size: 24px; }
  .how-step { height: 365px; }
}

@media (prefers-reduced-motion: reduce) {
  .how-intro__media video { animation: none; }
  .how-comparison__top { position: static; }
}