/* public/css/public/landing.css
   Landing v2 (clean + collectible vibe)
   - De-duped: kept the newer "dark/glass" system
   - Retains: carousel + Google CTA + FAQ open state support
*/

/* overall wrapper */
.page-landing .app-main {
  padding-top: 14px;
}

.lp2 {
  position: relative;
}

.lp2-spacer {
  height: 22px;
}

.lp2 .ui-sheet {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 900px) {
  .lp2 .ui-sheet {
    padding: 22px;
  }
}

/* headings */
.lp2-h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.3px;
}

@media (min-width: 900px) {
  .lp2-h2 {
    font-size: 34px;
  }
}

.lp2-p {
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
  max-width: none;
}

/* section blocks */
.lp2-section {
  margin-top: 52px;
}

.lp2-section__head {
  margin-bottom: 14px;
}

/* =========================
   HERO
========================= */
.lp2-hero {
  position: relative;
  overflow: hidden;
}

.lp2-hero__grid {
  display: grid;
  gap: 16px;
  align-items: center;
}

.lp2-hero__grid--solo {
  grid-template-columns: 1fr;
}

.lp2-hero__left {
  padding: 6px 4px;
}

.lp2-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.lp2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;

  background: var(--glass);
  border: 1.5px solid var(--border);
}

.lp2-pill:nth-child(1) {
  background: rgba(18, 185, 129, 0.12);
  border-color: rgba(18, 185, 129, 0.35);
  color: #0a7a57;
}

.lp2-pill:nth-child(2) {
  background: rgba(139, 92, 255, 0.10);
  border-color: rgba(139, 92, 255, 0.35);
  color: #6030d0;
}

.lp2-pill:nth-child(3) {
  background: rgba(255, 176, 32, 0.12);
  border-color: rgba(255, 176, 32, 0.4);
  color: #a06800;
}

.lp2-hero__title {
  margin: 6px 0 12px;
  font-size: 38px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.5px;
}

@media (min-width: 900px) {
  .lp2-hero__title {
    font-size: 58px;
  }
}

.lp2-hero__title-accent {
  background: linear-gradient(120deg, #8b5cff, #22d3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp2-hero__sub {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.88;
  max-width: none;
}

.lp2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 16px;
}


/* Google CTA button */
.ui-btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lp2-googleLogo {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 18px;

  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}


/* =========================
   Section badges (For Parents / For Teachers)
========================= */
.lp2-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 12px;
}

.lp2-section__badge--parent {
  background: rgba(18, 185, 129, 0.12);
  border: 1.5px solid rgba(18, 185, 129, 0.35);
  color: #0a7a57;
}

.lp2-section__badge--teacher {
  background: rgba(139, 92, 255, 0.10);
  border: 1.5px solid rgba(139, 92, 255, 0.35);
  color: #6030d0;
}

/* =========================
   CAROUSEL (Brainrots)
========================= */
.lp2-carousel {
  width: 100%;
  max-width: 1100px;
  margin: 14px auto 8px;
  padding: 8px 0 0;
  overflow: hidden;
  position: relative;
  pointer-events: none;
}

.lp2-carousel__lane {
  width: 120%;
  margin-left: -10%;
  overflow: hidden;
  filter: saturate(1.02);
}

.lp2-carousel__lane--a {
  transform: rotate(-6deg);
  opacity: 0.95;
}

.lp2-carousel__lane--b {
  transform: rotate(-2deg);
  opacity: 0.85;
  margin-top: 10px;
}

.lp2-carousel__track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  will-change: transform;
  animation: lp2Scroll 26s linear infinite;
}

.lp2-carousel__lane--b .lp2-carousel__track {
  animation-duration: 32s;
  animation-direction: reverse;
}

@keyframes lp2Scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.lp2-bub {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--glass-strong);
  border: 2px solid var(--glass);
  box-shadow: var(--shadow-md);

  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .lp2-bub {
    width: 86px;
    height: 86px;
  }
}

.lp2-bubImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   AUDIENCE TOGGLE (For Parents / For Teachers)
========================= */
.lp2-audience__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.lp2-audience__tab {
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.lp2-audience__tab:hover {
  opacity: 0.7;
}

.lp2-audience__tab--parent.is-active {
  opacity: 1;
  color: #12b981;
  border-color: rgba(18, 185, 129, 0.4);
  background: rgba(18, 185, 129, 0.08);
}

.lp2-audience__tab--teacher.is-active {
  opacity: 1;
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.08);
}

.lp2-audience__panel {
  display: none;
}

.lp2-audience__panel.is-active {
  display: block;
}

.lp2-audience__pitch {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.88;
  max-width: none;
}

.lp2-audience__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: gap 0.15s;
}

.lp2-audience__link:hover {
  gap: 10px;
}

.lp2-audience__panel--parent .lp2-audience__link {
  color: #12b981;
}

.lp2-audience__panel--teacher .lp2-audience__link {
  color: #7c3aed;
}

/* =========================
   GRIDS
========================= */
.lp2-grid {
  display: grid;
  gap: 12px;
}

/* 3-up cards */
.lp2-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .lp2-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .lp2-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* games grid */
.lp2-grid--games {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .lp2-grid--games {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .lp2-grid--games {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2-up blocks (safety/pricing) */
.lp2-grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .lp2-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   WHY cards
========================= */
.lp2-card {
  padding: 14px 16px;
  border-radius: 18px;

  background: var(--glass-strong);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);

  transition: transform 180ms ease, box-shadow 180ms ease;

  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
}

.lp2-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.lp2-card__icon {
  grid-row: 1 / -1;
  grid-column: 1;
  align-self: center;

  width: 40px;
  height: 40px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--ink-faint);
  border: 1.5px solid var(--border);

  font-size: 16px;
}

/* icon color per card — "Why Friendrot rocks" */
.lp2-grid--3 .lp2-card:nth-child(1) .lp2-card__icon { background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.3); color: #b87200; }
.lp2-grid--3 .lp2-card:nth-child(2) .lp2-card__icon { background: rgba(139,92,255,0.12); border-color: rgba(139,92,255,0.3); color: #6030d0; }
.lp2-grid--3 .lp2-card:nth-child(3) .lp2-card__icon { background: rgba(255,204,41,0.16); border-color: rgba(255,204,41,0.35); color: #9a6d00; }
.lp2-grid--3 .lp2-card:nth-child(4) .lp2-card__icon { background: rgba(18,185,129,0.12); border-color: rgba(18,185,129,0.3); color: #0a7a57; }
.lp2-grid--3 .lp2-card:nth-child(5) .lp2-card__icon { background: rgba(34,211,255,0.12); border-color: rgba(34,211,255,0.3); color: #0891b2; }
.lp2-grid--3 .lp2-card:nth-child(6) .lp2-card__icon { background: rgba(255,79,179,0.12); border-color: rgba(255,79,179,0.3); color: #c0106e; }

/* icon color per card — Safety section */
.lp2-safeGrid .lp2-card:nth-child(1) .lp2-card__icon { background: rgba(139,92,255,0.12); border-color: rgba(139,92,255,0.3); color: #6030d0; }
.lp2-safeGrid .lp2-card:nth-child(2) .lp2-card__icon { background: rgba(255,79,179,0.12); border-color: rgba(255,79,179,0.3); color: #c0106e; }
.lp2-safeGrid .lp2-card:nth-child(3) .lp2-card__icon { background: rgba(34,211,255,0.12); border-color: rgba(34,211,255,0.3); color: #0891b2; }
.lp2-safeGrid .lp2-card:nth-child(4) .lp2-card__icon { background: rgba(18,185,129,0.12); border-color: rgba(18,185,129,0.3); color: #0a7a57; }

.lp2-card__title {
  grid-row: 1;
  grid-column: 2;
  font-weight: 950;
}

.lp2-card__text {
  grid-row: 2;
  grid-column: 2;
  opacity: 0.85;
  line-height: 1.5;
  font-size: 14px;
}

/* =========================
   GAME cards
========================= */
.lp2-game {
  padding: 18px;
  border-radius: 18px;

  background: var(--glass-strong);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);

  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lp2-game:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.lp2-game__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.lp2-game__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--ink-faint);
  border: 1.5px solid var(--border);
  font-size: 18px;
}

.lp2-game__badge {
  font-size: 12px;
  font-weight: 950;

  padding: 6px 10px;
  border-radius: 999px;

  background: var(--ink-faint);
  border: 1.5px solid var(--border);
  opacity: 0.9;
}

.lp2-game__title {
  font-weight: 950;
  margin: 6px 0 4px;
}

.lp2-game__text {
  opacity: 0.85;
  line-height: 1.45;
}

.lp2-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* =========================
   GAME PILLS (collage layout)
========================= */
.lp2-gamePills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp2-gamePill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;

  background: rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--gcol) 11%, rgba(255, 255, 255, 0.92));
  border: 1.5px solid var(--gcol, rgba(99, 115, 139, 0.3));
  border: 1.5px solid color-mix(in srgb, var(--gcol) 30%, transparent);
  color: var(--gcol, rgba(99, 115, 139, 0.75));
  color: color-mix(in srgb, var(--gcol) 75%, var(--app-fg));

  transition: transform 150ms ease, box-shadow 150ms ease;
}

.lp2-gamePill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--gcol, rgba(99, 115, 139, 0.22));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gcol) 22%, transparent);
}

.lp2-gamePill i {
  font-size: 15px;
}

/* =========================
   GAME color accents (uses --gcol)
========================= */

/* subtle left accent */
.lp2-game {
  position: relative;
  border-left: 3px solid var(--border);
}

.lp2-game[data-gcol] {
  border-left-color: var(--gcol, rgba(99, 115, 139, 0.7));
  border-left-color: color-mix(in srgb, var(--gcol) 70%, transparent);
}

/* soft tinted sheen */
.lp2-game[data-gcol]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;

  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.04),
    transparent 55%
  );
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gcol) 14%, transparent),
    transparent 55%
  );
  opacity: 0.9;
}

/* icon gets tinted ring + glow */
.lp2-game__icon {
  position: relative;
}

.lp2-game[data-gcol] .lp2-game__icon {
  border-color: var(--gcol, rgba(99, 115, 139, 0.55));
  border-color: color-mix(in srgb, var(--gcol) 55%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 10px 22px var(--gcol, rgba(99, 115, 139, 0.18));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--gcol) 18%, transparent);
}

.lp2-game[data-gcol] .lp2-game__icon i {
  color: var(--gcol, rgba(99, 115, 139, 0.85));
  color: color-mix(in srgb, var(--gcol) 85%, white);
}

/* badge outline tint (keep glass background) */
.lp2-game[data-gcol] .lp2-game__badge {
  border-color: var(--gcol, rgba(99, 115, 139, 0.45));
  border-color: color-mix(in srgb, var(--gcol) 45%, rgba(255, 255, 255, 0.1));
}
/* =========================
   STEPS
========================= */
.lp2-steps {
  display: grid;
  gap: 12px;
}

