.login-link {
  color: var(--lm-ink);
  font-size: 14px;
  font-weight: 700;
}

.main-hero-screen {
  padding: 0 !important;
  overflow: hidden;
  background: #f8fbfa;
}

.mobile-hero {
  display: none;
}

.main-hero-frame {
  position: relative;
  width: 100%;
  max-width: 1609px;
  margin: 0 auto;
}

.main-hero-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 722;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  transform-origin: center;
}

.main-hero-frame{overflow:hidden}.main-hero-frame:hover img{transform:scale(1.015);filter:saturate(1.03) contrast(1.015)}.hero-screen-link{transition:transform .22s ease,background .22s ease}.hero-screen-link:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}

.hero-screen-link {
  position: absolute;
  z-index: 2;
  top: 79.5%;
  height: 10%;
  border-radius: 12px;
}

.hero-screen-link:focus-visible {
  outline: 4px solid #123a57;
  outline-offset: 3px;
}

.hero-screen-link.find {
  left: 3%;
  width: 15%;
}

.hero-screen-link.teach {
  left: 19%;
  width: 18%;
}

.intro-section h1 {
  color: var(--lm-ink);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-size: clamp(31px, 4vw, 50px);
  line-height: 1.35;
  letter-spacing: -.03em;
}

.teacher-first-hero {
  grid-template-columns: .82fr 1.18fr !important;
  gap: 34px !important;
}

.teacher-first-hero .hero-copy {
  position: relative;
  z-index: 2;
}

.teacher-first-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.teacher-first-hero .eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lm-green);
}

.teacher-first-hero h1 {
  font-size: clamp(48px, 5.6vw, 78px);
  line-height: 1.22;
}

.teacher-first-hero .hero-lead {
  font-size: 15px !important;
}

.coral-cta {
  background: #ff6c63 !important;
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 31px;
  color: #577069;
  font-size: 11px;
  font-weight: 700;
}

.teacher-hero-visual {
  align-self: stretch;
  min-height: 520px;
  overflow: hidden;
  border-radius: 28px 8px 28px 8px;
  background: #eaf8f2;
  box-shadow: 0 26px 70px rgba(21, 64, 51, .11);
}

.teacher-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.teacher-screen {
  overflow: hidden;
  padding: 14px;
  background: #fff;
}

.teacher-screen img {
  width: 100%;
  border-radius: 15px;
}

.teacher-screen .mock-note {
  padding: 0 10px;
}

