/* =========================================================
   MINUVIA TEACHER PORTAL
   Navigation is controlled by styles.css

   IMPORTANT:
   How It Works is controlled separately by:
   teacher-how-it-works.css

   Teacher Benefits is controlled separately by:
   teacher-benefits.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --teacher-navy: #0B1F3C;

  --teacher-blue: #246CF5;

  --teacher-blue-dark: #1254D2;

  --teacher-text: #142744;

  --teacher-muted: #687991;

  --teacher-line: #DFE7F1;

  --teacher-white: #FFFFFF;

  --teacher-pale: #F5F9FE;

}



/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  color: var(--teacher-text);

  background: #FFFFFF;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


* {
  box-sizing: border-box;
}


button,
input,
select,
textarea {
  font-family: inherit;
}


.teacher-container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

}



/* =========================================================
   COMMON
========================================================= */

.teacher-eyebrow {

  min-height: 32px;

  padding:
    0 13px;

  border:
    1px solid #CFE0FA;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--teacher-blue);

  background:
    rgba(255,255,255,0.72);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.3px;

}


.teacher-eyebrow-light {

  color: #FFFFFF;

  border-color:
    rgba(255,255,255,0.28);

  background:
    rgba(255,255,255,0.10);

}



/* =========================================================
   GENERAL TEACHER BUTTONS
========================================================= */

.teacher-button {

  min-height: 50px;

  padding:
    0 20px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

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

}


.teacher-button:hover {

  transform:
    translateY(-2px);

}


.teacher-button-primary {

  border:
    1px solid var(--teacher-blue);

  color: #FFFFFF;

  background:
    var(--teacher-blue);

  box-shadow:
    0 12px 25px
    rgba(36,108,245,0.18);

}


.teacher-button-primary:hover {

  background:
    var(--teacher-blue-dark);

}


.teacher-button-secondary {

  border:
    1px solid #D3DEEC;

  color:
    var(--teacher-navy);

  background:
    rgba(255,255,255,0.86);

}



/* =========================================================
   HERO
========================================================= */

.teacher-hero {

  position: relative;

  min-height: 790px;

  padding:
    82px 0 90px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FBFDFF 50%,
      #EEF5FF 100%
    );

}



/* =========================================================
   HERO GRID
========================================================= */

.teacher-hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(460px, 0.88fr);

  align-items: center;

  gap: 15px;

}



/* =========================================================
   HERO COPY
========================================================= */

.teacher-hero-copy {

  position: relative;

  z-index: 5;

  max-width: 780px;

}


.teacher-hero-copy h1 {

  width: 780px;

  max-width: 100%;

  margin:
    23px 0;

  color:
    var(--teacher-navy);

  font-size:
    clamp(
      47px,
      5vw,
      68px
    );

  line-height: 1.02;

  letter-spacing: -3px;

}


.teacher-hero-copy h1 span {

  display: block;

  margin-top: 9px;

  color:
    var(--teacher-blue);

}


.teacher-hero-lead {

  max-width: 700px;

  margin: 0;

  color: #2F4564;

  font-size: 18px;

  line-height: 1.6;

}


.teacher-hero-text {

  max-width: 700px;

  margin:
    18px 0 0;

  color:
    var(--teacher-muted);

  font-size: 15px;

  line-height: 1.75;

}



/* =========================================================
   HERO QUICK POINTS
========================================================= */

.teacher-quick-points {

  margin-top: 24px;

  display: flex;

  flex-wrap: wrap;

  gap:
    13px 20px;

  color: #405472;

  font-size: 12px;

  font-weight: 800;

}



/* =========================================================
   HERO ACTIONS
========================================================= */

.teacher-hero-actions {

  margin-top: 30px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}



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

.teacher-devices {

  position: relative;

  min-height: 590px;

  transform:
    translateY(-55px);

}


.teacher-device-glow {

  position: absolute;

  z-index: 0;

  width: 600px;

  height: 400px;

  left: 51%;

  top: 46%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(196,219,251,0.18) 0%,
      rgba(222,235,253,0.07) 52%,
      rgba(245,249,255,0) 76%
    );

  filter:
    blur(12px);

}


