/* ==========================================================================
   Home page
   ========================================================================== */

/* ==========================================================================
   Hero — sits inside the page-top box (layout.css): dark blue, grid pattern
   on top, glow at the bottom
   ========================================================================== */

.page-top--hero {
  margin-bottom: var(--spacing-xl);
  background-color: var(--color-additional-blue-dark);
  background-image:
    url("../../img/backgrounds/grid.webp"),
    url("../../img/backgrounds/gradient.webp");
  background-repeat: no-repeat;
  background-position:
    top center,
    bottom center;
  background-size:
    1000px auto,
    auto;
}

.hero {
  position: relative;
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  font-size: var(--fs-header-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  color: var(--color-white);
}

.hero__title-sub {
  font-size: var(--fs-header-md);
  font-weight: var(--fw-semi-bold);
}

.hero__title-accent {
  color: var(--color-additional-green);
}

/* The accent phrase ends with three hand-drawn strokes */
.hero__title-mark {
  display: inline-block;
  padding-right: 26px;
  padding-bottom: 8px;
  background: url("../../icons/title-lines.svg") no-repeat right bottom / 25px
    25px;
}

.hero__images {
  display: grid;
}

.hero__mobile-image {
  width: 100%;
  text-align: center;
}

/* ---------- Hero lead form ----------
   A translucent strip that meets the bottom edge of the hero box, so the
   negative margins cancel the padding of .hero at every breakpoint. */

.hero__form {
  margin: 0 calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-lg));
  padding: var(--spacing-lg) var(--spacing-md);
  border: 1px solid rgb(255 255 255 / 20%);
  border-bottom: 0;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  background-color: rgb(255 255 255 / 8%);
  backdrop-filter: blur(8px);
}

.hero-form__title {
  margin-bottom: var(--spacing-lg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  color: var(--color-white);
}

.hero-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hero-form__input {
  height: 56px;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--border-radius-md);
  font-size: var(--fs-base);
  color: var(--color-white);
  background-color: rgb(255 255 255 / 10%);
}

.hero-form__input::placeholder {
  color: rgb(255 255 255 / 70%);
}

.hero-form__submit {
  height: 56px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-additional-blue-dark);
  background-color: var(--color-additional-green);
}

@media (hover: hover) and (pointer: fine) {
  .hero-form__submit:hover {
    background-color: var(--color-green);
  }
}

/* ---------- Hero subjects (from 992px) ----------
   A collage of subject photos; each switches to a second shot on hover
   (plain :hover on purpose — it should also react to taps on tablets). */

.hero-subjects {
  position: relative;
  display: none;
  width: 100%;
  max-width: 400px;
  height: 575px;
  place-self: center;
}

.hero-subject {
  position: absolute;
}

.hero-subject__photos {
  position: relative;
}

.hero-subject__photo {
  position: relative;
  z-index: 1;
  width: var(--photo-width);
  border-radius: var(--border-radius-lg);
}

.hero-subject__photo--hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: all var(--transition-base);
}

.hero-subject:hover .hero-subject__photo--hover {
  opacity: 1;
}

.hero-subject__badge {
  position: absolute;
  z-index: var(--ui-index-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-xl);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--subject-color);
  background-color: rgb(6 38 74 / 75%); /* --color-primary-950 @ 75% */
  backdrop-filter: blur(10px);
}

/* Positions in the 400 × 575 box (992–1399px) */

.hero-subject--ukrainian-language {
  --subject-color: var(--color-ukrainian);
  --photo-width: 82px;
  top: 0;
  left: 53px;
}

.hero-subject--ukrainian-language .hero-subject__badge {
  right: -26px;
  bottom: 7px;
}

.hero-subject--biology {
  --subject-color: var(--color-biology);
  --photo-width: 94px;
  top: 200px;
  left: 0;
}

.hero-subject--biology .hero-subject__badge {
  bottom: -15px;
  left: -5px;
}

.hero-subject--english {
  --subject-color: var(--color-english);
  --photo-width: 103px;
  top: 392px;
  left: 27px;
}

.hero-subject--english .hero-subject__badge {
  right: 5px;
  bottom: 5px;
}

.hero-subject--history {
  --subject-color: var(--color-history);
  --photo-width: 131px;
  top: 161px;
  right: 0;
  left: 0;
  width: 131px;
  margin: 0 auto;
}

.hero-subject--history .hero-subject__badge {
  right: 10px;
  bottom: 10px;
}

.hero-subject--geography {
  --subject-color: var(--color-geography);
  --photo-width: 90px;
  top: 273px;
  right: 0;
}

.hero-subject--geography .hero-subject__badge {
  bottom: -8px;
  left: -12px;
}

.hero-subject--maths {
  --subject-color: var(--color-maths);
  --photo-width: 100px;
  top: 395px;
  right: 6px;
}

.hero-subject--maths .hero-subject__badge {
  right: 0;
  bottom: 5px;
}

.hero-subject--chemistry {
  --subject-color: var(--color-chemistry);
  --photo-width: 90px;
  top: 148px;
  right: 10px;
}

.hero-subject--chemistry .hero-subject__badge {
  bottom: -16px;
  left: -2px;
}

