/* /lp/english — Yuvi Spark English for English teachers and principals. */

/* ── Hero ── */

.en-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(55% 70% at 12% 18%, oklch(0.42 0.2 290 / 0.6), transparent 62%),
    radial-gradient(45% 60% at 92% 96%, oklch(0.52 0.15 232 / 0.32), transparent 66%),
    var(--lp-dark-bg);
  color: var(--lp-dark-body);
}

.en-hero__stack {
  display: grid;
  justify-items: center;
  text-align: center;
}

.en-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(20px, 4vw, 36px);
  margin-block-end: clamp(28px, 4vw, 44px);
}

.en-partners li {
  display: flex;
  align-items: center;
}

.en-partners img {
  inline-size: auto;
}

.en-partners__chip {
  padding: 6px 8px;
  border-radius: 10px;
  background: oklch(1 0 0);
}

.en-partners__moe {
  block-size: 46px;
}

.en-partners__ms {
  block-size: 30px;
}

.en-partners__yuvi {
  block-size: 50px;
}

.en-nowrap {
  white-space: nowrap;
}

.en-partners__720 {
  block-size: 56px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.16);
}

.en-hero .lp-display {
  max-inline-size: 18ch;
}

.en-hero .lp-display {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
}

.en-hero .lp-display {
  color: var(--lp-dark-ink);
}

.en-hero .lp-display span {
  display: block;
  color: var(--lp-dark-accent);
}

.en-hero__sub {
  max-inline-size: 52ch;
  margin-block-start: 20px;
  color: var(--lp-dark-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 650;
  line-height: 1.5;
  text-wrap: balance;
}

.en-hero .lp-lead {
  margin-block-start: 12px;
  margin-inline: auto;
  color: var(--lp-dark-body);
}

.en-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 28px;
}

.en-pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-block-start: 32px;
  color: var(--lp-dark-ink);
  font-weight: 600;
}

.en-pillars li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.en-pillars svg {
  inline-size: 20px;
  block-size: 20px;
  color: var(--lp-dark-accent);
}

/* The video character, first thing the visitor sees. */

.en-hero-avatar {
  position: relative;
  inline-size: min(100%, 460px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: start;
}

.en-hero-avatar img {
  inline-size: 100%;
  border-radius: 26px;
  box-shadow:
    0 40px 80px -30px oklch(0.08 0.06 285 / 0.85),
    0 0 0 1px oklch(1 0 0 / 0.14);
}

.en-hero-avatar__tip {
  position: absolute;
  inset-block-start: 38%;
  inset-inline-end: clamp(-56px, -4vw, -12px);
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 20px 40px -18px oklch(0.08 0.06 285 / 0.75);
  animation: en-rise 0.9s var(--lp-ease) 0.6s both;
}

.en-hero-avatar__tip strong {
  color: var(--lp-accent);
  font-size: 0.82rem;
}

@keyframes en-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(6px);
  }
}

/* ── Sections ── */

.en-section {
  padding-block: clamp(72px, 9vw, 120px);
}

.en-section__head {
  display: grid;
  gap: 14px;
  max-inline-size: 720px;
  margin-block-end: clamp(36px, 5vw, 56px);
}

/* ── Student | Teacher split ── */

.en-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--lp-line);
  border-radius: 28px;
  background: var(--lp-surface);
  box-shadow: 0 24px 60px -36px oklch(0.3 0.12 285 / 0.35);
  overflow: hidden;
}

.en-side {
  display: grid;
  align-content: start;
  gap: 26px;
  padding: clamp(28px, 4vw, 44px);
  border-block-start: 4px solid var(--en-side-color);
}

.en-side + .en-side {
  border-inline-start: 1px solid var(--lp-line);
}

.en-side--student {
  --en-side-color: var(--lp-accent);
  --en-side-soft: oklch(0.52 0.25 280 / 0.08);
}

.en-side--teacher {
  --en-side-color: oklch(0.6 0.12 225);
  --en-side-soft: oklch(0.6 0.12 225 / 0.09);
}

.en-side__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.en-side__badge {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: var(--en-side-soft);
  color: var(--en-side-color);
}

.en-side__badge svg {
  inline-size: 24px;
  block-size: 24px;
}

