/* RelationshipsIQ — Use Cases memory cards
   The six "More objectives" cards behave like a restrained Folio memory game. */

body.usecases-v2 .usecase-more.memory-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  perspective:1600px;
}

body.usecases-v2 .memory-instruction{
  margin:-2.25rem 0 2rem!important;
  max-width:62ch!important;
  color:var(--muted)!important;
  font-family:var(--font-data)!important;
  font-size:.68rem!important;
  line-height:1.55!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

body.usecases-v2 .usecase-more .usecase-mini.memory-card{
  position:relative!important;
  min-height:250px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--ink)!important;
  cursor:pointer!important;
  overflow:visible!important;
  outline:none!important;
  transform:none!important;
}

body.usecases-v2 .memory-card__inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.16,1,.3,1);
}

body.usecases-v2 .memory-card.is-flipped .memory-card__inner{
  transform:rotateY(180deg);
}

body.usecases-v2 .memory-card__face{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  padding:22px!important;
  border:1px solid var(--rule)!important;
  border-radius:var(--radius)!important;
  box-shadow:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  overflow:hidden!important;
}

body.usecases-v2 .memory-card__front{
  background:var(--surface)!important;
  color:var(--ink)!important;
}

body.usecases-v2 .memory-card__front::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:18px;
  width:42px;
  height:42px;
  border:1px solid var(--rings);
  border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 7px,var(--spokes) 8px 8.5px,transparent 9px 14px);
  opacity:.72;
  pointer-events:none;
}

body.usecases-v2 .memory-card__back{
  transform:rotateY(180deg);
  background:var(--hot)!important;
  color:var(--surface)!important;
  border-color:rgba(248,246,238,.22)!important;
}

body.usecases-v2 .memory-card__topline,
body.usecases-v2 .memory-card__cue{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-data)!important;
  font-size:.61rem!important;
  line-height:1!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}

body.usecases-v2 .memory-card__front .memory-card__topline,
body.usecases-v2 .memory-card__front .memory-card__cue{
  color:var(--cool)!important;
}

body.usecases-v2 .memory-card__back .memory-card__topline,
body.usecases-v2 .memory-card__back .memory-card__cue{
  color:rgba(248,246,238,.66)!important;
}

body.usecases-v2 .memory-card__index{
  font-variant-numeric:tabular-nums;
}

body.usecases-v2 .memory-card__front-main{
  position:relative;
  z-index:2;
  display:grid;
  gap:18px;
  align-content:center;
  min-height:132px;
}

body.usecases-v2 .memory-card__glyph{
  font-family:var(--font-data)!important;
  font-size:1.45rem!important;
  line-height:1!important;
  color:var(--hot)!important;
}

body.usecases-v2 .memory-card__front h3,
body.usecases-v2 .memory-card__back h3{
  margin:0!important;
  font-family:var(--font-display)!important;
  font-weight:400!important;
  letter-spacing:-.03em!important;
}

body.usecases-v2 .memory-card__front h3{
  color:var(--ink)!important;
  font-size:1.55rem!important;
  line-height:1.08!important;
}

body.usecases-v2 .memory-card__back-main{
  position:relative;
  z-index:2;
  display:grid;
  gap:16px;
  align-content:center;
  min-height:142px;
}

body.usecases-v2 .memory-card__back h3{
  color:var(--surface)!important;
  font-size:1.22rem!important;
  line-height:1.12!important;
}

body.usecases-v2 .memory-card__back p{
  margin:0!important;
  max-width:none!important;
  color:rgba(248,246,238,.80)!important;
  font-family:var(--font-ui)!important;
  font-size:.84rem!important;
  line-height:1.62!important;
}

body.usecases-v2 .memory-card:focus-visible .memory-card__face{
  outline:1px solid var(--hot)!important;
  outline-offset:4px!important;
}

@media(hover:hover) and (pointer:fine){
  body.usecases-v2 .memory-card:hover .memory-card__front{
    border-color:rgba(31,54,77,.34)!important;
  }
  body.usecases-v2 .memory-card:hover .memory-card__cue{
    color:var(--hot)!important;
  }
  body.usecases-v2 .memory-card.is-flipped:hover .memory-card__cue{
    color:var(--surface)!important;
  }
}

@media(max-width:900px){
  body.usecases-v2 .usecase-more.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.usecases-v2 .memory-instruction{margin:-1.5rem 0 1.5rem!important}
}

@media(max-width:620px){
  body.usecases-v2 .usecase-more.memory-grid{grid-template-columns:1fr!important}
  body.usecases-v2 .usecase-more .usecase-mini.memory-card{min-height:226px!important}
}

@media(prefers-reduced-motion:reduce){
  body.usecases-v2 .memory-card__inner{transition:none!important}
}