/* =========================================================
   How we work: five numbered rule cards (Kong-style)
   Uses .vx-head / .vx-pill from problem.css for the headline.
   ========================================================= */
.rl-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.rl-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; border-radius: 24px;
  background: linear-gradient(180deg, #34302c, var(--charcoal)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28); transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); }
.rl-card:nth-child(4) { grid-column: 2 / span 2; }
.rl-card:nth-child(5) { grid-column: 4 / span 2; }
.rl-card:hover { transform: translateY(-6px); border-color: rgba(194, 156, 106, .55); box-shadow: 0 26px 50px rgba(0, 0, 0, .35); }

.rl-num { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--limestone); color: #1a1816;
  font: 600 26px/1 var(--display); box-shadow: 0 0 34px rgba(194, 156, 106, .35); transform: rotate(-3deg); }
.rl-card h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 600; letter-spacing: -.01em; }
.rl-card > p:not(.rl-no) { color: var(--stone); font-size: 16px; line-height: 1.55; }
.rl-no { margin-top: auto; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: rgba(217, 87, 75, .12); border: 1px solid rgba(217, 87, 75, .35); color: #F4C2BA; font-size: 14.5px; font-weight: 500; }
.rl-no svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #D9574B; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

/* pop in one after another when the section fades in */
.js .reveal-sec .rl-card { opacity: 0; transform: translateY(26px) scale(.97); }
.js .reveal-sec.in .rl-card { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); transition-delay: calc(.2s + var(--i) * .12s); }
.js .reveal-sec.in .rl-card:hover { transform: translateY(-6px); transition-delay: 0s; }
.js .reveal-sec:not(.pre):not(.in) .rl-card { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .rl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-card, .rl-card:nth-child(4), .rl-card:nth-child(5) { grid-column: auto; }
  .rl-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .rl-grid { grid-template-columns: 1fr; }
  .rl-card:nth-child(5) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-sec .rl-card { opacity: 1; transform: none; }
}