/* =========================================================================
   Homepage 2 — page-scoped stylesheet
   -------------------------------------------------------------------------
   Built from Figma "Homepage - new sections" (frame "Frame - Final", 99:24):
     1. What we do — We build ecosystems      (node 6:398)
     2. MCT.ai Co-Founder — Three journeys     (node 18:587)
   EVERYTHING is scoped under `.hp2-page`, so it cannot affect the site's
   header, footer or any other page.
   Breakpoints follow Bootstrap 4 (576 / 768 / 992 / 1200) like the rest of
   the site.
   ========================================================================= */

.hp2-page {
  --hp2-ink: #33415c;          /* headings, labels            */
  --hp2-muted: #5a6a85;        /* body copy                    */
  --hp2-faint: #afb8cc;        /* PROGRAMS / ENABLERS labels   */
  --hp2-line: #dde4ed;         /* borders, connector line      */
  --hp2-surface: #f3f7fb;      /* panels                       */
  --hp2-yellow: #f4c150;       /* brand accent (tiles, dots)   */
  --hp2-blue: #4290d3;         /* eyebrow accent bar           */
  --hp2-orange: #e28f26;       /* primary CTA                  */
  --hp2-gutter: clamp(16px, 5.5vw, 80px);

  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hp2-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hp2-page *,
.hp2-page *::before,
.hp2-page *::after { box-sizing: border-box; }
.hp2-page h2, .hp2-page h3, .hp2-page h4, .hp2-page p,
.hp2-page ol, .hp2-page ul { margin: 0; padding: 0; }
.hp2-page ol, .hp2-page ul { list-style: none; }
.hp2-page img { display: block; max-width: 100%; }
.hp2-page a { text-decoration: none; }

/* ---- Section shell (Figma: 1440 frame, 80px side padding, 72/64 top/bottom) */
.hp2-section {
  padding: 72px 0 64px;
  background: #ffffff;
}
.hp2-container {
  max-width: calc(1280px + 2 * var(--hp2-gutter));
  margin: 0 auto;
  padding: 0 var(--hp2-gutter);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ---- Section introduction (eyebrow + title | description) --------------- */
.hp2-intro {
  display: flex;
  align-items: flex-end;
  gap: 64px;
}
.hp2-intro__heading {
  flex: 0 0 650px;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hp2-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: normal;
  color: var(--hp2-ink);
  text-transform: uppercase;
}
.hp2-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--hp2-blue);
  flex: none;
}
.hp2-eyebrow--strong { font-weight: 600; }
.hp2-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--hp2-ink);
}
.hp2-title span { display: block; }
.hp2-intro__desc {
  flex: 1 1 auto;
  max-width: 566px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp2-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hp2-muted);
}
.hp2-intro__invite {
  font-size: 14px;
  font-weight: 600;
  color: var(--hp2-ink);
}

/* =========================================================================
   SECTION 1 — We build ecosystems
   ========================================================================= */
.hp2-panel {
  background: #ffffff;
  border: 1px solid var(--hp2-line);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.hp2-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hp2-panel__title {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-ink);
}
.hp2-panel__note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp2-yellow);
  flex: none;
}

/* ---- Progression: 6 milestones on a connector line ---------------------- */
.hp2-milestones {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 13px;              /* Figma progression block is 85px tall */
}
.hp2-milestones::before {            /* journey connection line */
  content: "";
  position: absolute;
  top: 18px;
  left: 48px;
  right: 48px;
  height: 2px;
  background: var(--hp2-line);
}
.hp2-milestone {
  position: relative;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hp2-milestone__node {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--hp2-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp2-milestone__node::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hp2-yellow);
}
.hp2-milestone--goal .hp2-milestone__node {
  background: var(--hp2-yellow);
  border-color: var(--hp2-yellow);
}
.hp2-milestone--goal .hp2-milestone__node::after { content: none; }
.hp2-milestone__node img { width: 18px; height: 18px; }
.hp2-milestone__label {
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-ink);
  white-space: nowrap;
}
.hp2-milestone__arrow {               /* chevron between milestones */
  position: relative;
  flex: 1 1 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp2-milestone__arrow img { width: 14px; height: 14px; }

/* ---- Programs ------------------------------------------------------------ */
.hp2-support {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.hp2-label {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--hp2-faint);
  text-align: center;
  text-transform: uppercase;
}
.hp2-programs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 32px;               /* matches the 209px column block */
}
.hp2-program {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;        /* lets the title scale to the column width */
}
.hp2-program__identity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp2-program__phase {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-muted);
}
.hp2-program__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-ink);
  white-space: nowrap;                /* "Venture Builder" always stays on one line */
}
/* Shrinks the title only when the column is too narrow for the longest name
   (tile 32px + gap 10px = 42px; ~7.4px of width per 1px of font-size). */