@media (min-width: 900px) {
  .lp2-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp2-step {
  padding: 16px;
  border-radius: 18px;

  background: var(--glass-strong);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);

  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;

  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lp2-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lp2-step__n {
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 15px;

  background: var(--ink-faint);
  border: 1.5px solid var(--border);
}

.lp2-step:nth-child(1) .lp2-step__n { background: rgba(34,211,255,0.14); border-color: rgba(34,211,255,0.3); color: #0891b2; }
.lp2-step:nth-child(2) .lp2-step__n { background: rgba(139,92,255,0.14); border-color: rgba(139,92,255,0.3); color: #6030d0; }
.lp2-step:nth-child(3) .lp2-step__n { background: rgba(255,79,179,0.12); border-color: rgba(255,79,179,0.3); color: #c0106e; }
.lp2-step:nth-child(4) .lp2-step__n { background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.3); color: #b87200; }
.lp2-step:nth-child(5) .lp2-step__n { background: rgba(18,185,129,0.12); border-color: rgba(18,185,129,0.3); color: #0a7a57; }
.lp2-step:nth-child(6) .lp2-step__n { background: rgba(255,204,41,0.16); border-color: rgba(255,204,41,0.35); color: #9a6d00; }

.lp2-step__title {
  font-weight: 950;
  margin-bottom: 2px;
}

.lp2-step__text {
  opacity: 0.85;
  line-height: 1.4;
}

.lp2-step__emoji {
  font-size: 22px;
  opacity: 0.9;
}

/* =========================
   SAFETY + FOUNDING
========================= */
.lp2-safe,
.lp2-founding {
  padding: 18px;
  border-radius: 18px;

  background: var(--glass-strong);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.lp2-safe__title,
.lp2-founding__tag {
  font-weight: 950;
  margin-bottom: 8px;
}

.lp2-founding__btn {
  margin-top: 10px;
  padding: 12px 14px;
}

.lp2-founding--note {
  opacity: 0.95;
}

.lp2-founding__fine {
  margin-top: 10px;
  opacity: 0.82;
  font-size: 13px;
  line-height: 1.45;
}

/* =========================
   FAQ
========================= */
.lp2-faq {
  display: grid;
  gap: 10px;
}

.lp2-faqItem {
  border-radius: 18px;

  background: var(--glass-strong);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  transition: box-shadow 160ms ease;
}

.lp2-faqItem.is-open {
  box-shadow: var(--shadow-sm);
}

.lp2-faqQ {
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: inherit;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  cursor: pointer;
  text-align: left;
  font: inherit;
}

.lp2-faqQ__txt {
  font-weight: 950;
  font-size: 14px;
}

.lp2-faqQ__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--ink-faint);
  border: 1.5px solid var(--border);

  transition: transform 160ms ease;
}

.lp2-faqA {
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    max-height 180ms ease,
    opacity 160ms ease;
}

.lp2-faqA__p {
  margin: 0;
  padding: 14px;
  opacity: 0.86;
  line-height: 1.5;
}

.lp2-faqItem.is-open .lp2-faqA {
  max-height: 260px;
  opacity: 1;
}

.lp2-faqItem.is-open .lp2-faqQ__icon i {
  transform: rotate(180deg);
}

/* =========================
   MID-PAGE CTA
========================= */
.lp2-midCta {
  margin-top: 52px;
}

.lp2-midCta__tile {
  padding: 28px 24px;
  border-radius: 22px;

  background: linear-gradient(135deg, rgba(139, 92, 255, 0.12) 0%, rgba(34, 211, 255, 0.10) 100%);
  border: 1.5px solid rgba(139, 92, 255, 0.28);
  box-shadow: 0 16px 48px rgba(139, 92, 255, 0.16), 0 4px 16px rgba(0, 0, 0, 0.06);

  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.lp2-midCta__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lp2-midCta__title {
  font-weight: 950;
  font-size: 22px;
  color: inherit;
  margin-bottom: 4px;
}

.lp2-midCta__sub {
  opacity: 0.86;
}

/* =========================
   FINAL CTA
========================= */
.lp2-final {
  margin-top: 18px;
}

.lp2-final__tile {
  padding: 28px 24px;
  border-radius: 22px;

  background: linear-gradient(135deg, rgba(139, 92, 255, 0.12) 0%, rgba(34, 211, 255, 0.10) 100%);
  border: 1.5px solid rgba(139, 92, 255, 0.28);
  box-shadow: 0 16px 48px rgba(139, 92, 255, 0.16), 0 4px 16px rgba(0, 0, 0, 0.06);

  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.lp2-final__title {
  font-weight: 950;
  font-size: 22px;
  margin-bottom: 4px;
}

.lp2-final__sub {
  opacity: 0.86;
}

.lp2-final__btn {
  gap: 10px;
  padding: 12px 16px;
}

/* ================================
   Optional image helpers (safe)
   - Only used if you later swap emoji->img in a featured card
=================================== */
.lp2-feature__avatar,
.lp2-mini,
.lp2-bub {
  overflow: hidden;
}

.lp2-feature__img,
.lp2-mini__img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  object-fit: cover;
}

/* =========================
   SCROLL ENTRANCE
========================= */
.lp2-fade-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 380ms ease, transform 380ms ease;
}

.lp2-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   lp3 — slim conversion-focused landing
   Used by / when logged out. Uses its own minimal nav
   (main layout runs with hideHeader/hideFooter).
============================================================ */

/* Slim landing owns its own max-width via .lp3 — reset the .app-main
   container, but leave the header/footer containers alone so appHeader
   and appFooter still render with normal chrome. */
.page-landing--slim .app-main {
  padding: 0;
}
.page-landing--slim .app-main > .app-container {
  padding: 0;
  max-width: none;
}

.lp3 {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ---- Minimal nav ---- */

.lp3-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 18px;
  gap: 12px;
}

.lp3-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.lp3-brand__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.lp3-brand__name {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.2px;
}

.lp3-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.lp3-nav__link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  opacity: 0.75;
}

.lp3-nav__link:hover {
  opacity: 1;
}

.lp3-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.lp3-google {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Hero with playable game ---- */

.lp3-hero {
  padding: 24px 20px 22px;
  margin-bottom: 20px;
  text-align: center;
}

.lp3-hero__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.lp3-hero__title-accent {
  background: linear-gradient(90deg, #ff7ab6 0%, #8b5cff 50%, #18bfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp3-hero__sub {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.82;
  margin: 0 auto 20px;
  max-width: 560px;
}

/* Game label — title strip identifying each playable demo card. The
   "--inside" variant lives inside the rainbow border, above the progress
   row. Title is big and left-aligned; meta sits inline beside it. No
   divider line — the title reads as part of the game itself. */
.lp3-gameLabel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  text-align: left;
}

.lp3-gameLabel--inside {
  margin: 0 0 10px;
}

.lp3-gameLabel__title {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.lp3-gameLabel__meta {
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.65;
  letter-spacing: 0.1px;
}

@media (max-width: 500px) {
  .lp3-gameLabel__title { font-size: 22px; }
}

/* Inline Fracture demo sits inside the hero. The .mg-fr styles come
   from /css/try/fracture.css — here we frame it cleanly so it reads as
   a distinct interactive element, not a section of the page. */
.lp3-gameWrap {
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: 8px auto 20px;
}

/* Games-first hero: when the demo card is the first thing in the hero,
   give it real breathing room under the app header so the rainbow
   border + "Drag fractions onto the ?'s" hint don't feel jammed against
   the nav. Targeted rule — only fires when game is the first child;
   currently the .lp3-heroLead block sits above the games on / and
   /teachers, so this rule is mostly a fallback. */
.lp3-hero > .lp3-gameWrap:first-child {
  margin-top: 36px;
}
@media (max-width: 500px) {
  .lp3-hero > .lp3-gameWrap:first-child {
    margin-top: 28px;
  }
}

/* ============================================================
   Hero lead — eyebrow + gradient one-liner above the games.
   Mirrors the world-tour pattern below for visual rhyme:
   "Two demos · No signup" / "It's a world. Tap in."   ↑ above games
   "That was 2 of 25 games." / "Friendrot is bigger…"  ↓ after games
============================================================ */

.lp3-heroLead {
  margin: 8px auto 4px;
  padding: 0 16px;
  max-width: 720px;
  text-align: center;
}

/* Audience-signal eyebrow above the hero title. Currently used on
   /teachers ("For Classrooms") so teachers get the audience cue
   before the demos. Sentence-cased + tight letter-spacing so it
   reads as classification, not shouting. */
.lp3-heroLead__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: hsl(290 60% 55% / 0.12);
  border: 1px solid hsl(290 60% 55% / 0.32);
  color: hsl(290 60% 45%);
}

[data-theme="dark"] .lp3-heroLead__eyebrow {
  background: hsl(290 60% 50% / 0.18);
  border-color: hsl(290 60% 60% / 0.45);
  color: hsl(290 70% 80%);
}

.lp3-heroLead__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #ff7ab6 0%, #8b5cff 50%, #18bfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp3-heroLead__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 14px;
}

.lp3-heroLead__sub i {
  animation: lp3WorldArrow 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp3-heroLead__sub i { animation: none; }
}

@media (max-width: 500px) {
  .lp3-heroLead__title { font-size: 24px; }
  .lp3-heroLead__sub   { font-size: 13px; }
}

/* Top trial CTA — compact, sits between the lead and the games.
   Smaller than the bottom pricing CTA on purpose so the games stay
   the visual primary; this is the express-lane button for visitors
   who don't want to scroll. */
.lp3-heroCta {
  text-align: center;
  margin: 4px auto 18px;
  padding: 0 16px;
}

.lp3-heroCta__btn {
  font-size: 15px;
  padding: 10px 20px;
}

.lp3-heroCta__fine {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.55;
  letter-spacing: 0.2px;
}

/* Rainbow glimmer border — conic gradient rotating slowly around the card.
   Technique: layer two backgrounds via background-clip. The inner layer
   (padding-box) is a solid card color; the outer layer (border-box) is the
   conic rainbow. A transparent border exposes only the conic layer, so the
   rainbow appears as the border — NOT a tint on the card interior.
   Uses @property so the angle animates smoothly. Graceful fallback on
   older browsers: static rainbow border. */
@property --lp3-gameAngle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.lp3-game {
  width: 100%;
  margin: 0;
  position: relative;
  background: transparent;
}

.lp3-game .ui-sheet__card {
  padding: 16px 14px;
  border-radius: 20px;
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  animation: lp3-gameBorderSpin 5s linear infinite;
}

@keyframes lp3-gameBorderSpin {
  to { --lp3-gameAngle: 360deg; }
}

/* ---- Hero peekers — small avatars floating around the game card ---- */

.lp3-heroPeekers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.lp3-heroPeeker {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.lp3-heroPeeker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Three positions — top-right, bottom-left, bottom-right, each with its own float rhythm */
.lp3-heroPeeker--0 {
  top: -20px;
  right: -16px;
  animation: lp3-peekerFloat 4.8s ease-in-out infinite;
}

.lp3-heroPeeker--1 {
  bottom: -18px;
  left: -14px;
  animation: lp3-peekerFloat 5.6s ease-in-out infinite 0.7s;
}

.lp3-heroPeeker--2 {
  bottom: 20%;
  right: -22px;
  width: 40px;
  height: 40px;
  animation: lp3-peekerFloat 4.2s ease-in-out infinite 1.4s;
}

@keyframes lp3-peekerFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}

/* Hide peekers on narrow screens — they'd compete with the game on mobile */
@media (max-width: 520px) {
  .lp3-heroPeekers { display: none; }
}

/* "Drag fractions onto the ?'s" hint — pinned to top-left,
   bounces on a different rhythm than the right badge so they don't sync. */
.lp3-game__hint {
  position: absolute;
  top: -14px;
  left: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #ff7ab6, #8b5cff);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(139, 92, 255, 0.35);
  pointer-events: none;
  white-space: nowrap;
  animation: lp3-hintWiggle 2.2s ease-in-out infinite;
  transform-origin: center;
}

.lp3-game__hintQmark {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  animation: lp3-hintQmark 1.2s ease-in-out infinite;
}

@keyframes lp3-hintWiggle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}

@keyframes lp3-hintQmark {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* "Play me 👇" badge — pinned to the top-right, bounces to attract attention */
.lp3-game__badge {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  white-space: nowrap;
  animation: lp3-badgeBounce 1.4s ease-in-out infinite;
  transform-origin: center;
}

[data-theme="dark"] .lp3-game__badge {
  background: #fff;
  color: #111;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.18);
}

.lp3-game__badgeArrow {
  display: inline-block;
  animation: lp3-badgeArrow 0.9s ease-in-out infinite;
  font-size: 14px;
}

@keyframes lp3-badgeBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}

@keyframes lp3-badgeArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Gentle attention wiggle on the first tray tile — subtle reminder that
   the tiles are interactive. Stops via :hover/:active/.is-dragging. */
.mg-fr__tray .mg-fr__tile:nth-child(1) {
  animation: lp3-tileNudge 4.5s ease-in-out infinite;
  animation-delay: 2s;
}

.mg-fr__tray .mg-fr__tile:nth-child(1):hover,
.mg-fr__tray .mg-fr__tile:nth-child(1):active,
.mg-fr__tray .mg-fr__tile.is-dragging {
  animation: none;
}

@keyframes lp3-tileNudge {
  0%, 88%, 100% { transform: scale(1) rotate(0deg); }
  91%           { transform: scale(1.08) rotate(-4deg); }
  94%           { transform: scale(1.08) rotate(4deg); }
  97%           { transform: scale(1.08) rotate(-2deg); }
}

.lp3-hero__belowGame {
  display: flex;
  justify-content: center;
}

.lp3-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-weight: 800;
  font-size: 15px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Google logo inside a primary CTA — signals "next step is Google sign-in".
   Sized to sit cleanly next to the text via .lp3-cta's flex + 10px gap. */
.lp3-cta__gLogo,
.try-modal__cta .lp3-cta__gLogo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
  display: inline-block;
}

/* Modal CTA is a .ui-btn, not .lp3-cta — give it flex so the logo
   and text align consistently with the landing-page CTAs. */
.try-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---- Video loop section ---- */

.lp3-videoSection {
  padding: 22px 20px 24px;
  margin-bottom: 20px;
}

.lp3-h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 16px;
  letter-spacing: -0.2px;
}

.lp3-videoWrap {
  border-radius: 16px;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  background: #000;
  line-height: 0;
}

.lp3-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* ---- TLDR tiles ---- */

.lp3-tldr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.lp3-tldr__card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  padding: 20px 18px;
}

.lp3-tldr__icon {
  font-size: 24px;
  margin-bottom: 10px;
  opacity: 0.85;
}

.lp3-tldr__title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 12px;
}

.lp3-tldr__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}

.lp3-tldr__list li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

.lp3-tldr__list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: #10b981;
  font-size: 12px;
}

.lp3-tldr__link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
}

.lp3-tldr__link:hover {
  opacity: 1;
}

/* ============================================================
   Get Started section (the unified conversion moment)
   Rebuilt for a cleaner, more-product-y feel — no busy backdrops,
   fully opaque step cards, brand-colored icons, bigger CTA.
============================================================ */

html {
  scroll-behavior: smooth;
}

#get-started {
  scroll-margin-top: 12px;
}

/* ============================================================
   World tour — 6-tile grid sitting right after the demo games.
   Acts as "table of contents" for the Friendrot world. Each tile
   smooth-scrolls to the matching pillar section below.
============================================================ */

.lp3-worldTour {
  margin: 8px auto 28px;
  padding: 4px 16px 0;
  max-width: 720px;
  text-align: center;
}

.lp3-worldTour__head {
  margin-bottom: 22px;
}

.lp3-worldTour__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 6px;
}

.lp3-worldTour__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #ff7ab6 0%, #8b5cff 50%, #18bfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp3-worldTour__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
}

.lp3-worldTour__sub i {
  animation: lp3WorldArrow 1.6s ease-in-out infinite;
}

@keyframes lp3WorldArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.lp3-worldTour__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop: auto-fit so 5 or 6 tiles both lay out evenly without
   leaving an empty cell. Min track width keeps tiles readable. */
@media (min-width: 720px) {
  .lp3-worldTour__grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px;
  }
}

.lp3-worldTour__cell {
  display: block;
}

/* Restrained tile design — same recipe as the .lp3-teacherBanner
   directly below: subtle hued background (~8% opacity) + a 1px hued
   border at ~32% opacity, with a 16px radius. Per-tile hue drives
   both. Hover bumps the border opacity and adds a soft hued shadow,
   matching the teacher-banner hover treatment. */
.lp3-worldTour__tile {
  --tileHue: 270;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px 14px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  background: hsl(var(--tileHue) 60% 55% / 0.08);
  border: 1px solid hsl(var(--tileHue) 60% 55% / 0.32);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.15s ease;
}

[data-theme="dark"] .lp3-worldTour__tile {
  background: hsl(var(--tileHue) 60% 50% / 0.12);
  border-color: hsl(var(--tileHue) 60% 60% / 0.38);
}

.lp3-worldTour__tile:hover,
.lp3-worldTour__tile:focus-visible {
  transform: translateY(-2px);
  border-color: hsl(var(--tileHue) 60% 55% / 0.6);
  box-shadow: 0 8px 20px hsl(var(--tileHue) 60% 50% / 0.14);
  outline: none;
}

[data-theme="dark"] .lp3-worldTour__tile:hover,
[data-theme="dark"] .lp3-worldTour__tile:focus-visible {
  border-color: hsl(var(--tileHue) 60% 65% / 0.65);
  box-shadow: 0 8px 22px hsl(var(--tileHue) 60% 50% / 0.22);
}