.teacher-tablet {

  position: absolute;

  z-index: 3;

  width: 590px;

  max-width: none;

  left: 50%;

  top: 75px;

  transform:
    translateX(-50%);

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 25px 32px
      rgba(16,39,75,0.14)
    );

}



/* =========================================================
   HERO BACKGROUND CIRCLES
========================================================= */

.teacher-hero-circle {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.teacher-circle-one {

  right: -150px;

  bottom: -220px;

  width: 580px;

  height: 580px;

  background:
    rgba(190,216,251,0.42);

}


.teacher-circle-two {

  left: -220px;

  bottom: -320px;

  width: 480px;

  height: 480px;

  background:
    rgba(220,233,250,0.40);

}



/* =========================================================
   HERO DOWN BUTTON
   CURRENT TEXT = "HOW IT WORKS"
========================================================= */

.teacher-explore-button {

  position: absolute;

  z-index: 20;

  left: 50%;

  bottom: 22px;

  width: 112px;

  height: 112px;

  transform:
    translateX(-50%);

  border:
    1px solid #D7E3F2;

  border-radius: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color: #0B1F3C;

  background:
    rgba(255,255,255,0.96);

  box-shadow:
    0 14px 32px
    rgba(11,31,60,0.10);

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.teacher-explore-button:hover {

  transform:
    translateX(-50%)
    translateY(-5px);

  box-shadow:
    0 19px 38px
    rgba(11,31,60,0.15);

}


.teacher-explore-arrow {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  background:
    var(--teacher-blue);

  font-size: 20px;

  font-weight: 800;

  line-height: 1;

}


.teacher-explore-text {

  max-width: 82px;

  color: #0B1F3C;

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;

}



/* =========================================================
   FEATURES SHOWCASE SECTION
========================================================= */

.teacher-showcase-section {

  position: relative;

  overflow: hidden;

  padding:
    78px 0 150px;

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

}


.teacher-showcase-container {

  position: relative;

  z-index: 3;

}



/* =========================================================
   SHOWCASE BACKGROUND CIRCLES
========================================================= */

.teacher-showcase-circle {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.teacher-showcase-circle-left {

  width: 420px;

  height: 420px;

  left: -265px;

  top: 75px;

  background:
    rgba(193,216,249,0.30);

}


.teacher-showcase-circle-right {

  width: 490px;

  height: 490px;

  right: -320px;

  bottom: -210px;

  background:
    rgba(193,216,249,0.27);

}



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

.teacher-showcase-heading {

  width: 100%;

  max-width: 1180px;

  margin:
    0 auto 55px;

  text-align: center;

}


.teacher-showcase-heading h2 {

  margin:
    18px 0 14px;

  color:
    var(--teacher-navy);

  font-size:
    clamp(
      40px,
      3.2vw,
      58px
    );

  line-height: 1.04;

  letter-spacing: -2.8px;

  white-space: nowrap;

}


.teacher-showcase-heading h2 span {

  display: inline;

  color:
    var(--teacher-blue);

}


.teacher-showcase-heading p {

  max-width: 680px;

  margin: 0 auto;

  color:
    var(--teacher-muted);

  font-size: 15px;

  line-height: 1.7;

}



/* =========================================================
   FEATURES GRID
========================================================= */

.teacher-showcase-grid {

  display: grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(420px,0.85fr);

  align-items: center;

  gap: 32px;

}



/* =========================================================
   FEATURE IMAGE SIDE
========================================================= */

.teacher-showcase-device-area {

  position: relative;

  min-width: 0;

  text-align: center;

}


.teacher-showcase-image-wrap {

  position: relative;

  width: 100%;

  max-width: 760px;

  margin: 0 auto;

  cursor: grab;

  touch-action: pan-y;

  user-select: none;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;

}


.teacher-showcase-image-wrap:active {

  cursor: grabbing;

}


.teacher-showcase-image-wrap.changing {

  opacity: 0.45;

  transform:
    scale(0.988);

}


/* LARGE TABLET IMAGE */

.teacher-showcase-image {

  width: 115%;

  max-width: none;

  height: auto;

  margin-left: -7.5%;

  display: block;

  object-fit: contain;

  pointer-events: none;

  user-select: none;

  filter:
    drop-shadow(
      0 21px 27px
      rgba(11,31,60,0.10)
    );

}



/* =========================================================
   SHOWCASE ARROWS
========================================================= */

.teacher-showcase-arrow {

  position: absolute;

  z-index: 50;

  top: 47%;

  width: 48px;

  height: 48px;

  padding: 0;

  border:
    1px solid #E1E8F2;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    var(--teacher-blue);

  background: #FFFFFF;

  box-shadow:
    0 8px 20px
    rgba(11,31,60,0.08);

  font-family:
    Arial,
    sans-serif;

  font-size: 34px;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;

}


.teacher-showcase-arrow:hover {

  color: #FFFFFF;

  background:
    var(--teacher-blue);

  transform:
    scale(1.04);

}


.teacher-showcase-arrow-left {

  left: -12px;

}


.teacher-showcase-arrow-right {

  right: -12px;

}



/* =========================================================
   SHOWCASE DOTS
========================================================= */

.teacher-showcase-dots {

  margin-top: 21px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}


.teacher-showcase-dot {

  width: 9px;

  height: 9px;

  padding: 0;

  border: 0;

  border-radius: 99px;

  background: #CDD7E6;

  cursor: pointer;

  transition:
    width 0.2s ease,
    background 0.2s ease;

}


.teacher-showcase-dot.active {

  width: 24px;

  background:
    var(--teacher-blue);

}


.teacher-showcase-swipe-text {

  margin:
    10px 0 0;

  color: #8190A6;

  font-size: 12px;

}



/* =========================================================
   FEATURE INFO CARD
========================================================= */

.teacher-showcase-info {

  min-height: 510px;

  padding:
    34px 38px 26px;

  border:
    1px solid #D9E3F0;

  border-radius: 24px;

  display: flex;

  flex-direction: column;

  background:
    rgba(255,255,255,0.95);

  box-shadow:
    0 22px 50px
    rgba(11,31,60,0.07);

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;

}


.teacher-showcase-info.changing {

  opacity: 0.55;

  transform:
    translateY(3px);

}



/* =========================================================
   FEATURE TITLE

   Latest version:
   no blue CL / AS / SA / HM / ST circle
========================================================= */

.teacher-showcase-title-row {

  display: block;

}


.teacher-showcase-title-copy {

  width: 100%;

}


.teacher-showcase-title-row h3 {

  margin: 0;

  color:
    var(--teacher-navy);

  font-size:
    clamp(
      32px,
      3vw,
      46px
    );

  line-height: 1;

  letter-spacing: -2px;

}



/* =========================================================
   FEATURE SUBTITLE + COUNT
========================================================= */

.teacher-showcase-subtitle-row {

  margin-top: 10px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}


.teacher-showcase-title-row h4 {

  margin: 0;

  color: #1261EE;

  font-size: 16px;

  line-height: 1.35;

}


.teacher-showcase-count {

  min-height: 27px;

  padding:
    0 10px;

  border:
    1px solid #D7E1EE;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #738299;

  background: #F9FBFD;

  font-size: 10px;

  font-weight: 800;

  white-space: nowrap;

}



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

.teacher-showcase-description {

  margin:
    32px 0 24px;

  color:
    var(--teacher-muted);

  font-size: 14px;

  line-height: 1.8;

}



/* =========================================================
   FEATURE BENEFITS
========================================================= */

.teacher-showcase-benefits {

  display: grid;

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

  gap: 12px;

}


.teacher-showcase-benefit {

  min-height: 58px;

  padding:
    12px 14px;

  border:
    1px solid #DCE5F1;

  border-radius: 12px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: #263B5A;

  background: #FFFFFF;

  font-size: 12px;

  font-weight: 700;

}


.teacher-showcase-benefit span {

  flex: 0 0 auto;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  background:
    var(--teacher-blue);

  font-size: 11px;

  font-weight: 900;

}



/* =========================================================
   PLANS + ENQUIRE BUTTONS
========================================================= */

.teacher-showcase-actions {

  margin-top: 20px;

  display: grid;

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

  gap: 12px;

}


.teacher-showcase-action {

  min-height: 48px;

  padding:
    0 18px;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

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

}


.teacher-showcase-action:hover {

  transform:
    translateY(-2px);

}


.teacher-showcase-action-secondary {

  border:
    1px solid #CBD9EC;

  color: #0B1F3C;

  background: #FFFFFF;

}


.teacher-showcase-action-primary {

  border:
    1px solid #246CF5;

  color: #FFFFFF;

  background: #246CF5;

  box-shadow:
    0 9px 20px
    rgba(36,108,245,0.18);

}


.teacher-showcase-action-primary:hover {

  background: #1254D2;

}



/* =========================================================
   FEATURE CARD FOOTER
========================================================= */

.teacher-showcase-info-footer {

  margin-top: auto;

  padding-top: 17px;

  border-top:
    1px solid #E2E8F1;

  color: #8795A9;

  font-size: 11px;

  line-height: 1.6;

}



/* =========================================================
   PRICING OVERLAY
========================================================= */

.teacher-modal-overlay {

  position: fixed;

  z-index: 15000;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  background:
    rgba(5,18,38,0.48);

  backdrop-filter:
    blur(5px);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

}


.teacher-modal-overlay.open {

  opacity: 1;

  visibility: visible;

}



/* =========================================================
   PRICING DRAWER
========================================================= */

.teacher-pricing-drawer {

  position: fixed;

  z-index: 16000;

  top: 0;

  right: 0;

  width:
    min(
      610px,
      100%
    );

  height: 100vh;

  padding: 34px;

  overflow-y: auto;

  transform:
    translateX(105%);

  color: #142744;

  background: #F8FAFD;

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

  transition:
    transform 0.3s ease;

}


.teacher-pricing-drawer.open {

  transform:
    translateX(0);

}



/* =========================================================
   PRICING HEADER
========================================================= */

.teacher-pricing-header {

  margin-bottom: 27px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 30px;

}


.teacher-pricing-eyebrow {

  color: #246CF5;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.5px;

}


.teacher-pricing-header h2 {

  margin:
    8px 0 7px;

  color: #0B1F3C;

  font-size: 35px;

  line-height: 1.05;

  letter-spacing: -1.5px;

}


.teacher-pricing-header p {

  max-width: 440px;

  margin: 0;

  color: #687991;

  font-size: 13px;

  line-height: 1.6;

}



/* =========================================================
   CLOSE BUTTONS
========================================================= */

.teacher-drawer-close,
.teacher-modal-close {

  flex: 0 0 auto;

  width: 42px;

  height: 42px;

  padding: 0;

  border:
    1px solid #D9E2EE;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #0B1F3C;

  background: #FFFFFF;

  font-size: 25px;

  cursor: pointer;

  transition:
    background 0.18s ease,
    transform 0.18s ease;

}


.teacher-drawer-close:hover,
.teacher-modal-close:hover {

  background: #F1F5FA;

  transform:
    scale(1.04);

}



/* =========================================================
   PRICING CARDS
========================================================= */

.teacher-pricing-list {

  display: grid;

  gap: 15px;

}


.teacher-price-card {

  position: relative;

  padding: 23px;

  border:
    1px solid #DDE6F1;

  border-radius: 19px;

  background: #FFFFFF;

}


.teacher-price-card-featured {

  border:
    2px solid #246CF5;

  box-shadow:
    0 12px 30px
    rgba(36,108,245,0.10);

}


.teacher-price-popular {

  position: absolute;

  top: -12px;

  right: 18px;

  padding:
    6px 10px;

  border-radius: 999px;

  color: #FFFFFF;

  background: #246CF5;

  font-size: 9px;

  font-weight: 900;

}


.teacher-price-label {

  color: #246CF5;

  font-size: 10px;

  font-weight: 900;

}


.teacher-price-card h3 {

  margin:
    7px 0 12px;

  color: #0B1F3C;

  font-size: 20px;

}



/* =========================================================
   CURRENT PRICE
========================================================= */

.teacher-price {

  display: flex;

  align-items: baseline;

  gap: 6px;

}


.teacher-price strong {

  color: #0B1F3C;

  font-size: 34px;

}


.teacher-price span {

  color: #7B899D;

  font-size: 11px;

}



/* =========================================================
   INTRODUCTORY PRICING

   £549 → £399
   £899 → £699
   £1,299 → £999
========================================================= */

.teacher-price-access-note {

  margin:
    -3px 0 17px;

  color: #687991;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.55;

}


.teacher-price-qualification-highlight {

  color: #246CF5;

  font-weight: 800;

}


.teacher-price-original {

  margin:
    0 0 11px;

  display: flex;

  align-items: baseline;

  gap: 7px;

}


.teacher-price-original-amount {

  position: relative;

  display: inline-block;

  color: #8794A8;

  font-size: 25px;

  font-weight: 800;

  line-height: 1;

}


.teacher-price-original-amount::after {

  content: "";

  position: absolute;

  left: -4px;

  right: -4px;

  top: 50%;

  height: 2px;

  border-radius: 20px;

  background: #DF5353;

  transform:
    rotate(-7deg);

}


.teacher-price-original-period {

  color: #98A4B6;

  font-size: 10px;

  font-weight: 600;

}


.teacher-intro-offer-label {

  width: fit-content;

  margin-bottom: 7px;

  padding:
    5px 10px;

  border-radius: 999px;

  color: #246CF5;

  background: #EAF2FF;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.4px;

}


.teacher-price.teacher-price-intro {

  margin-top: 0;

  margin-bottom: 20px;

}


.teacher-price.teacher-price-intro strong {

  color: #0B1F3C;

}



/* =========================================================
   PRICING LIST ITEMS
========================================================= */

.teacher-price-card ul {

  margin:
    18px 0 4px;

  padding: 0;

  list-style: none;

}


.teacher-price-card li {

  margin:
    9px 0;

  color: #566A85;

  font-size: 12px;

  line-height: 1.5;

}


.teacher-price-card li::before {

  content: "✓";

  margin-right: 9px;

  color: #246CF5;

  font-weight: 900;

}



/* =========================================================
   ENQUIRY MODAL
========================================================= */

.teacher-enquiry-modal {

  position: fixed;

  z-index: 17000;

  inset: 0;

  padding: 30px;

  overflow-y: auto;

  display: none;

  align-items: center;

  justify-content: center;

  background:
    rgba(5,18,38,0.48);

  backdrop-filter:
    blur(5px);

}


.teacher-enquiry-modal.open {

  display: flex;

}


.teacher-enquiry-modal-card {

  width:
    min(
      760px,
      100%
    );

  max-height:
    calc(100vh - 60px);

  overflow-y: auto;

  padding: 32px;

  border-radius: 22px;

  background: #FFFFFF;

  box-shadow:
    0 30px 70px
    rgba(11,31,60,0.22);

}



/* =========================================================
   ENQUIRY HEADER
========================================================= */

.teacher-enquiry-modal-header {

  margin-bottom: 27px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 30px;

}


.teacher-enquiry-modal-header span {

  color: #246CF5;

  font-size: 10px;

  font-weight: 900;

}


.teacher-enquiry-modal-header h2 {

  margin:
    8px 0;

  color: #0B1F3C;

  font-size: 34px;

  line-height: 1.1;

  letter-spacing: -1.5px;

}


.teacher-enquiry-modal-header p {

  margin: 0;

  color: #687991;

  font-size: 13px;

}



/* =========================================================
   ENQUIRY FORM
========================================================= */

.teacher-form-grid {

  display: grid;

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

  gap: 17px;

}


.teacher-enquiry-form label {

  display: block;

}


.teacher-enquiry-form label > span {

  margin-bottom: 7px;

  display: block;

  color: #354B68;

  font-size: 11px;

  font-weight: 800;

}


.teacher-enquiry-form input,
.teacher-enquiry-form select,
.teacher-enquiry-form textarea {

  width: 100%;

  padding:
    12px 13px;

  border:
    1px solid #D6E0ED;

  border-radius: 10px;

  outline: none;

  color: #142744;

  background: #FBFCFE;

  font-size: 13px;

}


.teacher-enquiry-form textarea {

  resize: vertical;

}


.teacher-enquiry-form input:focus,
.teacher-enquiry-form select:focus,
.teacher-enquiry-form textarea:focus {

  border-color: #246CF5;

  background: #FFFFFF;

  box-shadow:
    0 0 0 3px
    rgba(36,108,245,0.07);

}


.teacher-form-message {

  margin-top: 17px;

}



/* =========================================================
   CONSENT
========================================================= */

.teacher-form-consent {

  margin-top: 18px;

  display: flex !important;

  align-items: flex-start;

  gap: 9px;

}


.teacher-form-consent input {

  width: auto;

  margin-top: 3px;

}


.teacher-form-consent span {

  margin: 0 !important;

  color: #687991 !important;

  font-weight: 500 !important;

  line-height: 1.5;

}



/* =========================================================
   BOT CHECK
========================================================= */

.teacher-botcheck {

  position: absolute !important;

  left: -9999px !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



/* =========================================================
   FORM STATUS
========================================================= */

.teacher-form-inline-status {

  min-height: 20px;

  margin-top: 14px;

  color: #D94A4A;

  font-size: 12px;

  line-height: 1.5;

}



/* =========================================================
   FORM ACTIONS
========================================================= */

.teacher-form-actions {

  margin-top: 12px;

  display: flex;

  justify-content: flex-end;

  gap: 10px;

}


.teacher-form-cancel,
.teacher-form-submit {

  min-height: 46px;

  padding:
    0 20px;

  border-radius: 11px;

  font-weight: 800;

  cursor: pointer;

}


.teacher-form-cancel {

  border:
    1px solid #CFDAE8;

  color: #0B1F3C;

  background: #FFFFFF;

}


.teacher-form-submit {

  border:
    1px solid #246CF5;

  color: #FFFFFF;

  background: #246CF5;

}


.teacher-form-submit:hover {

  background: #1254D2;

}


.teacher-form-submit:disabled {

  opacity: 0.65;

  cursor: wait;

}



/* =========================================================
   RESULT MODALS
========================================================= */

.teacher-enquiry-result {

  position: fixed;

  z-index: 18000;

  inset: 0;

  padding: 20px;

  display: none;

  align-items: center;

  justify-content: center;

  background:
    rgba(5,18,38,0.48);

  backdrop-filter:
    blur(5px);

}


.teacher-enquiry-result.open {

  display: flex;

}


.teacher-enquiry-result-card {

  width:
    min(
      430px,
      100%
    );

  padding: 38px;

  border-radius: 22px;

  text-align: center;

  background: #FFFFFF;

  box-shadow:
    0 30px 70px
    rgba(11,31,60,0.22);

}


.teacher-enquiry-result-icon {

  width: 58px;

  height: 58px;

  margin:
    0 auto 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  background: #246CF5;

  font-size: 24px;

  font-weight: 900;

}


.teacher-enquiry-result-icon-error {

  background: #D94A4A;

}


.teacher-enquiry-result-card h2 {

  margin:
    0 0 11px;

  color: #0B1F3C;

  font-size: 29px;

  line-height: 1.1;

  letter-spacing: -1px;

}


.teacher-enquiry-result-card p {

  margin:
    0 0 25px;

  color: #687991;

  font-size: 13px;

  line-height: 1.7;

}


.teacher-result-button {

  width: 100%;

  min-height: 46px;

  padding:
    0 18px;

  border:
    1px solid #246CF5;

  border-radius: 11px;

  color: #FFFFFF;

  background: #246CF5;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

}



/* =========================================================
   FOOTER
========================================================= */

.teacher-footer {

  padding:
    25px 0;

  color:
    rgba(255,255,255,0.66);

  background: #08182F;

}


.teacher-footer-grid {

  display: grid;

  grid-template-columns:
    1fr auto auto;

  align-items: center;

  gap: 45px;

}


.teacher-footer-logo {

  width: 112px;

  display: block;

  transform:
    translateY(7px);

}


.teacher-footer p {

  max-width: 330px;

  margin:
    10px 0 0;

  font-size: 11px;

}


.teacher-footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  font-size: 11px;

}


.teacher-footer-links a {

  color: inherit;

  text-decoration: none;

}


.teacher-footer-links a:hover {

  color: #FFFFFF;

}



/* =========================================================
   RESPONSIVE - 1160
========================================================= */

@media (max-width: 1160px) {

  .teacher-hero-grid {

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

  }


  .teacher-hero-copy {

    max-width: 700px;

  }


  .teacher-hero-copy h1 {

    width: 700px;

  }


  .teacher-tablet {

    width: 510px;

  }

}



/* =========================================================
   RESPONSIVE - FEATURES HEADING
========================================================= */

@media (max-width: 1100px) {

  .teacher-showcase-heading {

    max-width: 900px;

  }


  .teacher-showcase-heading h2 {

    white-space: normal;

    font-size:
      clamp(
        40px,
        4vw,
        58px
      );

  }

}



/* =========================================================
   RESPONSIVE - 1050
========================================================= */

@media (max-width: 1050px) {

  .teacher-showcase-grid {

    grid-template-columns: 1fr;

    max-width: 780px;

    margin: 0 auto;

    gap: 45px;

  }


  .teacher-showcase-image-wrap {

    max-width: 760px;

  }


  .teacher-showcase-image {

    width: 108%;

    margin-left: -4%;

  }

}



/* =========================================================
   RESPONSIVE - 920
========================================================= */

@media (max-width: 920px) {

  .teacher-hero {

    min-height: auto;

  }


  .teacher-hero-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }


  .teacher-devices {

    min-height: 480px;

    transform:
      translateY(-15px);

  }


  .teacher-tablet {

    width: 570px;

    max-width: 86vw;

    left: 50%;

    top: 55px;

    transform:
      translateX(-50%);

  }


  .teacher-footer-grid {

    grid-template-columns: 1fr;

    gap: 25px;

  }

}



/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 650px) {

  .teacher-container {

    width:
      calc(100% - 26px);

  }



  /* HERO */

  .teacher-hero {

    min-height: auto;

    padding:
      58px 0 125px;

  }


  .teacher-hero-copy h1 {

    width: 100%;

    font-size: 44px;

    letter-spacing: -2.3px;

  }


  .teacher-hero-lead {

    font-size: 16px;

  }


  .teacher-hero-text {

    font-size: 14px;

  }


  .teacher-hero-actions {

    flex-direction: column;

  }


  .teacher-hero-actions
  .teacher-button {

    width: 100%;

  }


  .teacher-quick-points {

    flex-direction: column;

  }


  .teacher-devices {

    min-height: 320px;

    transform: none;

  }


  .teacher-tablet {

    width: 390px;

    max-width: 92vw;

    top: 35px;

  }



  /* HERO DOWN BUTTON */

  .teacher-explore-button {

    width: 96px;

    height: 96px;

    bottom: 14px;

    border-radius: 16px;

  }


  .teacher-explore-arrow {

    width: 30px;

    height: 30px;

    font-size: 18px;

  }


  .teacher-explore-text {

    font-size: 10px;

  }



  /* FEATURES */

  .teacher-showcase-section {

    padding:
      60px 0 140px;

  }


  .teacher-showcase-heading {

    margin-bottom: 40px;

  }


  .teacher-showcase-heading h2 {

    font-size: 39px;

    letter-spacing: -2px;

    white-space: normal;

  }


  .teacher-showcase-image {

    width: 100%;

    margin-left: 0;

  }


  .teacher-showcase-arrow {

    width: 42px;

    height: 42px;

    font-size: 28px;

  }


  .teacher-showcase-arrow-left {

    left: -4px;

  }


  .teacher-showcase-arrow-right {

    right: -4px;

  }


  .teacher-showcase-info {

    min-height: 0;

    padding:
      27px 20px;

  }


  .teacher-showcase-title-row h3 {

    font-size: 36px;

  }


  .teacher-showcase-subtitle-row {

    gap: 9px;

  }


  .teacher-showcase-title-row h4 {

    font-size: 14px;

  }


  .teacher-showcase-count {

    min-height: 25px;

    font-size: 9px;

  }


  .teacher-showcase-benefits,
  .teacher-showcase-actions {

    grid-template-columns: 1fr;

  }



  /* PRICING */

  .teacher-pricing-drawer {

    padding:
      25px 18px;

  }


  .teacher-pricing-header h2 {

    font-size: 30px;

  }


  .teacher-price-access-note {

    font-size: 11px;

  }


  .teacher-price-original-amount {

    font-size: 23px;

  }



  /* ENQUIRY */

  .teacher-enquiry-modal {

    padding: 14px;

  }


  .teacher-enquiry-modal-card {

    padding:
      24px 18px;

  }


  .teacher-enquiry-modal-header h2 {

    font-size: 29px;

  }


  .teacher-form-grid {

    grid-template-columns: 1fr;

  }


  .teacher-form-actions {

    flex-direction:
      column-reverse;

  }


  .teacher-form-cancel,
  .teacher-form-submit {

    width: 100%;

  }



  /* RESULT */

  .teacher-enquiry-result-card {

    padding:
      30px 22px;

  }

}


/* =========================================================
   UNIFIED SECTION NAVIGATION BUTTONS

   1. HOW IT WORKS
   2. EXPLORE THE PORTAL
   3. EXPLORE THE BENEFITS
========================================================= */


/* =========================================================
   MAKE EACH PARENT SECTION A POSITIONING AREA
========================================================= */

.teacher-hero,
.teacher-how-section,
.teacher-showcase-section {
  position: relative;
}


/* =========================================================
   ALL THREE BUTTONS
========================================================= */

.teacher-explore-button,
.teacher-portal-jump-button,
.teacher-benefits-jump-button {

  position: absolute;

  z-index: 40;

  left: 50%;

  bottom: 22px;

  width: 112px;

  height: 112px;

  padding: 0;

  transform:
    translateX(-50%);

  border:
    1px solid #D7E3F2;

  border-radius: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color: #0B1F3C;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 14px 32px
    rgba(
      11,
      31,
      60,
      0.10
    );

  text-align: center;

  text-decoration: none;

  white-space: normal;

  cursor: pointer;

  transition:
    transform 0.20s ease,
    box-shadow 0.20s ease,
    border-color 0.20s ease;

}


/* =========================================================
   HOVER
========================================================= */

.teacher-explore-button:hover,
.teacher-portal-jump-button:hover,
.teacher-benefits-jump-button:hover {

  transform:
    translateX(-50%)
    translateY(-5px);

  border-color: #BFD2EF;

  box-shadow:
    0 19px 38px
    rgba(
      11,
      31,
      60,
      0.15
    );

}



/* =========================================================
   ALL THREE BLUE ARROW CIRCLES
========================================================= */

.teacher-explore-arrow,
.teacher-portal-jump-arrow,
.teacher-benefits-jump-arrow {

  flex:
    0 0 auto;

  width: 34px;

  height: 34px;

  border: 0;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  background: #246CF5;

  box-shadow:
    0 6px 14px
    rgba(
      36,
      108,
      245,
      0.20
    );

  font-size: 20px;

  font-weight: 800;

  line-height: 1;

}



/* =========================================================
   ALL THREE LABELS
========================================================= */

.teacher-explore-text,
.teacher-portal-jump-text,
.teacher-benefits-jump-text {

  width: 90px;

  max-width: 90px;

  margin: 0;

  color: #0B1F3C;

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;

  text-align: center;

}



/* =========================================================
   CREATE SPACE FOR BUTTON UNDER HOW IT WORKS
========================================================= */

.teacher-how-section {

  padding-bottom: 150px;

}



/* =========================================================
   CREATE SPACE FOR BUTTON UNDER FEATURES
========================================================= */

.teacher-showcase-section {

  padding-bottom: 150px;

}



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

@media (max-width: 650px) {


  .teacher-explore-button,
  .teacher-portal-jump-button,
  .teacher-benefits-jump-button {

    width: 96px;

    height: 96px;

    bottom: 14px;

    border-radius: 16px;

    gap: 7px;

  }


  .teacher-explore-arrow,
  .teacher-portal-jump-arrow,
  .teacher-benefits-jump-arrow {

    width: 30px;

    height: 30px;

    font-size: 18px;

  }


  .teacher-explore-text,
  .teacher-portal-jump-text,
  .teacher-benefits-jump-text {

    width: 78px;

    max-width: 78px;

    font-size: 10px;

  }


  .teacher-how-section,
  .teacher-showcase-section {

    padding-bottom: 125px;

  }

}