/* Letterpret keeps the look of the app: cream paper with dots, rainbow letters, chunky rounded shapes. */
body {
  --lp-purple: #8C6CF0;
  --lp-ink: #3B2F63;
  --lp-cream: #FFF6E5;
  background: var(--lp-cream);
  background-image: radial-gradient(rgba(140,108,240,.09) 2px, transparent 2px);
  background-size: 28px 28px;
  color: var(--lp-ink);
}

.lp-hero { padding-block: 40px 96px; }
.lp-hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-icon { width: 104px; height: 104px; border-radius: 26px; box-shadow: 0 8px 0 rgba(59,47,99,.14); margin-bottom: 26px; }
.lp-title { font-size: clamp(56px, 8vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
.lp-title span { display: inline-block; }
.lp-title span:nth-child(odd) { transform: rotate(-4deg); }
.lp-title span:nth-child(even) { transform: rotate(4deg) translateY(3px); }
.lp-lead { font-size: clamp(20px, 2vw, 26px); font-weight: 600; margin: 0 0 26px; max-width: 26ch; }
.lp-badge { display: inline-block; margin: 0; background: #6E4FD6; color: #fff; font-weight: 700; padding: 14px 24px; border-radius: 999px; box-shadow: 0 7px 0 rgba(59,47,99,.18); }
.lp-shot { border-radius: 28px; box-shadow: 0 10px 0 rgba(59,47,99,.10), 0 30px 60px rgba(59,47,99,.16); transform: rotate(1.5deg); }

.lp-section h2 { color: var(--lp-ink); }
.lp-section .intro { color: #5E5585; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.level { background: #fff; border-radius: 28px; padding: 16px 16px 26px; box-shadow: 0 8px 0 rgba(59,47,99,.08); }
.level img { border-radius: 18px; margin-bottom: 18px; }
.level h3 { margin: 0 10px 6px; font-size: 24px; }
.level p { margin: 0 10px; color: #5E5585; font-size: 17px; }
.level:nth-child(1) h3 { color: #B85A08; }
.level:nth-child(2) h3 { color: #1F8A52; }
.level:nth-child(3) h3 { color: #6E4FD6; }

.lp-soft { background: rgba(255,255,255,.7); }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
.lp-two h2 { font-size: clamp(28px, 3vw, 40px); }
.lp-list { list-style: none; padding: 0; margin: 0 0 24px; }
.lp-list li { position: relative; padding: 12px 0 12px 40px; font-size: 18px; border-top: 2px dashed #E6DDF3; }
.lp-list li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: var(--lp-purple); box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--lp-purple); }
.lp-link { color: #6E4FD6; font-weight: 700; }
.lp-maker { padding-block: 48px; text-align: center; font-size: 17px; color: #5E5585; }
.lp-maker a { color: var(--coral-ink); font-weight: 700; }

@media (max-width: 900px) {
  .lp-hero-grid, .lp-two { grid-template-columns: 1fr; }
  .levels { grid-template-columns: 1fr; max-width: 520px; }
}