/* Problem */
.problem { background: var(--white); color: var(--ink); text-align: center; }
.hl-light { color: var(--lav-300); }
.sub { max-width: 680px; margin: 18px auto 0; font-size: 19px; color: var(--muted); }
.research .sub, .hero .sub { color: rgba(255, 255, 255, .85); }
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 48px 0; }
.moment { background: var(--lav-50); border-radius: var(--radius); padding: 28px 20px; border: 1px solid var(--lav-100); }
.moment span { font-size: 42px; display: block; }
.moment b { display: block; font-size: 20px; margin-top: 8px; }
.moment p { margin: 4px 0 0; color: var(--violet); font-weight: 500; }
@media (max-width: 700px) {
  .moments { grid-template-columns: 1fr; gap: 10px; margin: 32px 0; }
  .moment { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; text-align: start; padding: 14px 18px; }
  .moment span { grid-row: span 2; font-size: 34px; }
  .moment b { margin-top: 0; font-size: 18px; }
  .moment p { margin: 0; }
}
.stat {
  display: flex; align-items: center; gap: 24px; text-align: start; max-width: 820px; margin: 0 auto;
  background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 26px 30px;
}
.stat-num { font-size: 64px; font-weight: 900; line-height: 1; flex-shrink: 0; color: var(--violet); }
.stat p { margin: 0; font-size: 17px; }
.stat a { color: var(--violet); font-weight: 700; }
@media (max-width: 600px) { .stat { flex-direction: column; text-align: center; } }

/* Problem story with the angry owl */
.story { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; text-align: start; margin-bottom: 8px; }
.story h2 { font-size: clamp(28px, 3.6vw, 44px); }
.story-text { font-size: 19px; color: var(--muted); margin: 16px 0 0; max-width: 640px; }
.story-text b { color: var(--ink); }
.story-punch {
  display: inline-block; margin: 22px 0 0; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 18px;
  background: var(--lav-100); color: var(--violet-700); box-shadow: 0 0 24px rgba(139, 92, 246, .3);
}
.story-art { position: relative; justify-self: center; }
.angry-owl { width: min(280px, 70vw); display: block; filter: drop-shadow(0 0 26px rgba(139, 92, 246, .35)); animation: owl-fume 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes owl-fume { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-3deg); } 80% { transform: rotate(3deg); } 85% { transform: rotate(-2deg); } 90% { transform: rotate(1deg); } }
.story-art { text-align: center; }
.timer-badge {
  display: inline-block; margin-top: 14px; transform: rotate(-2deg); background: var(--white); color: #b91c1c; font-weight: 700; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; border: 2px solid #fecaca; box-shadow: 0 10px 24px -10px rgba(185, 28, 28, .45);
}
@media (max-width: 800px) {
  .story { grid-template-columns: 1fr; text-align: center; }
  .story-text { margin-inline: auto; }
  .story-art { grid-row: 1; }
  .angry-owl { width: 200px; }
}