.hero-subject--physics {
  --subject-color: var(--color-physics);
  --photo-width: 94px;
  top: 17px;
  right: 100px;
}

.hero-subject--physics .hero-subject__badge {
  bottom: -8px;
  left: -2px;
}

.hero-subject--ukrainian-literature {
  --subject-color: var(--color-literature);
  --photo-width: 100px;
  top: 400px;
  left: 150px;
}

.hero-subject--ukrainian-literature .hero-subject__badge {
  bottom: -8px;
  left: -20px;
}

@media (min-width: 992px) {
  .page-top--hero {
    margin-bottom: var(--spacing-xxl);
    background-size: auto, auto;
  }

  .hero {
    grid-template: 1fr min-content / 6fr 6fr;
    grid-template-areas:
      "title images"
      "form  form";
    row-gap: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
  }

  .hero__title {
    grid-area: title;
    /* Centred next to the taller collage; from 1400px it starts at the top,
       as the design has it */
    align-self: center;
    container-type: inline-size;
    gap: 1.538cqw; /* 10.354 of the design's 673px column */
    margin-top: 30px;
  }

  /* Font sizes of the design, as a share of the column, so the lines break
     where they do in Figma at every width: 77.654 / 51.769 / 77.654 of 673 */
  .hero__title > span {
    font-size: 11.538cqw;
    line-height: var(--lh-base);
  }

  .hero__title > .hero__title-sub {
    font-size: 7.692cqw;
  }

  .hero__images {
    grid-area: images;
  }

  /* Paddings of the design's strip: 35 / 83 / 41 / 48 */
  .hero__form {
    grid-area: form;
    margin: 0 calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl));
    padding: 35px 83px 41px var(--spacing-xl);
  }

  .hero-form__title {
    margin-bottom: 25px;
    font-size: 30px;
  }

  .hero-form__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  /* The 250 / 250 / 250 / 416 of the design, kept as proportions */
  .hero-form__input {
    flex: 250 1 0;
    min-width: 0;
  }

  /* Below 1200px the fields would be too narrow for their placeholders, so the
     button takes a line of its own */
  .hero-form__submit {
    flex: 1 1 100%;
  }

  .hero__mobile-image {
    display: none;
  }

  .hero-subjects {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hero {
    grid-template-columns: 7fr 5fr;
  }

  .hero__title-sub {
    font-weight: var(--fw-bold);
  }

  .hero__title-mark {
    padding-bottom: 4px;
    background-size: 27px 27px;
  }

  .hero-form__submit {
    flex: 416 1 0;
    margin-left: 23px; /* 43px between the fields and the button */
  }

  .hero-subject__badge {
    font-size: var(--fs-header-xxs);
  }

  .hero-subject--physics .hero-subject__badge {
    left: -6px;
  }
}

/* Positions of the design's 594 × 573.93 collage, in per cent of the box, so
   the whole hero scales with the column (from 1400px) */
@media (min-width: 1400px) {
  .hero {
    /* 673 / 594 of the design, with its 48px gutter and 65px right margin */
    grid-template-columns: 673fr 594fr;
    column-gap: var(--spacing-xl);
    row-gap: var(--spacing-lg); /* 24px above the form strip */
    padding-right: 65px;
  }

  .hero__form {
    margin-right: -65px;
  }

  /* Both columns start under the header, as they do in the design */
  .hero__title {
    align-self: start;
    margin-top: 32px;
  }

  .hero-subjects {
    place-self: start;
  }

  .hero-subjects {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 594 / 573.93;
  }

  .hero-subject {
    width: var(--photo-width);
  }

  .hero-subject__photo {
    width: 100%;
  }

  .hero-subject--ukrainian-language {
    --photo-width: 16.892%;
    top: 5.594%;
    left: 18.919%;
  }

  .hero-subject--ukrainian-language .hero-subject__badge {
    right: 16px;
    bottom: 9px;
  }

  .hero-subject--biology {
    --photo-width: 19.594%;
    top: 41.959%;
    left: 6.106%;
  }

  .hero-subject--biology .hero-subject__badge {
    bottom: 17px;
    left: 96px;
  }

  .hero-subject--english {
    --photo-width: 21.216%;
    top: 69.329%;
    bottom: auto;
    left: 15.405%;
  }

  .hero-subject--english .hero-subject__badge {
    right: auto;
    bottom: 14px;
    left: 42px;
  }

  .hero-subject--history {
    --photo-width: 30.811%;
    top: 24.056%;
    right: auto;
    left: 40.541%;
    width: 30.811%;
    margin: 0;
  }

  .hero-subject--history .hero-subject__badge {
    right: auto;
    bottom: 33px;
    left: 76px;
  }

  .hero-subject--geography {
    --photo-width: 20.946%;
    top: 32.169%;
    right: auto;
    left: 79.054%;
  }

  .hero-subject--geography .hero-subject__badge {
    bottom: 14px;
    left: -30px;
  }

  .hero-subject--maths {
    --photo-width: 21.621%;
    top: 61.959%;
    right: auto;
    bottom: auto;
    left: 76.216%;
  }

  .hero-subject--maths .hero-subject__badge {
    right: auto;
    bottom: 33px;
    left: -38px;
  }

  .hero-subject--chemistry {
    --photo-width: 20.946%;
    top: 2.098%;
    right: auto;
    left: 74.996%;
  }

  .hero-subject--chemistry .hero-subject__badge {
    bottom: 14px;
    left: -30px;
  }

  .hero-subject--physics {
    --photo-width: 19.594%;
    top: -1.398%;
    right: auto;
    left: 46.621%;
  }

  .hero-subject--physics .hero-subject__badge {
    bottom: 14px;
    left: -30px;
  }

  .hero-subject--ukrainian-literature {
    --photo-width: 18.378%;
    top: 79.021%;
    bottom: auto;
    left: 47.973%;
  }

  .hero-subject--ukrainian-literature .hero-subject__badge {
    bottom: 1px;
    left: 32px;
  }
}

