/* Approved room + ink interaction. Neither card is dimmed on hover. */
#practice .practice-grid{transition:grid-template-columns 1s cubic-bezier(.4,0,.2,1);isolation:isolate}
#practice .practice-grid[data-card-focus=build]{grid-template-columns:1.95fr 1fr}
#practice .practice-grid[data-card-focus=share]{grid-template-columns:1.25fr 1.4fr}
/* Scroll motion owns transform/opacity; hover only transitions the card colors. */
#practice .practice-card{transition:background-color .55s,border-color .55s!important}
#practice .practice-card h3{font-size:clamp(27px,2.4vw,34px)}
#practice .practice-card h3,#practice .card-description,#practice .card-top .eyebrow{transition:color .5s}
#practice .practice-card.is-focus-active{background:var(--neutral-950);border-color:var(--neutral-950)}
#practice .practice-card.is-focus-active h3{color:var(--neutral-50)}
#practice .practice-card.is-focus-active .card-description{color:var(--neutral-200)}
#practice .practice-card.is-focus-active .card-top .eyebrow{color:var(--neutral-400)}
#practice .practice-card:focus-visible{outline:2px solid var(--vermilion-700);outline-offset:5px}
@media(max-width:760px){#practice .practice-grid[data-card-focus]{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#practice .practice-grid,#practice .practice-card,#practice .practice-card h3,#practice .card-description,#practice .card-top .eyebrow{transition:none!important}}