@supports (width: 1cqw) {
  .hp2-program__title {
    font-size: clamp(16px, calc((100cqw - 42px) / 7.4), 24px);
  }
}
.hp2-tile {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--hp2-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp2-tile img { width: 24px; height: 24px; }

/* ---- Enablers ------------------------------------------------------------ */
.hp2-enablers-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp2-enablers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
}
.hp2-enabler {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp2-enabler::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hp2-yellow);
  flex: none;
}

/* Desktop: all enablers on ONE line with equal spacing between every item */
@media (min-width: 1200px) {
  .hp2-enablers {
    flex-wrap: nowrap;
    gap: 0 clamp(24px, 4vw, 64px);
  }
}

/* ---- Beyond the platform ------------------------------------------------- */
.hp2-beyond {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hp2-beyond__icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hp2-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp2-beyond__icon img { width: 28px; height: 28px; }
.hp2-beyond__lead {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp2-beyond__title {
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-ink);
}
.hp2-beyond__body { flex: 1 1 0; min-width: 0; }

/* Section backgrounds: "What we do" and the co-founder (third) section sit on the
   light surface colour; the portfolio section stays white for contrast. */
.hp2-ecosystem,
.hp2-cofounder { background: var(--hp2-surface); }

/* =========================================================================
   PORTFOLIO IFRAME — embeds assets/front_assets/mct_portfolio.html
   Uses the same section shell (72 / 64 padding, 1280px container) as the
   sections above and below, so spacing stays consistent.
   ========================================================================= */
.hp2-portfolio__frame {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1024 / 1534;
  border: 0;
  margin: 0 auto;
}

/* =========================================================================
   SECTION 2 — MCT.ai Co-Founder: three journeys
   ========================================================================= */
.hp2-journeys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 46px 20px;                 /* breathing room for the card shadow */
}
.hp2-card {
  min-height: 888px;
  background: #ffffff;
  border: 1px solid var(--hp2-line);
  border-radius: 20px;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}
.hp2-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hp2-card__overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp2-card__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hp2-card__number {
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
  color: var(--hp2-ink);
}
.hp2-tile--lg { width: 42px; height: 42px; }
.hp2-tile--lg img { width: 21px; height: 21px; }
.hp2-card__title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--hp2-ink);
}
.hp2-card__desc { min-height: 52px; }