.en-side__title {
  color: var(--lp-ink);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 770;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.en-ticks {
  display: grid;
  gap: 12px;
}

.en-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--lp-ink);
  font-size: 1.05rem;
}

.en-ticks svg {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 3px;
  color: var(--en-side-color, var(--lp-dark-accent));
}

.en-preview {
  padding: 20px;
  border-radius: 20px;
  background: var(--en-side-soft);
}

.en-preview--student {
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: end;
  gap: 12px;
}

.en-preview--student img {
  inline-size: 96px;
  justify-self: center;
}

.en-chat {
  display: grid;
  gap: 10px;
  align-self: center;
}

.en-chat p {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: 0.93rem;
  line-height: 1.45;
  box-shadow: 0 8px 20px -14px oklch(0.3 0.12 285 / 0.5);
}

.en-chat .en-fix {
  background: oklch(0.96 0.035 160);
}

.en-fix b {
  color: var(--lp-success);
}

.en-wavy {
  text-decoration: underline wavy oklch(0.6 0.2 25);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.en-preview--teacher {
  display: grid;
  gap: 8px;
}

.en-preview__caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 2px;
  color: var(--lp-ink);
  font-size: 0.9rem;
  font-weight: 650;
}

.en-preview__caption span {
  color: var(--lp-muted);
  font-weight: 500;
}

.en-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--lp-surface);
  box-shadow: 0 8px 20px -16px oklch(0.3 0.12 225 / 0.5);
}

.en-row__name {
  color: var(--lp-ink);
  font-weight: 650;
  font-size: 0.95rem;
}

.en-row__why {
  grid-column: 1;
  color: var(--lp-muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.en-level {
  grid-row: span 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: oklch(0.6 0.12 225 / 0.12);
  color: oklch(0.38 0.1 230);
  font-size: 0.82rem;
  font-weight: 700;
}

.en-level--up {
  background: oklch(0.5 0.13 160 / 0.13);
  color: oklch(0.38 0.11 160);
}

.en-level--attn {
  background: oklch(0.7 0.16 60 / 0.18);
  color: oklch(0.42 0.1 55);
}

/* ── Challenge ── */

.en-challenge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}

.en-challenge > div {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-block-start: 24px;
  border-block-start: 2px solid var(--lp-line-strong);
}

.en-challenge__big {
  color: var(--lp-ink);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 790;
  letter-spacing: -0.03em;
  line-height: 1;
}

.en-challenge p {
  max-inline-size: 44ch;
}

.en-challenge cite {
  color: var(--lp-muted);
  font-size: 0.82rem;
  font-style: normal;
}

.en-challenge cite a {
  color: inherit;
}

/* ── Promise + proofs ── */

.en-promise {
  padding-block: clamp(72px, 9vw, 120px) clamp(24px, 3vw, 40px);
  text-align: center;
}

.en-promise .lp-h2 {
  max-inline-size: 18ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}

.en-promise .lp-h2 span {
  display: block;
  color: var(--lp-accent);
}

.en-proofs {
  display: grid;
  gap: clamp(64px, 9vw, 120px);
  padding-block: clamp(40px, 5vw, 64px) clamp(72px, 9vw, 120px);
}

.en-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.en-proof:nth-child(even) {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.en-proof:nth-child(even) .en-proof__text {
  order: 2;
}

.en-proof__text {
  display: grid;
  gap: 16px;
}

.en-proof__tag {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lp-accent-soft);
  color: var(--lp-accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.en-proof .lp-h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.en-proof__text > p {
  max-inline-size: 46ch;
  color: var(--lp-body);
  font-size: 1.08rem;
}

.en-proof__visual {
  position: relative;
  margin: 0;
}

.en-screen {
  overflow: hidden;
  border-radius: 16px;
  background: var(--lp-surface);
  box-shadow:
    0 30px 60px -30px oklch(0.3 0.12 285 / 0.45),
    0 0 0 1px var(--lp-line);
}

.en-screen img {
  inline-size: 100%;
}

.en-levels {
  display: grid;
  gap: 14px;
}

.en-levels figure {
  position: relative;
  margin: 0;
}

.en-levels figcaption {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lp-ink);
  color: var(--lp-dark-ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.en-levels figure:nth-child(2) {
  margin-inline-start: clamp(24px, 6vw, 72px);
}

.en-levels figure:nth-child(1) {
  margin-inline-end: clamp(24px, 6vw, 72px);
}

.en-callout {
  position: absolute;
  inset-block-end: clamp(-28px, -2vw, -12px);
  inset-inline-start: clamp(-20px, -1.5vw, 0px);
  display: grid;
  gap: 4px;
  max-inline-size: 300px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--lp-surface);
  box-shadow: 0 24px 48px -20px oklch(0.2 0.1 285 / 0.5), 0 0 0 1px var(--lp-line);
  font-size: 0.95rem;
}

.en-callout strong {
  color: var(--lp-accent);
  font-size: 0.85rem;
}

.en-callout span {
  color: var(--lp-ink);
}

.en-callout b {
  color: var(--lp-success);
}

.en-proof--teacher .en-ticks svg,
.en-proof .en-ticks svg {
  color: var(--lp-accent);
}

.en-center {
  display: grid;
  gap: 18px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: var(--lp-bg-tint);
}

.en-center__row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--lp-ink);
  font-weight: 650;
}

.en-center__row span {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--lp-surface);
  color: var(--lp-accent);
}