/* ==========================================================================
   Benefits — stat cards and the guarantee banner
   ========================================================================== */

.benefits {
  /* Shades of the design that the token palette has no match for */
  --benefit-card: #ddeeff;
  --benefit-banner: #8bf1da;
  --benefit-banner-stroke: #1ab99b;
}

.benefits .section-title__heading {
  color: var(--color-additional-blue-dark);
}

/* The heading breaks after "TURBO" only where the line is wide enough */
.benefits__break {
  display: none;
}

.benefits__refund {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-gray-secondary);
}

.benefits__refund img {
  flex: none;
}

.benefits__grid {
  display: grid;
  gap: var(--spacing-md);
}

/* ---------- Stat card ---------- */

.benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  border-radius: 28px; /* the design's own radius */
  color: var(--color-additional-blue-dark);
  background-color: var(--benefit-card);
}

.benefit__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-md);
  background-color: rgb(255 255 255 / 55%);
}

/* The sparkle in the corner of the "500+" card */
.benefit__star {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
}

.benefit__stat {
  font-size: var(--stat-size, var(--fs-header-md));
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
}

.benefit__label {
  margin-top: var(--spacing-xs);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Each card has its own display size, as in the design */
.benefit--graduates {
  --stat-size: 48px;
}

.benefit--top-scores {
  --stat-size: 40px;
}

.benefit--years {
  --stat-size: 32px;
}

.benefit--forbes {
  --stat-size: var(--fs-header-sm);
}

/* ---------- Guarantee banner ---------- */

.benefits__guarantee {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-additional-blue-dark);
  background-color: var(--benefit-banner);
  box-shadow: 0 12px 24px rgb(9 13 114 / 10%); /* --color-additional-blue-dark @ 10% */
}

.benefits__guarantee-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--benefit-banner-stroke);
  border-radius: var(--border-radius-md);
  background-color: rgb(255 255 255 / 80%);
}

@media (min-width: 768px) {
  .benefits__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "graduates top-scores"
      "graduates years"
      "forbes    forbes";
    gap: var(--spacing-lg);
  }

  .benefit {
    padding: var(--spacing-lg);
  }

  .benefit--graduates {
    grid-area: graduates;
    --stat-size: 56px;
  }

  .benefit--top-scores {
    grid-area: top-scores;
    --stat-size: 56px;
  }

  .benefit--years {
    grid-area: years;
    --stat-size: 40px;
  }

  /* Forbes: the icon sits beside the two lines, not above them */
  .benefit--forbes {
    grid-area: forbes;
    --stat-size: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--spacing-lg);
  }

  .benefit--forbes .benefit__icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .benefit--forbes .benefit__label {
    margin-top: 0;
  }

  .benefits__refund,
  .benefit__label {
    font-size: var(--fs-md);
  }

  .benefit__star {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
  }

  .benefits__guarantee {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    font-size: var(--fs-md);
  }
}

@media (min-width: 992px) {
  .benefits__break {
    display: inline;
  }
}

@media (min-width: 1200px) {
  /* The 550 / 350 / 336 columns of the design; the tall card spans both rows */
  .benefits__grid {
    grid-template-columns: 550fr 350fr 336fr;
    grid-template-areas:
      "graduates top-scores years"
      "graduates forbes     forbes";
  }

  .benefit--graduates {
    --stat-size: 94px;
  }

  .benefit--top-scores {
    --stat-size: 70px;
  }

  .benefit--years {
    --stat-size: 48px;
  }

  .benefit--forbes {
    --stat-size: var(--fs-header-lg);
  }

  /* The design's own paddings: 32 at the sides, tighter above and below */
  .benefit {
    padding: 20px 32px 16px;
  }

  .benefit__icon {
    margin-bottom: 14px;
  }

  /* Only here is the card the design's 360px tall, so only here does its
     number sit low, with the empty 72px below it */
  .benefit--graduates {
    padding-top: 24px;
    padding-bottom: 72px;
  }

  .benefit--graduates .benefit__stat {
    margin-top: auto;
  }

  .benefit--forbes {
    padding: 27px 24px;
  }

  .benefit--forbes {
    column-gap: 40px;
  }

  .benefits .section-title__heading {
    font-size: 49px;
    line-height: 1.1;
  }

  .benefit__label,
  .benefits__refund,
  .benefits__guarantee {
    font-size: 22px;
  }

  .benefits__refund {
    gap: 12px;
    margin-top: 30px;
  }

  .benefits__guarantee {
    gap: 40px;
    padding: 28px 32px;
  }
}

