/* /hextech-academy. Section heights measured at the 1920 anchor:
   1094 / 1431 / 2963 / 1573 / 2078 / 862 / 833 / 1106. */

/* --------------------------------------------------------------------- hero */

.hx-hero {
  justify-content: center;
  min-height: 68.375rem;           /* 1094 */
  padding: 0 var(--gutter);
  background: var(--paper);
}
.hx-hero__inner {
  display: grid;
  grid-template-columns: 60.75rem 40.5rem;   /* copy | art (648) */
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 112.5rem;
  margin-inline: auto;
}
.hx-hero__eyebrow { font-size: 1.6875rem; }               /* 27 */
.hx-hero__title { margin-top: 0.75rem; max-width: 60.75rem; }   /* 972 */
.hx-hero__lead { margin-top: 2.25rem; max-width: 48.625rem; }   /* 778 */
.hx-hero__actions { display: flex; gap: 1.5rem; margin-top: 3.375rem; }
.hx-hero__ghost { border: 1px solid var(--ink); }
.hx-hero__art { width: 40.5rem; border-radius: 1rem; }

/* ------------------------------------------------------------ format cards */

.hx-formats {
  min-height: 89.4375rem;          /* 1431 */
  padding: 7.5rem var(--gutter) 0;  /* 120 */
  background: var(--paper);
  text-align: center;
}
.hx-formats__eyebrow { font-size: var(--fs-item); letter-spacing: 0.02em; }
.hx-formats__title {
  max-width: 61.875rem;            /* 990 */
  margin: 2.375rem auto 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

.hx-format-grid {
  display: grid;
  grid-template-columns: repeat(4, 18.5625rem);   /* 297 */
  justify-content: center;
  gap: 8.25rem;                    /* 429 pitch */
  margin-top: 13.125rem;           /* 210 */
  text-align: left;
}
.hx-format img {
  width: 100%;
  aspect-ratio: 297 / 382;
  object-fit: cover;
  border-radius: 0.75rem;
}
.hx-format h3 { margin-top: 1.75rem; font-size: var(--fs-eyebrow); }   /* 45 */
.hx-format p { margin-top: 0.9375rem; font-size: var(--fs-sm); }
.hx-format__tag {
  display: inline-block;
  margin-top: 1.5rem !important;
  padding: 0.25rem 0.9rem;
  font-size: 1.3125rem !important;  /* 21 */
  background: var(--lime);
  border-radius: 999px;
}

/* -------------------------------------------------------- learning pathways */

.hx-pathways {
  min-height: 185.1875rem;         /* 2963 */
  padding: 7.4375rem var(--gutter) 0;
  background: var(--paper);
  text-align: center;
}
.hx-pathways__title { font-size: var(--fs-display); line-height: var(--lh-display); }
.hx-pathways__lead { max-width: 63rem; margin: 1.5rem auto 0; }

.hx-pathways__cols {
  display: grid;
  grid-template-columns: repeat(2, 52.125rem);   /* 834 */
  justify-content: space-between;
  gap: 3.5rem;
  margin-top: 11.25rem;            /* 180 */
  text-align: left;
}
.hx-track__title { font-size: var(--fs-h3); }              /* 67.5 */

.hx-levels { margin-top: 7.75rem; display: flex; flex-direction: column; gap: 5rem; }
.hx-level {
  padding: 2.25rem 3rem 2.75rem;
  background: var(--paper);
  border: 1px solid #e2dfdb;
  border-radius: 1rem;
}
.hx-level__no { font-size: 1.3125rem; font-weight: 700; }   /* 21 */
.hx-level__name { margin-top: 0.5rem; font-size: var(--fs-eyebrow); }   /* 45 */
.hx-level__hours { margin-top: 1.25rem; font-size: 1.3125rem; }
.hx-level__desc { margin-top: 0.5rem; font-size: var(--fs-sm); }

.hx-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.hx-tags li {
  padding: 0.3rem 0.9rem;
  font-size: 1.6875rem;            /* 27 */
  background: var(--ice);
  border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ roadmap */

.hx-roadmap {
  min-height: 98.3125rem;          /* 1573 */
  padding: 7.4375rem var(--gutter) 0;
  background: var(--paper);
  text-align: center;
}
.hx-roadmap__title { font-size: var(--fs-display); line-height: var(--lh-display); }
.hx-roadmap__lead { max-width: 60rem; margin: 1.5rem auto 0; }

.hx-roadmap__grid {
  display: grid;
  grid-template-columns: repeat(2, 40.4375rem);   /* 647 */
  justify-content: space-between;
  gap: 3.5rem;
  margin-top: 11.25rem;
  text-align: left;
}
.hx-roadmap__grid img {
  width: 100%;
  aspect-ratio: 647 / 450;
  object-fit: cover;
  border-radius: 1rem;
}
.hx-roadmap__grid h3 { margin-top: 3.125rem; font-size: var(--fs-h2); }   /* 52.5 */
.hx-roadmap__grid p { margin-top: 1.0625rem; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- bootcamps */

.hx-bootcamps {
  min-height: 129.875rem;          /* 2078 */
  padding: 9rem var(--gutter) 0;   /* 144 */
  background: var(--paper);
  text-align: center;
}
.hx-bootcamps__title { font-size: var(--fs-display); line-height: var(--lh-display); }

.hx-bootcamp-grid {
  display: grid;
  grid-template-columns: repeat(2, 42.25rem);   /* 676 */
  justify-content: space-between;
  gap: 3.5rem;
  margin-top: 11.25rem;
  text-align: left;
}
.hx-bootcamp { position: relative; }
.hx-bootcamp img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; }
.hx-bootcamp h3 { margin-top: 2.5rem; font-size: var(--fs-h2); }
.hx-bootcamp > p { margin-top: 1.5rem; font-size: var(--fs-sm); }
.hx-bootcamp .btn { margin-top: 2.25rem; }
.hx-bootcamp__badge {
  position: absolute;
  top: 44.5rem;
  right: 0;
  padding: 0.25rem 0.9rem;
  font-size: 1.3125rem;            /* 21 */
  font-weight: 700;
  background: var(--lime);
  border-radius: 999px;
}

.hx-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem;
}
.hx-specs dt { font-size: 1.3125rem; font-weight: 700; }   /* 21 */
.hx-specs dd { font-size: var(--fs-sm); text-align: right; }

/* --------------------------------------------------------------- validation */

.hx-validation {
  min-height: 53.875rem;           /* 862 */
  padding: 8.9375rem var(--gutter) 0;
  background: var(--paper);
  text-align: center;
}
/* The heading is 1594px wide on the original, wider than the 1536 content
   column, so this section opts out of that cap to keep it on two lines. */
.hx-validation .section__inner { max-width: none; }
.hx-validation__title {
  max-width: 99.625rem;            /* 1594 */
  margin-inline: auto;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.hx-validation__lead { max-width: 69.625rem; margin: 2.1875rem auto 0; }  /* 35 */

.hx-logos {
  display: flex;
  justify-content: center;
  gap: 5.8125rem;                  /* 333 pitch - 240 */
  margin-top: 6rem;                /* 96 */
  flex-wrap: wrap;
}
.hx-logos img { width: 15rem; height: 6rem; object-fit: contain; }   /* 240x96 */

/* ------------------------------------------------------------- testimonials */

.hx-testimonials {
  min-height: 52.0625rem;          /* 833 */
  padding: 6.125rem var(--gutter) 0;
  background: var(--paper);
  text-align: center;
}
.hx-testimonials__eyebrow { font-size: 1.70751rem; letter-spacing: 0.04em; }
.hx-testimonials__title { margin-top: 0.5rem; font-size: 4.74308rem; }   /* 75.89 */

.hx-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem;
  margin-top: 3.5rem;
  text-align: left;
}
/* Decorative quote marks, as on the original. */
.hx-quote blockquote {
  position: relative;
  padding: 0 2.5rem;
  font-size: 1.51778rem;           /* 24.28 */
  line-height: 1.35;
}
.hx-quote blockquote::before,
.hx-quote blockquote::after {
  position: absolute;
  font-size: 5rem;
  line-height: 1;
  color: var(--lime);
}
.hx-quote blockquote::before { content: '\201C'; top: -1rem; left: 0; }
.hx-quote blockquote::after { content: '\201D'; right: 0; bottom: -2.5rem; }
.hx-quote__who { margin-top: 2.25rem; font-size: 1.70751rem; }   /* 27.3 */

/* ---------------------------------------------------------------------- cta */

.hx-cta {
  min-height: 69.125rem;           /* 1106 */
  padding: 12.625rem var(--gutter) 0;   /* 202 */
  background: var(--paper);
  text-align: center;
}
.hx-cta__art { width: 19.8125rem; margin-inline: auto; }   /* 317 */
.hx-cta__title {
  max-width: 75rem;                /* 1200 */
  margin: 4.125rem auto 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.hx-cta__lead { max-width: 63rem; margin: 2.3125rem auto 0; }
.hx-cta__btn { margin-top: 3.5rem; }

/* --------------------------------------------------------- tablet + mobile */

@media (max-width: 999px) {
  .hx-hero,
  .hx-formats,
  .hx-pathways,
  .hx-roadmap,
  .hx-bootcamps,
  .hx-validation,
  .hx-testimonials,
  .hx-cta { min-height: 0; padding: 4rem var(--gutter); }

  .hx-hero__inner { grid-template-columns: 1fr; }
  .hx-hero__art { width: 100%; max-width: 28rem; }
  .hx-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin-top: 3rem; }
  .hx-pathways__cols,
  .hx-roadmap__grid,
  .hx-bootcamp-grid { grid-template-columns: 1fr; gap: 3rem; margin-top: 3rem; }
  .hx-levels { margin-top: 2rem; gap: 2rem; }
  .hx-bootcamp__badge { top: 1rem; right: 1rem; }
  .hx-logos { gap: 2rem; }
  .hx-quote-grid { grid-template-columns: 1fr; gap: 3rem; margin-top: 2.5rem; }
}

@media (max-width: 749px) {
  .hx-format-grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; }
  .hx-format h3 { font-size: 1.25rem; }
  .hx-level__name { font-size: 1.25rem; }
  .hx-track__title { font-size: 1.5rem; }
  .hx-roadmap__grid h3,
  .hx-bootcamp h3 { font-size: 1.25rem; }
  .hx-tags li { font-size: 0.9375rem; }
  .hx-specs dt { font-size: 0.8125rem; }
  .hx-hero__actions { flex-direction: column; }
  .hx-tags { grid-template-columns: 1fr; }
  .hx-specs dd { text-align: left; }
}