/* =========================================================
   MINUVIA - HOW IT WORKS
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.teacher-how-section {
  position: relative;

  padding:
    48px 0 125px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5F9FE 100%
    );
}


.teacher-how-container {
  position: relative;

  z-index: 3;
}



/* =========================================================
   BACKGROUND
========================================================= */

.teacher-how-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.teacher-how-orb-left {
  width: 420px;
  height: 420px;

  left: -290px;
  top: 30px;

  background:
    rgba(
      200,
      220,
      250,
      0.40
    );
}


.teacher-how-orb-right {
  width: 330px;
  height: 330px;

  right: -215px;
  top: -40px;

  background:
    rgba(
      213,
      228,
      250,
      0.35
    );
}



/* =========================================================
   HEADING
========================================================= */

.teacher-how-heading {
  width: 100%;

  max-width: 1400px;

  margin:
    0 auto 35px;

  text-align: center;
}


.teacher-how-heading h2 {
  margin:
    0 0 12px;

  color: #0B1F3C;

  font-size:
    clamp(
      38px,
      3.3vw,
      54px
    );

  line-height: 1.03;

  letter-spacing: -2.6px;

  white-space: nowrap;
}


.teacher-how-heading h2 span {
  display: inline;

  color: #246CF5;
}


.teacher-how-heading p {
  max-width: 720px;

  margin: 0 auto;

  color: #687991;

  font-size: 14px;

  line-height: 1.65;
}



/* =========================================================
   FOUR STEP PROCESS
========================================================= */

.teacher-how-process {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  align-items: stretch;

  gap: 28px;
}



/* =========================================================
   STEP
========================================================= */

.teacher-how-step {
  position: relative;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  text-align: center;
}



/* =========================================================
   NUMBER
========================================================= */

.teacher-how-number {
  flex: 0 0 auto;

  width: 43px;
  height: 43px;

  margin:
    0 auto 12px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      #347CFF,
      #1761EB
    );

  box-shadow:
    0 9px 19px
    rgba(
      36,
      108,
      245,
      0.20
    );

  font-size: 12px;

  font-weight: 900;
}



/* =========================================================
   ARROWS BETWEEN STAGES
========================================================= */

.teacher-how-connector {
  position: absolute;

  z-index: 10;

  top: 12px;

  right: -34px;

  width: 40px;
  height: 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}


.teacher-how-connector::before {
  content: "";

  position: absolute;

  left: 0;
  right: 10px;

  top: 50%;

  border-top:
    2px dotted #8FB3F7;

  transform:
    translateY(-50%);
}


.teacher-how-connector::after {
  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  width: 8px;
  height: 8px;

  border-top:
    2px solid #246CF5;

  border-right:
    2px solid #246CF5;

  transform:
    translateY(-50%)
    rotate(45deg);
}


.teacher-how-connector span {
  display: none;
}



/* =========================================================
   STEP TITLE
========================================================= */

.teacher-how-step h3 {
  min-height: 39px;

  margin:
    0 auto 6px;

  display: flex;

  align-items: flex-start;
  justify-content: center;

  color: #0B1F3C;

  font-size: 15px;

  line-height: 1.25;

  letter-spacing: -0.35px;
}



/* =========================================================
   DESCRIPTION
========================================================= */

.teacher-how-step-description {
  min-height: 54px;

  margin:
    0 auto 12px;

  display: flex;

  align-items: flex-start;
  justify-content: center;

  color: #687991;

  font-size: 10px;

  line-height: 1.5;
}



/* =========================================================
   VISUAL CARDS
========================================================= */

.teacher-how-device-card,
.teacher-how-insights {
  width: 100%;

  height: 220px;

  min-height: 220px;

  border:
    1px solid #DCE5F1;

  border-radius: 18px;

  background: #FFFFFF;

  box-shadow:
    0 14px 30px
    rgba(
      11,
      31,
      60,
      0.08
    );
}



/* =========================================================
   SCREENSHOTS
========================================================= */

.teacher-how-device-card {
  padding: 10px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}


.teacher-how-device-card img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}



/* =========================================================
   STUDENT PHONE
========================================================= */

.teacher-how-device-card-phone {
  padding:
    8px 42px;
}


.teacher-how-device-card-phone img {
  width: auto;

  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;
}



/* =========================================================
   STUDENT / CLASS / COHORT
========================================================= */

.teacher-how-insights {
  padding: 11px;

  display: grid;

  grid-template-rows:
    repeat(
      3,
      1fr
    );

  gap: 8px;
}


.teacher-how-insight {
  min-height: 0;

  padding:
    8px 10px;

  border:
    1px solid #DDE6F1;

  border-radius: 11px;

  display: grid;

  grid-template-columns:
    30px minmax(0, 1fr);

  align-items: center;

  gap: 9px;

  text-align: left;

  background: #F9FBFE;
}


.teacher-how-insight-icon {
  width: 30px;
  height: 30px;

  border-radius: 9px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #246CF5;

  background: #EAF2FF;

  font-size: 10px;

  font-weight: 900;
}


.teacher-how-insight strong {
  display: block;

  margin-bottom: 1px;

  color: #246CF5;

  font-size: 9px;
}


.teacher-how-insight p {
  margin: 0;

  color: #687991;

  font-size: 8px;

  line-height: 1.35;
}



/* =========================================================
   PAYOFF CARDS
========================================================= */