.en-center__row svg {
  inline-size: 22px;
  block-size: 22px;
}

/* ── Easy start + about ── */

.en-start {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
}

.en-start > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-block-start: 22px;
  border-block-start: 2px solid var(--lp-line-strong);
}

.en-start svg {
  inline-size: 28px;
  block-size: 28px;
  margin-block-end: 6px;
  color: var(--lp-accent);
}

.en-about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: clamp(32px, 5vw, 56px);
  border-radius: 28px;
  background: var(--lp-surface);
  box-shadow: 0 24px 60px -36px oklch(0.3 0.12 285 / 0.35);
}

.en-about__num {
  color: var(--lp-ink);
  font-size: clamp(3.6rem, 8vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.en-about__num + p {
  margin-block-start: 8px;
  color: var(--lp-ink);
  font-size: 1.15rem;
}

.en-about .en-ticks svg {
  color: var(--lp-accent);
}

.en-about .en-endorse {
  margin-block-start: 22px;
}

/* ── Speaking with a video character (dark) ── */

.en-avatar {
  background:
    radial-gradient(50% 70% at 88% 10%, oklch(0.42 0.2 290 / 0.5), transparent 62%),
    var(--lp-dark-bg-deep);
  color: var(--lp-dark-body);
}

.en-avatar__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(36px, 6vw, 80px);
}

.en-avatar .lp-h2 {
  color: var(--lp-dark-ink);
}

.en-avatar .lp-lead {
  margin-block: 16px 26px;
  color: var(--lp-dark-body);
}

.en-avatar .en-ticks {
  margin-block-end: 32px;
}

.en-avatar .en-ticks li {
  color: var(--lp-dark-ink);
}

.en-avatar__shot {
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  box-shadow:
    0 40px 80px -36px oklch(0.05 0.05 285 / 0.9),
    0 0 0 1px oklch(1 0 0 / 0.14);
}

.en-avatar__shot img {
  inline-size: 100%;
}

/* ── Demo video ── */

.en-demo-video {
  padding-block-end: 0;
}

.en-demo-video__inner {
  display: grid;
  justify-items: center;
  gap: clamp(24px, 3vw, 36px);
  text-align: center;
}

.en-video {
  display: grid;
  gap: 10px;
  inline-size: min(100%, 960px);
  margin: 0;
}

.en-video__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--lp-dark-bg-deep);
  box-shadow: 0 40px 80px -36px oklch(0.2 0.1 285 / 0.6), 0 0 0 1px var(--lp-line);
}

.en-video__stage img,
.en-video__stage iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
}

.en-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 0 0 clamp(14px, 4%, 32px);
  border: 0;
  background: linear-gradient(to top, oklch(0.12 0.06 285 / 0.45), transparent 60%);
  color: var(--lp-ink);
  font: inherit;
  cursor: pointer;
}