/* ---- Journey stages (accordion) ----------------------------------------- */
.hp2-stage { border-bottom: 1px solid var(--hp2-line); }
.hp2-stage__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--hp2-ink);
  cursor: default;
}
button.hp2-stage__head { cursor: pointer; }
button.hp2-stage__head:focus-visible {
  outline: 2px solid var(--hp2-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.hp2-stage__title {
  flex: 1 1 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.hp2-stage__indicator {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--hp2-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp2-stage__indicator img { width: 14px; height: 14px; }
.hp2-stage__indicator .is-up { display: none; }
.hp2-stage.is-open .hp2-stage__indicator .is-up { display: block; }
.hp2-stage.is-open .hp2-stage__indicator .is-down { display: none; }
.hp2-stage__body { display: none; padding-bottom: 14px; }
.hp2-stage.is-open .hp2-stage__head { padding: 14px 0 8px; }
.hp2-stage.is-open .hp2-stage__body { display: block; }

/* ---- Card media (video thumbnail / coming soon) ------------------------- */
.hp2-media {
  position: relative;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;             /* play button, then caption underneath */
  align-items: center;
  justify-content: center;
  /* fallback while the thumbnail image is missing */
  background: linear-gradient(135deg, #dbe7f3 0%, #b9cfe6 100%);
  border: 0;
  padding: 0;
  width: 100%;
}
a.hp2-media { cursor: pointer; }
.hp2-media img.hp2-media__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bottom-fade overlay — same as the "How it Works" box on the main banner
   (style-updated.css: .v2-mainBanner .intro_video .video-box:after) */
.hp2-media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(92, 103, 125, 0.09) 63%, rgba(92, 103, 125, 1) 104%);
  pointer-events: none;
}
/* Caption under the play button — same look as "How It Works" on the main banner:
   white, Open Sans bold 18px, 16px below the button */
.hp2-media__caption {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 16px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
}
/* Play button — same styling as the /learning-journey video box
   (style-updated.css: .v2-learningJourney .video-box span > i) */
.hp2-media__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 33px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  color: #5c677d;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 0.5s;
}
.hp2-media__play i { color: inherit; }
a.hp2-media:hover .hp2-media__play,
a.hp2-media:focus-visible .hp2-media__play {
  color: #ffffff;
  background: #4290d3;
}
.hp2-media:focus-visible { outline: 2px solid var(--hp2-blue); outline-offset: 3px; }
.hp2-media--soon {
  background: var(--hp2-surface);
  border-radius: 20px;
  cursor: default;
  font-size: 14px;
  font-weight: 600;
  color: var(--hp2-muted);
}

/* ---- Explore with human support (CTA bar) ------------------------------- */
.hp2-cta {
  background: #ffffff;
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hp2-cta__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--hp2-ink);
  line-height: normal;
}
.hp2-cta__title { font-size: 18px; font-weight: 600; }
.hp2-cta__url { font-size: 14px; }
/* CTA button — same styling as "Sign up as Free User" on /learning-journey
   (style-updated.css: .v2.btn, .v2.btn-primary-dark, .v2.btn-primary-dark:hover) */
.hp2-btn {
  flex: none;
  height: 54px;
  padding: 16px 24px;
  border: 1px solid #4290d3;
  border-radius: 4px;
  background: #4290d3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hp2-page a.hp2-btn,
.hp2-page a.hp2-btn:focus { color: #ffffff; text-decoration: none; }
.hp2-page a.hp2-btn:hover { color: #4290d3; background: #e8f4fb; border-color: #e8f4fb; text-decoration: none; }
.hp2-btn:focus-visible { outline: 2px solid var(--hp2-blue); outline-offset: 3px; }
/* arrow icon: mask so it takes the button's text colour (white → blue on hover) */
.hp2-btn__icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../images/homepage2/arrow-up-right.svg") center / contain no-repeat;
          mask: url("../images/homepage2/arrow-up-right.svg") center / contain no-repeat;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1199.98px) {
  .hp2-intro__heading { flex-basis: 52%; }
  .hp2-title { font-size: 44px; }
  .hp2-programs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; padding-bottom: 8px; }
  .hp2-journeys { gap: 20px; padding: 32px 0; }
  .hp2-card { padding: 24px; min-height: 0; }
  .hp2-beyond { flex-wrap: wrap; }
  .hp2-beyond__body { flex-basis: 100%; }
}

@media (max-width: 991.98px) {
  .hp2-section { padding: 56px 0 48px; }
  .hp2-container { gap: 36px; }
  .hp2-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hp2-intro__heading { flex-basis: auto; max-width: none; }
  .hp2-intro__desc { max-width: 640px; }
  .hp2-title { font-size: 40px; }
  .hp2-milestone { width: 84px; }
  .hp2-milestone__label { font-size: 14px; }
  .hp2-card__desc { min-height: 0; }
  .hp2-journeys {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    gap: 28px;
    padding: 8px 0 16px;
  }
}

@media (max-width: 767.98px) {
  .hp2-title { font-size: 34px; }
  .hp2-panel { padding: 24px 20px; gap: 28px; border-radius: 16px; }

  /* milestones become a vertical timeline */
  .hp2-milestones { flex-direction: column; align-items: stretch; padding-bottom: 0; gap: 0; }
  .hp2-milestones::before { top: 19px; bottom: 19px; left: 18px; right: auto; width: 2px; height: auto; }
  .hp2-milestone { width: auto; flex-direction: row; gap: 14px; }
  .hp2-milestone__node { position: relative; z-index: 1; }
  .hp2-milestone__arrow { flex: none; height: 18px; width: 38px; }
  .hp2-milestone__arrow img { transform: rotate(90deg); position: relative; z-index: 1; background: var(--hp2-surface); }
  .hp2-milestone__label { font-size: 15px; }

  .hp2-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp2-enablers { justify-content: flex-start; gap: 8px 20px; }

  .hp2-beyond { align-items: flex-start; gap: 16px 20px; }
  .hp2-beyond__icon { width: 56px; height: 56px; }
  .hp2-beyond__lead { flex: 1 1 0; min-width: 200px; }
  .hp2-beyond__title { font-size: 20px; }

  .hp2-cta { flex-direction: column; align-items: flex-start; }
  .hp2-btn { width: 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
  .hp2-section { padding: 44px 0 40px; }
  .hp2-title { font-size: 30px; }
  .hp2-programs { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hp2-program__title { font-size: 22px; }
  .hp2-card { padding: 22px 20px; }
  .hp2-card__title { font-size: 24px; }
  .hp2-media { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp2-page * { transition: none !important; }
}