/* ==========================================================================
   Courses — a swipeable row below 1200px, a mosaic grid from 1200px
   ========================================================================== */

/* ---------- Buttons above the row (below 1200px) ---------- */

.courses__tabs {
  display: grid;
  grid-template-areas:
    "t1 t1 t1 t2 t2 t2"
    "t3 t3 t4 t4 t5 t5"
    "t6 t6 t6 t6 t6 t6"
    "t7 t7 t7 t8 t8 t8";
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.courses__tab:nth-child(1) {
  grid-area: t1;
}
.courses__tab:nth-child(2) {
  grid-area: t2;
}
.courses__tab:nth-child(3) {
  grid-area: t3;
}
.courses__tab:nth-child(4) {
  grid-area: t4;
}
.courses__tab:nth-child(5) {
  grid-area: t5;
}
.courses__tab:nth-child(6) {
  grid-area: t6;
}
.courses__tab:nth-child(7) {
  grid-area: t7;
}
.courses__tab:nth-child(8) {
  grid-area: t8;
}

.courses__tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-gray-stroke);
  border-radius: var(--border-radius-xl);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: center;
  color: var(--color-gray);
  background-color: var(--color-white);
}

.courses__tab.is-active {
  border-color: var(--color-primary-300);
  color: var(--color-black);
  background-color: var(--color-gray-light);
}

@media (hover: hover) and (pointer: fine) {
  .courses__tab:hover {
    border-color: var(--color-primary-300);
    color: var(--color-primary-600);
    background-color: var(--color-gray-light);
  }
}

/* ---------- The row ----------
   Runs to the right edge of the screen (negative margin = container padding);
   --per-view is how many cards fit, the fraction hints there is more. */

.courses__list {
  --per-view: 1.1;
  --gap: var(--spacing-md);

  position: relative; /* offsetParent for carousel.js */
  display: flex;
  gap: var(--gap);
  margin-right: calc(-1 * var(--spacing-container-sm));
  padding-right: var(--spacing-container-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.courses__list::-webkit-scrollbar {
  display: none;
}

.courses__list > .course-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .courses__tab {
    font-size: var(--fs-base);
  }
}

@media (min-width: 600px) {
  .courses__list {
    --per-view: 2.1;
  }
}

@media (min-width: 768px) {
  .courses__list {
    margin-right: calc(-1 * var(--spacing-container-md));
    padding-right: var(--spacing-container-md);
  }
}

@media (min-width: 900px) {
  .courses__list {
    --per-view: 3.1;
  }
}

@media (min-width: 992px) {
  .courses__list {
    margin-right: calc(-1 * var(--spacing-container-lg));
    padding-right: var(--spacing-container-lg);
  }
}

@media (min-width: 1200px) {
  .courses__tabs {
    display: none;
  }

  .courses__list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "history   history   history   history   history   history   history   english   english   english   english   english"
      "biology   biology   biology   biology   maths     maths     maths     maths     geography geography geography geography"
      "ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian ukrainian"
      "chemistry chemistry chemistry chemistry chemistry physics   physics   physics   physics   physics   physics   physics";
    gap: var(--spacing-lg);
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  .course-card--history {
    grid-area: history;
  }
  .course-card--english {
    grid-area: english;
  }
  .course-card--biology {
    grid-area: biology;
  }
  .course-card--maths {
    grid-area: maths;
  }
  .course-card--geography {
    grid-area: geography;
  }
  .course-card--ukrainian {
    grid-area: ukrainian;
  }
  .course-card--chemistry {
    grid-area: chemistry;
  }
  .course-card--physics {
    grid-area: physics;
  }
}

/* ---------- Course card ----------
   The teacher photo sits at the bottom (centred; bottom-right from 1200px),
   the bottom padding keeps the text clear of it. */

.course-card {
  --photo-height: 320px;

  position: relative;
  overflow: hidden;
  padding: var(--spacing-md) var(--spacing-md) 330px;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-gray-light);
}

.course-card__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  height: var(--photo-height);
  pointer-events: none;
}

.course-card__photo img {
  width: auto;
  max-width: none;
  height: 100%;
}

.course-card__content {
  position: relative;
}

.course-card__title {
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-header-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  color: var(--color-black);
}

.course-card__tutor {
  margin-bottom: var(--spacing-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-base);
  color: var(--color-black);
}

.course-card__description {
  margin-bottom: var(--spacing-md);
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-gray);
}

.course-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.course-card__score {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-black);
}

.course-card__button {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: calc(100% - 48px);
  white-space: pre;
}

@media (min-width: 768px) {
  .course-card {
    padding: var(--spacing-lg) var(--spacing-lg) 330px;
  }
}