.lp3-worldTour__tile:active {
  transform: translateY(0);
}

/* Plain colored FA glyph — no orb, no shadow, no animation. Color
   pulled from the per-tile hue. */
.lp3-worldTour__icon {
  font-size: 22px;
  line-height: 1;
  color: hsl(var(--tileHue) 60% 48%);
}

[data-theme="dark"] .lp3-worldTour__icon {
  color: hsl(var(--tileHue) 70% 65%);
}

@media (prefers-reduced-motion: reduce) {
  .lp3-worldTour__sub i { animation: none; }
}

.lp3-worldTour__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--ink);
  line-height: 1.2;
}

.lp3-worldTour__meta {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.55;
  line-height: 1.25;
}

/* ----- Philosophy section ----- */

/* Headline matches the world-tour title treatment — same gradient,
   weight, and letter-spacing — so the two big statements above and
   below the menu visually rhyme. */
.lp3-philosophy .lp3-h2 {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.4px;
  background: linear-gradient(90deg, #ff7ab6 0%, #8b5cff 50%, #18bfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Left-aligned story prose under the centered section head. Multiple
   paragraphs at long lengths read better left-aligned with a
   comfortable reading width. */
.lp3-philosophy__body {
  max-width: 640px;
  margin: 4px auto 0;
  padding: 0 16px;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.lp3-philosophy__body p {
  margin: 0 0 14px;
  opacity: 0.92;
}

/* Plain in-prose <strong> — heavier weight + brand violet so the
   accents (Friendrot, Avatars, 1,000 of them, Kids love it, world,
   playing too) read as a consistent visual rhythm instead of merging
   with the body text. Color tuned per theme: deeper on light for
   contrast, lighter on dark for readability. */
.lp3-philosophy__body strong {
  font-weight: 800;
  color: #7c3aed;
}

[data-theme="dark"] .lp3-philosophy__body strong {
  color: #a78bff;
}

/* Left-aligned founder signature — small circular avatar + name +
   role stacked on the right. The image sits over a magenta-violet
   gradient placeholder so the layout reads cleanly even before
   /assets/curtis.jpg ships; if the file fails to load the inline
   onerror zeros opacity and the gradient orb shows through. */
.lp3-philosophy__sig {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.lp3-philosophy__sigPic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #ff7ab6 0%, #8b5cff 100%);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.lp3-philosophy__sigText {
  display: flex;
  flex-direction: column;
}

.lp3-philosophy__sigName {
  font-weight: 800;
  font-style: italic;
  font-size: 17px;
  opacity: 0.95;
  line-height: 1.2;
}

.lp3-philosophy__sigRole {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 2px;
}

/* Standalone post-Philosophy CTA — the first conversion moment, moved
   out of the hero so it sits at the conviction peak (right after the
   founder signs the story). Centered like the mid/footer CTA bands
   but lighter — no headline, just the trial button + fine print. */
.lp3-postSig__cta {
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.lp3-postSig__cta .lp3-hero__fine,
.lp3-postSig__cta .lp3-signInLink {
  margin-top: 10px;
}

@media (max-width: 500px) {
  .lp3-philosophy__body {
    font-size: 15px;
  }
}

/* ----- Per-tile hue palette ----- */
.lp3-worldTour__tile--philo   { --tileHue: 290; } /* magenta-purple */
.lp3-worldTour__tile--math    { --tileHue: 38;  } /* warm amber */
.lp3-worldTour__tile--words   { --tileHue: 270; } /* violet */
.lp3-worldTour__tile--versus  { --tileHue: 215; } /* blue */
.lp3-worldTour__tile--avatars { --tileHue: 330; } /* pink */
.lp3-worldTour__tile--gold    { --tileHue: 50;  } /* gold-yellow */
.lp3-worldTour__tile--chat    { --tileHue: 145; } /* green */
.lp3-worldTour__tile--join    { --tileHue: 10;  } /* red-orange — punchy CTA */
.lp3-worldTour__tile--safe    { --tileHue: 190; } /* cyan */
.lp3-worldTour__tile--class   { --tileHue: 260; } /* chalk-purple */
.lp3-worldTour__tile--assign  { --tileHue: 130; } /* assignment-green */

/* ============================================================
   Floating "back to menu" button — appears when the visitor has
   scrolled past the world-tour menu. One tap jumps back to it.
   Calm styling: subtle surface + colored compass icon + soft shadow.
============================================================ */
.lp3-menuFab {
  position: fixed;
  /* Bottom-right, lifted above the audience-switcher toast. On mobile
     the toast spans nearly the full width, so sitting beside it isn't
     an option — we float the FAB above it. ~88px lift clears the
     toast on both desktop (~70px tall) and mobile (~80px when wrapped). */
  right: 20px;
  bottom: 96px;
  z-index: 60;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid hsl(290 60% 55% / 0.4);
  background: hsl(290 60% 55% / 0.12);
  color: hsl(290 60% 50%);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

[data-theme="dark"] .lp3-menuFab {
  border-color: hsl(290 60% 65% / 0.55);
  background: hsl(290 60% 50% / 0.18);
  color: hsl(290 70% 75%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

.lp3-menuFab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lp3-menuFab:hover {
  border-color: hsl(290 60% 55% / 0.7);
  background: hsl(290 60% 55% / 0.18);
}

[data-theme="dark"] .lp3-menuFab:hover {
  border-color: hsl(290 60% 70% / 0.8);
  background: hsl(290 60% 50% / 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .lp3-menuFab {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .lp3-menuFab.is-visible { transform: none; }
}

@media (max-width: 500px) {
  .lp3-menuFab {
    right: 14px;
    bottom: 88px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* Smooth-scroll landing offsets — keep section headlines clear of the
   header when arriving via a world-tour anchor. */
#world-philosophy,
#world-games,
#world-versus,
#world-avatars,
#world-goldrot,
#world-chat,
#world-classrooms,
#world-assignments,
#safety {
  scroll-margin-top: 24px;
}

.lp3-get {
  position: relative;
  text-align: center;
  padding: 56px 28px 48px;
  margin-bottom: 24px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface, #fff) 100%, transparent) 0%,
    color-mix(in oklab, #4d96ff 4%, var(--surface, #fff)) 100%);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  overflow: hidden;
}

[data-theme="dark"] .lp3-get {
  background: linear-gradient(180deg,
    var(--surface, #1b1b20) 0%,
    color-mix(in oklab, #4d96ff 12%, var(--surface, #1b1b20)) 100%);
}

.lp3-get__priceTag {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 122, 182, 0.14), rgba(139, 92, 255, 0.14), rgba(24, 191, 255, 0.14));
  border: 1px solid rgba(139, 92, 255, 0.28);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.lp3-get__title {
  margin: 0 0 32px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.15;
}

/* ---- Big CTA button ---- */

.lp3-get__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.2);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.lp3-get__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.28);
}

.lp3-get__cta:active {
  transform: translateY(0);
}

[data-theme="dark"] .lp3-get__cta {
  background: #fff;
  color: #111;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .lp3-get__cta:hover {
  box-shadow: 0 10px 22px rgba(255, 255, 255, 0.2);
}

/* ---- Simple brand lockup — Google + Stripe side by side ---- */

.lp3-get__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 32px;
}

.lp3-get__brandG {
  height: 28px;
  width: auto;
  display: block;
}

.lp3-get__brandDot {
  font-size: 18px;
  font-weight: 400;
  opacity: 0.35;
  user-select: none;
}

.lp3-get__brandStripe {
  height: 28px;
  width: auto;
  display: block;
}

/* ---- Trust line — single sentence ---- */

.lp3-get__trust {
  margin-top: 22px;
  font-size: 12.5px;
  opacity: 0.6;
  font-weight: 600;
}

/* ---- Responsive ---- */

@media (max-width: 620px) {
  .lp3-get {
    padding: 40px 20px 32px;
  }
  .lp3-get__title {
    font-size: 23px;
    margin-bottom: 24px;
  }
  .lp3-get__brands {
    gap: 14px;
    margin-bottom: 24px;
  }
  .lp3-get__brandG,
  .lp3-get__brandStripe {
    height: 24px;
  }
  .lp3-get__cta {
    padding: 14px 22px;
    font-size: 15px;
  }
}

/* Faded avatar backdrop — row of characters waiting for the sign-up */
.lp3-finalBackdrop {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 0 12px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  filter: blur(0.5px);
}

.lp3-finalBackdrop__img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp3-finalBackdrop__img--0 { transform: translateY(10px) rotate(-6deg); }
.lp3-finalBackdrop__img--1 { transform: translateY(-8px) rotate(4deg); }
.lp3-finalBackdrop__img--2 { transform: translateY(14px) rotate(-3deg); }
.lp3-finalBackdrop__img--3 { transform: translateY(-12px) rotate(6deg); }
.lp3-finalBackdrop__img--4 { transform: translateY(8px) rotate(-5deg); }
.lp3-finalBackdrop__img--5 { transform: translateY(-6px) rotate(3deg); }

/* Keep CTA content above backdrop */
.lp3-final__title,
.lp3-final__sub,
.lp3-final__cta {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .lp3-finalBackdrop {
    gap: 14px;
    opacity: 0.15;
  }
  .lp3-finalBackdrop__img {
    width: 42px;
    height: 42px;
  }
  /* Hide outermost avatars on narrow screens */
  .lp3-finalBackdrop__img--0,
  .lp3-finalBackdrop__img--5 { display: none; }
}

.lp3-final__title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}

.lp3-final__sub {
  font-size: 14px;
  opacity: 0.78;
  margin: 0 auto 16px;
  max-width: 480px;
}

.lp3-final__cta {
  margin-bottom: 14px;
}

.lp3-final__fine {
  font-size: 12px;
  opacity: 0.55;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.lp3-final__fine a {
  color: inherit;
  text-decoration: none;
}

.lp3-final__fine a:hover {
  text-decoration: underline;
}

/* ============================================================
   lp3 v2 — conversion-focused sections
============================================================ */

/* Section wrapper */
.lp3-section {
  padding: 28px 20px 30px;
  margin: 0 0 24px;
}

.lp3-section__head {
  text-align: center;
  margin-bottom: 22px;
}

.lp3-p {
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.8;
  margin: 0 auto;
  max-width: 600px;
}

/* Hero: price badge + CTA row */
.lp3-hero__priceBadge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 122, 182, 0.12), rgba(139, 92, 255, 0.12), rgba(24, 191, 255, 0.12));
  border: 1px solid rgba(139, 92, 255, 0.25);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}

/* Segmented Light/Dark theme pill — sits between the hero sub and the
   game card, syncs with the header icon via "themechange" events. */
.lp3-themeToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 30px;
  background: var(--surface-2, #f4f4f7);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
}

/* ============================================================
   Avatar marquee — single-line infinite scroll of collectible
   avatars, sits between the hero copy and the demo games so the
   "shop" is in view from the top of the fold without cluttering
   the game cards themselves. Items duplicated in markup; track
   animates to -50% for a seamless wrap-around.
============================================================ */
.lp3-avatarMarquee {
  position: relative;
  max-width: 560px;
  margin: 0 auto 26px;
  overflow: hidden;
  pointer-events: none;
  /* Soft fade at both edges so items appear/disappear cleanly
     instead of hard-clipping against the container. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.lp3-avatarMarquee__track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  animation: lp3-marqueeScroll 38s linear infinite;
  will-change: transform;
}

@keyframes lp3-marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.lp3-avatarMarquee__item {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.lp3-avatarMarquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 500px) {
  .lp3-avatarMarquee__item {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp3-avatarMarquee__track {
    animation: none;
  }
}

/* ============================================================
   "Play Demo Games" label — clarifies that the rainbow-bordered
   cards below are playable, not just screenshots. Pill with
   gamepad icon + bouncing down arrow beneath.
============================================================ */
.lp3-demoLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px auto 38px;
}

.lp3-demoLabel__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7ab6, #8b5cff);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(139, 92, 255, 0.28);
}

.lp3-demoLabel__pill i {
  font-size: 13px;
}

.lp3-demoLabel__arrow {
  font-size: 14px;
  opacity: 0.5;
  animation: lp3-demoLabelArrow 1.6s ease-in-out infinite;
}

@keyframes lp3-demoLabelArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.lp3-themeToggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}

.lp3-themeToggle__btn i {
  font-size: 13px;
}

.lp3-themeToggle__btn:not(.is-active):hover {
  background: color-mix(in oklab, var(--surface, #fff) 60%, var(--surface-2, #f4f4f7));
}

.lp3-themeToggle__btn.is-active {
  background: #111;
  color: #fff;
}

[data-theme="dark"] .lp3-themeToggle__btn.is-active {
  background: #fff;
  color: #111;
}

.lp3-hero__ctaRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lp3-hero__fine {
  font-size: 12px;
  opacity: 0.65;
}

.lp3-cta--primary {
  background: #111;
  color: #fff;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  border: none;
}

[data-theme="dark"] .lp3-cta--primary {
  background: #fff;
  color: #111;
}

/* §2 Trust band */
.lp3-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 32px;
  padding: 0 4px;
}

.lp3-trust__quote {
  display: flex;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 16px 14px;
}

.lp3-trust__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #ff7ab6, #8b5cff);
  padding: 2px;
  display: grid;
  place-items: center;
}

.lp3-trust__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-2, #f4f4f7);
}

.lp3-trust__body {
  flex: 1;
  min-width: 0;
}

.lp3-trust__text {
  font-size: 14px;
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 8px;
}

.lp3-trust__author {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}

/* §3 Featured games showcase */
.lp3-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

/* "Example games" eyebrow — small uppercase label above the showcase grid.
   Signals to readers that the 6 tiles below are a sample, not the full list. */
.lp3-showcase__eyebrow {
  max-width: 820px;
  margin: 0 auto 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--app-muted, rgba(11, 18, 32, 0.55));
}

/* "+N more" card — sits on the final row of the showcase grid, spanning
   all 3 columns. Uses dashed border + subtle gradient so it reads as a
   summary/reminder card rather than an individual game tile. */
.lp3-showcase__moreCard {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  user-select: none;
}

.lp3-showcase__moreNum {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--accent-2, #8b5cff);
  line-height: 1;
}

.lp3-showcase__moreLabel {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, rgba(11, 18, 32, 0.92));
  opacity: 0.85;
}

[data-theme="dark"] .lp3-showcase__moreNum  { color: #b39bff; }

@media (max-width: 640px) {
  .lp3-showcase__moreCard { padding: 14px 16px; gap: 10px; }
  .lp3-showcase__moreNum  { font-size: 22px; }
  .lp3-showcase__moreLabel { font-size: 13px; }
}

.lp3-showcase__card {
  /* Now a <button> — reset native button look so it inherits as a card. */
  appearance: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  padding: 0;

  display: flex;
  flex-direction: column;

  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
}

.lp3-showcase__card:hover,
.lp3-showcase__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
  border-color: color-mix(in oklab, var(--gcol, #18bfff) 55%, transparent);
  outline: none;
}

/* Magnifier icon overlaid on the screenshot — signals "click to enlarge" */
.lp3-showcase__zoomHint {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  opacity: 0.7;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 3;
  pointer-events: none;
}

.lp3-showcase__card:hover .lp3-showcase__zoomHint,
.lp3-showcase__card:focus-visible .lp3-showcase__zoomHint {
  opacity: 1;
  transform: scale(1.08);
}

/* Screenshot container. Uses the game's brand color as the placeholder background;
   the <img> sits on top. If the image 404s (onerror hides it), the placeholder
   shows through cleanly. */
.lp3-showcase__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}

.lp3-showcase__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  color: var(--gcol, #18bfff);
  opacity: 0.72;
}

/* Screenshots: object-fit: contain shows the WHOLE image (instead of
   cropping to fill). Combined with the small inset and the colored
   tinted background of .lp3-showcase__shot, off-frame screenshots get
   matted automatically — you don't need pixel-perfect cropping for
   each tile to look intentional. Add `.lp3-showcase__img--cover` on
   the <img> tag if you ever want a specific tile to fill via crop. */
.lp3-showcase__img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
}

.lp3-showcase__img--cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Colored top accent strip — reinforces the game's brand color */
.lp3-showcase__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gcol, #18bfff);
  z-index: 2;
}

