/* ============================================================
   Learning Success — SCREENER THANK YOU (generic)
   Serves both the dyslexia and dyscalculia screener thank-you
   pages (identical designs). Page-unique layout only; tokens +
   shared classes come from tokens.css / components.css.
   Classes prefixed .ls-sty-.
   ============================================================ */

@keyframes ls-sty-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ---- Shared orange CTA ---------------------------------------------- */
.ls-sty-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--orange-500); color: #fff;
  font: var(--font-label); font-size: 1.15rem; font-weight: 600;
  padding: 19px 36px; border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(217, 115, 33, 0.32);
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ls-sty-cta:hover  { filter: brightness(0.96); }
.ls-sty-cta:active { transform: scale(0.97); }
.ls-sty-cta svg    { flex-shrink: 0; }
.ls-sty-micro {
  font: var(--font-label); color: var(--text-faint); margin: 16px 0 0; font-size: 0.98rem;
}
.ls-sty-micro--on-dark { color: var(--blue-100); }

/* ---- SECTION 1 — RESULTS ARE COMING --------------------------------- */
.ls-sty-coming {
  background: linear-gradient(180deg, var(--blue-50), var(--surface-card));
  padding: 66px 32px 44px;
}
.ls-sty-coming__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.ls-sty-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-card); border: 1px solid var(--blue-200);
  border-radius: var(--radius-pill); padding: 8px 18px; margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
  font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.8rem; color: var(--blue-700);
}
.ls-sty-pill__dots { display: inline-flex; gap: 4px; }
.ls-sty-pill__dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
  animation: ls-sty-dot 1.4s ease-in-out infinite;
}
.ls-sty-pill__dots span:nth-child(2) { animation-delay: 0.2s; }
.ls-sty-pill__dots span:nth-child(3) { animation-delay: 0.4s; }
.ls-sty-h1 {
  font: var(--font-hero); font-size: 2.7rem; color: var(--text-strong);
  margin: 0 0 18px; letter-spacing: -0.02em; line-height: 1.1;
}
.ls-sty-coming__sub {
  font: var(--font-body-md); font-size: 1.22rem; color: var(--text-muted);
  margin: 0 auto; max-width: 560px; line-height: 1.6;
}

/* ---- SECTION 2 — THE VIDEO ------------------------------------------ */
.ls-sty-video { background: var(--surface-card); padding: 8px 32px 64px; }
.ls-sty-video__inner { max-width: 900px; margin: 0 auto; }
.ls-sty-video__lead {
  font: var(--font-body-md); font-size: 1.18rem; color: var(--text-body);
  line-height: 1.7; margin: 0 auto 34px; max-width: 720px; text-align: center;
}
.ls-sty-videoframe {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-2xl); overflow: hidden;
  background: linear-gradient(150deg, var(--blue-700), var(--blue-900));
  box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center;
}
.ls-sty-videoframe__orb { position: absolute; border-radius: 50%; }
.ls-sty-videoframe__orb--a { top: -50px; right: -40px; width: 240px; height: 240px; background: rgba(247, 247, 64, 0.08); }
.ls-sty-videoframe__orb--b { bottom: -70px; left: -40px; width: 260px; height: 260px; background: rgba(255, 255, 255, 0.05); }
.ls-sty-videoframe__center { position: relative; text-align: center; }
.ls-sty-videoframe__play {
  width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}
.ls-sty-videoframe__play svg { margin-left: 6px; }
.ls-sty-videoframe__label {
  font: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72); font-size: 0.82rem;
}

/* ---- SECTION 3 — THE OFFER ------------------------------------------ */
.ls-sty-offer { background: var(--blue-50); padding: 70px 32px; }
.ls-sty-offer__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.ls-sty-offer__h2 {
  font: var(--font-h1); font-size: 2.05rem; color: var(--text-strong);
  margin: 0 auto 18px; max-width: 660px; line-height: 1.18;
}
.ls-sty-offer__lead {
  font: var(--font-body-md); font-size: 1.14rem; color: var(--text-body);
  line-height: 1.7; margin: 0 auto; max-width: 640px;
}
.ls-sty-keep {
  margin: 34px auto 0; max-width: 640px; background: var(--green-50);
  border: 1.5px solid var(--green-300); border-radius: var(--radius-2xl);
  padding: 26px 30px; display: flex; gap: 17px; align-items: flex-start;
  text-align: left; box-shadow: var(--shadow-sm);
}
.ls-sty-keep__ico {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-lg);
  background: var(--surface-card); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.ls-sty-keep__eyebrow {
  font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green-700); font-size: 0.9rem; font-weight: 700; margin-bottom: 7px;
}
.ls-sty-keep p {
  font: var(--font-body-base); color: var(--text-body); line-height: 1.6; margin: 0;
}
.ls-sty-offer .ls-sty-cta { margin-top: 36px; }

/* ---- SECTION 4 — WHAT THE ROADMAP INCLUDES -------------------------- */
.ls-sty-includes { background: var(--surface-card); padding: 72px 32px; }
.ls-sty-includes__inner { max-width: 940px; margin: 0 auto; }
.ls-sty-includes__h2 {
  font: var(--font-h1); font-size: 1.9rem; color: var(--text-strong);
  margin: 0 0 34px; line-height: 1.2;
}
.ls-sty-checklist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
}
.ls-sty-check { display: flex; gap: 14px; align-items: flex-start; }
.ls-sty-check__tick {
  width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
  background: var(--green-500); display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.ls-sty-check__text {
  font: var(--font-body-base); color: var(--text-body); line-height: 1.55; margin: 0;
}
.ls-sty-check__text strong { color: var(--text-strong); }

/* ---- SECTION 5 — HOW IT WORKS --------------------------------------- */
.ls-sty-how { background: var(--blue-50); padding: 72px 32px; }
.ls-sty-how__inner { max-width: 980px; margin: 0 auto; }
.ls-sty-how__h2 {
  font: var(--font-h1); font-size: 1.9rem; color: var(--text-strong);
  margin: 0 0 34px; line-height: 1.2;
}
.ls-sty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ls-sty-step {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 30px 26px;
}
.ls-sty-step__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-500);
  color: #fff; font: var(--font-h3); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ls-sty-step__title {
  font: var(--font-h3); font-size: 1.12rem; font-weight: 700;
  color: var(--text-strong); margin: 0 0 9px; line-height: 1.3;
}
.ls-sty-step__text {
  font: var(--font-body-base); color: var(--text-muted); line-height: 1.55; margin: 0;
}

/* ---- SECTION 6 — CLOSING CTA (dark band) ---------------------------- */
.ls-sty-close {
  background: linear-gradient(160deg, var(--blue-700), var(--blue-900));
  padding: 78px 32px; position: relative; overflow: hidden;
}
.ls-sty-close::before,
.ls-sty-close::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ls-sty-close::before { top: -60px; right: -40px; width: 260px; height: 260px; background: rgba(247, 247, 64, 0.07); }
.ls-sty-close::after  { bottom: -80px; left: -50px; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.04); }
.ls-sty-close__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
.ls-sty-close__h2 {
  font: var(--font-h1); font-size: 2rem; color: #fff; margin: 0 auto 30px;
  max-width: 620px; line-height: 1.22;
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 860px) {
  .ls-sty-checklist { grid-template-columns: 1fr; }
  .ls-sty-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ls-sty-h1 { font-size: 2.1rem; }
  .ls-sty-keep { flex-direction: column; }
}