@media (min-width: 1200px) {
  .course-card {
    --photo-height: 346px;

    padding: var(--spacing-xl) var(--spacing-xl) 88px;
  }

  .course-card__photo {
    justify-content: flex-end;
  }

  .course-card__title {
    font-size: var(--fs-header-lg);
  }

  .course-card__tutor,
  .course-card__description {
    margin-bottom: var(--spacing-lg);
    font-size: var(--fs-md);
  }

  .course-card__rating {
    margin-bottom: var(--spacing-lg);
  }

  .course-card__score {
    font-size: var(--fs-md);
  }

  .course-card__button {
    bottom: 40px;
    left: 40px;
    width: 240px;
  }

  /* Per-card layout: room for the photo on the right / below */
  .course-card--history {
    padding-right: 360px;
  }

  .course-card--english,
  .course-card--chemistry {
    padding-right: 184px;
  }

  .course-card--physics {
    padding-right: 320px;
  }

  .course-card--biology,
  .course-card--maths,
  .course-card--geography {
    --photo-height: 320px;

    padding-bottom: 248px;
  }

  /* Wide card: photo on the left, text on the right */
  .course-card--ukrainian {
    --photo-height: 303px;

    padding-left: 320px;
  }

  .course-card--ukrainian .course-card__photo {
    justify-content: flex-start;
    padding-left: 50px;
  }

  .course-card--ukrainian .course-card__button {
    left: 320px;
  }
}

/* ==========================================================================
   Printed notes (promo)
   ========================================================================== */

.promo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-blue-light);
}

.promo__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
}

.promo__text {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-black);
}

.promo__banner {
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.promo__banner img {
  width: 100%;
}

@media (min-width: 992px) {
  .promo {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
  }

  .promo__content {
    flex: 1;
    align-items: flex-start;
    text-align: left;
  }

  .promo__banner {
    flex: 1;
  }
}

@media (min-width: 1200px) {
  .promo__text {
    font-size: var(--fs-md);
  }
}

/* ==========================================================================
   Bonus content — dark card with social links, a preview and two numbers
   ========================================================================== */

.bonus {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-additional-blue-dark);
  background-image:
    url("../../img/backgrounds/grid.webp"),
    url("../../img/backgrounds/gradient-bonus.webp");
  background-repeat: no-repeat;
  background-position:
    top -100px center,
    bottom center;
  background-size:
    1000px auto,
    auto;
}

.bonus__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.bonus__social {
  display: flex;
  gap: var(--spacing-md);
}

.bonus__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transition: all var(--transition-base);
}

/* Brand colours of the networks */
.bonus__social-link--instagram {
  background: linear-gradient(
    -115.324deg,
    #d416c7 0%,
    #f1168b 52%,
    #ff7719 100%
  );
}

.bonus__social-link--youtube {
  background-color: #ff0032;
}

.bonus__social-link--tiktok {
  background-color: #291422;
}

.bonus__social-link--telegram {
  background-color: #23a2df;
}

@media (hover: hover) and (pointer: fine) {
  .bonus__social-link:hover {
    opacity: 0.7;
  }
}

/* The preview has its shadow baked in, so it is nudged up-left to line up */
.bonus__image {
  margin-top: -2.3%;
  margin-left: -2.3%;
}

.bonus__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.bonus__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
}

.bonus__stat--light {
  background-color: var(--color-blue-light);
}

.bonus__stat--blue {
  background-color: var(--color-primary-300);
}

.bonus__stat-value {
  font-size: var(--fs-header-md);
  font-weight: var(--fw-bold);
  color: var(--color-additional-blue-dark);
}

.bonus__stat-label {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-black);
}

.bonus__text {
  color: var(--color-white);
}

/* An empty line between paragraphs */
.bonus__text p + p {
  margin-top: 1lh;
}

@media (min-width: 768px) {
  .bonus__stats {
    gap: var(--spacing-md);
  }
}

@media (min-width: 992px) {
  .bonus {
    grid-template-columns: 310px 1fr;
    grid-template-areas:
      "intro info"
      "text  info";
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-size: auto, auto;
  }

  .bonus__intro {
    grid-area: intro;
    gap: var(--spacing-xl);
  }

  .bonus__info {
    grid-area: info;
  }

  .bonus__text {
    grid-area: text;
  }

  .bonus__stats {
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1200px) {
  .bonus {
    grid-template-columns: 410px 1fr;
    padding: var(--spacing-xl);
  }

  .bonus__stat {
    padding: var(--spacing-xl);
  }

  .bonus__stat-value {
    font-size: var(--fs-header-xxl);
  }

  .bonus__stat-label {
    font-size: var(--fs-md);
  }
}

/* ==========================================================================
   Free topics — cards that open the sign-up modal.
   From 992px the cards stand in one row as tall photos; the hovered one widens.
   ========================================================================== */

.free-courses__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.free-course {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.free-course__image {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
  border-radius: var(--border-radius-lg);
  background-size: cover;
}

/* Dark veil over the photo */
.free-course__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(6 38 74 / 20%); /* --color-primary-950 @ 20% */
}

.free-course__image img {
  width: 100%;
}

.free-course__subject,
.free-course__title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.free-course__subject {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-gray);
}

.free-course__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-base);
  color: var(--color-black);
}

.free-courses__action {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .free-courses__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .free-courses__action {
    flex-direction: row;
  }
}