.lp3-showcase__meta {
  padding: 14px 16px 16px;
  background: #f3f4f6;
  flex: 1 0 auto;
}

[data-theme="dark"] .lp3-showcase__meta {
  background: transparent;
}

.lp3-showcase__title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}

.lp3-showcase__descriptor {
  font-size: 13px;
  opacity: 0.72;
  line-height: 1.35;
}

.lp3-showcase__footer {
  margin-top: 22px;
  text-align: center;
}

.lp3-showcase__allLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 160ms ease, gap 160ms ease;
}

.lp3-showcase__allLink:hover {
  opacity: 1;
  gap: 12px;
}

/* Static (non-link) variant — used when we just want to state breadth
   without sending the user off-page */
.lp3-showcase__allLink--static,
.lp3-showcase__allLink--static:hover {
  cursor: default;
  opacity: 0.65;
  gap: 8px;
}

@media (max-width: 720px) {
  .lp3-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .lp3-showcase {
    gap: 12px;
  }
}

/* Legacy .lp3-kidTile classes removed — §3 now uses .lp3-showcase above */

/* §4 Parent dashboard section */
.lp3-parent__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: center;
}

.lp3-parent__screenshot {
  background: var(--surface-2, #f4f4f7);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.lp3-parent__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.4;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.lp3-parent__placeholder i {
  font-size: 48px;
}

.lp3-parent__placeholder small {
  font-weight: 500;
  opacity: 0.7;
}

.lp3-parent__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp3-parent__bullets li {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 14px;
  padding-left: 28px;
  position: relative;
}

.lp3-parent__bullets li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: #10b981;
  font-size: 14px;
}

.lp3-parent__bullets li strong {
  font-weight: 900;
}

/* §5 Why Friendrot */
.lp3-why {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.lp3-why__body {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
  opacity: 0.88;
}

/* §7 Safety */
.lp3-safetyGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 18px;
}

.lp3-safetyItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px;
  font-size: 14px;
}

.lp3-safetyItem i {
  font-size: 18px;
  color: #10b981;
  flex-shrink: 0;
}

.lp3-safetyItem strong {
  font-weight: 900;
}

/* Deep safety cards — fuller breakdown, replaces the small grid + linkout */
.lp3-safetyDeep {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .lp3-safetyDeep {
    grid-template-columns: 1fr;
  }
}

.lp3-safetyDeep__card {
  padding: 18px 18px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.lp3-safetyDeep__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.lp3-safetyDeep__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-size: 16px;
  margin-bottom: 12px;
}

.lp3-safetyDeep__card:nth-child(1) .lp3-safetyDeep__icon { background: rgba(139,92,255,0.14); color: #6030d0; }
.lp3-safetyDeep__card:nth-child(2) .lp3-safetyDeep__icon { background: rgba(255,79,179,0.14); color: #c0106e; }
.lp3-safetyDeep__card:nth-child(3) .lp3-safetyDeep__icon { background: rgba(34,211,255,0.14); color: #0891b2; }
.lp3-safetyDeep__card:nth-child(4) .lp3-safetyDeep__icon { background: rgba(255,176,32,0.16); color: #b87200; }

.lp3-safetyDeep__title {
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}

.lp3-safetyDeep__text {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.82;
}

.lp3-safety__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  opacity: 0.75;
}

.lp3-safety__link:hover {
  opacity: 1;
}

/* §8 Avatars */
.lp3-avatarGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

.lp3-avatarCard {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
}

.lp3-avatarCard__img {
  width: 100%;
  flex: 1;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface-2, #f4f4f7);
  min-height: 0;
}

.lp3-avatarCard__name {
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}

/* §9 Pricing */
.lp3-priceCard {
  position: relative;
  max-width: 420px;
  margin: 0 auto 22px;
  background: var(--surface, #fff);
  border: 2px solid #111;
  border-radius: 22px;
  padding: 28px 24px 26px;
  text-align: center;
}

/* Plan toggle — Annual / Monthly pills inside the price card.
   Block-level + width:fit-content so it sits on its own row, with the
   price amount stacked below (was crowding side-by-side before). */
.lp3-planToggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 18px;
  background: var(--surface-2, #f4f4f7);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
}

.lp3-planToggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}

.lp3-planToggle__btn:not(.is-active):hover {
  background: color-mix(in oklab, var(--surface, #fff) 60%, var(--surface-2, #f4f4f7));
}

.lp3-planToggle__btn.is-active {
  background: #111;
  color: #fff;
}

[data-theme="dark"] .lp3-planToggle__btn.is-active {
  background: #fff;
  color: #111;
}

.lp3-planToggle__tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  text-transform: uppercase;
}

/* When the Annual pill is not selected, de-emphasize the tag so the
   selected state dominates — but keep it visible as an incentive. */
.lp3-planToggle__btn:not(.is-active) .lp3-planToggle__tag {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

[data-theme="dark"] .lp3-planToggle__btn:not(.is-active) .lp3-planToggle__tag {
  background: rgba(16, 185, 129, 0.28);
  color: #10b981;
}

/* Decorative avatars peeking from the price card corners */
.lp3-priceDeco {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface, #fff);
  border: 3px solid var(--surface, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.lp3-priceDeco--tl {
  top: -22px;
  left: -22px;
  transform: rotate(-8deg);
  animation: lp3-priceDecoFloat 5.2s ease-in-out infinite;
}

.lp3-priceDeco--br {
  bottom: -22px;
  right: -22px;
  transform: rotate(8deg);
  animation: lp3-priceDecoFloat 5.2s ease-in-out infinite 1s;
}

@keyframes lp3-priceDecoFloat {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-4px); }
}

.lp3-priceDeco--br {
  animation-name: lp3-priceDecoFloatBr;
}

@keyframes lp3-priceDecoFloatBr {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-4px); }
}

[data-theme="dark"] .lp3-priceCard {
  border-color: #fff;
}

.lp3-priceCard__amount {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.lp3-priceCard__num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

/* "US" currency prefix tucked before the big dollar figure. Sized
   relatively so it scales with the num on mobile breakpoints too. */
.lp3-priceCard__numPrefix {
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: -0.3px;
  opacity: 0.6;
  margin-right: 2px;
  vertical-align: 0.55em;
}

/* Regular-price "was" number sits next to the current price on the price
   card. Number stays in the card's normal text color (just faded via
   opacity). A rotated pseudo-element draws the red diagonal strike so
   the line is colored but the digits aren't. */
.lp3-priceCard__was {
  position: relative;
  display: inline-block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
}

.lp3-priceCard__was::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 3px;
  background: #ef4444;
  border-radius: 2px;
  transform: translateY(-50%) rotate(-14deg);
  transform-origin: center center;
  pointer-events: none;
}

.lp3-priceCard__per {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.7;
}

/* Green "Save X%" pill that sits next to /year on the price card. Green =
   savings semantic (positive reinforcement). Keeping the same visual
   language we use elsewhere in the app for success/saved states. */
.lp3-priceCard__save {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.15);
  background: color-mix(in srgb, #22c55e 16%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
  line-height: 1;
  align-self: center;
}


.lp3-priceCard__or {
  font-size: 13px;
  opacity: 0.65;
  margin-bottom: 16px;
}

.lp3-priceCard__trial {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  opacity: 0.88;
}

.lp3-priceCard__cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.lp3-priceCard__fine {
  font-size: 12px;
  opacity: 0.6;
}

.lp3-pricing__why {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.82;
}

/* §10 Google-why */
.lp3-googleWhy {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Teacher nudge banner — expandable accordion (was a link). Sits below
   the hero so teachers see classroom-free messaging early, but doesn't
   pull them off-page. Opens in place to reveal the pitch + a jump to the
   teacher how-it-works panel. */
.lp3-teacherBanner {
  display: block;
  width: calc(100% - 40px);
  max-width: 680px;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, rgba(77, 150, 255, 0.08), rgba(107, 203, 119, 0.08));
  border: 1px solid rgba(77, 150, 255, 0.32);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.lp3-teacherBanner[open],
.lp3-teacherBanner:hover {
  border-color: rgba(77, 150, 255, 0.55);
  box-shadow: 0 8px 20px rgba(77, 150, 255, 0.14);
}

.lp3-teacherBanner__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  outline: none;
}

.lp3-teacherBanner__summary::-webkit-details-marker {
  display: none;
}

.lp3-teacherBanner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4d96ff, #6bcb77);
  color: #fff;
  border-radius: 12px;
  font-size: 22px;
}

.lp3-teacherBanner__body {
  flex: 1;
  min-width: 0;
}

.lp3-teacherBanner__title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 4px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.lp3-teacherBanner__sub {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.82;
}

.lp3-teacherBanner__arrow {
  flex-shrink: 0;
  font-size: 16px;
  opacity: 0.55;
  transition: transform 200ms ease, opacity 160ms ease;
}

.lp3-teacherBanner[open] .lp3-teacherBanner__arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.lp3-teacherBanner__expanded {
  padding: 4px 22px 22px;
  border-top: 1px solid rgba(77, 150, 255, 0.18);
  margin-top: 4px;
}

.lp3-teacherBanner__expanded p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.86;
}

.lp3-teacherBanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(77, 150, 255, 0.16);
  border: 1px solid rgba(77, 150, 255, 0.4);
  color: inherit;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: gap 160ms ease, background 160ms ease;
}

.lp3-teacherBanner__cta:hover {
  gap: 12px;
  background: rgba(77, 150, 255, 0.24);
}

@media (max-width: 600px) {
  .lp3-teacherBanner__summary {
    padding: 14px 16px;
    gap: 12px;
  }
  .lp3-teacherBanner__expanded {
    padding: 4px 16px 18px;
  }
  .lp3-teacherBanner__title {
    font-size: 16px;
  }
  .lp3-teacherBanner__sub {
    font-size: 13px;
  }
  .lp3-teacherBanner__icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

/* ============================================================
   How it works — audience toggle (Parents / Teachers) + steps grid.
   Anchored as #how-it-works; tabs auto-select on #how-parents /
   #how-teachers hash hits. Adapted from /about's lp2-audience block.
============================================================ */

#how-it-works {
  scroll-margin-top: 12px;
}
#how-parents,
#how-teachers {
  scroll-margin-top: 12px;
}

.lp3-audience__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.lp3-audience__tab {
  appearance: none;
  padding: 10px 18px;
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lp3-audience__tab:hover {
  opacity: 0.8;
}

.lp3-audience__tab--parent.is-active {
  opacity: 1;
  color: #0a7a57;
  border-color: rgba(18, 185, 129, 0.45);
  background: rgba(18, 185, 129, 0.10);
}

.lp3-audience__tab--teacher.is-active {
  opacity: 1;
  color: #6030d0;
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.10);
}

[data-theme="dark"] .lp3-audience__tab--parent.is-active {
  color: #4ade9f;
}
[data-theme="dark"] .lp3-audience__tab--teacher.is-active {
  color: #b39bff;
}

.lp3-audience__panel {
  display: none;
}

.lp3-audience__panel.is-active {
  display: block;
}

/* Steps grid — 1 col on mobile, 2 cols once we have room */
.lp3-steps {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .lp3-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp3-step {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
}

.lp3-step__n {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  background: var(--surface-2, #f4f4f7);
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.08));
}

/* Per-step accent colors — alternating across the 6 steps */
.lp3-step:nth-child(1) .lp3-step__n { background: rgba(34,211,255,0.14); border-color: rgba(34,211,255,0.3); color: #0891b2; }
.lp3-step:nth-child(2) .lp3-step__n { background: rgba(139,92,255,0.14); border-color: rgba(139,92,255,0.3); color: #6030d0; }
.lp3-step:nth-child(3) .lp3-step__n { background: rgba(255,79,179,0.12); border-color: rgba(255,79,179,0.3); color: #c0106e; }
.lp3-step:nth-child(4) .lp3-step__n { background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.3); color: #b87200; }
.lp3-step:nth-child(5) .lp3-step__n { background: rgba(18,185,129,0.12); border-color: rgba(18,185,129,0.3); color: #0a7a57; }
.lp3-step:nth-child(6) .lp3-step__n { background: rgba(255,204,41,0.16); border-color: rgba(255,204,41,0.35); color: #9a6d00; }

.lp3-step__title {
  font-weight: 900;
  margin-bottom: 2px;
  font-size: 14.5px;
}

.lp3-step__text {
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0.82;
}

.lp3-step__emoji {
  font-size: 20px;
  opacity: 0.9;
}

/* §11 FAQ */
.lp3-faqItem {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lp3-faqItem[open],
.lp3-faqItem:hover {
  border-color: rgba(139, 92, 255, 0.4);
  box-shadow: 0 6px 18px rgba(139, 92, 255, 0.08);
}

.lp3-faqItem summary {
  font-weight: 800;
  font-size: 15px;
  list-style: none;
  cursor: pointer;
  outline: none;
  position: relative;
  padding-right: 24px;
}

.lp3-faqItem summary::-webkit-details-marker {
  display: none;
}

.lp3-faqItem summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.5;
  transition: transform 180ms ease;
}

.lp3-faqItem[open] summary::after {
  content: "−";
}

.lp3-faqItem p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.82;
}

.lp3-faqItem p a {
  color: inherit;
  text-decoration: underline;
}

/* Subtle "For teachers" divider in the FAQ list */
.lp3-faqDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.55;
}

.lp3-faqDivider::before,
.lp3-faqDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.1));
}

