/* Media conditions keep their original values and cascade order:
 * (max-width: 768px)
 * (min-width: 769px) and (max-width: 1100px)
 * (max-width: 374px)
 * (max-width: 339px)
 * (min-width: 769px)
 */
/* Training cost comparison and highlighted result. */
.cost {
  background: var(--blue);
  color: var(--white);
  text-align: center;
}
.cost h2 {
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--body-size);
  font-weight: var(--lp-font-weight-regular);
}
.cost-number {
  margin-block: var(--lp-space-24);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--lp-space-16);
}
.cost-number .num {
  font-size: var(--big);
  color: var(--white);
}
.cost-number .unit {
  font-size: var(--h3-size);
}
.cost-formula {
  margin-inline: auto;
  max-inline-size: none;
  font-weight: var(--lp-font-weight-bold);
}
.cost-conclusion {
  margin: var(--lp-space-24) auto 0;
}
.cost-ticks {
  height: var(--lp-space-16);
  display: flex;
  gap: var(--lp-space-8);
  max-width: 480px;
  margin: var(--lp-space-24) auto;
}
.cost-ticks i {
  flex: 1;
  border-top: var(--lp-line-width-2) solid
    color-mix(in srgb, var(--white) 45%, transparent);
}
.cost-note {
  max-inline-size: none;
  margin-top: var(--lp-space-32);
}
@media (max-width: 768px) {
  .cost-number {
    gap: var(--lp-space-8);
    margin-block: var(--lp-space-24);
    flex-wrap: wrap;
  }
  .cost-number .unit {
    font-size: var(--body-size);
  }
  .cost-formula {
    font-size: var(--caption);
  }
  .cost-conclusion {
    font-size: var(--body-size);
  }
  .cost-note {
    max-inline-size: var(--lp-text-width-mobile);
    margin: var(--lp-space-32) auto 0;
    text-align: left;
  }
  .cost-ticks {
    gap: var(--lp-space-8);
  }
}
#cost {
  --intrinsic: 432px;
}
@media (max-width: 768px) {
  #cost {
    --intrinsic: 432px;
  }
}
#cost {
  position: relative;
  isolation: isolate;
}
#cost > :not([data-m-el]),
#cost .cost-note {
  position: relative;
  z-index: var(--mv-4);
}
.cost-ticks {
  position: relative;
}
#cost [data-marker] {
  background: linear-gradient(
    transparent var(--mv-29),
    var(--lp-color-hex-ffffff55) var(--mv-3)
  );
}
body.handwritten-preview #cost {
  position: relative;
  content-visibility: visible;
  contain: none;
  --hw-note-font: "Hand Note", var(--sans);
  --hw-band-gradient: linear-gradient(
    105deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 76%,
    var(--hw-cyan) 100%
  );
  --hw-photo-border: 8px;
  --hw-photo-offset: 12px;
  --hw-note-leading: 1.48;
}

