<style>
/* scoped container */
.practice-section {
  font-family: 'Inter', Arial, sans-serif;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

/* full-width container */
.practice-section .container {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 100%;
  padding: 24px;
}

/* grid */
.practice-section .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .practice-section .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .practice-section .grid { grid-template-columns: 1fr 1fr 1fr; } }

/* card base */
.practice-section .card {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s ease;
  cursor: pointer;
  display: block;           /* ensures transform works reliably */
  pointer-events: auto;
  transform: translateZ(0); /* promote to its own layer */
  will-change: transform, box-shadow;
}

/* hover & focus — attach to anchor and card for robustness */
.practice-section a:hover .card,
.practice-section .card:hover,
.practice-section a:focus .card,
.practice-section a:focus-visible .card,
.practice-section .card.is-hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 2;
}

/* small accent on inner text */
.practice-section .card p {
  font-size: 2.125rem;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

/* accessible focus outline for keyboard users */
.practice-section a:focus,
.practice-section a:focus-visible {
  outline: none;
}
.practice-section a:focus .card,
.practice-section a:focus-visible .card {
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12); /* subtle focus ring */
}

/* safe anchor styling */
.practice-section a {
  text-decoration: none;
  color: inherit;
  display: block;
}
</style>

<!-- small JS to simulate hover on touch devices -->
<script>
(function(){
  if(('ontouchstart' in window) || navigator.maxTouchPoints > 0){
    document.querySelectorAll('.practice-section .card').forEach(card => {
      // add class on touchstart to mimic :hover
      card.addEventListener('touchstart', function(e){
        // remove class from other cards first (optional)
        document.querySelectorAll('.practice-section .card.is-hover').forEach(c=>c.classList.remove('is-hover'));
        this.classList.add('is-hover');
      }, {passive:true});

      // remove hover class when touching elsewhere
      document.addEventListener('touchstart', function(ev){