/* "Who's behind" / curriculum closing card — single, calm card after FAQ */
.lp3-colophon {
  max-width: 680px;
  margin: 32px auto 0;
  padding: 22px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  text-align: center;
}

.lp3-colophon__title {
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}

.lp3-colophon__text {
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.78;
  margin: 0 0 6px;
}

.lp3-colophon__text:last-child {
  margin-bottom: 0;
}

.lp3-colophon__text a {
  color: inherit;
  font-weight: 800;
}

/* Hero spacing — open up the top so title, sub, and game don't feel cramped */
.lp3-hero {
  padding: 44px 20px 32px;
}

/* Branded anchor above the price badge */
.lp3-hero__logo {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.lp3-hero__logo img {
  height: 80px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 600px) {
  .lp3-hero__logo img {
    height: 60px;
  }
  .lp3-hero__logo {
    margin-bottom: 16px;
  }
}

.lp3-hero__priceBadge {
  margin-bottom: 22px;
}

.lp3-hero__title {
  font-size: 34px;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
  line-height: 1.15;
}

.lp3-hero__sub {
  margin: 0 auto 30px;
  max-width: 560px;
}

.lp3-gameWrap {
  margin: 4px auto 28px;
}

.lp3-h2 {
  font-size: 26px;
  letter-spacing: -0.3px;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
  .lp3-hero__title {
    font-size: 26px;
  }
  .lp3-hero__sub {
    font-size: 14px;
  }
  .lp3-hero {
    padding: 20px 16px 18px;
  }
  .lp3-h2 {
    font-size: 21px;
  }
  .lp3-nav__link {
    display: none;
  }
  .lp3-trust {
    grid-template-columns: 1fr;
  }
  .lp3-kidGrid,
  .lp3-safetyGrid {
    grid-template-columns: 1fr;
  }
  .lp3-parent__grid {
    grid-template-columns: 1fr;
  }
  .lp3-avatarGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lp3-priceCard {
    padding: 24px 20px 22px;
  }
  .lp3-priceCard__num {
    font-size: 48px;
  }
  .lp3-section {
    padding: 22px 16px 24px;
  }
}

@media (max-width: 380px) {
  .lp3-avatarGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Trust section — give it a touch more breathing room above
============================================================ */
.lp3-trustSection .lp3-section__head {
  margin-bottom: 18px;
}

/* Shop head sits right above the "THE FRIENDROT SHOP" sign, which
   pokes up out of .lp3-shop__frame by 18px (top: -18px). Tighten
   the gap BETWEEN the h2 and the subtitle instead of between the
   subtitle and the sign — that way the subtitle doesn't collide
   with the sign while still reading as a tight header block. */
.lp3-shop .lp3-h2 {
  margin-bottom: 4px;
}

/* ============================================================
   Multiplayer / Versus section
============================================================ */
.lp3-versus__use {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 22px auto 18px;
  max-width: 720px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.lp3-versus__useLabel {
  font-weight: 900;
  margin-right: 4px;
}

.lp3-versus__useDot {
  opacity: 0.4;
}

.lp3-versus__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 22px;
}

.lp3-versus__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;

  background: rgba(99, 115, 139, 0.08);
  background: color-mix(in srgb, var(--gcol) 11%, var(--surface, #fff));
  border: 1.5px solid rgba(99, 115, 139, 0.3);
  border: 1.5px solid color-mix(in srgb, var(--gcol) 30%, transparent);
  color: rgba(99, 115, 139, 0.85);
  color: color-mix(in srgb, var(--gcol) 75%, var(--text, #111));

  transition: transform 150ms ease, box-shadow 150ms ease;
}

.lp3-versus__pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 115, 139, 0.2);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gcol) 22%, transparent);
}

.lp3-versus__why {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.82;
}

/* ============================================================
   Chat preview — placeholder shell. Tries /assets/chat-demo.png first;
   if missing, the mock chat UI shows through as a designed placeholder
   so the section never looks broken.
============================================================ */
.lp3-chatShot {
  position: relative;
  max-width: 440px;
  margin: 0 auto 24px;
  aspect-ratio: 9 / 11;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

/* Same matting trick as the showcase tiles — contain shows the whole
   chat screenshot, the surface color shows around it as a frame.
   Chat sits at ~66% (3/4 of the original 88% inset size) so the screen
   itself reads more like a phone framed in white space. */
.lp3-chatShot__img {
  position: absolute;
  inset: 3%;
  width: 93%;
  height: 93%;
  object-fit: contain;
  z-index: 2;
  display: block;
  border-radius: 12px;
}

.lp3-chatShot__mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(139, 92, 255, 0.04), rgba(24, 191, 255, 0.04));
  z-index: 1;
}

[data-theme="dark"] .lp3-chatShot__mock {
  background: linear-gradient(180deg, rgba(139, 92, 255, 0.1), rgba(24, 191, 255, 0.08));
}

.lp3-chatShot__mockHead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  opacity: 0.7;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

.lp3-chatShot__mockHead span {
  margin-left: 8px;
}

.lp3-chatShot__mockDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7ab6;
}