@media (min-width: 992px) {
  .free-courses__list {
    display: flex;
    justify-content: space-between;
    gap: 0;
    width: calc(100% + 8px);
    margin: 0 calc(-1 * var(--spacing-xs)) var(--spacing-xl);
  }

  /* Transparent side borders make the gaps and widen with the card */
  .free-course {
    flex: 1 1 100%;
    width: 0;
    border-inline: var(--spacing-xs) solid transparent;
    transition: all 0.4s ease-in-out;
  }

  .free-course:hover {
    flex-basis: 200%;
  }

  .free-course__image {
    height: 600px;
    margin-bottom: var(--spacing-md);
    background-position: top center;
    background-repeat: no-repeat;
  }

  .free-course__image::after {
    background-color: rgb(6 38 74 / 50%);
    transition: all 0.4s ease-in-out;
  }

  .free-course:hover .free-course__image::after {
    opacity: 0;
  }

  .free-course__image img {
    display: none;
  }

  .free-course__subject {
    margin-bottom: var(--spacing-xs);
    font-size: var(--fs-md);
  }

  .free-course__title {
    font-size: var(--fs-header-xs);
  }

  .free-course--history .free-course__image {
    background-color: var(--color-history);
    background-image: url("../../img/free-courses/history.webp");
  }

  .free-course--ukrainian-language .free-course__image {
    background-color: var(--color-ukrainian);
    background-image: url("../../img/free-courses/ukrainian-language.webp");
  }

  .free-course--ukrainian-literature .free-course__image {
    background-color: var(--color-literature);
    background-image: url("../../img/free-courses/ukrainian-literature.webp");
  }

  .free-course--english .free-course__image {
    background-color: var(--color-english);
    background-image: url("../../img/free-courses/english.webp");
  }

  .free-course--biology .free-course__image {
    background-color: var(--color-biology);
    background-image: url("../../img/free-courses/biology.webp");
  }

  .free-course--maths .free-course__image {
    background-color: var(--color-maths);
    background-image: url("../../img/free-courses/maths.webp");
  }

  .free-course--geography .free-course__image {
    background-color: var(--color-geography);
    background-image: url("../../img/free-courses/geography.webp");
  }

  .free-course--chemistry .free-course__image {
    background-color: var(--color-chemistry);
    background-image: url("../../img/free-courses/chemistry.webp");
  }

  .free-course--physics .free-course__image {
    background-color: var(--color-physics);
    background-image: url("../../img/free-courses/physics.webp");
  }
}

@media (min-width: 1200px) {
  .free-courses__list {
    width: calc(100% + 16px);
    margin-inline: calc(-1 * var(--spacing-sm));
  }

  .free-course {
    border-inline-width: var(--spacing-sm);
  }

  .free-course:hover {
    flex-basis: 150%;
  }
}

/* ---------- Sign-up modal content ---------- */

.free-courses-modal__text {
  line-height: var(--lh-large);
}

.free-courses-modal__form,
.free-courses-modal__policy {
  margin-top: var(--spacing-lg);
}

/* ==========================================================================
   On the course — two columns of ticked points
   ========================================================================== */

.included__columns {
  display: grid;
  gap: var(--spacing-md);
}

.included__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.included__item {
  display: flex;
  gap: var(--spacing-sm);
}

.included__icon {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(var(--fs-base) * var(--lh-large));
}

.included__text {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
}

@media (min-width: 768px) {
  .included__icon {
    height: calc(var(--fs-md) * var(--lh-large));
  }

  .included__text {
    font-size: var(--fs-md);
  }
}

@media (min-width: 992px) {
  .included__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }

  .included__list {
    gap: var(--spacing-lg);
  }
}

/* ==========================================================================
   Reviews — a quote card above a row of photos; the centred photo is active
   ========================================================================== */

/* Full-bleed below 992px: the row runs from one screen edge to the other.
   It is also the size container for the row (cqw units below). */
.reviews__carousel {
  container-type: inline-size;
  margin-inline: calc(-1 * var(--spacing-container-sm));
}

.reviews__card {
  padding-inline: var(--spacing-container-sm);
}

.review-card {
  position: relative;
  margin-bottom: 32px; /* room for the pointer */
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-gray-light);
}

/* Pointer towards the photos */
.review-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--color-gray-light);
  transform: translate(-50%, 50%) rotate(45deg);
}

.review-card__quote {
  position: relative;
  margin-bottom: var(--spacing-md);
  padding-left: 56px;
}

/* Big blue quotation marks (the closing one from 992px) */
.review-card__quote::before,
.review-card__quote::after {
  position: absolute;
  top: -18px;
  font-size: 120px;
  line-height: 1;
  color: var(--color-primary);
}

.review-card__quote::before {
  content: "“";
  left: 0;
}

.review-card__quote::after {
  content: "”";
  right: 0;
  display: none;
}

.review-card__text {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  white-space: pre-line;
}

.review-card__author {
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-base);
  text-align: end;
}

.review-card__date {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-large);
  text-align: end;
}

/* ---------- The row of photos ----------
   --per-view photos fit the row; the side padding lets the first and the
   last photo reach the middle. */

