/* Section: exam (Figma node 23:3413) — green CTA / Edgecase exam.
   Uses flow layout with padding + min-height so the section GROWS with its
   content (the pixel heading can be taller than Figma's licensed font), instead
   of a fixed height that clips the paragraph/CTA. */
#sec-exam {
  position: relative;
  width: 1728px;
  min-height: 950px;
  background: #56f77e;
  padding: 100px 200px;   /* Figma inset: 200 sides, 100 top/bottom */
}
#sec-exam .exam-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
#sec-exam .exam-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 854px;
  flex: none;
}
/* Heading: Figma uses "LoRes 9 OT" Wide Bold pixel display font (substituted) */
#sec-exam .exam-heading {
  margin: 0;
  font-family: "LoRes 9 OT", "Press Start 2P", "VT323", monospace;
  font-weight: 700;
  font-size: 80px;
  line-height: 1.2;
  color: #fff;
  text-shadow: -4px 4px 0px #0051c6;
  word-break: break-word;
}
/* Body copy: Figma uses "OCR A Std" monospace (substituted) */
#sec-exam .exam-subhead {
  margin: 0;
  font-family: "OCR A Std", "Share Tech Mono", monospace;
  font-size: 26px;
  line-height: 1.4;
  color: #0051c6;
}
#sec-exam .exam-body {
  margin: 0;
  font-family: "OCR A Std", "Share Tech Mono", monospace;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  width: 854px;
}
/* BLUE_BUTTON_CTA */
#sec-exam .exam-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #0051c6;
  border-radius: 6px;
  box-shadow: -3px 3px 0px 0px #03358c;
  text-decoration: none;
  overflow: hidden;
}
#sec-exam .exam-btn-line { display: block; width: 100%; height: 4px; }
#sec-exam .exam-btn-line img { display: block; width: 100%; height: 100%; }
#sec-exam .exam-btn-line--flip { transform: rotate(180deg); }
#sec-exam .exam-btn-label {
  padding: 4px 16px;
  font-family: "Inter", sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Microphone + question marks illustration (474 x 629 Figma frame), one unit,
   gently floating. */
#sec-exam .exam-mic {
  width: 474px;
  height: 629px;
  flex: none;
  animation: exam-float 3.6s ease-in-out infinite;
  transform-origin: center;
}
#sec-exam .exam-mic img { display: block; width: 100%; height: 100%; }
@keyframes exam-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-2deg); }
}

/* ---- Mobile (<= 768px): stack text over the microphone illustration ---- */
@media (max-width: 768px) {
  #sec-exam {
    width: 100%;
    padding: 40px 24px;
    min-height: 0;
  }
  #sec-exam .exam-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  #sec-exam .exam-col {
    width: 100%;
    gap: 28px;
  }
  #sec-exam .exam-heading {
    font-size: 34px;
    line-height: 1.15;
    text-shadow: -2px 2px 0px #0051c6;
  }
  #sec-exam .exam-subhead { font-size: 18px; }
  #sec-exam .exam-body { font-size: 15px; width: 100%; }
  #sec-exam .exam-btn-label { font-size: 16px; padding: 4px 14px; }
  /* microphone: fluid, centered, keeps the float animation */
  #sec-exam .exam-mic {
    width: min(300px, 70vw);
    height: auto;
    align-self: center;
    margin-top: 8px;
  }
  #sec-exam .exam-mic img { height: auto; }
}