.en-video__play span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-block-size: 56px;
  padding: 12px 24px 12px 16px;
  border-radius: 999px;
  background: var(--lp-surface);
  font-weight: 700;
  box-shadow: 0 18px 40px -14px oklch(0.05 0.05 285 / 0.8);
  transition: transform 0.25s var(--lp-ease);
}

.en-video__play svg {
  inline-size: 34px;
  block-size: 34px;
  color: var(--lp-accent);
}

.en-video__play:hover span {
  transform: scale(1.04);
}

.en-video__meta {
  display: flex;
  justify-content: flex-end;
  font-size: 0.92rem;
}

.en-video__meta a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  color: var(--lp-accent);
}

/* Supporting line: who stands behind it. */

.en-endorse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--lp-line);
  color: var(--lp-muted);
  font-size: 0.92rem;
}

.en-endorse img {
  inline-size: auto;
  block-size: 34px;
}

/* ── Lead (dark) ── */

.en-lead {
  background:
    radial-gradient(50% 70% at 10% 90%, oklch(0.5 0.15 232 / 0.3), transparent 64%),
    radial-gradient(60% 80% at 90% 0%, oklch(0.42 0.2 290 / 0.55), transparent 62%),
    var(--lp-dark-bg);
  color: var(--lp-dark-body);
}

.en-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(36px, 6vw, 80px);
}

.en-lead .lp-h2 {
  color: var(--lp-dark-ink);
}

.en-lead .lp-lead {
  margin-block: 16px 28px;
  color: var(--lp-dark-body);
}

.en-lead .en-ticks li {
  color: var(--lp-dark-ink);
}

.en-formcard {
  padding: clamp(24px, 4vw, 40px);
  border-radius: 26px;
  background: var(--lp-surface);
  box-shadow: 0 40px 90px -40px oklch(0.05 0.05 285 / 0.9);
}

/* ── Sticky mobile action ── */

.en-sticky {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: 12px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  padding-inline: 18px 10px;
  border-radius: 999px;
  background: var(--lp-ink);
  color: var(--lp-dark-ink);
  box-shadow: 0 18px 40px -16px oklch(0.1 0.05 285 / 0.7);
  transform: translateY(140%);
  transition: transform 0.45s var(--lp-ease);
}

.en-sticky strong {
  font-size: 0.95rem;
  font-weight: 650;
}

.en-sticky.is-visible {
  transform: none;
}

/* ── Thank-you ── */

.en-thanks {
  display: grid;
  place-items: center;
  min-block-size: calc(100vh - var(--lp-header-h));
  text-align: center;
}

.en-thanks__inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  max-inline-size: 620px;
}

.en-thanks__mark {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.1);
  color: var(--lp-dark-accent);
}

.en-thanks__mark svg {
  inline-size: 40px;
  block-size: 40px;
}

.en-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 12px;
}

/* ── Responsive ── */

@media (max-width: 980px) {
  .en-lead__grid {
    grid-template-columns: 1fr;
  }

  .en-challenge,
  .en-start {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .en-proof,
  .en-proof:nth-child(even),
  .en-avatar__grid,
  .en-about {
    grid-template-columns: 1fr;
  }

  .en-proof:nth-child(even) .en-proof__text {
    order: 0;
  }

  .en-callout {
    position: static;
    margin-block-start: 12px;
    max-inline-size: none;
  }

  .en-split {
    grid-template-columns: 1fr;
  }

  .en-side + .en-side {
    border-inline-start: 0;
  }

  .en-hero-avatar__tip {
    inset-inline-end: 8px;
  }
}

@media (max-width: 860px) {
  .en-sticky {
    display: flex;
  }

  .lp-footer {
    padding-block-end: 96px;
  }
}

@media (max-width: 620px) {
  .en-hero__actions .lp-btn {
    flex: 1 1 100%;
  }

  .en-preview--student {
    grid-template-columns: 1fr 72px;
  }

  .en-preview--student img {
    inline-size: 72px;
  }
}

@media (max-width: 380px) {
  .en-partners {
    gap: 12px;
  }

  .en-partners__moe {
    block-size: 36px;
  }

  .en-partners__720 {
    block-size: 44px;
  }

  .en-partners__ms {
    block-size: 22px;
  }

  .en-partners__yuvi {
    block-size: 38px;
  }
}