.reviews__track {
  --per-view: 4;
  --slide: calc(100cqw / var(--per-view));

  position: relative; /* offsetParent for carousel.js */
  display: flex;
  padding-inline: calc(50cqw - var(--slide) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__slide {
  display: flex;
  flex: 0 0 var(--slide);
  justify-content: center;
  align-items: center;
  scroll-snap-align: center;
}

.reviews__avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 48px;
  height: 80px;
  opacity: 0.8;
  transition: all var(--transition-base);
}

.reviews__slide.is-active .reviews__avatar {
  width: 80px;
  opacity: 1;
}

.reviews__avatar img {
  width: 100%;
  border: 1px solid var(--color-gray-stroke);
  border-radius: 50%;
}

@media (min-width: 410px) {
  .reviews__track {
    --per-view: 6;
  }
}

@media (min-width: 600px) {
  .reviews__track {
    --per-view: 8;
  }
}

@media (min-width: 750px) {
  .reviews__track {
    --per-view: 10;
  }
}

@media (min-width: 768px) {
  .reviews__carousel {
    margin-inline: calc(-1 * var(--spacing-container-md));
  }

  .reviews__card {
    padding-inline: var(--spacing-container-md);
  }

  .review-card {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  }

  .review-card__text {
    font-size: var(--fs-md);
  }
}

@media (min-width: 900px) {
  .reviews__track {
    --per-view: 12;
  }
}

@media (min-width: 992px) {
  .reviews__carousel {
    margin-inline: 0;
  }

  .reviews__card {
    padding-inline: 0;
  }

  .review-card::after {
    width: 40px;
    height: 40px;
  }

  .review-card__quote {
    margin-bottom: var(--spacing-lg);
    padding: 0 64px;
  }

  .review-card__quote::before,
  .review-card__quote::after {
    top: -30px;
    font-size: 136px;
  }

  .review-card__quote::after {
    display: block;
  }

  .review-card__author {
    font-size: var(--fs-md);
  }

  .review-card__date {
    font-size: var(--fs-sm);
  }
}

@media (min-width: 1100px) {
  .reviews__track {
    --per-view: 16;
  }
}

@media (min-width: 1200px) {
  .review-card {
    padding: var(--spacing-xl);
  }
}

/* ==========================================================================
   Action plan — a flow of steps joined by arrows
   ========================================================================== */

.plan__flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-blue-light);
}

/* ---------- Step card ---------- */

.plan-step {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
}

.plan-step__title {
  margin-bottom: var(--spacing-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-base);
}

.plan-step__text {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-gray);
}

/* Steps with a picture on the left */
.plan-step--icon {
  padding-left: 88px;
}

.plan-step--icon::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 40px;
  height: 40px;
  background: no-repeat center / contain;
}

.plan-step--hand::before {
  background-image: url("../../img/plan/hand.webp");
}

.plan-step--rocket::before {
  background-image: url("../../img/plan/rocket.webp");
}

.plan-step--cup::before {
  background-image: url("../../img/plan/cup.webp");
}

/* ---------- Connectors ---------- */

/* A dot with an arrow under it, between two steps */
.plan__arrow {
  position: relative;
  height: 76px;
}

/* The wrapper is 0px wide, so the base `img { max-width: 100% }` would
   shrink these to nothing */
.plan__arrow-dot,
.plan__arrow-line {
  position: absolute;
  left: 50%;
  max-width: none;
  transform: translateX(-50%);
}

.plan__arrow-dot {
  top: -8px;
}

.plan__arrow-line {
  top: 8px;
}

/* The long one shares a row with the yellow note (see .plan__result) and
   stretches with it: the line is a background, the head sits at the bottom.
   It runs down the left side on phones. */
.plan__arrow--long {
  width: 100%;
  height: auto;
  min-height: 234px;
}

.plan__arrow--long::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 36px;
  width: 16px;
  background:
    url("../../icons/arrow-short.svg") no-repeat center bottom / 16px 65px,
    linear-gradient(var(--color-primary), var(--color-primary)) no-repeat
      center top / 2px 100%;
  transform: translateX(-50%);
}

.plan__arrow--long .plan__arrow-dot {
  left: 36px;
}

/* ---------- Groups ---------- */

/* Dashed box: notes + lectures + tests */
.plan__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-lg);
  border: 2px dashed var(--color-primary);
  border-radius: var(--border-radius-lg);
}

/* Puzzle piece stuck to the corner of the "Tests" step */
.plan__puzzle {
  position: relative;
  display: flex;
}

.plan__puzzle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--ui-index-1);
  width: 40px;
  height: 40px;
  background: url("../../img/plan/puzzle.webp") no-repeat center / contain;
  transform: translate(50%, -50%);
}

/* Blue frame around the platform step */
.plan__highlight {
  border: 3px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
}

/* The long arrow and the yellow note share the first row, so the row grows
   with the note and nothing overlaps; the result step comes under them */
.plan__result {
  display: grid;
  width: 100%;
}

.plan__result > .plan__arrow--long,
.plan-help {
  grid-area: 1 / 1;
}

.plan__final {
  position: relative;
}

.plan__curve {
  display: none;
}

/* ---------- Yellow "support" note ----------
   Sits on the right of the long arrow, right above the result step. On phones
   its own short arrow points down to the step, from 768px the curved one. */

.plan-help {
  position: relative;
  z-index: var(--ui-index-1);
  justify-self: end;
  align-self: end;
  width: clamp(250px, 50%, 325px);
  margin-top: var(--spacing-md);
}

.plan-help::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 24px;
  background: url("../../img/plan/smile-small.webp") no-repeat center / contain;
}

