/* MindSpring landing — rebuilt sections (Vibrant Gamified).

   The landing's body was replaced with the approved composition from
   design/vibrant-gamified/Main.dc.html: hero + card stack, three steps, an
   ink feature band, the streak band, teacher/parent cards, and a CTA.

   Everything is namespaced `lp-` on purpose. index.html still carries ~300
   lines of inline monochrome CSS written for the old sections; a fresh
   namespace means none of it can reach this markup, so the two can coexist
   until that block is deleted. The nav and drawer are the only shared
   surface, and they are themed in landing-vibrant.css.

   Colours come from the HSL-channel tokens that landing-vibrant.css redefines,
   so this file never hardcodes the palette except for the fixed accents. */

.lp-wrap {
  margin-inline: auto;
  max-inline-size: 1180px;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* Entrance. Deliberately NOT the page's `.fade-up`, which sits at opacity 0
   until motion.js adds `.in` — if that script fails or is slow, the whole
   landing is blank, and the migration spec requires core content to stay
   meaningful before feature JavaScript finishes. This is a pure CSS animation
   with `both` fill, so the end state is opacity 1 no matter what runs. */
.lp-rise {
  animation: lp-rise 0.55s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: var(--delay, 0s);
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.lp-sr {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
}

/* ------------------------------------------------------------- type --- */
.lp-h1 {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: clamp(2.75rem, 6.2vw, 5.15rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.lp-h2 {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.lp-h3 {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.lp-h4 {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lp-eyebrow {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lp-body {
  color: #37453d;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lp-body-lg {
  font-size: 1.125rem;
}

.lp-meta {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 700;
}

.lp-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.lp-row-between {
  justify-content: space-between;
}

/* --------------------------------------------------------- surfaces --- */
.lp-card {
  background: hsl(var(--card));
  border: 2.5px solid hsl(var(--border));
  border-radius: 24px;
  box-shadow: var(--landing-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
}

.lp-bg-spring {
  background: hsl(var(--primary));
}

.lp-bg-lime {
  background: #cbf24e;
}

.lp-bg-sun {
  background: #ffc93d;
}

.lp-bg-coral {
  background: #ff6a4d;
}

.lp-bg-teal {
  background: hsl(var(--accent));
}

.lp-pill {
  align-items: center;
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 800;
  gap: 7px;
  padding: 6px 13px;
}

.lp-pill-sun {
  background: #ffc93d;
}

.lp-pill-spring {
  background: hsl(var(--primary));
}

.lp-bar {
  background: #ede7d8;
  block-size: 22px;
  border: 2.5px solid hsl(var(--border));
  border-radius: 999px;
  overflow: hidden;
}

.lp-bar > span {
  background: #cbf24e;
  block-size: 100%;
  border-inline-end: 2.5px solid hsl(var(--border));
  display: block;
}

.lp-btn {
  align-items: center;
  border: 2.5px solid hsl(var(--border));
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 800;
  justify-content: center;
  min-block-size: 48px;
  padding: 13px 28px;
  text-decoration: none;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.lp-btn-ink {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

.lp-btn-paper {
  background: hsl(var(--card));
  box-shadow: var(--landing-shadow);
  color: hsl(var(--foreground));
}

.lp-btn-teal-shadow {
  box-shadow: 4px 4px 0 hsl(var(--accent));
}

.lp-btn-sun-shadow {
  box-shadow: 4px 4px 0 #ffc93d;
}

.lp-btn-paper-shadow {
  box-shadow: 4px 4px 0 hsl(var(--background));
}

.lp-btn:active {
  box-shadow: 0 0 0 hsl(var(--foreground));
  transform: translate(4px, 4px);
}

/* ------------------------------------------------------------- hero --- */
.lp-hero {
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(96px, 11vw, 150px) clamp(56px, 6vw, 84px);
}

.lp-hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
}

.lp-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.lp-badge {
  align-items: center;
  align-self: flex-start;
  background: #cbf24e;
  border: 2.5px solid hsl(var(--border));
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 10px;
  padding: 9px 18px;
}

.lp-lead {
  color: #37453d;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-inline-size: 36rem;
}

.lp-search {
  align-items: center;
  background: hsl(var(--card));
  border: 2.5px solid hsl(var(--border));
  border-radius: 999px;
  box-shadow: 5px 5px 0 hsl(var(--foreground));
  display: flex;
  gap: 10px;
  max-inline-size: 36rem;
  padding: 8px 8px 8px 22px;
}

.lp-search input {
  background: none;
  border: 0;
  color: hsl(var(--foreground));
  flex-grow: 1;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  min-inline-size: 0;
  outline: none;
  padding-block: 12px;
}

.lp-search input::placeholder {
  color: #8a9089;
}

.lp-search button {
  background: hsl(var(--foreground));
  border: 0;
  border-radius: 999px;
  color: hsl(var(--background));
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  min-block-size: 46px;
  padding: 0 28px;
}

.lp-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-chips-label {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 600;
}

.lp-chips a {
  background: hsl(var(--background));
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 15px;
  text-decoration: none;
}

.lp-chips a:hover {
  background: #cbf24e;
}

.lp-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-level {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-level-n {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.lp-level-name {
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
  font-weight: 700;
}

.lp-hero-duo {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-card-teal {
  background: hsl(var(--accent));
}

.lp-card-coral {
  background: #ff6a4d;
}

.lp-card-t {
  font-size: 1.0625rem;
  font-weight: 800;
}

.lp-card-d {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ------------------------------------------------------------ steps --- */
.lp-steps {
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(56px, 7vw, 84px);
}

.lp-steps .lp-h2 {
  margin-block: 14px 44px;
}

.lp-grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

.lp-step-n {
  align-items: center;
  block-size: 52px;
  border: 2.5px solid hsl(var(--border));
  border-radius: 15px;
  display: inline-flex;
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  inline-size: 52px;
  justify-content: center;
}

/* --------------------------------------------------------- features --- */
.lp-features {
  background: hsl(var(--foreground));
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(56px, 7vw, 84px);
}

.lp-features-head {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-block-end: 44px;
}

.lp-on-ink {
  color: #9ba79f;
}

.lp-on-ink-h {
  color: hsl(var(--background));
}

.lp-on-ink-b {
  color: #c3ccc6;
  font-size: 1rem;
}

.lp-grid-4 {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-feat {
  background: #1b3128;
  border: 2.5px solid #345645;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
}

.lp-feat .lp-h4 {
  color: hsl(var(--background));
}

.lp-feat-d {
  color: #a8b4ad;
  font-size: 0.875rem;
  line-height: 1.55;
}

.lp-feat-ic {
  align-items: center;
  block-size: 46px;
  border: 2.5px solid hsl(var(--border));
  border-radius: 14px;
  display: inline-flex;
  inline-size: 46px;
  justify-content: center;
}

/* ----------------------------------------------------------- streak --- */
.lp-streak {
  background: #cbf24e;
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(56px, 7vw, 84px);
}

.lp-streak-grid {
  align-items: center;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
}

.lp-streak .lp-eyebrow {
  color: #445a2c;
}

.lp-streak .lp-h2 {
  margin-block: 14px 20px;
}

.lp-streak .lp-body {
  color: #2c3a24;
}

.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 22px;
}

.lp-tags span {
  background: hsl(var(--background));
  border: 2.5px solid hsl(var(--border));
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 18px;
}

.lp-score {
  background: hsl(var(--background));
  box-shadow: 8px 8px 0 hsl(var(--foreground));
}

.lp-score-t {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
}

.lp-chart {
  align-items: flex-end;
  block-size: 150px;
  display: flex;
  gap: 12px;
}

.lp-chart span {
  background: hsl(var(--card));
  border: 2.5px solid hsl(var(--border));
  border-radius: 10px 10px 0 0;
  flex-grow: 1;
}

.lp-chart .lp-bar-spring {
  background: hsl(var(--primary));
}

.lp-chart .lp-bar-sun {
  background: #ffc93d;
}

.lp-chart-x {
  color: hsl(var(--muted-foreground));
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: space-between;
}

.lp-score-total {
  align-items: baseline;
  border-block-start: 2.5px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  display: flex;
  font-size: 0.9375rem;
  font-weight: 700;
  gap: 10px;
  padding-block-start: 14px;
}

.lp-score-total strong {
  color: hsl(var(--foreground));
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-size: 2.875rem;
  font-weight: 800;
}

/* ----------------------------------------------------------- people --- */
.lp-people {
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(56px, 7vw, 84px);
}

.lp-grid-2 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

.lp-person {
  gap: 18px;
  padding: clamp(26px, 3vw, 38px);
}

.lp-person .lp-btn {
  align-self: flex-start;
}

/* -------------------------------------------------------------- cta --- */
.lp-cta {
  background: hsl(var(--primary));
  border-block-end: 2.5px solid hsl(var(--border));
  padding-block: clamp(64px, 8vw, 96px);
}

.lp-cta-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 26px;
  text-align: center;
}

.lp-cta-h {
  font-size: clamp(2.25rem, 5.2vw, 4.125rem);
  max-inline-size: 900px;
}

.lp-cta-p {
  color: #0e3a22;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  max-inline-size: 620px;
}

.lp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.lp-cta-actions .lp-btn {
  font-size: 1.0625rem;
  min-block-size: 56px;
  padding: 17px 40px;
}

/* ------------------------------------------------------- responsive --- */
@media (min-width: 720px) {
  .lp-grid-3,
  .lp-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-features-head {
    align-items: end;
    grid-template-columns: 1.4fr 1fr;
  }
}

@media (min-width: 1024px) {
  .lp-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .lp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-streak-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn:active {
    transform: none;
  }
}