body.handwritten-preview #cost {
  --hw-cost-height: 680px;
  --hw-cost-number-size: 280px;
  --hw-cost-unit-size: 48px;
  --hw-cost-intro-size: 34px;
  --hw-cost-formula-size: 34px;
  --hw-cost-conclusion-size: 28px;
  min-height: var(--hw-cost-height);
  padding-block: var(--lp-space-60) var(--lp-size-72);
  margin-top: -2px;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  text-align: left;
  color: white;
}
body.handwritten-preview #cost::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32px 0 -38px;
  background: var(--hw-band-gradient);
  clip-path: polygon(
    0 0,
    100% calc(100vw * 0.055),
    100% calc(100% - (100vw * 0.035)),
    0 100%
  );
  filter: drop-shadow(
    0 4px 8px color-mix(in srgb, var(--hw-cyan) 18%, transparent)
  );
}
body.handwritten-preview #cost > .container {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  column-gap: var(--lp-space-30);
  row-gap: var(--lp-space-20);
  align-items: center;
  position: relative;
}
body.handwritten-preview #cost .cost-intro {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 37px;
}
body.handwritten-preview #cost .cost-intro h2 {
  color: white;
  font-family: var(--hw-note-font);
  font-size: var(--hw-cost-intro-size);
  font-weight: 600;
  line-height: 1.65;
  text-wrap: pretty;
}
body.handwritten-preview #cost .hw-cost-phrase {
  display: block;
  white-space: nowrap;
}
body.handwritten-preview #cost .cost-number {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0;
  max-width: 850px;
}
body.handwritten-preview #cost .cost-number .num {
  font-family: var(--digits);
  font-size: var(--hw-cost-number-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: white;
  line-height: 0.97;
  letter-spacing: -0.045em;
  -webkit-text-stroke: 0;
  transform: none;
}
body.handwritten-preview #cost .cost-number .unit {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--hw-cost-unit-size);
  line-height: 1.35;
  color: white;
  align-self: center;
  margin-top: var(--lp-hover-lift);
  margin-left: 140px;
}
body.handwritten-preview #cost .cost-formula {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 900px;
  max-width: 72%;
  min-height: 88px;
  margin: 0;
  padding: var(--lp-space-15) var(--lp-space-32) var(--lp-space-18);
  max-inline-size: none;
  text-align: center;
  font-family: var(--hw-note-font);
  font-size: var(--hw-cost-formula-size);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: white;
}
body.handwritten-preview #cost .cost-formula .hw-formula-oval {
  display: block;
  position: absolute;
  inset: -4px -4px -1px;
  color: white;
  pointer-events: none;
}
body.handwritten-preview #cost .cost-ticks {
  display: none;
}
body.handwritten-preview #cost .cost-conclusion {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 920px;
  max-inline-size: none;
  margin: 0;
  font-size: var(--hw-cost-conclusion-size);
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.65;
  color: white;
}
body.handwritten-preview #cost .cost-conclusion [data-marker] {
  color: var(--hw-navy);
  padding-inline: 0.14em;
  background: var(--hw-marker);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.handwritten-preview #cost .cost-note {
  grid-column: 1 / -1;
  grid-row: 4;
  max-width: 895px;
  max-inline-size: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: white;
  text-wrap: pretty;
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.handwritten-preview #cost {
    --hw-cost-number-size: 220px;
    --hw-cost-intro-size: 28px;
    --hw-cost-formula-size: 28px;
  }
  body.handwritten-preview #cost > .container {
    grid-template-columns: 185px minmax(0, 1fr);
    column-gap: var(--lp-space-20);
  }
  body.handwritten-preview #cost .cost-number .unit {
    align-self: flex-end;
    margin-left: 0;
    margin-right: 20%;
    font-size: 38px;
  }
  body.handwritten-preview #cost .cost-formula {
    width: 760px;
    max-width: 83%;
    padding-inline: var(--lp-space-16);
  }
  body.handwritten-preview #cost .cost-conclusion {
    max-width: 84%;
    font-size: 24px;
  }
  body.handwritten-preview #cost .cost-note {
    max-width: 84%;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview #cost {
    --hw-photo-border: 6px;
    --hw-photo-offset: 8px;
  }

  body.handwritten-preview #cost {
    --hw-cost-number-size: 128px;
    --hw-cost-unit-size: 26px;
    --hw-cost-intro-size: 22px;
    --hw-cost-formula-size: 22px;
    --hw-cost-conclusion-size: 20px;
    --hw-band-gradient: linear-gradient(
      103deg,
      var(--hw-blue) 0%,
      var(--hw-blue) 90%,
      var(--hw-cyan) 100%
    );
    min-height: 0;
    padding-block: var(--lp-size-88) 94px;
  }
  body.handwritten-preview #cost::before {
    inset: -24px 0 -22px;
    clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
  }
  body.handwritten-preview #cost > .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lp-size-40);
  }
  body.handwritten-preview #cost .cost-intro {
    padding: 0;
    max-width: 310px;
  }
  body.handwritten-preview #cost .cost-intro h2 {
    font-size: var(--hw-cost-intro-size);
    line-height: 1.65;
  }
  body.handwritten-preview #cost .hw-cost-phrase {
    display: inline-block;
  }
  body.handwritten-preview #cost .cost-number {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
  }
  body.handwritten-preview #cost .cost-number .num {
    font-size: var(--hw-cost-number-size);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }
  body.handwritten-preview #cost .cost-number .unit {
    align-self: flex-end;
    font-size: var(--hw-cost-unit-size);
    margin: 0 var(--lp-space-14) 0 0;
  }
  body.handwritten-preview #cost .cost-formula {
    width: 100%;
    max-width: 100%;
    min-height: 82px;
    padding: var(--lp-space-15) var(--lp-space-5) 17px;
    font-size: var(--hw-cost-formula-size);
    line-height: 1.8;
    white-space: normal;
  }
  body.handwritten-preview #cost .cost-formula > span:not(.hw-formula-oval) {
    display: inline-block;
  }
  body.handwritten-preview #cost .cost-conclusion {
    max-width: none;
    width: 100%;
    font-size: var(--hw-cost-conclusion-size);
    line-height: 1.8;
  }
  body.handwritten-preview #cost .cost-note {
    max-width: none;
    width: 100%;
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
  }
}
@media (max-width: 374px) {
  body.handwritten-preview #cost {
    --hw-cost-number-size: 120px;
    --hw-cost-formula-size: 20px;
  }
}
@media (max-width: 339px) {
  body.handwritten-preview #cost {
    --hw-cost-number-size: 102px;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview #cost {
    padding-block: var(--lp-size-72);
  }
}
@media (min-width: 769px) {
  body.handwritten-preview main > section#cost {
    min-height: 0;
    padding-block: var(--lp-space-64) var(--lp-space-32);
    background: var(
      --hw-band-gradient,
      linear-gradient(108deg, var(--hw-blue), var(--hw-cyan))
    );
    text-align: center;
  }
  body.handwritten-preview main > section#cost::before {
    inset: 0;
    clip-path: none;
    filter: none;
    background: var(
      --hw-band-gradient,
      linear-gradient(108deg, var(--hw-blue), var(--hw-cyan))
    );
  }
  body.handwritten-preview main > section#cost > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  body.handwritten-preview main > section#cost .cost-intro {
    align-self: center;
    width: 100%;
    padding: 0;
    margin: 0 0 var(--lp-space-20);
  }
  body.handwritten-preview main > section#cost .cost-intro h2 {
    font-size: clamp(24px, 2.36vw, 34px);
    line-height: 1.65;
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
    color: var(--lp-color-white);
  }
  body.handwritten-preview main > section#cost .hw-cost-phrase {
    display: inline;
  }

  body.handwritten-preview main > section#cost .cost-number {
    width: 100%;
    margin: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 26px);
  }
  body.handwritten-preview main > section#cost .cost-number .num {
    font-size: clamp(168px, 19.44vw, 280px);
    line-height: 0.97;
  }
  body.handwritten-preview main > section#cost .cost-number .unit {
    align-self: auto;
    margin: 0;
    font-size: clamp(28px, 3.33vw, 48px);
    line-height: 1.35;
    white-space: nowrap;
  }

  body.handwritten-preview main > section#cost .cost-formula {
    width: min(900px, 90%);
    min-height: 78px;
    margin: var(--lp-space-24) auto 0;
    padding: var(--lp-space-12) var(--lp-space-24) var(--lp-space-16);
    font-size: clamp(26px, 2.36vw, 34px);
    text-align: center;
  }
  body.handwritten-preview main > section#cost .cost-conclusion {
    margin: var(--lp-space-20) 0 0;
    font-size: clamp(22px, 1.94vw, 28px);
  }
  body.handwritten-preview main > section#cost .cost-note {
    align-self: flex-end;
    max-width: 895px;
    margin: var(--lp-space-32) 0 0;
    text-align: right;
    color: var(--lp-color-white);
  }
}
body.handwritten-preview main > section#cost,
body.handwritten-preview main > section#cost::before {
  background: var(--lp-color-blue);
}
body.handwritten-preview main > section#cost::before {
  filter: none;
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#cost .cost-intro {
    width: 100%;
    max-width: none;
  }
  body.handwritten-preview main > section#cost .cost-intro h2 {
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.65;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}
body.handwritten-preview main > section#cost .cost-note {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.96);
}
body.handwritten-preview main > section#cost .cost-explanation {
  min-width: 0;
}
@media (min-width: 769px) {
  body.handwritten-preview main > section#cost {
    height: auto;
    min-height: 300px;
    padding: var(--lp-space-36) 0;
    background: var(--lp-color-blue);
  }
  body.handwritten-preview main > section#cost::before {
    inset: 0;
    clip-path: none;
    background: var(--lp-color-blue);
  }
  body.handwritten-preview main > section#cost > .container {
    width: calc(100% - 96px);
    max-width: 1360px;
    display: grid;
    grid-template-columns: minmax(0, 0.87fr) minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--lp-space-24);
  }
  body.handwritten-preview main > section#cost .cost-intro {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body.handwritten-preview main > section#cost .cost-intro h2 {
    font-size: clamp(24px, 2.1vw, 30px);
    line-height: 1.7;
    text-align: left;
    white-space: normal;
    color: white;
  }
  body.handwritten-preview main > section#cost .hw-cost-phrase {
    display: block;
    white-space: nowrap;
  }
  body.handwritten-preview main > section#cost .cost-number {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lp-focus-offset);
  }
  body.handwritten-preview main > section#cost .cost-number .num {
    font-size: clamp(120px, 10.2vw, 140px);
    font-family: Inter, sans-serif;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: white;
  }
  body.handwritten-preview main > section#cost .cost-number .unit {
    font-size: 26px;
    line-height: 1.3;
    align-self: center;
    margin: 0;
  }
  body.handwritten-preview main > section#cost .cost-explanation {
    grid-column: 3;
    grid-row: 1;
  }
  body.handwritten-preview main > section#cost .cost-formula {
    width: 100%;
    max-width: none;
    min-height: 60px;
    margin: 0;
    padding: var(--lp-space-13) var(--lp-space-8);
    font-size: clamp(20px, 1.72vw, 24px);
    line-height: 1.5;
    white-space: nowrap;
  }
  body.handwritten-preview main > section#cost .cost-conclusion {
    width: 100%;
    max-width: none;
    margin: var(--lp-space-20) 0 0;
    font-size: 20px;
    line-height: 1.7;
    text-align: center;
  }
  body.handwritten-preview main > section#cost .cost-conclusion .hw-phrase {
    display: inline-block;
  }
  body.handwritten-preview main > section#cost .cost-note {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 1.8;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.handwritten-preview main > section#cost > .container {
    width: calc(100% - 48px);
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--lp-space-16);
  }
  body.handwritten-preview main > section#cost .cost-intro h2 {
    font-size: 20px;
  }
  body.handwritten-preview main > section#cost .cost-number .num {
    font-size: 100px;
  }
  body.handwritten-preview main > section#cost .cost-formula {
    font-size: 17px;
  }
  body.handwritten-preview main > section#cost .cost-conclusion {
    font-size: 17px;
  }
  body.handwritten-preview main > section#cost .cost-note {
    white-space: normal;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#cost .hw-cost-phrase {
    display: inline;
    white-space: nowrap;
  }
  body.handwritten-preview main > section#cost .cost-formula {
    margin: 0;
  }
  body.handwritten-preview main > section#cost .cost-conclusion {
    margin-top: var(--lp-space-32);
  }
  body.handwritten-preview main > section#cost .cost-intro h2 {
    font-size: clamp(16px, 4.2vw, 18px);
  }
}