.plan-help__card {
  margin-bottom: calc(-1 * var(--spacing-sm));
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-yellow);
}

.plan-help__title {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-base);
  color: var(--color-primary-800);
}

.plan-help__text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-primary-800);
}

@media (min-width: 768px) {
  .plan__flow {
    padding: var(--spacing-xl);
  }

  .plan-step {
    max-width: 448px;
    padding: var(--spacing-lg);
  }

  .plan-step__title {
    font-size: var(--fs-header-xs);
  }

  .plan-step--icon {
    padding-left: 104px;
  }

  .plan-step--icon::before {
    top: 32px;
    left: 32px;
  }

  .plan__group {
    padding: var(--spacing-xl);
  }

  .plan__highlight {
    max-width: 384px;
  }

  .plan__arrow--long .plan__arrow-dot,
  .plan__arrow--long::after {
    left: 50%;
  }

  .plan__final {
    justify-self: center;
  }

  .plan__curve {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    transform: translate(90%, -50%) rotate(-15deg);
  }

  /* Reaches into the flow padding; the curved arrow starts under its bottom */
  .plan-help {
    margin-right: -32px;
    margin-bottom: 56px;
  }

  .plan-help .plan__arrow {
    display: none;
  }

  .plan-help::before {
    top: 32px;
    left: 32px;
    width: 40px;
    height: 40px;
    background-image: url("../../img/plan/smile.webp");
  }

  .plan-help__card {
    margin-bottom: 0;
  }

  .plan-help__title {
    padding-left: 72px;
    font-size: var(--fs-header-xs);
  }

  .plan-help__text {
    padding-left: 72px;
  }
}

@media (min-width: 992px) {
  /* Three steps in a row only from here: narrower, the texts overflow */
  .plan__group {
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .plan__group > .plan-step,
  .plan__group > .plan__puzzle {
    width: calc(33% - 28px);
  }

  .plan__group > img {
    align-self: center;
  }

  .plan__curve {
    transform: translate(105%, -50%) rotate(0);
  }

  .plan-help {
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  .plan-help {
    margin-right: 10%;
  }
}

/* ==========================================================================
   Have questions? — dark card with the contact form
   ========================================================================== */

.questions {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-xl);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-additional-blue-dark);
  background-image:
    url("../../img/backgrounds/grid.webp"),
    url("../../img/backgrounds/gradient.webp");
  background-repeat: no-repeat;
  background-position:
    top -100px center,
    bottom center;
  background-size:
    1000px auto,
    auto;
}

.questions__intro {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-lg);
}

.questions__points {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-md);
  color: var(--color-white);
}

.questions__point {
  display: flex;
  align-items: flex-start;
  column-gap: var(--spacing-sm);
  font-size: var(--fs-base);
  line-height: var(--lh-large);
}

.questions__point img {
  flex-shrink: 0;
}

.questions__form {
  position: relative;
  display: grid;
  row-gap: var(--spacing-lg);
}

/* Hand-written note with an arrow pointing at the form (from 1400px) */
.questions__note {
  display: none;
}

@media (min-width: 768px) {
  .questions__point {
    font-size: var(--fs-md);
  }
}

@media (min-width: 992px) {
  .questions {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    column-gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-size: auto, auto;
  }

  .questions__intro {
    max-height: 300px;
  }

  .questions__points {
    margin-top: auto;
  }

  .questions__form {
    flex: 0 1 400px;
  }
}

@media (min-width: 1200px) {
  .questions {
    padding: var(--spacing-xl);
  }

  .questions__form {
    flex-basis: 480px;
  }
}

@media (min-width: 1400px) {
  .questions__form {
    flex-basis: 500px;
  }

  .questions__note {
    position: absolute;
    top: 46%;
    left: -200px;
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-white);
    transform: translate(-50%, -50%) rotate(-11deg);
  }

  .questions__note::after {
    content: url("../../icons/arrow-contact.svg");
    position: absolute;
    top: 50px;
    left: 80px;
    transform: rotate(11deg);
  }
}

/* ==========================================================================
   Sign-up modal: the code step and the final step. Their markup is
   commented out in index.html until the forms are connected to the backend.
   ========================================================================== */

.code-step,
.code-step__intro,
.done-step {
  display: grid;
  row-gap: var(--spacing-lg);
}

.code-step__email {
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  font-weight: var(--fw-semi-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.code-step__change {
  padding: 0;
}

.code-step__form .field,
.code-step__form .btn {
  margin-bottom: var(--spacing-lg);
}

.code-step__timer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
}

.code-step__no-code {
  font-size: var(--fs-base);
  line-height: var(--lh-large);
  color: var(--color-gray);
}

.code-step__timer {
  padding: 0 var(--spacing-xs);
  font-size: var(--fs-md);
  line-height: var(--lh-large);
  color: var(--color-gray-disabled);
}

.code-step__resend {
  padding-inline: 0;
  background-color: transparent;
}

@media (min-width: 768px) {
  .code-step__email-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .code-step__email {
    max-width: 200px;
  }

  .code-step__change {
    padding: var(--spacing-xs) var(--spacing-md);
  }
}

/* The code button is small below 992px and large from 992px */
@media (min-width: 992px) {
  .code-step__submit {
    height: 64px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi-bold);
  }
}