.lp3-chatShot__mockDot:nth-child(2) { background: #ffd93d; }
.lp3-chatShot__mockDot:nth-child(3) { background: #18bfff; }

.lp3-chatShot__mockBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  overflow: hidden;
}

.lp3-chatShot__bubble {
  max-width: 75%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.lp3-chatShot__bubble--in {
  align-self: flex-start;
  background: var(--surface-2, #f1f1f4);
  border-bottom-left-radius: 6px;
  color: var(--text, #111);
}

.lp3-chatShot__bubble--out {
  align-self: flex-end;
  background: linear-gradient(135deg, #8b5cff, #18bfff);
  color: #fff;
  border-bottom-right-radius: 6px;
}

[data-theme="dark"] .lp3-chatShot__bubble--in {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #fff);
}

.lp3-chatShot__mockFoot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  background: var(--surface-2, #f4f4f7);
}

[data-theme="dark"] .lp3-chatShot__mockFoot {
  background: rgba(255, 255, 255, 0.04);
}

.lp3-chatShot__mockFoot i {
  font-size: 12px;
}

/* ============================================================
   Chat section
============================================================ */
.lp3-chat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .lp3-chat__grid {
    grid-template-columns: 1fr;
  }
}

.lp3-chat__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
}

.lp3-chat__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(34, 211, 255, 0.12);
  color: #0891b2;
  font-size: 16px;
}

.lp3-chat__item:nth-child(2) .lp3-chat__icon { background: rgba(139, 92, 255, 0.14); color: #6030d0; }
.lp3-chat__item:nth-child(3) .lp3-chat__icon { background: rgba(255, 176, 32, 0.16); color: #b87200; }
.lp3-chat__item:nth-child(4) .lp3-chat__icon { background: rgba(18, 185, 129, 0.14); color: #0a7a57; }

.lp3-chat__body {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}

.lp3-chat__body strong {
  font-weight: 900;
}

/* ============================================================
   Shop / Reward loop section — framed like a little storefront so
   the parent immediately reads "play -> earn -> collect" as the
   loop that keeps kids practicing.
============================================================ */
/* Shop frame — same rotating rainbow conic border as the hero game
   cards and the socials tiles. Inner fill keeps the soft pink->yellow
   warm tint. Reuses --lp3-gameAngle + lp3-gameBorderSpin keyframe. */
.lp3-shop__frame {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 28px;
  border: 2.5px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #ff7ab6 4%, var(--surface, #fff)),
      color-mix(in oklab, #ffd93d 4%, var(--surface, #fff))
    ) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
  animation: lp3-gameBorderSpin 8s linear infinite;
}

[data-theme="dark"] .lp3-shop__frame {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #ff7ab6 12%, var(--surface, #1b1b20)),
      color-mix(in oklab, #ffd93d 12%, var(--surface, #1b1b20))
    ) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
}

.lp3-shop__sign {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #ff7ab6, #ffd93d);
  color: #1f1300;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(255, 122, 182, 0.32);
  white-space: nowrap;
}

.lp3-shop__sign i {
  font-size: 14px;
}

.lp3-shop__flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.lp3-shop__step {
  flex: 1 1 180px;
  max-width: 220px;
  padding: 16px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  text-align: center;
}

.lp3-shop__stepIcon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(34, 211, 255, 0.14);
  color: #0891b2;
  font-size: 18px;
}

.lp3-shop__stepIcon--gold {
  background: rgba(255, 204, 41, 0.2);
  color: #bf980d;
}

.lp3-shop__stepIcon--pink {
  background: rgba(255, 122, 182, 0.18);
  color: #c0106e;
}

.lp3-shop__stepTitle {
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 4px;
}

.lp3-shop__stepText {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.78;
}

.lp3-shop__arrow {
  display: grid;
  place-items: center;
  font-size: 16px;
  opacity: 0.45;
  align-self: center;
}

@media (max-width: 700px) {
  .lp3-shop__flow {
    flex-direction: column;
    align-items: stretch;
  }
  .lp3-shop__arrow {
    transform: rotate(90deg);
  }
  .lp3-shop__step {
    max-width: none;
  }
}

.lp3-shop__shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
}

@media (max-width: 600px) {
  .lp3-shop__shelf {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 380px) {
  .lp3-shop__shelf {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp3-shop__card {
  background: var(--surface-2, #f4f4f7);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
}

.lp3-shop__cardImg {
  width: 100%;
  flex: 1;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface, #fff);
  min-height: 0;
}

.lp3-shop__cardName {
  font-size: 10.5px;
  font-weight: 800;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.78;
}

.lp3-shop__hook {
  text-align: center;
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  opacity: 0.85;
}

/* Three-up stats row under the avatar picks — "1,000+ avatars",
   "5 rarity tiers", "Trade with friends". Each is a bold number +
   small label stacked, pill-wrapped. */
.lp3-shop__stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 400px;
  margin: 18px auto 0;
}

.lp3-shop__stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface-2, #f4f4f7);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.9;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 92px;
}

.lp3-shop__stat b {
  font-size: 16px;
  font-weight: 900;
  color: var(--app-fg, #111);
  letter-spacing: -0.2px;
}

/* ============================================================
   Game 2 placeholder — same rainbow border treatment as Game 1
   so the page reads "two playable demos". Inside is a clean
   "coming soon" panel until the second game ships.
============================================================ */
.lp3-game--placeholder {
  width: 100%;
  margin: 0;
  position: relative;
  background: transparent;
}

.lp3-game--placeholder .ui-sheet__card {
  padding: 32px 20px;
  border-radius: 20px;
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.05);
  animation: lp3-gameBorderSpin 5s linear infinite;
}

.lp3-gamePlaceholder {
  text-align: center;
  padding: 36px 16px;
}

.lp3-gamePlaceholder__icon {
  font-size: 42px;
  margin-bottom: 14px;
  opacity: 0.45;
}

.lp3-gamePlaceholder__title {
  font-weight: 900;
  font-size: 17px;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.lp3-gamePlaceholder__text {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.7;
  max-width: 320px;
  margin: 0 auto;
}

/* ============================================================
   Story / "Who's behind Friendrot" — replaces the old colophon.
   Personal, transparent, leans into the dad-built-this-himself angle.
============================================================ */
.lp3-story {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.lp3-story__hook {
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.2px;
  margin: 4px auto 0;
  max-width: 520px;
  line-height: 1.4;
  background: linear-gradient(90deg, #ff7ab6, #8b5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp3-story__body {
  margin-top: 20px;
  text-align: left;
}

.lp3-story__body p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
  opacity: 0.88;
}

.lp3-story__contact {
  margin-top: 18px !important;
  text-align: left !important;
  font-size: 14px !important;
  opacity: 0.78 !important;
}

.lp3-story__contact a {
  color: inherit;
  font-weight: 800;
}

/* Parent-variant of the teacher banner — used on /teachers so parents
   who landed on the classroom page can bounce to / without friction.
   Warm pink/purple instead of the teacher banner's blue/green palette. */
.lp3-teacherBanner--parent {
  background: linear-gradient(135deg, rgba(255, 122, 182, 0.08), rgba(139, 92, 255, 0.08));
  border-color: rgba(255, 122, 182, 0.32);
}

.lp3-teacherBanner--parent[open],
.lp3-teacherBanner--parent:hover {
  border-color: rgba(255, 122, 182, 0.55);
  box-shadow: 0 8px 20px rgba(255, 122, 182, 0.14);
}

.lp3-teacherBanner--parent .lp3-teacherBanner__icon {
  background: linear-gradient(135deg, #ff7ab6, #8b5cff);
}

.lp3-teacherBanner--parent .lp3-teacherBanner__cta {
  background: rgba(255, 122, 182, 0.16);
  border-color: rgba(255, 122, 182, 0.4);
}

.lp3-teacherBanner--parent .lp3-teacherBanner__cta:hover {
  background: rgba(255, 122, 182, 0.24);
}

.lp3-teacherBanner--parent .lp3-teacherBanner__expanded {
  border-top-color: rgba(255, 122, 182, 0.18);
}

/* Small cross-link under the parent-only how-it-works heading so
   teachers who land here from the header dropdown still have a path. */
.lp3-howWorks__altLink {
  color: inherit;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 160ms ease, gap 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp3-howWorks__altLink:hover {
  opacity: 1;
  gap: 10px;
}

/* ============================================================
   /teachers page — overrides + teacher-specific blocks
============================================================ */

/* Green "Free for classrooms" badge replaces the purple price badge */
.lp3-hero__priceBadge--free {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.14), rgba(77, 150, 255, 0.12));
  border-color: rgba(16, 185, 129, 0.38);
  color: #0a7a57;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .lp3-hero__priceBadge--free {
  color: #4ade9f;
}

.lp3-hero__priceBadge--free i {
  font-size: 12px;
  opacity: 0.85;
}

/* Classroom intro pills row — like the versus "Great for" row */
.lp3-classroomIntro__pills,
.lp3-classCodes__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 640px;
  margin: 24px auto 0;
}

/* Free classroom card — green stamp + bullets, inherits .lp3-priceCard shell */
.lp3-priceCard--free {
  border-color: rgba(16, 185, 129, 0.55);
}

[data-theme="dark"] .lp3-priceCard--free {
  border-color: rgba(74, 222, 159, 0.55);
}

.lp3-priceCard__freeBadge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: linear-gradient(135deg, #10b981, #4d96ff);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.lp3-priceCard--free .lp3-priceCard__num {
  background: linear-gradient(135deg, #10b981, #4d96ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp3-freeBullets {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  text-align: left;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.lp3-freeBullets li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 14px;
  line-height: 1.45;
}

.lp3-freeBullets li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 8px;
  color: #10b981;
  font-size: 13px;
}

/* Assignments section — reuses .lp3-chat__grid for the 4-card layout */
.lp3-assignments .lp3-chat__grid {
  max-width: 760px;
}

/* Join-flow section — reuses .lp3-shop__flow CSS, no extra rules needed */
.lp3-joinFlow .lp3-shop__flow {
  max-width: 760px;
  margin: 0 auto;
}

/* Audience toast styles moved to global.css (.lp3-bottomToast) — the
   audience switcher is now one section of the site-wide bottom toast
   that also hosts cookie consent. See views/partials/lp3-bottomToast.hbs. */

/* ============================================================
   Game separator — slick divider between the two hero demos.
   Line - chip("2 | One more demo ↓") - line. Gives each game room
   to breathe and signals "one of two" without numbering either.
============================================================ */
.lp3-gameSep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 480px;
  margin: 10px auto 28px;
  padding: 0 6px;
}

.lp3-gameSep__line {
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.12));
}

.lp3-gameSep__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.lp3-gameSep__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7ab6, #8b5cff);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.lp3-gameSep__label {
  opacity: 0.85;
  letter-spacing: 0.1px;
}

.lp3-gameSep__arrow {
  font-size: 10px;
  opacity: 0.7;
  animation: lp3-gameSepArrow 1.6s ease-in-out infinite;
}

@keyframes lp3-gameSepArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Vowel Pop hint variant — warmer yellow/orange wash so the two game
   cards feel like siblings but aren't identical. */
.lp3-game__hint--vp {
  background: linear-gradient(135deg, #ff8c42, #ffd93d);
  color: #3d2100;
  box-shadow: 0 6px 16px rgba(255, 140, 66, 0.35);
}

/* ============================================================
   Reusable animated highlighter — .lp3-mark. Wraps a phrase in
   <mark class="lp3-mark"> (or a <span>) to draw the eye. Color
   variants: default yellow, --pink, --blue, --purple, --green.
   The highlight sweeps in left-to-right, holds, fades out,
   then repeats every ~6s. Plays well across line breaks via
   box-decoration-break: clone.
============================================================ */
/* Highlighter strip — a 3x-wide gradient with the colored band in the
   middle. Animation slides the band rightward by decreasing
   background-position from 100% -> 50% -> 0%, so the stripe always
   ENTERS from the left, fills, then EXITS to the right. Never reverses.
   Per-instance random delays scatter the start phase (see landing.hbs). */
.lp3-mark {
  display: inline;
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 33%,
    #ffeb3b 33%,
    #ffeb3b 67%,
    transparent 67%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 300% 72%;
  background-position: 105% 50%;
  padding: 2px 5px;
  margin: 0 -3px;
  border-radius: 4px;
  color: inherit;
  animation: lp3-markSweep 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Brighter, highlighter-marker palette */
.lp3-mark--pink   { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, #ff70a6 33%, #ff70a6 67%, transparent 67%, transparent 100%); }
.lp3-mark--blue   { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, #56ccff 33%, #56ccff 67%, transparent 67%, transparent 100%); }
.lp3-mark--purple { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, #9d7eff 33%, #9d7eff 67%, transparent 67%, transparent 100%); }
.lp3-mark--green  { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, #5dde85 33%, #5dde85 67%, transparent 67%, transparent 100%); }

/* Dark mode — slightly translucent so light text stays readable on top */
[data-theme="dark"] .lp3-mark         { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(255, 235, 59, 0.55) 33%, rgba(255, 235, 59, 0.55) 67%, transparent 67%, transparent 100%); }
[data-theme="dark"] .lp3-mark--pink   { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(255, 112, 166, 0.55) 33%, rgba(255, 112, 166, 0.55) 67%, transparent 67%, transparent 100%); }
[data-theme="dark"] .lp3-mark--blue   { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(86, 204, 255, 0.55) 33%, rgba(86, 204, 255, 0.55) 67%, transparent 67%, transparent 100%); }
[data-theme="dark"] .lp3-mark--purple { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(157, 126, 255, 0.55) 33%, rgba(157, 126, 255, 0.55) 67%, transparent 67%, transparent 100%); }
[data-theme="dark"] .lp3-mark--green  { background-image: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(93, 222, 133, 0.55) 33%, rgba(93, 222, 133, 0.55) 67%, transparent 67%, transparent 100%); }

@keyframes lp3-markSweep {
  /* stripe sits off to the LEFT of the text -> invisible. 105% (not
     100%) pushes the band fully past the visible edge — at exactly
     100% a ~1% sliver of color leaks because the band is slightly
     wider than the container. */
  0%   { background-position: 105% 50%; }
  /* sweep IN: stripe enters from left, fills the text -> flowing right */
  12%  { background-position: 50% 50%; }
  /* hold filled */
  65%  { background-position: 50% 50%; }
  /* sweep OUT: stripe exits off the right edge -> still flowing right.
     -5% (not 0%) similarly pushes it fully past the right edge. */
  88%  { background-position: -5% 50%; }
  /* held off-screen right; loops back to off-screen left next iteration */
  100% { background-position: -5% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp3-mark {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ============================================================
   Marks paused 2026-04-24 — kills the animated highlight site-wide
   without touching the markup or the rules above. The sweep was
   reading as distracting; this disables the visual treatment so
   <mark class="lp3-mark"> renders as plain text. Delete this block
   to bring the highlights back.
============================================================ */
.lp3-mark,
.lp3-mark--pink,
.lp3-mark--blue,
.lp3-mark--purple,
.lp3-mark--green,
[data-theme="dark"] .lp3-mark,
[data-theme="dark"] .lp3-mark--pink,
[data-theme="dark"] .lp3-mark--blue,
[data-theme="dark"] .lp3-mark--purple,
[data-theme="dark"] .lp3-mark--green {
  background-image: none;
  animation: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   Versus "Great for" — colored pills replacing the dot-separated line
============================================================ */
.lp3-versus__usePill {
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  border: 1.5px solid;
  white-space: nowrap;
}

.lp3-versus__usePill--blue {
  background: rgba(77, 150, 255, 0.14);
  border-color: rgba(77, 150, 255, 0.45);
  color: #2c6cd1;
}
.lp3-versus__usePill--purple {
  background: rgba(139, 92, 255, 0.14);
  border-color: rgba(139, 92, 255, 0.45);
  color: #6030d0;
}
.lp3-versus__usePill--green {
  background: rgba(18, 185, 129, 0.14);
  border-color: rgba(18, 185, 129, 0.45);
  color: #0a7a57;
}

[data-theme="dark"] .lp3-versus__usePill--blue   { color: #86b4ff; background: rgba(77, 150, 255, 0.22); }
[data-theme="dark"] .lp3-versus__usePill--purple { color: #b39bff; background: rgba(139, 92, 255, 0.22); }
[data-theme="dark"] .lp3-versus__usePill--green  { color: #4ade9f; background: rgba(18, 185, 129, 0.22); }

/* ============================================================
   Shop circular loop — three nodes in a triangle with SVG arrows
   cycling between them. Replaces the vertical linear flow, works
   much better on mobile.
============================================================ */
.lp3-shopLoop {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 320 / 280;
  margin: 12px auto 24px;
}

.lp3-shopLoop__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.lp3-shopLoop__svg path {
  stroke-dasharray: 6 5;
  animation: lp3-loopDash 6s linear infinite;
}

@keyframes lp3-loopDash {
  to { stroke-dashoffset: -44; }
}

.lp3-shopLoop__node {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2.5px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 6px;
  z-index: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.lp3-shopLoop__node--top    { top: 7%;    left: 50%;   border-color: #18bfff; }
.lp3-shopLoop__node--right  { top: 71.4%; left: 82.5%; border-color: #f5b800; }
.lp3-shopLoop__node--left   { top: 71.4%; left: 17.5%; border-color: #ff7ab6; }

.lp3-shopLoop__icon {
  font-size: 20px;
  line-height: 1;
}

.lp3-shopLoop__node--top   .lp3-shopLoop__icon { color: #0891b2; }
.lp3-shopLoop__node--right .lp3-shopLoop__icon { color: #bf980d; }
.lp3-shopLoop__node--left  .lp3-shopLoop__icon { color: #c0106e; }

.lp3-shopLoop__label {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.15;
}

/* Center label — "Motivation Loop" — sits inside the triangle of nodes
   with a soft pink halo so it reads as the hub the arrows circle around. */
.lp3-shopLoop__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
  width: 38%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  z-index: 0;
  pointer-events: none;
}

.lp3-shopLoop__centerText {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  color: #c0106e;
}

.lp3-shopLoop__centerSub {
  font-size: 9.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
  line-height: 1.1;
}

[data-theme="dark"] .lp3-shopLoop__centerText {
  color: #ff9ec8;
}

@media (max-width: 500px) {
  .lp3-shopLoop__label { font-size: 9.5px; }
  .lp3-shopLoop__icon  { font-size: 17px; }
  .lp3-shopLoop__centerText { font-size: 10px; }
  .lp3-shopLoop__centerSub  { font-size: 8.5px; }
}

/* ============================================================
   Shop picks — 2 avatar cards with GoldRot prices, mimicking /store
============================================================ */
.lp3-shopPicks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 400px;
  margin: 4px auto 0;
}

.lp3-shopPicks__card {
  position: relative;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}


.lp3-shopPicks__imgWrap {
  background: var(--surface-2, #f4f4f7);
  border-radius: 12px;
  margin-bottom: 10px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.lp3-shopPicks__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.lp3-shopPicks__name {
  font-weight: 900;
  font-size: 13.5px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp3-shopPicks__price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 204, 41, 0.18);
  border: 1px solid rgba(191, 152, 13, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #8a6d00;
}

.lp3-shopPicks__price i {
  color: #bf980d;
  font-size: 14px;
}

[data-theme="dark"] .lp3-shopPicks__price {
  color: #ffd93d;
  background: rgba(255, 204, 41, 0.12);
}

/* ============================================================
   Why Friendrot Rocks — floating avatars (foreground, not bg)
============================================================ */
.lp3-why {
  position: relative;
  overflow: visible;
  padding-top: 44px;
  padding-bottom: 40px;
}

.lp3-why__inner {
  position: relative;
  z-index: 2;
}

.lp3-whyFloaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.lp3-whyFloater {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.lp3-whyFloater img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp3-whyFloater--0 { top: 8%;    left: 2%;   animation: lp3-whyFloat 5.2s ease-in-out infinite; }
.lp3-whyFloater--1 { top: 4%;    right: 4%;  animation: lp3-whyFloat 6.4s ease-in-out infinite 0.8s; }
.lp3-whyFloater--2 { bottom: 14%; left: 6%;  animation: lp3-whyFloat 5.8s ease-in-out infinite 1.6s; }
.lp3-whyFloater--3 { bottom: 6%;  right: 2%; animation: lp3-whyFloat 6s ease-in-out infinite 0.3s; width: 44px; height: 44px; }

@keyframes lp3-whyFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-8px) rotate(5deg); }
}

@media (max-width: 600px) {
  .lp3-whyFloater      { width: 40px; height: 40px; }
  .lp3-whyFloater--3   { width: 34px; height: 34px; }
  .lp3-whyFloater--0   { top: 4%; left: 1%; }
  .lp3-whyFloater--1   { top: 2%; right: 2%; }
  .lp3-whyFloater--2   { bottom: 10%; left: 2%; }
  .lp3-whyFloater--3   { bottom: 4%; right: 1%; }
}

/* ============================================================
   Safety accordions — high-level headings, detail on expand
============================================================ */
.lp3-safetyAcc {
  max-width: 680px;
  margin: 0 auto;
}

.lp3-safetyAcc__item {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lp3-safetyAcc__item[open],
.lp3-safetyAcc__item:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08);
}

.lp3-safetyAcc__item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  outline: none;
}

.lp3-safetyAcc__item summary::-webkit-details-marker { display: none; }

.lp3-safetyAcc__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
}

.lp3-safetyAcc__item:nth-child(1) .lp3-safetyAcc__icon { background: rgba(34, 211, 255, 0.14); color: #0891b2; }
.lp3-safetyAcc__item:nth-child(2) .lp3-safetyAcc__icon { background: rgba(255, 79, 179, 0.14); color: #c0106e; }
.lp3-safetyAcc__item:nth-child(3) .lp3-safetyAcc__icon { background: rgba(255, 176, 32, 0.16); color: #b87200; }
.lp3-safetyAcc__item:nth-child(4) .lp3-safetyAcc__icon { background: rgba(18, 185, 129, 0.14); color: #0a7a57; }

.lp3-safetyAcc__title {
  flex: 1;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.1px;
  text-align: left;
}

.lp3-safetyAcc__chev {
  color: inherit;
  opacity: 0.5;
  font-size: 13px;
  transition: transform 180ms ease, opacity 160ms ease;
}

.lp3-safetyAcc__item[open] .lp3-safetyAcc__chev {
  transform: rotate(180deg);
  opacity: 1;
}

.lp3-safetyAcc__item p {
  margin: 12px 0 2px;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.85;
  padding-left: 48px;
  text-align: left;
}

@media (max-width: 500px) {
  .lp3-safetyAcc__item p {
    padding-left: 0;
  }
}

/* ============================================================
   Our Promise — clean 4-card commitment block. Sits right above the
   pricing CTA as the final trust signal before the ask. 2x2 on
   desktop, 1 col on mobile. Each card gets a subtle accent color.
============================================================ */
/* Compact horizontal rows — icon on left, title + text stacked on right.
   Much tighter vertical footprint than the old card grid. */
.lp3-promise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .lp3-promise__grid {
    grid-template-columns: 1fr;
  }
}

.lp3-promise__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
}

.lp3-promise__icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  align-self: center;
}

.lp3-promise__item:nth-child(1) .lp3-promise__icon { background: rgba(255, 204, 41, 0.18); color: #b87200; }
.lp3-promise__item:nth-child(2) .lp3-promise__icon { background: rgba(255, 79, 179, 0.14); color: #c0106e; }
.lp3-promise__item:nth-child(3) .lp3-promise__icon { background: rgba(139, 92, 255, 0.14); color: #6030d0; }
.lp3-promise__item:nth-child(4) .lp3-promise__icon { background: rgba(18, 185, 129, 0.14); color: #0a7a57; }

.lp3-promise__title {
  grid-column: 2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.1px;
  line-height: 1.2;
}

.lp3-promise__text {
  grid-column: 2;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0.78;
}

/* ============================================================
   Learn-more divider — visual break after the pricing CTA
============================================================ */
.lp3-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px auto 30px;
  padding: 0 14px;
  max-width: 640px;
}

.lp3-divider::before,
.lp3-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.12));
}

.lp3-divider__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(139, 92, 255, 0.12), rgba(24, 191, 255, 0.12));
  border: 1px solid rgba(139, 92, 255, 0.3);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
}

.lp3-divider__chip i {
  font-size: 10px;
  opacity: 0.7;
  animation: lp3-dividerBob 2s ease-in-out infinite;
}

@keyframes lp3-dividerBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ============================================================
   Story section — photo + body side-by-side layout
============================================================ */
.lp3-story__layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 22px;
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .lp3-story__layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.lp3-story__photo {
  position: relative;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2, #f4f4f7);
  border: 1.5px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.lp3-story__photoPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.5;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  padding: 12px;
}

.lp3-story__photoPlaceholder i {
  font-size: 42px;
}

.lp3-story__photoImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.lp3-story__photoCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  z-index: 2;
  text-align: center;
}

.lp3-story__layout .lp3-story__body {
  margin-top: 0;
}

/* ============================================================
   Socials section — IG link + small video grid
============================================================ */
/* Socials header: centered heading, IG button stacked below (was
   right-aligned next to the h2; read off visually vs. every other
   section head which is centered). */
.lp3-socials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.lp3-socials__igLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f09433, #dc2743 50%, #bc1888);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.lp3-socials__igLink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 39, 67, 0.35);
}

.lp3-socials__igIcon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.lp3-socials__igLink i.fa-arrow-up-right-from-square {
  font-size: 10px;
  opacity: 0.85;
}

/* Carousel shell — 3 nav buttons at the top, single tile stage below.
   JS flips the .is-active classes on click. */
.lp3-socials__carousel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp3-socials__nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Video nav — intentionally different from the Follow-on-Instagram
   pill so the two don't read as the same thing. Quieter tab style:
   subtle underline bar under the active one, no fills or gradients. */
.lp3-socials__navBtn {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  opacity: 0.55;
  position: relative;
  transition: opacity 160ms ease, color 160ms ease;
}

.lp3-socials__navBtn::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.lp3-socials__navBtn:hover {
  opacity: 0.85;
}

.lp3-socials__navBtn.is-active {
  opacity: 1;
}

.lp3-socials__navBtn.is-active::after {
  transform: scaleX(1);
}

.lp3-socials__navNum {
  font-weight: 700;
  opacity: 0.6;
}

.lp3-socials__navBtn.is-active .lp3-socials__navNum {
  opacity: 0.85;
}

.lp3-socials__stage {
  position: relative;
  display: grid;
  place-items: center;
}

/* Stage tiles: only the .is-active one is shown. Cap width so the
   9:16 tile doesn't eat the viewport on desktop. */
.lp3-socials__stage .lp3-socials__tile {
  display: none;
  width: 100%;
  max-width: 420px;
}

.lp3-socials__stage .lp3-socials__tile.is-active {
  display: block;
}

/* Carousel tiles don't rotate on separate clocks anymore — only one is
   visible at a time, so the stagger delays we had before are unneeded.
   The rainbow still spins via the lp3-gameBorderSpin animation inherited
   from .lp3-socials__tile. */

/* Socials carousel — single tile shown at a time, switched by nav buttons
   above. Tiles use the same rotating rainbow conic border as the hero
   game cards (note: padding-box layer must be a <bg-image> like a
   linear-gradient — a bare color doesn't parse, which is why this looked
   borderless before). Reuses lp3-gameBorderSpin + --lp3-gameAngle. */
.lp3-socials__tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 2.5px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
  animation: lp3-gameBorderSpin 5s linear infinite;
}

.lp3-socials__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Empty placeholder tiles: same rainbow border, subdued inner panel */
.lp3-socials__tile--empty {
  background:
    linear-gradient(var(--surface-2, #f4f4f7), var(--surface-2, #f4f4f7)) padding-box,
    conic-gradient(
      from var(--lp3-gameAngle),
      #ff7ab6 0deg,
      #8b5cff 60deg,
      #18bfff 120deg,
      #6bcb77 180deg,
      #ffd93d 240deg,
      #ff8c42 300deg,
      #ff7ab6 360deg
    ) border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.85;
  font-size: 12px;
  font-weight: 800;
}

.lp3-socials__tile--empty i {
  font-size: 28px;
  opacity: 0.7;
}

/* Speaker overlay — small round button bottom-right of each video tile.
   Click to toggle mute. JS swaps the icon and the data-muted attribute. */
.lp3-socials__sound {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, transform 160ms ease;
  backdrop-filter: blur(4px);
}

.lp3-socials__sound:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.06);
}

.lp3-socials__sound[data-muted="false"] {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
}

.lp3-socials__sound[data-muted="false"]:hover {
  background: #fff;
}

/* ============================================================
   Zoom modal — fullscreen "investigate" view for any showcase card.
   Opens with a click on a [data-zoom] card, populates from its
   data-zoom-* attributes. Big screenshot + title + blurb only seen
   here. Single instance shared across the page.
============================================================ */
/* Lock body scroll only — never lock <html>, which would discard the
   page's scroll offset and snap to top when the modal opens. */
html.lp3-zoom-open body {
  overflow: hidden;
}

.lp3-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.lp3-zoom[hidden] {
  display: none;
}

.lp3-zoom__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.lp3-zoom.is-visible .lp3-zoom__backdrop {
  opacity: 1;
}

.lp3-zoom__card {
  position: relative;
  background: var(--surface, #fff);
  color: var(--app-fg, #111);
  border-radius: 22px;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lp3-zoom.is-visible .lp3-zoom__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lp3-zoom__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, transform 160ms ease;
}

.lp3-zoom__close:hover {
  background: rgba(0, 0, 0, 0.78);
  transform: scale(1.08);
}

.lp3-zoom__shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.lp3-zoom__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
  color: var(--gcol, #18bfff);
  opacity: 0.55;
}

.lp3-zoom__img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}

.lp3-zoom__body {
  padding: 22px 26px 26px;
  overflow-y: auto;
}

.lp3-zoom__title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.15;
}

.lp3-zoom__blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.88;
}

@media (max-width: 600px) {
  .lp3-zoom {
    padding: 10px;
  }
  .lp3-zoom__shot {
    aspect-ratio: 4 / 3;
  }
  .lp3-zoom__title {
    font-size: 22px;
  }
  .lp3-zoom__body {
    padding: 18px 20px 22px;
  }
}

/* ============================================================
   Scroll-driven reveal — IntersectionObserver in JS adds the
   .lp3-reveal class to every .lp3-section that's not already on
   screen at page load, then flips .is-revealed when the section
   enters the viewport. Sections fade up; grid children inside a
   revealed section cascade in with a small stagger so the page
   feels alive instead of static-then-popping.
============================================================ */
.lp3-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.lp3-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger inside grids — child cards cascade in instead of all
   appearing at once. Applies to: showcase tiles, safety accordions,
   FAQ items, promise cards, chat items, how-it-works steps. */
.lp3-reveal .lp3-showcase__card,
.lp3-reveal .lp3-safetyAcc__item,
.lp3-reveal .lp3-faqItem,
.lp3-reveal .lp3-promise__item,
.lp3-reveal .lp3-chat__item,
.lp3-reveal .lp3-step,
.lp3-reveal .lp3-trust__quote,
.lp3-reveal .lp3-versus__usePill {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lp3-reveal.is-revealed .lp3-showcase__card,
.lp3-reveal.is-revealed .lp3-safetyAcc__item,
.lp3-reveal.is-revealed .lp3-faqItem,
.lp3-reveal.is-revealed .lp3-promise__item,
.lp3-reveal.is-revealed .lp3-chat__item,
.lp3-reveal.is-revealed .lp3-step,
.lp3-reveal.is-revealed .lp3-trust__quote,
.lp3-reveal.is-revealed .lp3-versus__usePill {
  opacity: 1;
  transform: translateY(0);
}

/* Per-child stagger delays. Applies to the same selectors as above. */
.lp3-reveal.is-revealed > * > *:nth-child(1),
.lp3-reveal.is-revealed > *:nth-child(1) { transition-delay: 60ms; }
.lp3-reveal.is-revealed > * > *:nth-child(2),
.lp3-reveal.is-revealed > *:nth-child(2) { transition-delay: 120ms; }
.lp3-reveal.is-revealed > * > *:nth-child(3),
.lp3-reveal.is-revealed > *:nth-child(3) { transition-delay: 180ms; }
.lp3-reveal.is-revealed > * > *:nth-child(4),
.lp3-reveal.is-revealed > *:nth-child(4) { transition-delay: 240ms; }
.lp3-reveal.is-revealed > * > *:nth-child(5),
.lp3-reveal.is-revealed > *:nth-child(5) { transition-delay: 300ms; }
.lp3-reveal.is-revealed > * > *:nth-child(6),
.lp3-reveal.is-revealed > *:nth-child(6) { transition-delay: 360ms; }
.lp3-reveal.is-revealed > * > *:nth-child(7),
.lp3-reveal.is-revealed > *:nth-child(7) { transition-delay: 420ms; }
.lp3-reveal.is-revealed > * > *:nth-child(8),
.lp3-reveal.is-revealed > *:nth-child(8) { transition-delay: 480ms; }

/* Respect users who prefer reduced motion — no animations at all. */
@media (prefers-reduced-motion: reduce) {
  .lp3-reveal,
  .lp3-reveal .lp3-showcase__card,
  .lp3-reveal .lp3-safetyAcc__item,
  .lp3-reveal .lp3-faqItem,
  .lp3-reveal .lp3-promise__item,
  .lp3-reveal .lp3-chat__item,
  .lp3-reveal .lp3-step,
  .lp3-reveal .lp3-trust__quote,
  .lp3-reveal .lp3-versus__usePill {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   DEVICES — "plays on every device" hero. Phone / tablet /
   Chromebook-style laptop / desktop monitor lined up left-to-right,
   each showing a different game screenshot inside a pure-CSS frame.
   Wraps onto two or three rows on mobile.
============================================================ */
.lp3-devices__stage {
  position: relative;
  max-width: 960px;
  margin: 28px auto 0;
  padding: 24px 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
}

.lp3-device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.lp3-device__screen {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
}

.lp3-device__screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: inherit;
}

.lp3-device__label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b5f88;
  text-transform: uppercase;
}
[data-theme="dark"] .lp3-device__label {
  color: #b9b0d8;
}

/* ----- Phone (portrait, notched) ----- */
.lp3-device--phone .lp3-device__screen {
  width: 88px;
  aspect-ratio: 9 / 19;
  border-radius: 18px;
  padding: 5px;
  background: #111;
  border: 2px solid #1f1f1f;
}
.lp3-device--phone .lp3-device__screen::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 6px;
  background: #000;
  border-radius: 3px;
  z-index: 2;
}
.lp3-device--phone .lp3-device__screen img {
  border-radius: 12px;
}

/* ----- Tablet (portrait, slim bezel) ----- */
.lp3-device--tablet .lp3-device__screen {
  width: 124px;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  padding: 6px;
  background: #161616;
  border: 2px solid #2a2a2a;
}
.lp3-device--tablet .lp3-device__screen img {
  border-radius: 8px;
}

/* ----- Chromebook / laptop ----- */
.lp3-device--laptop .lp3-device__screen {
  width: 220px;
  aspect-ratio: 16 / 10;
  border-radius: 8px 8px 2px 2px;
  padding: 6px;
  background: #161616;
  border: 2px solid #2a2a2a;
  border-bottom: 0;
}
.lp3-device--laptop .lp3-device__screen img {
  border-radius: 3px;
}
.lp3-device--laptop .lp3-device__base {
  width: 252px; /* ~15% wider than screen to suggest clamshell */
  height: 9px;
  background: linear-gradient(180deg, #3a3a3a, #1e1e1e);
  border-radius: 0 0 8px 8px;
  position: relative;
  margin-bottom: 2px;
}
.lp3-device--laptop .lp3-device__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 3px;
  background: #0c0c0c;
  border-radius: 0 0 6px 6px;
}

/* ----- Desktop (monitor + stand) ----- */
.lp3-device--desktop .lp3-device__screen {
  width: 260px;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  padding: 8px;
  background: #161616;
  border: 2px solid #2a2a2a;
}
.lp3-device--desktop .lp3-device__screen img {
  border-radius: 3px;
}
.lp3-device--desktop .lp3-device__neck {
  width: 48px;
  height: 18px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  margin: -2px auto 0;
}
.lp3-device--desktop .lp3-device__foot {
  width: 110px;
  height: 5px;
  background: linear-gradient(180deg, #2a2a2a, #121212);
  border-radius: 3px;
  margin: 0 auto 2px;
}

.lp3-devices__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

/* Narrower frames on small screens — everything scales together */
@media (max-width: 640px) {
  .lp3-devices__stage {
    padding: 32px 16px 24px;
    gap: 18px;
  }
  .lp3-device--phone .lp3-device__screen   { width: 72px; }
  .lp3-device--tablet .lp3-device__screen  { width: 104px; }
  .lp3-device--laptop .lp3-device__screen  { width: 180px; }
  .lp3-device--laptop .lp3-device__base    { width: 206px; }
  .lp3-device--desktop .lp3-device__screen { width: 210px; }
  .lp3-device__label { margin-top: 8px; font-size: 11px; }
}

@media (max-width: 400px) {
  .lp3-device--laptop .lp3-device__screen  { width: 150px; }
  .lp3-device--laptop .lp3-device__base    { width: 172px; }
  .lp3-device--desktop .lp3-device__screen { width: 176px; }
}

/* ============================================================
   CLASS CODES (teacher only) — visual echo of the actual teacher
   dashboard (.tc-classroom tile) + the printable PIN sheet
   (.pins-card). Not a stylized "projector" anymore — the goal is
   for teachers to see the real thing they'll be using.
============================================================ */
.lp3-classCodes__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 960px;
  margin: 28px auto 0;
  padding: 0 8px;
  font-family: var(--font-kid, "Baloo 2", system-ui, sans-serif);
}

/* ----- Classroom tile — mirrors .tc-classroom from teacher.css ----- */
.lp3-classTile {
  background: rgba(139, 92, 255, 0.05);
  border: 1.5px solid rgba(139, 92, 255, 0.20);
  border-radius: var(--r-md, 18px);
  padding: 22px 22px 20px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.lp3-classTile__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.lp3-classTile__icon {
  font-size: 20px;
  color: var(--accent-2, #8b5cff);
}
.lp3-classTile__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, rgba(11, 18, 32, 0.92));
}

.lp3-classTile__codeLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lp3-classTile__code {
  font-size: clamp(40px, 7vw, 60px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-2, #8b5cff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.1;
  margin: 0 0 8px;
}
.lp3-classTile__url {
  font-size: 13px;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
  font-family: ui-monospace, SFMono-Regular, monospace;
  margin-bottom: 16px;
  word-break: break-all;
}
.lp3-classTile__meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
  border-top: 1px solid rgba(139, 92, 255, 0.14);
  padding-top: 12px;
}
.lp3-classTile__meta i {
  margin-right: 4px;
  color: var(--accent-2, #8b5cff);
}

/* ----- Plus separator ----- */
.lp3-classCodes__plus {
  font-size: 44px;
  font-weight: 800;
  color: var(--accent-2, #8b5cff);
  opacity: 0.55;
  text-align: center;
  line-height: 1;
  user-select: none;
}

/* ----- PIN slips — mirror .pins-card from teacher-pins.css ----- */
.lp3-pinSlips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
  justify-items: stretch;
  align-items: flex-start;
}
.lp3-pinSlip {
  position: relative;
  background: #fff;
  border: 2px dashed #b0b0b0;
  border-radius: 12px;
  padding: 14px 16px 16px;
  text-align: center;
  min-width: 0;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.08);
}
/* Scissors mark — same glyph + positioning as .pins-card */
.lp3-pinSlip::before {
  content: "\2702";
  position: absolute;
  top: -12px;
  left: 14px;
  font-size: 16px;
  color: #999;
  background: #fff;
  padding: 0 4px;
  line-height: 1;
}

.lp3-pinSlip__name {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.lp3-pinSlip__field {
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.lp3-pinSlip__field strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 2px;
  color: var(--accent-2, #8b5cff);
  font-weight: 800;
}

.lp3-pinSlips__caption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
  margin-top: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ----- Dark mode ----- */
[data-theme="dark"] .lp3-classTile {
  background: rgba(139, 92, 255, 0.08);
  border-color: rgba(139, 92, 255, 0.28);
}
[data-theme="dark"] .lp3-classTile__icon,
[data-theme="dark"] .lp3-classTile__code,
[data-theme="dark"] .lp3-classTile__meta i { color: var(--accent-2, #9b75ff); }
[data-theme="dark"] .lp3-classTile__meta { border-top-color: rgba(139, 92, 255, 0.22); }

[data-theme="dark"] .lp3-pinSlip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.30);
}
[data-theme="dark"] .lp3-pinSlip::before {
  background: #12141c;
  color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .lp3-pinSlip__name,
[data-theme="dark"] .lp3-pinSlip__field { color: var(--ink, rgba(232, 236, 242, 0.92)); }
[data-theme="dark"] .lp3-pinSlip__field strong { color: var(--accent-2, #9b75ff); }
[data-theme="dark"] .lp3-classCodes__plus { opacity: 0.75; }

/* Stack vertically on narrow screens */
@media (max-width: 720px) {
  .lp3-classCodes__visual {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lp3-classCodes__plus { font-size: 32px; }
}

/* ============================================================
   GOLDROT EXPLAINER — small gold-tinted card that sits right under
   the shop section. Disarms the "is this pay-to-win?" question by
   making it explicit: GoldRot is in-app motivation only, nothing
   is ever sold for real money.
============================================================ */
.lp3-goldrot .lp3-section__head {
  margin-bottom: 16px;
}

.lp3-goldrot__card {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 24px 22px;
  background: rgba(245, 184, 0, 0.08);
  border: 1.5px solid rgba(245, 184, 0, 0.28);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .lp3-goldrot__card {
  background: rgba(245, 184, 0, 0.10);
  border-color: rgba(245, 184, 0, 0.38);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

/* Big gold coin on the left — radial gradient + glow to sell the
   "shiny currency" feel. Uses fa-coin from the kit. */
.lp3-goldrot__coin {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5b800;
  background: radial-gradient(circle at 30% 22%, #ffe788, #f5b800 58%, #b77f00);
  color: #6a3f00;
  font-size: 28px;
  box-shadow:
    0 6px 16px rgba(245, 184, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  animation: lp3-coinSpin 6s ease-in-out infinite;
}

@keyframes lp3-coinSpin {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.lp3-goldrot__body { flex: 1; min-width: 0; }

.lp3-goldrot__lead {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, rgba(11, 18, 32, 0.92));
}

.lp3-goldrot__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, rgba(11, 18, 32, 0.92));
  opacity: 0.82;
}

/* Stack coin + text on narrow screens */
@media (max-width: 520px) {
  .lp3-goldrot__card {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px 24px;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp3-goldrot__coin { animation: none; }
}

/* ============================================================
   INLINE DEMO COMPLETION — overlay on the game card after the
   last round. Replaces the old #tryCompleteModal so completion
   doesn't hijack the page. Forward link pushes the reader to the
   next demo or the games showcase instead of pitching a trial.
============================================================ */
.lp3-gameComplete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 32, 0.88);
  background: linear-gradient(180deg, rgba(20, 24, 44, 0.92), rgba(12, 16, 32, 0.94));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: inherit;
  z-index: 10;
  animation: lp3-gameCompleteIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 20px;
}

.lp3-gameComplete__inner {
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.lp3-gameComplete__emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 10px;
}

.lp3-gameComplete__title {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.lp3-gameComplete__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 22px;
}

.lp3-gameComplete__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lp3-gameComplete__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-width: 220px;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.lp3-gameComplete__next:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
}

.lp3-gameComplete__next i {
  font-size: 13px;
  animation: lp3-gameCompleteBob 1.4s ease-in-out infinite;
}

.lp3-gameComplete__again {
  padding: 8px 18px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: none;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.lp3-gameComplete__again:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.8);
}

@keyframes lp3-gameCompleteIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lp3-gameCompleteBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp3-gameComplete { animation: none; }
  .lp3-gameComplete__next i { animation: none; }
}

/* ============================================================
   CLOSING CTA BAND — sits below socials on both / and /teachers.
   Final conversion chance for anyone who read the whole page.
============================================================ */
.lp3-ctaBand {
  text-align: center;
  padding: 36px 20px 20px;
}

.lp3-ctaBand__title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.lp3-ctaBand__sub {
  margin: 0 auto 20px;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.75;
}

.lp3-ctaBand__cta {
  min-width: 240px;
}

/* ============================================================
   SIGN-IN LINK — small "Already a member? Sign in" link placed
   under every primary CTA (hero, mid-page band, pricing card,
   footer band). Gives returning paying users an obvious off-ramp
   from the new-user funnel without diluting the primary CTA.
============================================================ */
.lp3-signInLink {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--app-muted, rgba(11, 18, 32, 0.66));
}

/* ============================================================
   CTA DISCLAIMER — click-wrap terms acceptance placed directly
   under each trial CTA. Legally documents that clicking the CTA
   constitutes agreement to Terms + Privacy Policy. Required
   because the auth flow now routes new signups to Stripe before
   the formal /auth/accept-terms page.
============================================================ */
.lp3-ctaDisclaimer {
  margin: 10px auto 0;
  max-width: 420px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--app-muted, rgba(11, 18, 32, 0.6));
}

.lp3-ctaDisclaimer a {
  color: var(--ink, rgba(11, 18, 32, 0.92));
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.lp3-ctaDisclaimer a:hover {
  color: var(--accent-2, #8b5cff);
}

.lp3-signInLink a {
  color: var(--ink, rgba(11, 18, 32, 0.92));
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 120ms ease;
}

.lp3-signInLink a:hover {
  color: var(--accent-2, #8b5cff);
}

@media (max-width: 560px) {
  .lp3-ctaBand { padding: 24px 16px 12px; }
  .lp3-ctaBand__title { font-size: 22px; }
}


/* ============================================================
   VALUE MANIFEST — "Everything in your membership/classroom"
   Drops between Our Promise and the pricing card. One card,
   3-column grid of concrete value items with peeking avatars
   at the corners (same lp3-priceDeco treatment, 4 positions).
   Used by both lp3-manifest.hbs (parent) and
   lp3-manifest-teacher.hbs (teacher). Teacher variant gets a
   subtle chalkboard-green accent via .lp3-manifest--teacher.
============================================================ */

.lp3-manifest__card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface, #fff);
  border: 2px solid #111;
  border-radius: 22px;
  padding: 32px 28px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .lp3-manifest__card {
  background: var(--surface, #161619);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.lp3-manifest--teacher .lp3-manifest__card {
  border-color: #16a34a;
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.14);
}

[data-theme="dark"] .lp3-manifest--teacher .lp3-manifest__card {
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.25);
}

/* Peekable avatars — four corners, each rotated slightly and bobbing.
   Matches lp3-priceDeco but with four positions instead of two. */
.lp3-manifest__peeker {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface, #fff);
  border: 3px solid var(--surface, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 2;
}

[data-theme="dark"] .lp3-manifest__peeker {
  background: var(--surface, #161619);
  border-color: var(--surface, #161619);
}

.lp3-manifest__peeker--tl {
  top: -26px;
  left: -20px;
  transform: rotate(-10deg);
  animation: lp3-manifestFloatA 5.6s ease-in-out infinite;
}

.lp3-manifest__peeker--tr {
  top: -24px;
  right: -20px;
  transform: rotate(8deg);
  animation: lp3-manifestFloatB 5.6s ease-in-out infinite 1.2s;
}

.lp3-manifest__peeker--bl {
  bottom: -22px;
  left: -18px;
  transform: rotate(-6deg);
  animation: lp3-manifestFloatC 5.6s ease-in-out infinite 2.4s;
}

.lp3-manifest__peeker--br {
  bottom: -26px;
  right: -22px;
  transform: rotate(12deg);
  animation: lp3-manifestFloatD 5.6s ease-in-out infinite 3.6s;
}

@keyframes lp3-manifestFloatA {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-5px); }
}
@keyframes lp3-manifestFloatB {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-5px); }
}
@keyframes lp3-manifestFloatC {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-4px); }
}
@keyframes lp3-manifestFloatD {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-4px); }
}

/* Hide the bottom peekers on small screens — card gets tight and they
   crowd the footer line. Top two stay for the "stickered" hero feel. */
@media (max-width: 640px) {
  .lp3-manifest__peeker--bl,
  .lp3-manifest__peeker--br { display: none; }
  .lp3-manifest__peeker { width: 52px; height: 52px; }
}

/* Grid of items — 3 cols desktop, 2 cols tablet, 1 col phone. */
.lp3-manifest__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  position: relative;
  z-index: 1;
}

@media (max-width: 880px) {
  .lp3-manifest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .lp3-manifest__grid { grid-template-columns: 1fr; gap: 14px; }
}

.lp3-manifest__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon num"
    "icon sub";
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}

.lp3-manifest__icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent, #8b5cff) 14%, transparent);
  color: var(--accent, #8b5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  /* rgba fallback for Chrome 89 color-mix */
  background: rgba(139, 92, 255, 0.14);
}

.lp3-manifest--teacher .lp3-manifest__icon {
  background: color-mix(in oklab, #16a34a 16%, transparent);
  background: rgba(22, 163, 74, 0.16);
  color: #16a34a;
}

[data-theme="dark"] .lp3-manifest--teacher .lp3-manifest__icon {
  background: rgba(74, 222, 128, 0.22);
  color: #4ade80;
}

.lp3-manifest__num {
  grid-area: num;
  font-weight: 900;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--text, #111);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .lp3-manifest__num {
  color: var(--text, #f5f5f7);
}

.lp3-manifest__sub {
  grid-area: sub;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #5a5a66);
  margin-top: 2px;
}

[data-theme="dark"] .lp3-manifest__sub {
  color: var(--muted, #a0a0aa);
}

/* Footer "growing" line — seedling icon + copy. Sits below the grid
   with a hairline divider and breathes the "+ more each month" beat. */
.lp3-manifest__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted, #5a5a66);
  text-align: center;
}

[data-theme="dark"] .lp3-manifest__footer {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: var(--muted, #a0a0aa);
}

.lp3-manifest__footer i {
  color: #16a34a;
  font-size: 16px;
}

/* ============================================================
   BETA PILL — inline badge beside manifest items that are WIP.
   Matches the orange pill already in use on /teacher/classroom
   ("Assignment <Beta>"). Used on the teacher manifest for
   exercises + assignments + progress tracking.
============================================================ */
.lp3-beta {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #f97316;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 999px;
  line-height: 1.4;
  vertical-align: middle;
}

[data-theme="dark"] .lp3-beta {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.14);
  border-color: rgba(251, 146, 60, 0.32);
}