.teacher-how-payoff {
  width: 100%;

  min-height: 68px;

  margin-top: 11px;

  padding:
    10px 12px;

  border:
    1px solid #DCE6F2;

  border-radius: 13px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );
}


.teacher-how-payoff strong {
  display: block;

  margin-bottom: 3px;

  color: #246CF5;

  font-size: 10px;

  line-height: 1.25;
}


.teacher-how-payoff p {
  margin: 0;

  color: #687991;

  font-size: 9px;

  line-height: 1.4;
}



/* =========================================================
   CONNECTED CYCLE
========================================================= */

.teacher-cycle-card {
  margin-top: 28px;

  padding:
    17px 24px;

  border:
    1px solid #D6E3F3;

  border-radius: 19px;

  display: grid;

  grid-template-columns:
    auto 1fr;

  align-items: center;

  gap: 20px;

  background:
    linear-gradient(
      135deg,
      #F8FBFF 0%,
      #ECF4FF 100%
    );

  box-shadow:
    0 13px 30px
    rgba(
      11,
      31,
      60,
      0.06
    );
}



/* =========================================================
   CYCLE ICON
========================================================= */

.teacher-cycle-icon {
  position: relative;

  width: 58px;
  height: 58px;

  border:
    4px solid #246CF5;

  border-right-color: transparent;

  border-radius: 50%;

  transform:
    rotate(-25deg);
}


.teacher-cycle-icon::after {
  content: "";

  position: absolute;

  right: -3px;
  top: 0;

  width: 0;
  height: 0;

  border-top:
    6px solid transparent;

  border-bottom:
    6px solid transparent;

  border-left:
    10px solid #246CF5;

  transform:
    rotate(26deg);
}



/* =========================================================
   CYCLE COPY
========================================================= */

.teacher-cycle-copy h3 {
  margin:
    0 0 6px;

  color: #0B1F3C;

  font-size: 14px;
}


.teacher-cycle-flow {
  margin-bottom: 5px;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  color: #3E5472;

  font-size: 10px;

  font-weight: 800;
}


.teacher-cycle-flow span {
  color: #246CF5;

  font-size: 13px;
}


.teacher-cycle-copy p {
  margin: 0;

  color: #687991;

  font-size: 10px;

  line-height: 1.5;
}



/* =========================================================
   HOW IT WORKS → EXPLORE THE PORTAL
========================================================= */

.teacher-portal-jump-button {
  position: absolute;

  z-index: 20;

  left: 50%;

  bottom: 22px;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  text-decoration: none;

  white-space: nowrap;
}


.teacher-portal-jump-arrow {
  width: 48px;
  height: 48px;

  border:
    1px solid #C9D9F0;

  border-radius: 13px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #246CF5;

  background: #FFFFFF;

  box-shadow:
    0 10px 24px
    rgba(
      11,
      31,
      60,
      0.10
    );

  font-size: 22px;

  line-height: 1;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.teacher-portal-jump-text {
  color: #526780;

  font-size: 10px;

  font-weight: 800;
}


.teacher-portal-jump-button:hover
.teacher-portal-jump-arrow {
  transform:
    translateY(3px);

  box-shadow:
    0 7px 17px
    rgba(
      11,
      31,
      60,
      0.12
    );
}



/* =========================================================
   SMALLER DESKTOP
========================================================= */

@media (max-width: 1200px) {

  .teacher-how-heading {
    max-width: 1000px;
  }


  .teacher-how-heading h2 {
    white-space: normal;
  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .teacher-how-section {
    padding:
      55px 0 125px;
  }


  .teacher-how-process {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      38px 28px;
  }


  .teacher-how-connector {
    display: none;
  }


  .teacher-how-step h3 {
    min-height: 0;
  }


  .teacher-how-step-description {
    min-height: 44px;
  }


  .teacher-how-device-card,
  .teacher-how-insights {
    height: 285px;

    min-height: 285px;
  }


  .teacher-how-payoff {
    min-height: 70px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .teacher-how-section {
    padding:
      48px 0 115px;
  }


  .teacher-how-heading {
    margin-bottom: 34px;
  }


  .teacher-how-heading h2 {
    font-size: 38px;

    letter-spacing: -2px;

    white-space: normal;
  }


  .teacher-how-heading p {
    font-size: 13px;
  }


  .teacher-how-process {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .teacher-how-step {
    width: 100%;

    max-width: 400px;

    margin: 0 auto;
  }


  .teacher-how-step h3 {
    min-height: 0;
  }


  .teacher-how-step-description {
    min-height: 0;

    max-width: 320px;

    font-size: 11px;
  }


  .teacher-how-device-card,
  .teacher-how-insights {
    height: 300px;

    min-height: 300px;
  }


  .teacher-how-device-card-phone {
    padding:
      10px 55px;
  }


  .teacher-how-payoff {
    min-height: 70px;
  }


  .teacher-cycle-card {
    margin-top: 35px;

    padding:
      20px 18px;

    grid-template-columns: 1fr;

    text-align: center;
  }


  .teacher-cycle-icon {
    margin: 0 auto;
  }


  .teacher-cycle-flow {
    justify-content: center;
  }


  .teacher-portal-jump-button {
    bottom: 18px;
  }


  .teacher-portal-jump-arrow {
    width: 46px;
    height: 46px;
  }

}