.download-section {
  overflow: hidden;
  background: linear-gradient(145deg, #fff 15%, #f0f8f4 60%, #edf6fb);
}

.download-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.download-copy > p {
  max-width: 560px;
  margin: 22px 0 28px;
  font-size: 15px;
  line-height: 2;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.download-actions button {
  font: inherit;
}

.install-note {
  margin: 15px 0 !important;
  color: var(--lm-muted) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}

.install-note.is-help {
  padding: 11px 13px;
  border-radius: 10px;
  color: #805b12 !important;
  background: #fff4dc;
}

.app-points {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  color: var(--lm-green-dark);
  font-size: 11px;
  font-weight: 700;
}

.phone-stage {
  position: relative;
  min-height: 590px;
}

.phone {
  position: absolute;
  width: 300px;
  height: 590px;
  overflow: hidden;
  border: 9px solid #151515;
  border-radius: 44px;
  background: #111;
  box-shadow: 0 28px 70px rgba(13, 48, 38, .2);
}

.phone .phone-preview {
  max-width: none;
  display: block;
  width: 390px;
  height: 790px;
  border: 0;
  background: #f5f8f7;
  transform: scale(.723);
  transform-origin: top left;
  pointer-events: none;
}

.phone-speaker {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 86px;
  height: 18px;
  border-radius: 99px;
  background: #151515;
  transform: translateX(-50%);
}

.phone-back {
  top: 50px;
  right: 250px;
  transform: rotate(-4deg);
}

.phone-front {
  top: 0;
  right: 18px;
  transform: rotate(3deg);
}

.app-icon-card {
  position: absolute;
  z-index: 3;
  bottom: 8%;
  left: 5%;
  display: grid;
  width: 155px;
  height: 155px;
  padding: 20px;
  place-items: center;
  border: 1px solid var(--lm-line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(13, 48, 38, .15);
}

.app-icon-card .logo-mark {
  width: 55px;
  height: 55px;
  font-size: 35px;
}

.app-icon-card b {
  color: var(--lm-green-dark);
  font: 800 18px "Manrope";
}

.app-icon-card small {
  color: var(--lm-muted);
  font-size: 9px;
}

@media (max-width: 960px) {
  .download-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .teacher-first-hero {
    grid-template-columns: 1fr !important;
  }

  .teacher-hero-visual {
    min-height: 430px;
  }
}

@media (max-width: 640px) {
  .main-hero-screen {
    display: none;
  }

  /* Approved mobile hero: the desktop content reflows as readable HTML. */
  body.lumera-home { --mobile-hero-ink: #16325c; --mobile-hero-blue: #4f9bd0; --lm-coral: #f0644f; }
  body.lumera-home .mobile-hero {
    display: block;
    padding: 26px clamp(18px, 5vw, 28px) 0;
    background: #fff;
    color: var(--mobile-hero-ink);
  }
  .mobile-hero-inner { width: min(100%, 560px); margin: 0 auto; }
  .mobile-hero-kicker {
    display: flex; align-items: center; gap: 8px; margin: 0 0 15px;
    color: var(--lm-green); font-size: 14px; font-weight: 800;
  }
  .mobile-hero-kicker::before {
    content: ""; width: .65em; height: .65em; flex: none;
    border-radius: 50%; background: currentColor;
  }
  .mobile-hero h1 {
    margin: 0; color: var(--mobile-hero-ink); font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(30px, 9.55vw, 44px); font-weight: 800;
    line-height: 1.35; letter-spacing: -.055em; overflow-wrap: anywhere;
  }
  .mobile-hero h1 span { display: block; }
  .mobile-hero-description {
    margin: 18px 0 22px; color: var(--lm-muted); font-size: 16px; line-height: 1.8;
  }
  .mobile-hero-actions { display: flex; gap: 12px; }
  .mobile-hero-actions a {
    display: flex; flex: 1; min-width: 0; min-height: 50px;
    justify-content: center; align-items: center; gap: 8px; padding: 10px 8px;
    border: 1px solid var(--lm-green); border-radius: 6px;
    font-size: clamp(12px, 3.8vw, 15px); font-weight: 800;
    line-height: 1.5; overflow-wrap: anywhere;
  }
  .mobile-hero-actions .mobile-hero-find { border-color: var(--lm-coral); background: var(--lm-coral); color: #fff; }
  .mobile-hero-actions .mobile-hero-register { background: #fff; color: var(--lm-green-dark); }
  .mobile-hero-actions a:focus-visible { outline: 3px solid var(--mobile-hero-ink); outline-offset: 4px; }
  .mobile-hero-examples { position: relative; isolation: isolate; margin: 26px 0 0; }
  .mobile-hero-examples::before {
    content: ""; position: absolute; z-index: -1; inset: -18px -16px 38px;
    border-radius: 50%; background: var(--lm-mint);
  }
  .mobile-hero-cards { display: flex; gap: 12px; }
  .mobile-hero-card {
    flex: 1; min-width: 0; overflow: hidden; border-radius: 12px; background: #fff;
    box-shadow: 0 10px 22px rgb(17 58 87 / 7%);
  }
  /* Crop the existing desktop photo in the viewport; do not regenerate faces. */
  .mobile-hero-portrait { display: block; width: 100%; height: auto; aspect-ratio: 322 / 260; overflow: hidden; }
  .mobile-hero-card-copy { position: relative; padding: 24px 12px 14px; }
  .mobile-hero-online {
    position: absolute; top: -13px; left: 8px; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border: 1px solid var(--lm-line); border-radius: 99px;
    background: #fff; color: var(--lm-green); font-size: 12px; font-weight: 700; line-height: 1.6;
  }
  .mobile-hero-online::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
  .mobile-hero-card h2 { margin: 0; color: var(--mobile-hero-ink); font-size: clamp(17px, 4.9vw, 22px); font-weight: 800; overflow-wrap: anywhere; }
  .mobile-hero-card p { margin: 3px 0 0; color: var(--mobile-hero-blue); font-size: 14px; font-weight: 700; }
  .mobile-hero-examples figcaption { margin: 20px 0 0; color: var(--lm-muted); text-align: center; font-size: 12px; line-height: 1.7; }
  .mobile-hero-assurances {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
    margin: 27px 0 10px; padding: 0; list-style: none; color: var(--lm-muted); font-size: 13px; font-weight: 700;
  }
  .mobile-hero-assurances li { display: flex; align-items: center; gap: 7px; }
  .mobile-hero-assurances li::before {
    content: "✓"; display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--lm-green); color: #fff;
  }
  .mobile-hero-price { margin: 0; padding-bottom: 28px; border-bottom: 1px solid var(--lm-line); text-align: center; color: var(--lm-muted); font-size: 14px; font-weight: 700; }
  .mobile-hero-price strong { color: var(--lm-green); font-size: 20px; }
  body.lumera-home > .fixed-cta { display: none !important; }
  body.lumera-home .intro-section { padding-top: 36px !important; background: #fff; text-align: left; }
  body.lumera-home .intro-section .section-label { display: none; }
  body.lumera-home .intro-section h1 { color: var(--mobile-hero-ink); font-size: clamp(18px, 5.65vw, 30px); line-height: 1.5; }
  body.lumera-home .site-header .mobile-login-link {
    min-width: 0; padding-inline: 5px; border-color: transparent !important; border-radius: 0;
  }
  body.lumera-home .site-header .menu-btn { border: 0; border-left: 1px solid var(--lm-line); border-radius: 0; }
  body.lumera-home .site-header .mobile-header-signup { border-radius: 8px; box-shadow: none !important; }

  .intro-section {
    padding-top: 58px !important;
  }

  .download-section {
    padding-bottom: 105px !important;
  }

  .main-hero-frame {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .main-hero-screen {
    overflow: hidden;
  }

  .teacher-first-hero h1 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .teacher-first-hero .hero-lead br {
    display: none;
  }

  .teacher-first-hero .hero-cta {
    display: grid;
  }

  .teacher-first-hero .hero-cta .btn {
    width: 100%;
  }

  .hero-assurances {
    display: grid;
    gap: 7px;
    margin-top: 22px;
  }

  .teacher-hero-visual {
    min-height: 350px;
    border-radius: 18px;
  }

  .download-copy h2 br {
    display: none;
  }

  .download-actions {
    display: grid;
  }

  .download-actions .btn {
    width: 100%;
  }

  .app-points {
    display: grid;
    gap: 8px;
  }

  .phone-stage {
    min-height: 470px;
    margin-top: 10px;
  }

  .phone {
    width: 225px;
    height: 445px;
    border-width: 7px;
    border-radius: 34px;
  }

  .phone .phone-preview {
    transform: scale(.541);
  }

  .phone-back {
    top: 30px;
    right: auto;
    left: 0;
  }

  .phone-front {
    right: 0;
  }

  .phone-speaker {
    top: 6px;
    width: 64px;
    height: 13px;
  }

  .app-icon-card {
    bottom: -20px;
    left: 50%;
    width: 112px;
    height: 112px;
    padding: 12px;
    border-radius: 24px;
    transform: translateX(-50%);
  }

  .app-icon-card .logo-mark {
    width: 39px;
    height: 39px;
    font-size: 25px;
  }

  .app-icon-card b {
    font-size: 14px;
  }

  .app-icon-card small {
    display: none;
  }
}


.hero-screen-caption{margin:0;padding:8px 20px 12px;text-align:center;color:var(--lm-muted);font-size:13px;line-height:1.7}